/*
 * SINN Funil — Identidade visual v1.2
 * Rebranding + acessibilidade, contraste e estados de interação.
 * Sem alterações de regra de negócio.
 */
:root {
    --sinn-ink: #061B33;
    --sinn-blue: #0A4E8A;
    --sinn-blue-dark: #083F70;
    --sinn-blue-bright: #0E6DB8;
    --sinn-blue-soft: #E8EEF9;
    --sinn-surface: #F8FBFF;
    --sinn-gold: #D4AF37;
    --sinn-gold-strong: #7A5A00;
    --sinn-black: #07070B;
    --sinn-panel: #141A2E;
    --sinn-border: #CBD9E7;
    --sinn-border-strong: #94A3B8;
    --sinn-muted: #526174;
    --sinn-danger: #B42318;
    --sinn-danger-dark: #8F1D13;
    --sinn-success: #147A4E;
    --sinn-warning-bg: #FEF3C7;
    --sinn-warning-text: #7A4B00;
    --sinn-focus: #D4AF37;
    --sinn-radius: 10px;
    --sinn-transition: 160ms ease;
}

html { background: var(--sinn-surface); }
body {
    color: var(--sinn-ink);
    background-color: var(--sinn-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(212, 175, 55, .32);
    color: var(--sinn-ink);
}

/* Foco visível: teclado deve ter indicação clara em qualquer componente interativo. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--sinn-focus) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(212, 175, 55, .18);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--sinn-blue) !important;
}

/* Branding */
.brand,
.brand-name,
.logo-text,
.app-brand,
.sidebar-brand,
.auth-brand,
.navbar-brand {
    letter-spacing: -.02em;
}

/* Base de interação: resposta visual rápida sem exagerar animação. */
button,
.btn,
.button,
[role="button"],
input[type="button"],
input[type="submit"] {
    transition: background-color var(--sinn-transition),
                border-color var(--sinn-transition),
                color var(--sinn-transition),
                box-shadow var(--sinn-transition),
                transform var(--sinn-transition),
                opacity var(--sinn-transition);
}

button:not(:disabled):active,
.btn:not(.disabled):active,
.button:not(.disabled):active,
[role="button"]:active {
    transform: translateY(0);
}

/* Ação principal: contraste alto (branco sobre azul). */
.btn-primary,
.button-primary,
.primary-button,
.action-primary,
.cta-primary,
.auth-submit {
    background: var(--sinn-blue);
    border: 1px solid var(--sinn-blue);
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(10, 78, 138, .18);
    font-weight: 650;
}

.btn-primary:hover,
.button-primary:hover,
.primary-button:hover,
.action-primary:hover,
.cta-primary:hover,
.auth-submit:hover {
    background: var(--sinn-blue-dark);
    border-color: var(--sinn-blue-dark);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(6, 27, 51, .24);
    transform: translateY(-1px);
}

/* Botões secundários/outline: fundo claro e texto navy, sem cinza apagado. */
.btn-secondary,
.button-secondary,
.btn-outline,
.btn-outline-primary,
.secondary-button {
    background: #fff;
    border: 1px solid var(--sinn-border-strong);
    color: var(--sinn-ink) !important;
}

.btn-secondary:hover,
.button-secondary:hover,
.btn-outline:hover,
.btn-outline-primary:hover,
.secondary-button:hover {
    background: var(--sinn-blue-soft);
    border-color: var(--sinn-blue);
    color: var(--sinn-blue-dark) !important;
    box-shadow: 0 4px 12px rgba(10, 78, 138, .10);
}

/* Ação dourada: texto sempre escuro para contraste. */
.btn-accent,
.button-accent,
.btn-gold,
.cta-accent,
.bg-accent,
.accent-bg {
    background: var(--sinn-gold);
    border-color: var(--sinn-gold);
    color: var(--sinn-ink) !important;
    font-weight: 700;
}

.btn-accent:hover,
.button-accent:hover,
.btn-gold:hover,
.cta-accent:hover,
.bg-accent:hover,
.accent-bg:hover {
    background: #C49E24;
    border-color: #C49E24;
    color: var(--sinn-ink) !important;
    box-shadow: 0 6px 16px rgba(122, 90, 0, .18);
}

/* Perigo: evita vermelho claro com texto branco de baixo contraste. */
.btn-danger,
.button-danger,
.danger-button {
    background: var(--sinn-danger);
    border-color: var(--sinn-danger);
    color: #fff !important;
}

.btn-danger:hover,
.button-danger:hover,
.danger-button:hover {
    background: var(--sinn-danger-dark);
    border-color: var(--sinn-danger-dark);
    color: #fff !important;
}

/* Desabilitado: claramente inativo e sem efeito de hover/elevação. */
button:disabled,
.btn.disabled,
.btn:disabled,
.button.disabled,
.button:disabled,
[aria-disabled="true"] {
    cursor: not-allowed !important;
    opacity: .58;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

/* Links de conteúdo: hover perceptível sem poluir botões/menus. */
a:not(.btn):not(.button):not([role="button"]):hover {
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Ícones/botões compactos: área clicável confortável sem inflar o Kanban. */
.icon-button,
.btn-icon,
.action-icon,
button.icon-only {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
}

.icon-button:hover,
.btn-icon:hover,
.action-icon:hover,
button.icon-only:hover {
    background: var(--sinn-blue-soft);
    color: var(--sinn-blue-dark);
}

/* Textos secundários continuam legíveis em fundo claro. */
.text-muted,
.muted,
.subtitle,
.help-text,
.form-text {
    color: var(--sinn-muted) !important;
}

/* Dourado como texto usa tom escuro AA; dourado puro fica para fundos/bordas. */
.accent,
.badge-accent,
.text-accent,
.highlight-accent {
    color: var(--sinn-gold-strong) !important;
}

/* Badges/status com contraste consistente. */
.badge-warning,
.status-warning,
.badge-pending {
    background: var(--sinn-warning-bg);
    color: var(--sinn-warning-text) !important;
}

.badge-success,
.status-success {
    background: #DCFCE7;
    color: #14532D !important;
}

.badge-danger,
.status-danger,
.badge-error {
    background: #FEE2E2;
    color: #7F1D1D !important;
}

.badge-info,
.status-info {
    background: #DBEAFE;
    color: #1E3A8A !important;
}

/* Tabelas/listagens: hover sutil ajuda leitura da linha atual. */
table tbody tr {
    transition: background-color var(--sinn-transition);
}

table tbody tr:hover {
    background-color: #F2F7FC;
}

/* Campos: limite mais visível sem aparência pesada. */
input,
select,
textarea {
    border-color: var(--sinn-border);
}

input::placeholder,
textarea::placeholder {
    color: #6B7788;
    opacity: 1;
}

/* Não deixar a página inteira estourar horizontalmente. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

main,
.content,
.main-content,
.page-content,
.app-content,
.grid,
.flex {
    min-width: 0;
}

@supports not (overflow: clip) {
    html,
    body { overflow-x: hidden; }
}

/* Respeita usuários que desativam animações. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Alto contraste do sistema operacional: mantém bordas e foco identificáveis. */
@media (forced-colors: active) {
    button,
    .btn,
    .button,
    input,
    select,
    textarea {
        border: 1px solid ButtonText;
    }
}