/*
 * Administrativo MonoSeller — folha própria, sem etapa de build.
 * Só o que o Bootstrap não entrega: identidade, telas de autenticação e o
 * cronograma de etapas do deploy.
 */

:root {
    --adm-brand: #1f6feb;
}

body {
    background-color: var(--bs-secondary-bg);
}

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

.adm-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: inherit;
    text-decoration: none;
}

.adm-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .5rem;
    background: var(--adm-brand);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

/* ------------------------------------------------------- Autenticação */

.adm-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.adm-auth-card {
    width: 100%;
    max-width: 25rem;
}

/* O QR do MFA precisa de fundo claro mesmo em tema escuro: leitor de QR não
   lê módulo claro sobre fundo escuro. */
.adm-qr {
    background: #fff;
    padding: .75rem;
    border-radius: .5rem;
    display: inline-block;
    line-height: 0;
}

.adm-secret {
    font-family: var(--bs-font-monospace);
    letter-spacing: .12em;
    word-break: break-all;
}

/* -------------------------------------------------------------- Layout */

.adm-sidebar {
    width: 15rem;
    flex: 0 0 15rem;
}

.adm-sidebar .nav-link {
    border-radius: .375rem;
    color: var(--bs-body-color);
}

.adm-sidebar .nav-link.active {
    background: var(--adm-brand);
    color: #fff;
}

.adm-main {
    min-width: 0;   /* deixa tabela larga rolar em vez de esticar o layout */
}

/* ------------------------------------------------- Etapas do deploy */

.adm-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.adm-step {
    display: flex;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.adm-step:last-child {
    border-bottom: 0;
}

.adm-step-dot {
    flex: 0 0 .75rem;
    width: .75rem;
    height: .75rem;
    margin-top: .35rem;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    border: 2px solid var(--bs-border-color);
}

.adm-step-dot.is-running {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.adm-step-dot.is-succeeded {
    background: var(--bs-success);
    border-color: var(--bs-success);
}

.adm-step-dot.is-failed {
    background: var(--bs-danger);
    border-color: var(--bs-danger);
}

.adm-step-dot.is-skipped {
    background: transparent;
    border-style: dashed;
}

.adm-output {
    font-family: var(--bs-font-monospace);
    font-size: .8125rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 18rem;
    overflow: auto;
    background: var(--bs-tertiary-bg);
    border-radius: .375rem;
    padding: .5rem .75rem;
    margin: .5rem 0 0;
}

/* Estado de saúde — bolinha ao lado do nome do servidor. */
.adm-health {
    display: inline-block;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    vertical-align: middle;
}

.adm-health-healthy  { background: var(--bs-success); }
.adm-health-warning  { background: var(--bs-warning); }
.adm-health-critical { background: var(--bs-danger); }
.adm-health-unknown  { background: var(--bs-secondary); }

/* ------------------------------------------- Grid de VPS (dashboard) */

/*
 * Desktop: 4 colunas × 5 linhas = as 20 VPS da capacidade inicial. O número
 * de colunas é do LAYOUT, não do domínio — cadastrar o servidor 21 apenas
 * abre a segunda página.
 */
.adm-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 1399.98px) {
    .adm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .adm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* No celular vira uma coluna — nenhuma informação é removida, só empilhada. */
@media (max-width: 575.98px) {
    .adm-grid { grid-template-columns: minmax(0, 1fr); }
}

.adm-card {
    display: block;
    padding: .875rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-left-width: 4px;
    border-radius: .5rem;
    background: var(--bs-body-bg);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}

.adm-card:hover,
.adm-card:focus-visible {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

.adm-card-healthy  { border-left-color: var(--bs-success); }
.adm-card-warning  { border-left-color: var(--bs-warning); }
.adm-card-critical { border-left-color: var(--bs-danger); }
.adm-card-unknown  { border-left-color: var(--bs-secondary); }

/* Inativa: cinza e apagada, sem sugerir que há algo a monitorar. */
.adm-card-inactive {
    border-left-color: var(--bs-border-color);
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.adm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .625rem;
}

.adm-card-title {
    font-weight: 600;
    font-size: .9375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adm-card-rows {
    margin: 0;
    font-size: .8125rem;
}

.adm-card-rows > div {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .125rem 0;
}

.adm-card-rows dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.adm-card-rows dd {
    margin: 0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adm-card-metrics {
    margin-top: .625rem;
    padding-top: .625rem;
    border-top: 1px solid var(--bs-border-color);
}

.adm-card-alert {
    margin: .5rem 0 0;
    padding: .25rem .5rem;
    border-radius: .25rem;
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    font-size: .75rem;
}

.adm-card-foot {
    margin: .625rem 0 0;
    font-size: .6875rem;
    color: var(--bs-secondary-color);
}

/* Bolinha do indicador. Acompanha sempre texto — cor sozinha não informa. */
.adm-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    margin-right: .25rem;
    vertical-align: middle;
}

.adm-dot-healthy  { background: var(--bs-success); }
.adm-dot-warning  { background: var(--bs-warning); }
.adm-dot-critical { background: var(--bs-danger); }
.adm-dot-unknown  { background: var(--bs-secondary); }
.adm-dot-inactive { background: transparent; border: 1px solid var(--bs-border-color); }