/* ============================================================================
   REFINO VISUAL — camada "soft SaaS"
   ----------------------------------------------------------------------------
   Carregada DEPOIS do styles.css: tudo aqui é override intencional. Remover
   este arquivo (e o <link> no layouts/app.blade.php) devolve o visual antigo
   inteiro — nada do styles.css foi alterado.

   Regras da casa:
   - O dark mode define as próprias cores em :root[data-theme="dark"], que tem
     especificidade MAIOR que o :root daqui — os tons abaixo valem só no light.
     Raios/sombras/easing são compartilhados de propósito.
   - Navegação SPA: NUNCA esconder o conteúdo antigo (dimming/overlay causou a
     "piscada branca" histórica — ver comentário no dashboard-shell.js). Só se
     anima a ENTRADA do conteúdo novo; a saída é o swap instantâneo de sempre.
   - Toda animação respeita prefers-reduced-motion (bloco no fim do arquivo).
   ============================================================================ */

/* ── 1. Fundações ─────────────────────────────────────────────────────────── */
:root {
    /* Texto em slate (azulado) em vez de preto puro: mesmo conteúdo, menos
       dureza. Contraste AA preservado (#1A2333 sobre #FFF = 15.7:1). */
    --texto:        #1A2333;
    --texto-medio:  #3B4454;
    --texto-fraco:  #64748B;

    --bg:           #F6F8FB;
    --bg-elevado:   #F8FAFC;
    --bg-hover:     #F1F4F8;
    --borda:        #E9EDF3;
    --borda-forte:  #D7DEE7;
    --input-borda:  #E2E8F0;

    /* Sombras difusas (grandes, baixa opacidade): profundidade sem "traço". */
    --sombra:       0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
    --sombra-md:    0 8px 24px -8px rgba(16, 24, 40, .12);
    --sombra-lg:    0 24px 48px -16px rgba(16, 24, 40, .18);

    --raio:         14px;
    --raio-sm:      10px;
    --raio-lg:      18px;
    --raio-xl:      24px;

    /* Easing único das micro-interações — consistência entre componentes. */
    --fx: cubic-bezier(.22, .61, .36, 1);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, .page-header h2 { letter-spacing: -.015em; }

/* ── 2. Sidebar: item ativo em "pill" (padrão SaaS) ───────────────────────── */
.sidebar-nav a {
    margin: 2px 10px;
    padding: .58rem .85rem;
    border-radius: 10px;
    border-left: none;                 /* aposenta a barrinha lateral */
    transition: background .16s var(--fx), color .16s var(--fx);
}
.sidebar-nav a.ativo {
    border-left: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}
.sidebar-nav i { transition: color .16s var(--fx); }
.menu-secao { letter-spacing: .08em; font-size: .66rem; opacity: .85; }

/* ── 3. Botões: micro-interações ──────────────────────────────────────────── */
.btn {
    border-radius: var(--raio-sm);
    transition: background .16s var(--fx), border-color .16s var(--fx),
                color .16s var(--fx), box-shadow .18s var(--fx),
                transform .12s var(--fx);
}
.btn:hover:not(:disabled)  { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); transition-duration: .06s; }
.btn-primary:hover:not(:disabled) {
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--primary) 45%, transparent);
}
/* Anel de foco só para teclado — clique não ganha contorno. */
.btn:focus-visible, .btn-acao:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-soft), 0 0 0 1px var(--primary);
}
.btn-acao { border-radius: 9px; transition: background .16s var(--fx), color .16s var(--fx), transform .12s var(--fx); }
.btn-acao:hover:not(:disabled) { transform: translateY(-1px); }

/* ── 4. Cards: borda quase invisível + sombra difusa ──────────────────────── */
.card {
    border: 1px solid var(--borda);
    box-shadow: var(--sombra);
    transition: box-shadow .2s var(--fx);
}
.settings-card { box-shadow: var(--sombra); }
.settings-card:hover:not(:disabled) { box-shadow: var(--sombra-md); }

/* ── 5. Inputs: foco com anel suave (em vez de só trocar a borda) ─────────── */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="date"], select, textarea {
    border-radius: var(--raio-sm);
    transition: border-color .16s var(--fx), box-shadow .16s var(--fx), background .16s var(--fx);
}
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ── 6. Tabelas: cabeçalho discreto, hover suave ──────────────────────────── */
.tabela th {
    background: transparent;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-fraco);
    border-bottom: 1px solid var(--borda-forte);
}
.tabela td { transition: background .14s var(--fx); }
.tabela tbody tr:hover { background: var(--bg-hover); }

