/* ══ Identidade do UserTag: a etiqueta de lavanderia ══════════════════════════
   O painel tem a cara do objeto que ele controla — a etiqueta costurada na peça —
   e não a de centro de operações que veio do TraceTag. Tema claro só: algodão no
   fundo, papel nas superfícies, tinta no texto e uma cor de ação só, a tinta de
   carimbo. Vermelho, âmbar e verde são do semáforo de conformidade e de mais nada.

   Toda folha do painel tira cor daqui (`--ut-*`). Cor escrita à mão numa folha de
   tela é a que fica para trás na próxima troca de marca. */
:root {
    --ut-algodao: #EEF0EB;
    --ut-algodao-2: #F6F7F3;
    --ut-papel: #FFFFFF;
    --ut-tinta: #191B22;
    --ut-tinta-rgb: 25, 27, 34;
    --ut-tinta-2: #5C616C;
    --ut-tinta-3: #8A8F98;
    --ut-costura: #D6D9D1;
    --ut-costura-2: #E7E9E3;

    /* A primária vem da seção Marca do appsettings (_EstiloDaMarca); o valor aqui é o recuo. */
    --ut-carimbo: var(--marca-primaria, #4330D0);
    --ut-carimbo-rgb: var(--marca-primaria-rgb, 67, 48, 208);
    --ut-carimbo-escuro: #3424B3;
    --ut-carimbo-claro: #ECEAFB;

    /* A etiqueta de pendurar: só o número dela usa o manila. */
    --ut-manila: #EFE3C2;
    --ut-manila-tinta: #7A6A3F;

    --ut-em-dia: #1D7F47;
    --ut-em-dia-claro: #E3F2E8;
    --ut-atencao: #A86A00;
    --ut-atencao-tinta: #6B4600;
    --ut-atencao-claro: #FBF0D9;
    --ut-atencao-borda: #EBD8AE;
    --ut-vencido: #C42B2B;
    --ut-vencido-claro: #FBE6E4;

    --ut-fonte: 'Archivo', system-ui, sans-serif;
    --ut-mono: 'Martian Mono', ui-monospace, monospace;
    --ut-raio: 6px;
    --ut-raio-folha: 10px;

    /* Bootstrap lido pelos tokens acima. */
    --bs-font-sans-serif: var(--ut-fonte);
    --bs-font-monospace: var(--ut-mono);
    --bs-body-font-family: var(--ut-fonte);
    --bs-body-bg: var(--ut-algodao);
    --bs-body-bg-rgb: 238, 240, 235;
    --bs-body-color: var(--ut-tinta);
    --bs-body-color-rgb: var(--ut-tinta-rgb);
    --bs-emphasis-color: var(--ut-tinta);
    --bs-secondary-color: var(--ut-tinta-2);
    --bs-tertiary-color: var(--ut-tinta-3);
    --bs-secondary-bg: var(--ut-costura-2);
    --bs-tertiary-bg: var(--ut-algodao-2);
    --bs-border-color: var(--ut-costura);
    --bs-border-color-translucent: var(--ut-costura);
    --bs-primary: #4330D0;
    --bs-primary-rgb: 67, 48, 208;
    --bs-danger: var(--ut-vencido);
    --bs-danger-rgb: 196, 43, 43;
    --bs-success: var(--ut-em-dia);
    --bs-success-rgb: 29, 127, 71;
    --bs-warning: var(--ut-atencao);
    --bs-warning-rgb: 168, 106, 0;
    --bs-border-radius: var(--ut-raio);
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: var(--ut-raio-folha);
    --bs-link-color: var(--ut-carimbo);
    --bs-link-color-rgb: var(--ut-carimbo-rgb);
    --bs-link-hover-color: var(--ut-carimbo-escuro);
    --bs-link-hover-color-rgb: 52, 36, 179;
    --bs-box-shadow-lg: 0 18px 50px rgba(var(--ut-tinta-rgb), .18);

    /* Nomes antigos, ainda lidos por telas e pelo angular.helpers. */
    --card-bg: var(--ut-papel);
    --sidebar-bg: var(--ut-tinta);
    --sidebar-text: var(--ut-tinta-2);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--ut-costura) transparent;
}

body {
    font-family: var(--ut-fonte);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--ut-carimbo); outline-offset: 2px; }

/* O número de qualquer coisa contável sai na fonte de dados, com algarismo tabular. */
.ut-mono { font-family: var(--ut-mono); font-variant-numeric: tabular-nums; }

