/* ═══════════════════════════════════════════════════════════════════════
   SGF - UI compartilhada: Toasts e Modal de Confirmação
   Incluir em toda pagina junto com _sidebar.css, e sgf_ui.js antes de
   qualquer script que use sgfToast()/sgfConfirm().
   ═══════════════════════════════════════════════════════════════════════ */

.sgf-toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 380px;
    pointer-events: none;
}

.sgf-toast {
    pointer-events: auto;
    background: #ffffff;
    border: 1px solid var(--c-e8ecf0,#e8ecf0);
    border-left: 4px solid var(--c-2a9d8f,#2a9d8f);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    box-shadow: 0 8px 24px rgba(var(--rgb-15-36-64,15,36,64),0.14), 0 2px 6px rgba(var(--rgb-15-36-64,15,36,64),0.08);
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 0.85rem;
    color: var(--c-1b3a5c,#1b3a5c);
    opacity: 0;
    transform: translateX(20px);
    animation: sgf-toast-in 0.25s ease-out forwards;
    position: relative;
    overflow: hidden;
}

.sgf-toast.sgf-toast-saindo {
    animation: sgf-toast-out 0.2s ease-in forwards;
}

.sgf-toast-icone {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    margin-top: 0.05rem;
}

.sgf-toast-texto { flex: 1; line-height: 1.4; padding-top: 0.05rem; }

.sgf-toast-fechar {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--c-94a3b8,#94a3b8);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    margin-top: 0.05rem;
}
.sgf-toast-fechar:hover { color: var(--c-64748b,#64748b); }

.sgf-toast-barra {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: rgba(var(--rgb-0-0-0,0,0,0),0.08);
    animation: sgf-toast-barra 4s linear forwards;
}

.sgf-toast-sucesso { border-left-color: var(--c-1e7068,#1e7068); }
.sgf-toast-sucesso .sgf-toast-icone { background: var(--c-1e7068,#1e7068); }
.sgf-toast-sucesso .sgf-toast-barra { background: var(--c-1e7068,#1e7068); opacity: 0.25; }

.sgf-toast-erro { border-left-color: #C0392B; }
.sgf-toast-erro .sgf-toast-icone { background: #C0392B; }
.sgf-toast-erro .sgf-toast-barra { background: #C0392B; opacity: 0.25; }

.sgf-toast-aviso { border-left-color: #E67E22; }
.sgf-toast-aviso .sgf-toast-icone { background: #E67E22; }
.sgf-toast-aviso .sgf-toast-barra { background: #E67E22; opacity: 0.25; }

@keyframes sgf-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes sgf-toast-out {
    from { opacity: 1; transform: translateX(0); max-height: 100px; margin-top: 0; }
    to   { opacity: 0; transform: translateX(20px); max-height: 0; margin-top: -0.6rem; }
}
@keyframes sgf-toast-barra {
    from { width: 100%; }
    to   { width: 0%; }
}

@media (max-width: 480px) {
    .sgf-toast-container { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
}

/* ── Spinner de carregamento (buscas incrementais/autocomplete) ── */
.sgf-buscando { position: relative; }
.sgf-buscando::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid rgba(var(--rgb-240-165-0,240,165,0),0.25);
    border-top-color: var(--c-f0a500,#f0a500);
    border-radius: 50%;
    animation: sgf-spin 0.6s linear infinite;
    pointer-events: none;
}
@keyframes sgf-spin {
    to { transform: rotate(360deg); }
}
/* ── Seletor de colunas (tabelas largas) ── */
.sgf-colunas-wrap { position: relative; display: inline-block; }
.sgf-colunas-painel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.4rem;
    background: var(--c-161b22,#161b22);
    border: 1px solid var(--c-2a3040,#2a3040);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(var(--rgb-0-0-0,0,0,0),0.35);
    padding: 0.6rem;
    z-index: 500;
    min-width: 200px;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
.sgf-colunas-painel.sgf-aberto { display: block; }
.sgf-colunas-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem;
    border-radius: 5px;
    font-size: 0.8rem;
    color: var(--c-e6edf3,#e6edf3);
    cursor: pointer;
}
.sgf-colunas-item:hover { background: var(--c-1c2330,#1c2330); }
.sgf-colunas-item input { width: 14px; height: 14px; cursor: pointer; }

/* ── Modal de confirmação ── */
.sgf-confirm-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(var(--rgb-15-36-64,15,36,64),0.55);
    z-index: 4000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.sgf-confirm-overlay.sgf-aberto {
    display: flex;
    opacity: 1;
}

.sgf-confirm-modal {
    background: #ffffff;
    border-radius: 10px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(var(--rgb-15-36-64,15,36,64),0.3);
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    transform: translateY(10px) scale(0.98);
    transition: transform 0.15s ease;
    overflow: hidden;
}
.sgf-confirm-overlay.sgf-aberto .sgf-confirm-modal {
    transform: translateY(0) scale(1);
}

.sgf-confirm-topo {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
}

.sgf-confirm-icone {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}
.sgf-confirm-icone.sgf-perigo { background: #C0392B; }
.sgf-confirm-icone.sgf-aviso { background: #E67E22; }
.sgf-confirm-icone.sgf-info { background: var(--c-2a9d8f,#2a9d8f); }

.sgf-confirm-titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-1b3a5c,#1b3a5c);
    margin-bottom: 0.35rem;
}

.sgf-confirm-texto {
    font-size: 0.85rem;
    color: var(--c-64748b,#64748b);
    line-height: 1.5;
}

.sgf-confirm-botoes {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.sgf-confirm-botoes button {
    padding: 0.55rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}
.sgf-confirm-botoes button:hover { opacity: 0.85; }

.sgf-confirm-cancelar {
    background: transparent;
    border: 1px solid var(--c-e8ecf0,#e8ecf0) !important;
    color: var(--c-64748b,#64748b);
}
.sgf-confirm-cancelar:hover { background: var(--c-f5f7fa,#f5f7fa); }

.sgf-confirm-ok { color: #fff; }
.sgf-confirm-ok.sgf-perigo { background: #C0392B; }
.sgf-confirm-ok.sgf-aviso { background: #E67E22; }
.sgf-confirm-ok.sgf-info { background: var(--c-2a9d8f,#2a9d8f); }

/* ── Campos de data / mes / hora ──
   O icone do calendario e escuro por padrao no navegador e some no tema
   escuro do sistema. Invertido, fica branco (so o icone — o fundo e o texto
   do campo nao mudam). Vale para todas as telas que carregam este CSS. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.85;
    cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}