/* ============================================================
   CCN GLASS — sistema de design "vidro" (estilo Apple)
   Aplicado de forma global via seletores compostos que já
   correspondem às classes Tailwind existentes no HTML, para
   não precisar reescrever cada card/botão/modal do sistema.
   ============================================================ */

:root {
    color-scheme: light only;
    --ccn-glass-bg: rgba(255, 255, 255, .62);
    --ccn-glass-bg-strong: rgba(255, 255, 255, .82);
    --ccn-glass-border: rgba(17, 24, 39, .07);
    --ccn-shadow-sm: 0 1px 2px rgba(17, 24, 39, .04);
    --ccn-shadow-md: 0 10px 30px rgba(17, 24, 39, .07);
    --ccn-shadow-lg: 0 22px 48px rgba(17, 24, 39, .14);
    --ccn-ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ---------- Animações ---------- */
@keyframes ccnFadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ccnFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ccnScaleIn {
    from { opacity: 0; transform: scale(.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ---------- Cards / painéis brancos ---------- */
/* Assinatura usada em quase todo o sistema para cards: rounded-2xl + border + border-gray-100 */
.rounded-2xl.border.border-gray-100 {
    background: var(--ccn-glass-bg) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border-color: var(--ccn-glass-border) !important;
    box-shadow: var(--ccn-shadow-md), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
    transition: transform .3s var(--ccn-ease), box-shadow .3s var(--ccn-ease);
    animation: ccnFadeInUp .45s var(--ccn-ease) both;
}
a.rounded-2xl.border.border-gray-100:hover,
.rounded-2xl.border.border-gray-100.group:hover {
    transform: translateY(-3px);
    box-shadow: var(--ccn-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

/* Escalonar leve entrada dos cards em grid, sem depender de JS */
.grid > .rounded-2xl.border.border-gray-100:nth-child(2) { animation-delay: .05s; }
.grid > .rounded-2xl.border.border-gray-100:nth-child(3) { animation-delay: .1s; }
.grid > .rounded-2xl.border.border-gray-100:nth-child(4) { animation-delay: .15s; }
.grid > .rounded-2xl.border.border-gray-100:nth-child(5) { animation-delay: .2s; }
.grid > .rounded-2xl.border.border-gray-100:nth-child(6) { animation-delay: .25s; }

/* ---------- Botões-fantasma (fundo branco + borda) viram sólidos ----------
   Rede de segurança: qualquer <button>/<a> que ainda estiver com fundo
   branco em qualquer tela vira uma cor sólida com texto branco, usando a
   cor que já estava sugerida na classe de hover existente
   (hover:text-orange-500 etc.) como pista. Restrito às tags button/a (nunca
   <div>) para não afetar linhas de lista ou outros elementos decorativos;
   :not([class*="font-mono"]) protege os botões de "copiar variável" em
   Configurações, que usam esse mesmo esqueleto visual mas não navegam. */
button.bg-white.border:not([class*="font-mono"]),
a.bg-white.border:not([class*="font-mono"]) {
    background: #4b5563 !important;
    color: #fff !important;
    border-color: transparent !important;
    transition: background-color .2s var(--ccn-ease), transform .2s var(--ccn-ease);
}
button.bg-white.border:not([class*="font-mono"]):hover,
a.bg-white.border:not([class*="font-mono"]):hover {
    background: #374151 !important;
    color: #fff !important;
    transform: translateY(-1px);
}

button.bg-white.border-red-200,
a.bg-white.border-red-200 {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: transparent !important;
}
button.bg-white.border-red-200:hover,
a.bg-white.border-red-200:hover {
    background: #b91c1c !important;
    color: #fff !important;
}

/* Pista de cor pelo hover: laranja (editar/alternar filtro) */
button.bg-white[class*="hover:text-orange"]:not([class*="font-mono"]),
a.bg-white[class*="hover:text-orange"]:not([class*="font-mono"]) {
    background: #f97316 !important;
    color: #fff !important;
    border-color: transparent !important;
}
button.bg-white[class*="hover:text-orange"]:not([class*="font-mono"]):hover,
a.bg-white[class*="hover:text-orange"]:not([class*="font-mono"]):hover {
    background: #ea580c !important;
    color: #fff !important;
}

/* Pista de cor pelo hover: azul/índigo (navegar para lista relacionada) */
button.bg-white[class*="hover:text-blue-6"]:not([class*="font-mono"]),
a.bg-white[class*="hover:text-blue-6"]:not([class*="font-mono"]),
button.bg-white[class*="hover:text-blue-9"]:not([class*="font-mono"]),
a.bg-white[class*="hover:text-blue-9"]:not([class*="font-mono"]) {
    background: #4f46e5 !important;
    color: #fff !important;
    border-color: transparent !important;
}
button.bg-white[class*="hover:text-blue-6"]:not([class*="font-mono"]):hover,
a.bg-white[class*="hover:text-blue-6"]:not([class*="font-mono"]):hover,
button.bg-white[class*="hover:text-blue-9"]:not([class*="font-mono"]):hover,
a.bg-white[class*="hover:text-blue-9"]:not([class*="font-mono"]):hover {
    background: #4338ca !important;
    color: #fff !important;
}

/* Exceção à rede de segurança acima: cards de navegação/atalho dentro de
   grids (ex.: "Menu de Ações" do admin, atalhos do gestor, cards de
   solicitação do usuário) usam bg-white + border só por estilo de card —
   não são botões fantasmas e não podem virar pílulas cinza-escuro, senão o
   título/descrição (que mantêm suas próprias cores escuras) ficam
   ilegíveis. Especificidade elevada de propósito para vencer a regra acima
   e a regra de raio 100% arredondado mais abaixo, independente da ordem. */
body .grid > a.bg-white.border:not([class*="font-mono"]) {
    background: #fff !important;
    color: inherit !important;
    border-color: rgb(243 244 246) !important;
    border-radius: 1rem !important;
}
body .grid > a.bg-white.border:not([class*="font-mono"]):hover {
    background: #fff !important;
    color: inherit !important;
}

/* ---------- Botões primários (laranja) ---------- */
.bg-orange-500.text-white,
button[type="submit"].bg-orange-500 {
    background: linear-gradient(135deg, #fb923c, #f97316) !important;
    box-shadow: 0 6px 16px rgba(249, 115, 22, .35), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
    transition: transform .2s var(--ccn-ease), box-shadow .2s var(--ccn-ease), filter .2s ease;
}
.bg-orange-500.text-white:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 10px 22px rgba(249, 115, 22, .45), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}
.bg-orange-500.text-white:active {
    transform: translateY(0) scale(.98);
}

/* Botões escuros (marinho) usados em ações secundárias/download */
.bg-blue-900.text-white,
.bg-\[\#0A1C3A\].text-white {
    box-shadow: 0 6px 16px rgba(30, 58, 138, .3) !important;
    transition: transform .2s var(--ccn-ease), box-shadow .2s var(--ccn-ease);
}
.bg-blue-900.text-white:hover,
.bg-\[\#0A1C3A\].text-white:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(30, 58, 138, .4) !important;
}

/* Botão genérico de formulário (fallback leve para não deixar nada "cru") */
button[type="submit"]:not(.bg-orange-500):not(.bg-blue-900) {
    transition: transform .2s var(--ccn-ease), box-shadow .2s var(--ccn-ease), filter .2s ease;
}
button[type="submit"]:not(.bg-orange-500):not(.bg-blue-900):hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

/* ---------- Todos os botões: cantos 100% arredondados (pílula, estilo Apple) ---------- */
/* Cobre <button> nativos (cobre quase todas as ações do sistema) + links estilizados
   como botão (flex/inline-flex + items-center + algum rounded-*) + pílulas já mapeadas acima. */
button,
a[class*="items-center"][class*="rounded"],
a.bg-white.border:not([class*="font-mono"]),
.bg-orange-500.text-white,
.bg-blue-900.text-white,
.bg-\[\#0A1C3A\].text-white {
    border-radius: 9999px !important;
    position: relative;
    overflow: hidden;
}

/* Efeito de brilho passando rapidamente pelo botão no hover */
button::after,
a[class*="items-center"][class*="rounded"]::after,
a.bg-white.border:not([class*="font-mono"])::after,
.bg-orange-500.text-white::after,
.bg-blue-900.text-white::after,
.bg-\[\#0A1C3A\].text-white::after {
    content: '';
    position: absolute;
    inset: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    transition: left .55s var(--ccn-ease);
    pointer-events: none;
}
button:hover::after,
a[class*="items-center"][class*="rounded"]:hover::after,
a.bg-white.border:not([class*="font-mono"]):hover::after,
.bg-orange-500.text-white:hover::after,
.bg-blue-900.text-white:hover::after,
.bg-\[\#0A1C3A\].text-white:hover::after {
    left: 130%;
}

/* ---------- Modais (fundo + painel) ---------- */
/* :not(#ccnBackdrop) exclui o overlay do menu mobile da sidebar, que já tem sua
   própria animação de abrir/fechar controlada por JS. */
div[class*="fixed"][class*="inset-0"][class*="bg-"]:not(#ccnBackdrop) {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: ccnFadeIn .25s ease both;
}
/* Painel do modal: qualquer filho direto arredondado dentro do fundo do modal + os
   painéis que já usam a assinatura rounded-2xl + shadow-2xl (cobertura ampla) */
div[class*="fixed"][class*="inset-0"][class*="bg-"]:not(#ccnBackdrop) > div[class*="rounded"],
.rounded-2xl.shadow-2xl {
    background: var(--ccn-glass-bg-strong) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    animation: ccnScaleIn .3s var(--ccn-ease) both;
}

/* ---------- Campos de formulário ---------- */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
    transition: border-color .2s ease, box-shadow .2s ease;
}
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: rgba(249, 115, 22, .5) !important;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, .12) !important;
}

/* ---------- Scrollbar discreta ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(17, 24, 39, .15); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(17, 24, 39, .3); }