/* ══ A etiqueta ═══════════════════════════════════════════════════════════════
   Todo número de etiqueta aparece como a etiqueta de pendurar em que ele é
   impresso: manila, canto chanfrado, o furo vazado de verdade (a máscara deixa
   ver o que está atrás, inclusive o hover da linha) e o dígito verificador num
   bloco de tinta — é ele que a leitura confere. Marcação:
   <span class="ut-etq"><span class="ut-etq-pfx">UT</span><span class="ut-etq-seq">0000001</span><span class="ut-etq-dv">2</span></span>
   Código livre, sem as três partes, vai inteiro no `ut-etq-seq`. */
.ut-etq {
    display: inline-flex;
    align-items: stretch;
    font-family: var(--ut-mono);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    background: var(--ut-manila);
    color: var(--ut-tinta);
    padding-left: 17px;
    border-radius: 0 4px 4px 0;
    clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 7px), 0 7px);
    -webkit-mask: radial-gradient(circle 2.6px at 10px 50%, transparent 97%, #000 100%);
    mask: radial-gradient(circle 2.6px at 10px 50%, transparent 97%, #000 100%);
    vertical-align: middle;
}
.ut-etq > span { padding: 6px 0; }
.ut-etq-pfx { color: var(--ut-manila-tinta); padding-right: 6px !important; }
.ut-etq-seq { font-weight: 600; letter-spacing: .02em; padding-right: 8px !important; }
.ut-etq-dv { background: var(--ut-tinta); color: var(--ut-manila); font-weight: 600; padding: 6px 7px !important; }

.ut-etq--grande {
    font-size: 26px;
    padding-left: 40px;
    border-radius: 0 8px 8px 0;
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 16px), 0 16px);
    -webkit-mask: radial-gradient(circle 6px at 22px 50%, transparent 97%, #000 100%);
    mask: radial-gradient(circle 6px at 22px 50%, transparent 97%, #000 100%);
}
.ut-etq--grande > span { padding: 16px 0; }
.ut-etq--grande .ut-etq-pfx { padding-right: 12px !important; }
.ut-etq--grande .ut-etq-seq { padding-right: 16px !important; }
.ut-etq--grande .ut-etq-dv { padding: 16px !important; }

/* ══ Vida útil em riscos ══════════════════════════════════════════════════════
   As lavagens como as marcas de uma etiqueta de cuidados: cada risco é uma fração
   da vida da peça. Âmbar a partir de 90% do limite (a régua dos alertas), vermelho
   no limite. A contagem por extenso vem ao lado — o risco não substitui o número. */
.ut-riscos { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 3px; gap: 2px; height: 16px; vertical-align: middle; }
.ut-riscos > i { background: var(--ut-costura); border-radius: 1px; }
.ut-riscos > i.on { background: var(--ut-tinta); }
.ut-riscos.is-atencao > i.on { background: var(--ut-atencao); }
.ut-riscos.is-limite > i.on { background: var(--ut-vencido); }

/* ══ Componentes base ═════════════════════════════════════════════════════════ */
.card {
    background-color: var(--ut-papel);
    border: 1px solid var(--ut-costura);
    border-radius: var(--ut-raio-folha);
    padding: 1.5rem;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ut-fonte); color: var(--ut-tinta); }

/* Botões */
.btn { font-weight: 600; border-radius: var(--ut-raio); }

.btn-primary {
    --bs-btn-bg: var(--ut-carimbo);
    --bs-btn-border-color: var(--ut-carimbo);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--ut-carimbo-escuro);
    --bs-btn-hover-border-color: var(--ut-carimbo-escuro);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ut-carimbo-escuro);
    --bs-btn-active-border-color: var(--ut-carimbo-escuro);
    --bs-btn-active-color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--ut-carimbo);
    --bs-btn-border-color: rgba(var(--ut-carimbo-rgb), .45);
    --bs-btn-hover-bg: var(--ut-carimbo-claro);
    --bs-btn-hover-border-color: var(--ut-carimbo);
    --bs-btn-hover-color: var(--ut-carimbo-escuro);
    --bs-btn-active-bg: var(--ut-carimbo-claro);
    --bs-btn-active-border-color: var(--ut-carimbo);
    --bs-btn-active-color: var(--ut-carimbo-escuro);
}

.btn-outline-secondary, .btn-light {
    --bs-btn-color: var(--ut-tinta);
    --bs-btn-bg: var(--ut-papel);
    --bs-btn-border-color: var(--ut-costura);
    --bs-btn-hover-bg: var(--ut-algodao-2);
    --bs-btn-hover-border-color: var(--ut-tinta-3);
    --bs-btn-hover-color: var(--ut-tinta);
    --bs-btn-active-bg: var(--ut-costura-2);
    --bs-btn-active-border-color: var(--ut-tinta-3);
    --bs-btn-active-color: var(--ut-tinta);
}

