/* SS HUB — Camada de fixes v3
 * Carrega DEPOIS de /app.css.
 * Conteudo: a11y critica (focus-visible, reduced-motion, contraste --text3),
 * dark mode tokens orfaos, tokens z-index, regras .avatar-icon (substitui iniciais).
 * Risco: baixo, todas as regras sao aditivas (nenhum visual mudou intencionalmente).
 */

/* ============================================================
 * 1. A11Y CRITICA
 * ============================================================ */

/* :focus-visible global. Outline 2px com offset para nao colar.
 * Cobre todos elementos interativos comuns. Botoes com bg primary recebem
 * outline branco com sombra, pra contrastar. */
:where(button, a, input, select, textarea, [tabindex]:not([tabindex='-1']), [role='button']):focus {
    outline: none; /* navegadores antigos */
}
:where(button, a, input, select, textarea, [tabindex]:not([tabindex='-1']), [role='button']):focus-visible {
    outline: 2px solid var(--primary, #0d9488);
    outline-offset: 2px;
    border-radius: 6px;
}
.btn-primary:focus-visible,
.btn.btn-primary:focus-visible {
    outline-color: #fff;
    box-shadow: 0 0 0 2px var(--primary, #0d9488), 0 0 0 4px rgba(255,255,255,0.4);
}
/* Dark mode focus mais brilhante (outline padrao some em bg escuro) */
.dark-mode :where(button, a, input, select, textarea, [tabindex]:not([tabindex='-1']), [role='button']):focus-visible {
    outline-color: var(--primary3, #2dd4bf);
}

/* prefers-reduced-motion: corta TODA animacao/transition para usuarios sensiveis */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Contraste WCAG: --text3 (#94a3b8) em fundo branco da ~3.2:1 (falha AA).
 * Subimos para #64748b (slate-500), da ~7:1. Mantem #94a3b8 no dark mode. */
:root {
    --text3: #64748b;
}
.dark-mode {
    --text3: #94a3b8;
}

/* ============================================================
 * 2. DARK MODE TOKENS ORFAOS
 * ============================================================
 * Sem isso, alerts/labels usavam hex hardcoded inconsistente no dark.
 * Reduzimos saturacao das cores semanticas para nao queimar olhos. */
.dark-mode {
    /* Brand */
    --primary:  #14b8a6;
    --primary2: #2dd4bf;
    --primary3: #5eead4;
    /* Accent */
    --purple:  #a78bfa;
    --purple2: #c4b5fd;
    /* Semanticas — alpha mais alta no dark p/ visibilidade */
    --green:  #34d399;
    --yellow: #fbbf24;
    --red:    #f87171;
    --blue:   #60a5fa;
    --orange: #fb923c;
    --pink:   #f472b6;
    --cyan:   #22d3ee;
    /* Surface2 (usado em forma clara light, sem override antes) */
    --surface2: #0b1220;
}

/* ============================================================
 * 3. TOKENS Z-INDEX (organiza stacking, sem mudar valor atual)
 * ============================================================ */
:root {
    --z-dropdown:     100;
    --z-sticky:       200;
    --z-fixed:        500;
    --z-modal-bg:     1000;
    --z-modal:        1001;
    --z-popover:      9000;
    --z-tooltip:      10000;
    --z-toast:        99998;
    --z-fullscreen:   100000;
    --z-fullscreen-content: 100001;
}

/* ============================================================
 * 4. AVATAR ICON (substitui iniciais por icone generico de pessoa)
 * ============================================================
 * Aplicar a classe .avatar-icon no elemento .avatar (inst-avatar,
 * conv-avatar, chat-avatar, etc) substitui o conteudo de texto
 * (inicial) por SVG embedded.
 * Tom esmaecido pra nao competir com a UI ativa. */
.avatar-icon {
    /* Forca cor de fundo sobre qualquer gradient/background pre-existente do componente */
    background-color: var(--primary, #0d9488) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 62% 62% !important;
    color: transparent !important;
    text-indent: -9999px;
    font-size: 0 !important;
}
.avatar-icon--group {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/></svg>") !important;
}
/* Variante mais clara para usar quando preferir teal sobre slate */
.avatar-icon--soft {
    background-color: rgba(13,148,136,0.12) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d9488'><path d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>") !important;
}
.dark-mode .avatar-icon {
    background-color: var(--surface3, #334155) !important;
}

/* ============================================================
 * 5. LABEL TAGS — contraste melhor em light (texto muito pequeno)
 * ============================================================ */
.label-tag.red,
.label-tag.yellow,
.label-tag.green,
.label-tag.blue {
    font-weight: 700;
    letter-spacing: 0.02em;
}
.label-tag.yellow {
    color: #92400e; /* amber-800, contraste >=4.5 em #fefce8 */
}
.label-tag.red {
    color: #991b1b; /* red-800 */
}
.label-tag.green {
    color: #14532d; /* green-900 */
}
.dark-mode .label-tag.yellow { color: #fde68a; }
.dark-mode .label-tag.red    { color: #fecaca; }
.dark-mode .label-tag.green  { color: #bbf7d0; }

/* ============================================================
 * 7. ANTI-ZOOM iOS EM INPUTS DO ADMIN
 * Varios campos da area admin usam font-size inline 12-13px, que vence a
 * media query do app.css e dispara zoom do Safari mobile ao focar. No mobile,
 * forcamos 16px (so abaixo de 640px; o tamanho do desktop fica intacto).
 * ============================================================ */
@media (max-width: 640px) {
    .modal input.input,
    .modal textarea.input,
    .modal select.input,
    .admin-card input.input,
    .admin-card select.input,
    .field input.input,
    .field textarea.input,
    .field select.input {
        font-size: 16px !important;
    }
}