/* =========================================================
   UX SYSTEM — extras cross-cutting que corporate.css ainda não cobre:
   badges de status classificadas automaticamente, diálogo de confirmação
   nativo (substitui window.confirm), indicador de alterações não salvas,
   contador de caracteres, skeleton de carregamento e sombra de rolagem
   horizontal em tabelas largas. Botão/form/card/table já têm sua própria
   normalização em corporate.css — não duplicados aqui de propósito.
========================================================= */

:root{
    --ux-success:#08783f;
    --ux-success-soft:#edf9f2;
    --ux-warning:#a15c00;
    --ux-warning-soft:#fff7e8;
    --ux-danger:#c62828;
    --ux-danger-soft:#fff0f0;
    --ux-info:#1769aa;
    --ux-info-soft:#eef6ff;
    --ux-neutral:#66758b;
    --ux-neutral-soft:#f1f4f8;
    --ux-primary-container:#f3e7f7;
    --ux-on-primary-container:#3e005b;
    --ux-shadow-dialog:0 24px 70px rgba(23,16,34,.24);
}

[data-theme="dark"]{
    --ux-primary-container:#341440;
    --ux-on-primary-container:#f2d8ff;
    --ux-success-soft:rgba(8,120,63,.18);
    --ux-warning-soft:rgba(161,92,0,.2);
    --ux-danger-soft:rgba(198,40,40,.19);
    --ux-info-soft:rgba(23,105,170,.2);
    --ux-neutral-soft:rgba(255,255,255,.07);
}

/* Cabeçalho de página com "eyebrow" (microlabel) + indicador de dado
   atualizado ao vivo -- padrão reutilizável pra dar coesão visual entre
   páginas que ainda não têm cabeçalho próprio (ex.: Diagnóstico,
   Auditoria). Páginas que já têm o próprio cabeçalho (Ocorrências,
   Grande Vulto etc.) não precisam adotar isso. */
.page-eyebrow-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
}
.page-eyebrow-copy{min-width:0}
.page-eyebrow{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:5px;
    color:var(--primary);
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.page-eyebrow-copy h1{text-wrap:balance;line-height:1.15}
.page-eyebrow-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.page-live{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:8px;
    color:var(--text-muted);
    font-size:11px;
    font-weight:600;
}
.page-live-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--ux-success);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--ux-success) 14%,transparent);
    flex:0 0 auto;
}
@media(max-width:767.98px){
    .page-eyebrow-header{align-items:flex-start;flex-direction:column}
    .page-eyebrow-actions{width:100%;justify-content:flex-start}
    .page-eyebrow-actions .btn{flex:1}
}

/* Toast leve (window.corporateToast) -- não depende de markup fixo, a
   região é criada em JS na primeira chamada. */
.corporate-toast-region{
    position:fixed;
    right:18px;
    bottom:calc(var(--footer-height, 44px) + 18px);
    z-index:1900;
    width:min(370px,calc(100vw - 24px));
    display:grid;
    gap:8px;
    pointer-events:none;
}
.corporate-toast{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 14px;
    border:1px solid var(--border-color);
    border-left:4px solid var(--info);
    border-radius:11px;
    background:var(--bg-secondary);
    color:var(--text-secondary);
    box-shadow:var(--shadow-lg);
    font-size:12px;
    pointer-events:auto;
    animation:corporate-toast-in .18s ease-out;
}
.corporate-toast.is-success{border-left-color:var(--success)}
.corporate-toast.is-warning{border-left-color:var(--warning)}
.corporate-toast.is-danger{border-left-color:var(--danger)}
@keyframes corporate-toast-in{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}
@media(max-width:767.98px){
    .corporate-toast-region{right:12px;bottom:calc(var(--footer-height, 44px) + 12px)}
}