.btn-danger {
    --bs-btn-bg: var(--ut-vencido);
    --bs-btn-border-color: var(--ut-vencido);
    --bs-btn-hover-bg: #A82222;
    --bs-btn-hover-border-color: #A82222;
}

.btn-outline-danger {
    --bs-btn-color: var(--ut-vencido);
    --bs-btn-border-color: rgba(196, 43, 43, .45);
    --bs-btn-hover-bg: var(--ut-vencido-claro);
    --bs-btn-hover-border-color: var(--ut-vencido);
    --bs-btn-hover-color: var(--ut-vencido);
    --bs-btn-active-bg: var(--ut-vencido-claro);
    --bs-btn-active-color: var(--ut-vencido);
}

/* Desabilitado — um estado só, para qualquer variante de botão.
   Sem isto o Bootstrap cai nas cores dele: as variantes que não declaram as
   variáveis `--bs-btn-disabled-*` reaparecem no azul #0d6efd, fora da paleta. E o
   `.btn-primary` continuava cheio e parecia clicável. Botão apagado não tem cor de
   ação: fica sem preenchimento, com tinta e borda esmaecidas.
   A especificidade `.btn:disabled` (0,2,0) vence as declarações diretas das
   variantes (0,1,0), então basta reatribuir as variáveis aqui. */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--ut-costura);
    --bs-btn-disabled-color: var(--ut-tinta-3);
    --bs-btn-disabled-opacity: 1;
    cursor: not-allowed;
    box-shadow: none;
}

/* Campos */
.form-control, .form-select, .input-group-text {
    background-color: var(--ut-papel);
    border-color: var(--ut-costura);
    color: var(--ut-tinta);
    border-radius: var(--ut-raio);
}
.form-control::placeholder { color: var(--ut-tinta-3); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--ut-algodao-2); color: var(--ut-tinta-2); }
.input-group-text { color: var(--ut-tinta-3); }
.form-label { font-weight: 600; font-size: .875rem; color: var(--ut-tinta); }

.form-control:focus,
.form-select:focus,
.form-control:focus-visible,
.form-select:focus-visible {
    border-color: var(--ut-carimbo);
    box-shadow: 0 0 0 3px rgba(var(--ut-carimbo-rgb), .18);
    outline: none;
}

/* Checkbox */
.form-check-input { border-color: var(--ut-tinta-3); }
.form-check-input:checked {
    background-color: var(--ut-carimbo);
    border-color: var(--ut-carimbo);
}

.form-check-input:focus {
    border-color: var(--ut-carimbo);
    box-shadow: 0 0 0 3px rgba(var(--ut-carimbo-rgb), .18);
}

/* Switch */
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238A8F98'/%3e%3c/svg%3e");
    border-color: var(--ut-tinta-3);
    transition: background-color 0.2s ease, border-color 0.2s ease, background-position 0.15s ease;
}

.form-switch .form-check-input:checked {
    background-color: var(--ut-carimbo);
    border-color: var(--ut-carimbo);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--ut-carimbo-rgb), .18);
    border-color: var(--ut-carimbo);
}

/* Utils */
.text-primary { color: var(--ut-carimbo) !important; }
.text-secondary { color: var(--ut-tinta-2) !important; }
.text-muted { color: var(--ut-tinta-3) !important; }
.bg-sistema { background-color: var(--bs-body-bg); }
.cursor-pointer { cursor: pointer !important; }

/* Foco (nav e botões) — substitui o azul padrão do Bootstrap (#0d6efd) pela cor de ação */
.nav-link:focus,
.nav-link:focus-visible,
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.page-link:focus {
    box-shadow: 0 0 0 3px rgba(var(--ut-carimbo-rgb), .25);
    outline: none;
}

/* Tabelas */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ut-tinta);
    --bs-table-border-color: var(--ut-costura-2);
    --bs-table-hover-bg: var(--ut-algodao-2);
    --bs-table-hover-color: var(--ut-tinta);
    --bs-table-striped-bg: var(--ut-algodao-2);
}

/* Offcanvas e modal do Bootstrap */
.offcanvas, .modal-content {
    --bs-offcanvas-bg: var(--ut-papel);
    --bs-modal-bg: var(--ut-papel);
    --bs-offcanvas-color: var(--ut-tinta);
    --bs-offcanvas-border-color: var(--ut-costura);
    --bs-modal-border-color: var(--ut-costura);
}
.offcanvas-backdrop.show, .modal-backdrop.show { opacity: .35; }
.offcanvas-backdrop, .modal-backdrop { background-color: var(--ut-tinta); }