/* ── 7. Modais: entrada animada (fade + subida + leve escala) ─────────────── */
.modal-overlay { backdrop-filter: blur(3px) saturate(1.05); }
.modal.aberto .modal-overlay { animation: rf-overlay .18s var(--fx) both; }
.modal.aberto .modal-content { animation: rf-modal .24s var(--fx) both; }
.modal-content { border-radius: var(--raio-lg); }
@keyframes rf-overlay { from { opacity: 0; } to { opacity: 1; } }
@keyframes rf-modal {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* ── 8. Toasts (SweetAlert2) ──────────────────────────────────────────────── */
.swal2-toast {
    border-radius: 12px !important;
    box-shadow: var(--sombra-md) !important;
}

/* ── 9. Badges/pills mais redondos ────────────────────────────────────────── */
.badge, .status-pill, .sc-soon, .set-pill { border-radius: 999px; }

/* ── 10. Carregamento sutil ───────────────────────────────────────────────── */
/* Spinner de tabela/módulo: menor e mais quieto (o antigo dominava a tela). */
.td-loading { color: var(--texto-fraco); }
.td-loading i { opacity: .6; }

/* Skeleton shimmer: aplicar .rf-skeleton em blocos placeholder (opt-in). */
.rf-skeleton {
    position: relative; overflow: hidden;
    background: var(--bg-hover); border-radius: var(--raio-sm);
    color: transparent !important; pointer-events: none;
}
.rf-skeleton::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: rf-shimmer 1.4s infinite;
}
:root[data-theme="dark"] .rf-skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
}
@keyframes rf-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Esmaecimento de área durante refresh (opt-in): igual ao padrão do app. */
.rf-atualizando { opacity: .45; pointer-events: none; transition: opacity .25s var(--fx); }

/* ── 11. Navegação SPA ────────────────────────────────────────────────────── */
/* Barra de progresso fina no topo, criada pelo dashboard-shell (#rfProgress).
   width vai a 80% durante o fetch e 100% ao concluir; some com fade. */
#rfProgress {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: var(--primary); z-index: 100001;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 60%, transparent);
    opacity: 0; pointer-events: none;
    transition: width .3s var(--fx), opacity .25s ease;
}
#rfProgress.ativa    { opacity: 1; width: 80%; transition: width 6s cubic-bezier(.08, .6, .2, 1), opacity .1s ease; }
#rfProgress.completa { opacity: 0; width: 100%; }

/* Entrada do conteúdo novo. SÓ entrada: o conteúdo antigo fica na tela até o
   swap (ver regra da casa no topo). */
.conteudo.rf-entrando { animation: rf-entrada .28s var(--fx) both; }
@keyframes rf-entrada {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Nota explicativa sob o título de seção de formulário (ex.: campos do
   morador no cadastro do condomínio). */
.form-section-hint {
    margin: -.2rem 0 .8rem;
    font-size: .8rem;
    color: var(--texto-fraco);
    line-height: 1.45;
    max-width: 62ch;
}

/* ── 12. Scrollbar discreta (WebKit) ──────────────────────────────────────── */
.conteudo::-webkit-scrollbar, .table-responsive::-webkit-scrollbar { width: 8px; height: 8px; }
.conteudo::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb {
    background: var(--borda-forte); border-radius: 99px;
}
.conteudo::-webkit-scrollbar-track, .table-responsive::-webkit-scrollbar-track { background: transparent; }

/* ── 13. Acessibilidade: sem movimento para quem pediu sem movimento ──────── */
@media (prefers-reduced-motion: reduce) {
    .btn, .btn-acao, .conteudo.rf-entrando,
    .modal.aberto .modal-overlay, .modal.aberto .modal-content { animation: none !important; }
    .btn:hover:not(:disabled), .btn-acao:hover:not(:disabled) { transform: none; }
    .rf-skeleton::after { animation: none; }
    #rfProgress { transition: none; }
}

/* ============================================================================
   Fotos de segurança no detalhe da entrega (captura silenciosa de depósito/
   retirada). Miniaturas clicáveis que abrem em lightbox. Adicionado 2026-07.
   ========================================================================== */
.del-photos {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: .5rem 0 1rem;
}
.del-photo {
    margin: 0;
    width: 140px;
    cursor: zoom-in;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--borda, #e9edf3);
    background: var(--fundo-suave, #f8fafc);
    transition: transform .12s ease, box-shadow .12s ease;
}
.del-photo:hover,
.del-photo:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    outline: none;
}
.del-photo-img {
    width: 100%;
    height: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f1b3a;
    color: #9aa8bd;
}
.del-photo figcaption {
    padding: .4rem .55rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--texto, #1a2333);
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.del-photo figcaption span {
    font-weight: 400;
    font-size: .72rem;
    color: var(--texto-fraco, #64748b);
}