/*
 * openvision — ajustes ao tema Metronic.
 *
 * Propositadamente curto: o Metronic já resolve praticamente tudo. Aqui só
 * entram (a) a identidade da marca e (b) o que o produto tem de específico —
 * o código de pareamento e o montador de playlists.
 */

/* ------------------------------------------------------------------ */
/* Marca                                                               */
/* ------------------------------------------------------------------ */

.ov-marca {
    letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------ */
/* Código de pareamento                                                 */
/* ------------------------------------------------------------------ */

/*
 * Tabular-nums e o espaçamento largo servem um caso de uso concreto: o código
 * é lido de longe num ecrã e transcrito à mão para o painel. Caracteres de
 * largura fixa e bem separados reduzem erros de leitura.
 */
.ov-codigo {
    font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.35em;
    text-transform: uppercase;
}

input.ov-codigo {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    padding-left: 0.35em; /* compensa o letter-spacing do último caractere */
}

/* ------------------------------------------------------------------ */
/* Montador de playlists                                                */
/* ------------------------------------------------------------------ */

.ov-item-playlist {
    cursor: grab;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.ov-item-playlist:active {
    cursor: grabbing;
}

/* Classes aplicadas pelo Sortable do draggable.bundle.js */
.ov-item-playlist.draggable-source--is-dragging {
    opacity: 0.35;
}

.ov-item-playlist.draggable-mirror {
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
    cursor: grabbing;
}

.ov-lista-vazia {
    border: 1px dashed var(--bs-gray-300);
    border-radius: 0.625rem;
}

/* Miniatura de mídia com proporção estável, para a grelha não saltar
   enquanto as imagens carregam. */
.ov-thumb {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--bs-gray-200);
    border-radius: 0.475rem;
}

.ov-thumb-mini {
    width: 72px;
    height: 41px;
    object-fit: cover;
    border-radius: 0.325rem;
    background-color: var(--bs-gray-200);
    flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* Estados                                                              */
/* ------------------------------------------------------------------ */

.ov-ponto {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.4rem;
}

.ov-ponto-online  { background-color: var(--bs-success); }
.ov-ponto-offline { background-color: var(--bs-danger); }
.ov-ponto-espera  { background-color: var(--bs-warning); }