/* =================================================================
   TECNOLOGIA › DOMÍNIOS (18/10/2026)
   =================================================================
   Scoped to `.page-dominios` (except the modal, which lives outside it).
   `dm-` prefix on every class. Colours come from the theme variables, which
   follow the active BU; the red of the dot and of the deadline is fixed on
   purpose — a warning must mean the same thing in every theme.
   ================================================================= */

.page-dominios,
#dmModalOverlay {
    --dm-red: #c0392b;
    --dm-link: #1a5fb4;
}

/* ─── bar: views on the left, search + export on the right (pattern 1.6b) ── */

.page-dominios .dm-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 0 14px;
}
.page-dominios .dm-barra .dm-visoes { margin: 0; }
.page-dominios .dm-barra-dir { display: flex; align-items: center; gap: 10px; }

/* ─── table ─────────────────────────────────────────────────────────── */

.page-dominios .dm-tabela-wrap {
    overflow-x: auto;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border);
    border-radius: 6px;
}

.page-dominios .dm-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.page-dominios .dm-tabela th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    text-align: left;
    white-space: nowrap;
    background: var(--card-bg, #fff);
    border-bottom: 1px solid var(--card-border);
}
/* The open th must not clip the panel and must sit above the rows
   (pattern 24.3, traps 1 and 2). */
.page-dominios .dm-tabela th.is-aberto { overflow: visible; z-index: 5; }

.page-dominios .dm-th-nome,
.page-dominios .dm-th-seta {
    border: 0;
    background: none;
    padding: 2px 3px;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    cursor: pointer;
}
.page-dominios .dm-th-seta { opacity: 0.45; letter-spacing: 0; }
.page-dominios .dm-th-seta.is-on { opacity: 1; color: var(--accent); }
.page-dominios th.is-filtrado .dm-th-nome { color: var(--accent); text-decoration: underline; }