/* Badges de status classificadas automaticamente pelo texto (ver
   initStatusPresentation em ux.js) -- pensado pra telas novas que ainda
   não têm sua própria convenção de badge (.oc-badge, .cb-badge etc. já
   têm a própria e não são tocadas por esse mecanismo). */
.ux-status{
    min-height:25px!important;
    max-width:100%;
    padding:4px 8px!important;
    border:1px solid transparent!important;
    border-radius:999px!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:5px!important;
    font-size:10px!important;
    font-weight:780!important;
    line-height:1.2!important;
    text-align:left;
    white-space:normal;
}
.ux-status--danger{border-color:rgba(198,40,40,.16)!important;background:var(--ux-danger-soft)!important;color:var(--ux-danger)!important}
.ux-status--warning{border-color:rgba(161,92,0,.16)!important;background:var(--ux-warning-soft)!important;color:var(--ux-warning)!important}
.ux-status--success{border-color:rgba(8,120,63,.16)!important;background:var(--ux-success-soft)!important;color:var(--ux-success)!important}
.ux-status--info{border-color:rgba(23,105,170,.16)!important;background:var(--ux-info-soft)!important;color:var(--ux-info)!important}
.ux-status--primary{border-color:rgba(102,0,153,.16)!important;background:var(--ux-primary-container)!important;color:var(--ux-on-primary-container)!important}
.ux-status--neutral{border-color:var(--border-color)!important;background:var(--ux-neutral-soft)!important;color:var(--ux-neutral)!important}

/* Campo obrigatório */
.ux-required-marker{
    margin-left:3px;
    color:var(--ux-danger);
    font-size:11px;
    font-weight:800;
}

/* Contador de caracteres (textarea[maxlength]) */
.ux-field-counter{
    display:block;
    margin-top:4px;
    color:var(--text-muted);
    font-size:10.5px;
    font-variant-numeric:tabular-nums;
    text-align:right;
}
.ux-field-counter.is-near-limit{color:var(--ux-warning);font-weight:700}
.ux-field-counter.is-at-limit{color:var(--ux-danger);font-weight:800}

/* Skeleton de carregamento */
.ux-skeleton{
    overflow:hidden;
    border-radius:8px;
    background:linear-gradient(90deg,var(--bg-hover) 25%,color-mix(in srgb,var(--border-color) 55%,var(--bg-hover)) 50%,var(--bg-hover) 75%);
    background-size:200% 100%;
    animation:ux-skeleton 1.25s ease-in-out infinite;
}
@keyframes ux-skeleton{to{background-position:-200% 0}}

/* Indicador de alterações não salvas -- opt-in via [data-guard-unsaved] no
   container (ver initDirtyFormProtection em ux.js). */
.ux-dirty-indicator{
    display:none;
    align-items:center;
    gap:5px;
    margin-right:auto;
    color:var(--ux-warning);
    font-size:10.5px;
    font-weight:720;
    white-space:nowrap;
}
[data-guard-unsaved].is-ux-dirty .ux-dirty-indicator{display:inline-flex}

/* Sombra indicando rolagem horizontal disponível em tabelas largas. */
.table-responsive{
    position:relative;
    scrollbar-color:color-mix(in srgb,var(--primary) 22%,var(--border-color)) transparent;
    scrollbar-width:thin;
}
.table-responsive.has-horizontal-overflow{
    box-shadow:inset -12px 0 14px -15px rgba(16,24,40,.42);
}
.table-responsive.has-horizontal-overflow:not(.is-scroll-start):not(.is-scroll-end){
    box-shadow:inset 12px 0 14px -15px rgba(16,24,40,.42),inset -12px 0 14px -15px rgba(16,24,40,.42);
}
.table-responsive.has-horizontal-overflow.is-scroll-end{
    box-shadow:inset 12px 0 14px -15px rgba(16,24,40,.42);
}
.table-responsive:focus-visible{outline:3px solid rgba(102,0,153,.16)!important;outline-offset:2px}