/* Dropdown */
.dropdown-menu {
    background-color: var(--ut-papel);
    border: 1px solid var(--ut-costura);
    border-radius: var(--ut-raio);
    box-shadow: 0 10px 28px rgba(var(--ut-tinta-rgb), .12);
    padding: 0.35rem;
}

.dropdown-item {
    color: var(--ut-tinta);
    border-radius: 4px;
    font-size: 0.875rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ut-algodao);
    color: var(--ut-tinta);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ut-carimbo-claro);
    color: var(--ut-carimbo-escuro);
}

.dropdown-divider {
    border-color: var(--ut-costura);
    opacity: 1;
}

.dropdown-header {
    color: var(--ut-tinta-3);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

/* Barra de rolagem */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ut-costura); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--ut-tinta-3); }

/* Diálogos UserTag */
.dialog-backdrop {
    position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center;
    padding: 1.25rem; background: rgba(var(--ut-tinta-rgb), .45); backdrop-filter: blur(3px);
    animation: dialog-fade .16s ease-out;
}
.dialog {
    position: relative; width: min(100%, 30rem); overflow: hidden;
    border: 1px solid var(--ut-costura); border-radius: var(--ut-raio-folha);
    background: var(--ut-papel); color: var(--ut-tinta); box-shadow: var(--bs-box-shadow-lg);
    animation: dialog-rise .2s cubic-bezier(.2, .8, .2, 1);
}
.dialog-accent { height: 3px; background: var(--ut-carimbo); }
.dialog-head { display: grid; grid-template-columns: 48px 1fr 36px; gap: .85rem; align-items: center; padding: 1.35rem 1.35rem 1rem; }
.dialog-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--ut-raio); background: var(--ut-carimbo-claro); color: var(--ut-carimbo); font-size: 25px; }
.dialog-eyebrow { display: block; margin-bottom: .12rem; color: var(--ut-tinta-3); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-stretch: 75%; }
.dialog h2 { margin: 0; color: var(--ut-tinta); font: 700 1.16rem/1.3 var(--ut-fonte); font-stretch: 112%; }
.dialog-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--ut-raio); background: transparent; color: var(--ut-tinta-3); }
.dialog-close:hover { background: var(--ut-algodao); color: var(--ut-tinta); }
.dialog-close .material-symbols-outlined { font-size: 20px; }
.dialog-body { padding: 0 1.35rem 1.25rem; }
.dialog-body p { margin: 0; color: var(--ut-tinta-2); font-size: .92rem; line-height: 1.55; white-space: pre-line; }
.dialog-input { width: 100%; margin-top: 1rem; padding: .78rem .9rem; border: 1px solid var(--ut-costura); border-radius: var(--ut-raio); outline: 0; background: var(--ut-papel); color: var(--ut-tinta); transition: border-color .16s, box-shadow .16s; }
.dialog-input:focus { border-color: var(--ut-carimbo); box-shadow: 0 0 0 3px rgba(var(--ut-carimbo-rgb), .18); }
.dialog-input.is-invalid { border-color: var(--ut-vencido); box-shadow: 0 0 0 3px rgba(196, 43, 43, .18); }
.dialog-actions { display: flex; justify-content: flex-end; gap: .65rem; padding: 1rem 1.35rem 1.25rem; border-top: 1px solid var(--ut-costura); background: var(--ut-algodao-2); }
.dialog-actions button { min-height: 40px; padding: .62rem 1rem; border-radius: var(--ut-raio); font-weight: 600; }
.dialog-cancel { border: 1px solid var(--ut-costura); background: var(--ut-papel); color: var(--ut-tinta); }
.dialog-cancel:hover { border-color: var(--ut-tinta-3); }
.dialog-confirm { border: 1px solid var(--ut-carimbo); background: var(--ut-carimbo); color: #fff; }
.dialog-confirm:hover { background: var(--ut-carimbo-escuro); border-color: var(--ut-carimbo-escuro); }
.dialog-confirm.is-danger { border-color: var(--ut-vencido); background: var(--ut-vencido); color: #fff; }
.dialog button:focus-visible { outline: 2px solid var(--ut-carimbo); outline-offset: 2px; }
@keyframes dialog-fade { from { opacity: 0; } }
@keyframes dialog-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (max-width: 520px) {
    .dialog-head { grid-template-columns: 42px 1fr 34px; padding-inline: 1rem; }
    .dialog-icon { width: 42px; height: 42px; }
    .dialog-body, .dialog-actions { padding-inline: 1rem; }
    .dialog-actions { flex-direction: column-reverse; }
    .dialog-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .dialog-backdrop, .dialog { animation: none; }
}