/* ===== modal do dispositivo: cabeçalho e painel de configuração =====
   Carrega depois do `device.css`, e é daí que vem a precedência sobre as regras de lá. */

/* O cabeçalho é navy como a barra de navegação: a identidade do aparelho e os separadores
   ficam lá dentro, e por isso empilham em vez de partilharem uma linha. */
#deviceModal .modal-header {
    display: block;
    position: relative;
    padding: .75rem 1.125rem 0;
    border-bottom: 0;
    background: var(--brand-bar);
    color: var(--brand-on);
}

/* O fecho sai do fluxo para não ficar debaixo dos separadores, e mede um alvo de toque no
   telemóvel, onde o diálogo é o ecrã todo. */
#deviceModal .modal-header>.btn-close {
    position: absolute;
    top: .75rem;
    right: 1.125rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    opacity: .85;
}

#deviceModal .modal-header>.btn-close:hover {
    opacity: 1;
}

/* Onde o diálogo é o ecrã todo -- tablet e telemóvel -- o fecho é um alvo de toque. */
@media (max-width: 991.98px) {
    #deviceModal .modal-header>.btn-close {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* O bloco da identidade recua do lado do fecho, que está por cima dele. */
#deviceModal .modal-device-identity {
    padding-right: 3rem;
}

#deviceModal .modal-title {
    font-size: 1rem;
    font-weight: 600;
}

/* A chapa da fotografia acompanha o navy em vez de trazer o cinzento do corpo. */
#deviceModal .modal-device-thumb {
    width: 34px;
    height: 34px;
    background: rgba(var(--brand-on-rgb), .12);
}

#deviceModal .modal-device-thumb img,
#deviceModal .modal-device-thumb i {
    max-width: 22px;
    max-height: 22px;
}

.modal-device-meta {
    font-size: var(--fs-label);
    color: rgba(var(--brand-on-rgb), .68);
}

#deviceModal .device-modal-tabs .nav-link {
    padding: .5rem 1rem;
    border: 0;
    border-bottom: 2.5px solid transparent;
    border-radius: 0;
    background: none;
    color: rgba(var(--brand-on-rgb), .68);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

#deviceModal .device-modal-tabs .nav-link:hover {
    color: var(--brand-on);
}

#deviceModal .device-modal-tabs .nav-link.active {
    border-bottom-color: var(--brand-on);
    background: none;
    color: var(--brand-on);
    font-weight: 600;
}

/* A conta das alterações por enviar, ao lado do nome do separador. */
.device-modal-tab-count {
    font-size: var(--fs-label);
    color: var(--bs-warning);
}

/* O painel ocupa a altura toda da coluna do conteúdo: quem rola é a lista de definições, e
   o rodapé fica colado ao fundo em vez de fugir com ela. */
.config-panel {
    min-height: 100%;
}

/* A secção aberta ocupa a altura do painel, para a barra de envio encostar ao fundo com o
   `mt-auto`. Aqui e não na marcação: um `d-flex` num `.tab-pane` acende as fechadas. */
.config-panel-content>.tab-pane.active {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* A coluna das secções tem largura fixa, e mede o mesmo em todas as secções. Num tablet já
   cabe ao lado das definições. */
@media (min-width: 768px) {
    .config-section-nav {
        flex: 0 0 248px;
        /* Sem isto o nome mais comprido alarga a coluna, e mais ainda a negrito, ao escolhê-lo. */
        min-width: 0;
        border-right: 1px solid var(--bs-border-color);
    }
}

/* No telemóvel a lista e a secção aberta não cabem juntas: uma toma o lugar da outra. */
@media (max-width: 767.98px) {
    [data-config-root][data-config-section-open] .config-section-nav,
    [data-config-root]:not([data-config-section-open]) .config-panel-content {
        display: none !important;
    }
}

.config-section-nav {
    padding: .5rem 0;
}

.config-section-nav .config-section-link {
    gap: .75rem;
    min-height: 44px;
    padding: 0 1rem;
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
    font-size: var(--fs-sm);
    cursor: pointer;
}

.config-section-nav .config-section-link:hover,
.config-section-nav .config-section-link:focus-visible {
    background: var(--bs-tertiary-bg);
}

.config-section-nav .config-section-link.selected {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}

/* Sobre o fundo da secção aberta, a pastilha do terciário desaparecia. */
.config-section-link.selected .count-chip {
    background: var(--bs-body-bg);
    color: var(--bs-primary-text-emphasis);
}

.config-section-chevron {
    color: var(--bs-tertiary-color);
    font-size: var(--fs-label);
}

.config-section-back {
    gap: .5rem;
    min-height: 44px;
    padding: 0 1rem;
    color: var(--bs-primary-text-emphasis);
    font-size: var(--fs-sm);
}

/* O controlo de uma definição numa linha cede, mas não abaixo de quatro dígitos com a unidade. */
.config-line-control {
    min-width: 7rem;
}

/* A definição alterada tinge-se, para se encontrar na lista sem se ler linha a linha. */
[data-config-edited].config-setting {
    background: var(--bs-warning-bg-subtle);
}

/* O enchimento e o recuo ficam aqui e não em utilitários, que lhes ganhavam: o recuo de um
   pixel põe a borda do rodapé por cima da da última definição. */
/* O rodapé acompanha a leitura até ao fim da lista, para os botões ficarem perto do que se alterou. */
.config-section-footer {
    padding: .75rem 1rem;
    margin: -1px 0 0;
    z-index: 2;
}

/* Os utilizadores da balança: quem está em linha destaca-se pela cor da marca. */
.scale-user-online {
    border-color: var(--brand) !important;
    background: var(--brand-subtle);
}

.scale-user-form {
    border-style: dashed !important;
    border-color: var(--brand) !important;
}

/* Os limites de deteção em cruz à volta do radar: frente em cima, trás em baixo. */
.radar-boundary {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: ". front ." "left radar right" ". back .";
    gap: .5rem 1rem;
    align-items: center;
    justify-items: center;
}

.radar-boundary-front { grid-area: front; }
.radar-boundary-back { grid-area: back; }
.radar-boundary-left { grid-area: left; justify-self: end; }
.radar-boundary-right { grid-area: right; justify-self: start; }

.radar-boundary-radar {
    grid-area: radar;
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px dashed var(--brand);
    color: var(--brand);
}

.radar-boundary-field {
    width: 7.5rem;
}

/* ===== os campos de um alarme =====
   Os campos de um alarme aberto quebram linha quando precisam; o Bootstrap não tem
   utilitários de `flex-basis`. */

.alarm-field-time {
    flex: 0 0 7rem;
}

.alarm-field-grow {
    flex: 1 1 12rem;
    min-width: 0;
}