.page-dominios .dm-tabela td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--card-border);
    vertical-align: middle;
    white-space: nowrap;
}
.page-dominios .dm-tabela tbody tr:last-child td { border-bottom: none; }
.page-dominios .dm-linha { cursor: pointer; }
.page-dominios .dm-linha:hover { background: var(--column-bg, #f7f8fa); }
.page-dominios .dm-num { text-align: right; }
.page-dominios th.dm-num { text-align: right; }

/* The red badge with the count (Construtor 13): the look is pend-badge-num
   (style.css); here it is only anchored. Absolute, so the row keeps the same
   size with or without it; what is missing goes in the title. */
.page-dominios .dm-col-nome { position: relative; padding-right: 34px; }
/* The domain opens the site in a new tab (Felipe, 18/10/2026): link blue,
   regular weight and the ↗ arrow, so it is clear the click leaves the
   intranet. Clicking elsewhere on the row still opens the modal. */
.page-dominios .dm-nome { font-weight: 400; color: var(--dm-link); text-decoration: none; }
.page-dominios .dm-nome:hover { text-decoration: underline; }
.page-dominios .dm-nome-seta { margin-left: 4px; font-size: 11px; }
.page-dominios .dm-pend {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    cursor: help;
}

/* Status pill (18/10/2026): green = must be online, grey = off on purpose.
   Clickable for who can edit; one click flips it. */
.page-dominios .dm-status {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    background: #e6f4ea;
    color: #1e6b3a;
}
.page-dominios .dm-status[data-dm-status="inativo"] { background: #eceae4; color: #6b6a63; }
.page-dominios button.dm-status { cursor: pointer; }
.page-dominios button.dm-status:hover { border-color: currentColor; }
.page-dominios button.dm-status:disabled { opacity: 0.5; cursor: wait; }

/* A deadline is lateness, not missing data: it paints the date (13.1). */
.page-dominios .dm-prazo { color: var(--dm-red); font-weight: 600; }
.page-dominios .dm-prazo[data-prazo="vencido"] { text-decoration: line-through; }

.page-dominios .dm-rodape {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.page-dominios .dm-link,
#dmModalOverlay .dm-link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
}

/* ─── column filter panel (pattern 24.3) ────────────────────────────── */

.page-dominios .dm-filtro {
    position: absolute;
    top: 100%;
    left: 0;
    width: 260px;
    margin-top: 2px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
/* The last columns open to the left, or the panel leaves the screen. */
.page-dominios .dm-filtro.dm-filtro-esq { left: auto; right: 0; }

.page-dominios .dm-filtro-busca {
    display: block;
    width: calc(100% - 16px);
    margin: 8px;
    padding: 6px 8px;
    font: inherit;
    font-size: 12.5px;
    border: 1px solid var(--card-border);
    border-radius: 5px;
    background: var(--card-bg, #fff);
    color: var(--text-primary);
}
.page-dominios .dm-filtro-lista { max-height: 260px; overflow-y: auto; padding: 0 4px 6px; }
.page-dominios .dm-filtro-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    font-size: 12.5px;
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
}
.page-dominios .dm-filtro-item:hover { background: var(--column-bg, #f7f8fa); }
.page-dominios .dm-filtro-valor { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-dominios .dm-filtro-n { color: var(--text-secondary); font-size: 11.5px; }
.page-dominios .dm-filtro-rodape {
    display: flex;
    justify-content: space-between;
    padding: 7px 10px;
    font-size: 11.5px;
    color: var(--text-secondary);
    border-top: 1px solid var(--card-border);
}

/* ─── charts ────────────────────────────────────────────────────────── */

.page-dominios .dm-grafico {
    padding: 18px 20px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border);
    border-radius: 6px;
}
.page-dominios .dm-grafico-titulo {
    margin-bottom: 14px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.page-dominios .dm-barra-linha {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr 32px;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    cursor: pointer;
}
.page-dominios .dm-barra-rotulo {
    font-size: 12.5px;
    color: var(--text-primary);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-dominios .dm-barra-trilho { height: 14px; background: var(--column-bg, #f3f4f6); border-radius: 3px; }
.page-dominios .dm-barra-valor { height: 100%; background: var(--accent); border-radius: 3px; }
.page-dominios .dm-barra-sem { background: var(--text-secondary); opacity: 0.5; }
.page-dominios .dm-barra-n { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.page-dominios .dm-barra-linha:hover .dm-barra-rotulo { color: var(--accent); }
.page-dominios .dm-vazio-grafico { font-size: 13px; color: var(--text-secondary); }

/* ─── empty states ──────────────────────────────────────────────────── */

.page-dominios .dm-vazio {
    padding: 44px 24px;
    text-align: center;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border);
    border-radius: 6px;
}
.page-dominios .dm-vazio-busca { margin-top: 12px; }
.page-dominios .dm-vazio-titulo {
    font-family: var(--font-title);
    font-size: 19px;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.page-dominios .dm-vazio p { margin: 0; font-size: 13.5px; color: var(--text-secondary); }

/* ─── modal ─────────────────────────────────────────────────────────── */

.dm-modal { max-width: 720px; }
.dm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
    gap: 12px;
}
.dm-campo-largo { grid-column: 1 / -1; }
.dm-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dm-campo > span { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.dm-campo input,
.dm-campo select {
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    min-width: 0;
}
.dm-campo input:focus,
.dm-campo select:focus { outline: none; border-color: var(--accent); }
.dm-campo small { font-size: 10.5px; line-height: 1.35; color: var(--text-secondary); }
.dm-valor { display: flex; gap: 6px; }
.dm-valor select { flex: 0 0 74px; }
.dm-valor input { flex: 1; }
/* The empty required field inside the modal: the dot calls, the field explains. */
.dm-campo.dm-falta > span { color: var(--dm-red); }
.dm-campo.dm-falta input,
.dm-campo.dm-falta select { border-color: var(--dm-red); box-shadow: 0 0 0 1px var(--dm-red); }
.dm-footer-dir { display: flex; align-items: center; gap: 10px; margin-left: auto; }