/* Confirmação corporativa (substitui window.confirm em exclusões/encerramentos).
   position/inset/margin explícitos porque o reset global (*{margin:0}) anula
   a centralização automática (margin:auto) que o navegador aplica a
   dialog:modal por padrão. */
.ux-confirm-dialog{
    position:fixed;
    inset:0;
    margin:auto;
    width:min(92vw,440px);
    max-width:440px;
    padding:0;
    border:0;
    border-radius:20px;
    background:transparent;
    color:var(--text-primary);
    box-shadow:var(--ux-shadow-dialog);
}
.ux-confirm-dialog::backdrop{
    background:rgba(15,23,42,.52);
    backdrop-filter:blur(3px);
}
.ux-confirm-dialog__surface{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:14px;
    padding:22px;
    border:1px solid var(--border-color);
    border-radius:20px;
    background:var(--bg-secondary);
}
.ux-confirm-dialog__icon{
    width:48px;
    height:48px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:var(--ux-danger-soft);
    color:var(--ux-danger);
    font-size:20px;
}
.ux-confirm-dialog[data-tone="warning"] .ux-confirm-dialog__icon{
    background:var(--ux-warning-soft);
    color:var(--ux-warning);
}
.ux-confirm-dialog__copy{min-width:0}
.ux-confirm-dialog__eyebrow{
    display:block;
    margin-bottom:3px;
    color:var(--text-muted);
    font-size:9.5px;
    font-weight:800;
    letter-spacing:.065em;
    text-transform:uppercase;
}
.ux-confirm-dialog h2{
    margin:0 0 7px;
    color:var(--text-primary);
    font-size:18px;
    font-weight:780;
}
.ux-confirm-dialog p{
    margin:0;
    color:var(--text-secondary);
    font-size:12.5px;
    line-height:1.5;
}
.ux-confirm-dialog__actions{
    grid-column:1/-1;
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:4px;
    padding-top:15px;
    border-top:1px solid var(--border-color);
}
/* Variante com motivo obrigatório (exclusão/encerramento que precisa de uma
   justificativa) -- nasceu escopada por página no módulo Batimento de caixa
   (:is(#bcModalExcluir, #blModalExcluir) ...); promovida aqui pro padrão
   global assim que um segundo módulo (Ordens de Serviço) precisou do mesmo
   campo, pra não copiar a regra de novo a cada tela nova. */
.ux-confirm-dialog__textarea{
    width:100%;
    margin-top:10px;
    min-height:76px;
    resize:vertical;
    font-size:13px;
}
.ux-confirm-dialog__erro{
    margin-top:6px;
    font-size:11.5px;
    font-weight:700;
    color:var(--ux-danger);
}

@media(max-width:767.98px){
    .ux-dirty-indicator{width:100%;margin-bottom:3px}
    .ux-confirm-dialog__surface{padding:18px}
}

@media(max-width:479.98px){
    .ux-confirm-dialog__surface{grid-template-columns:40px minmax(0,1fr);gap:11px}
    .ux-confirm-dialog__icon{width:40px;height:40px;border-radius:12px;font-size:17px}
    .ux-confirm-dialog__actions{display:grid;grid-template-columns:1fr 1fr}
    .ux-confirm-dialog__actions .btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
    .ux-skeleton{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* Balão de dicas global (js/core/tooltip.js): substitui o title nativo do navegador. */
.ux-tooltip{
    position:fixed;
    z-index:2100;
    max-width:280px;
    padding:6px 10px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-sm,8px);
    background:var(--bg-card,#fff);
    color:var(--text-primary,#1e293b);
    box-shadow:var(--shadow-lg,0 18px 48px rgba(15,23,42,.12));
    font-size:12px;
    font-weight:500;
    line-height:1.4;
    white-space:normal;
    overflow-wrap:anywhere;
    pointer-events:none;
}
.ux-tooltip[hidden]{display:none}