:root {
    --azul: #4f46e5;
    --azul-claro: #6366f1;
    --azul-escuro: #3730a3;
    --verde: #16a34a;
    --verde-suave: #ecfdf5;
    --vermelho: #dc2626;
    --vermelho-suave: #fef2f2;
    --amarelo: #d97706;
    --cinza-bg: #f4f5fb;
    --cinza-card: #ffffff;
    --cinza-borda: #e5e7f0;
    --texto: #1e2233;
    --texto-suave: #6b7280;
    --radius: 14px;
    --radius-sm: 8px;
    --sombra: 0 1px 3px rgba(30, 34, 51, 0.06), 0 8px 24px -12px rgba(30, 34, 51, 0.12);
    --sombra-hover: 0 4px 10px rgba(30, 34, 51, 0.08), 0 16px 32px -16px rgba(30, 34, 51, 0.18);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--cinza-bg);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}

header.topbar {
    background: linear-gradient(120deg, var(--azul-escuro), var(--azul) 60%, var(--azul-claro));
    color: #fff;
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 2px 16px rgba(79, 70, 229, 0.25);
    position: sticky;
    top: 0;
    z-index: 10;
}

header.topbar h1 {
    font-size: 1.25rem;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}

nav.menu {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

nav.menu a {
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    font-size: 0.88rem;
    font-weight: 500;
    transition: background .15s, color .15s, transform .1s;
    white-space: nowrap;
}

nav.menu a:hover { background: rgba(255, 255, 255, 0.22); }

nav.menu a.ativo {
    background: #fff;
    color: var(--azul-escuro);
    font-weight: 700;
}

main {
    max-width: 1240px;
    margin: 28px auto;
    padding: 0 20px 70px;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.card {
    background: var(--cinza-card);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: var(--sombra);
    transition: transform .15s, box-shadow .15s;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--azul);
}

.card.saldo::before { background: var(--azul); }
.card.faturamento::before { background: var(--verde); }
.card.saidas::before { background: var(--vermelho); }

.card:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }

.card .rotulo {
    font-size: 0.82rem;
    color: var(--texto-suave);
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.card .valor {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.card.saldo .valor { color: var(--azul); }
.card.faturamento .valor { color: var(--verde); }
.card.saidas .valor { color: var(--vermelho); }

.painel {
    background: var(--cinza-card);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--radius);
    padding: 26px;
    margin-bottom: 24px;
    box-shadow: var(--sombra);
}

.painel h2 {
    margin-top: 0;
    font-size: 1.1rem;
    font-weight: 700;
    border-bottom: 1px solid var(--cinza-borda);
    padding-bottom: 14px;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

form.grid-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    align-items: end;
}

form.grid-form .campo-full {
    grid-column: 1 / -1;
}

label {
    display: block;
    font-size: 0.8rem;
    color: var(--texto-suave);
    margin-bottom: 5px;
    font-weight: 600;
}

input, select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--cinza-borda);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
    background: #fff;
    color: var(--texto);
    transition: border-color .15s, box-shadow .15s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--azul-claro);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

textarea { resize: vertical; min-height: 60px; }

button {
    cursor: pointer;
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    font-size: 0.88rem;
    font-weight: 700;
    background: var(--azul);
    color: #fff;
    transition: background .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
}

button:hover { background: var(--azul-escuro); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button.secundario { background: #64748b; box-shadow: none; }
button.secundario:hover { background: #475569; }
button.perigo { background: var(--vermelho); box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25); }
button.perigo:hover { background: #b91c1c; }
button.sucesso { background: var(--verde); box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25); }
button.sucesso:hover { background: #15803d; }

.filtros {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.filtros > div { flex: 1; min-width: 150px; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

thead th {
    text-align: left;
    background: #f8f9fd;
    padding: 12px 10px;
    border-bottom: 2px solid var(--cinza-borda);
    color: var(--texto-suave);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

thead th:first-child { border-top-left-radius: var(--radius-sm); }
thead th:last-child { border-top-right-radius: var(--radius-sm); }

tbody td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--cinza-borda);
}

tbody tr:hover { background: #f8f9fd; }
tbody tr:last-child td { border-bottom: none; }

.tabela-scroll { overflow-x: auto; border-radius: var(--radius-sm); }

.rodape-supra {
    text-align: center;
    padding: 24px 16px 8px;
    font-size: 0.78rem;
    color: var(--texto-suave);
}
.rodape-supra a {
    color: var(--azul);
    text-decoration: none;
    font-weight: 600;
}
.rodape-supra a:hover { text-decoration: underline; }

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.badge.entrada, .badge.pago, .badge.pronto { background: var(--verde-suave); color: #166534; }
.badge.saida, .badge.pendente { background: var(--vermelho-suave); color: #991b1b; }
.badge.aguardando_orcamento { background: #fef3c7; color: #92400e; }
.badge.em_manutencao { background: #e0e7ff; color: #3730a3; }
.badge.entregue { background: #e5e7f0; color: #334155; }

.estoque-baixo { color: var(--vermelho); font-weight: 700; }

.acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.acoes button { padding: 7px 12px; font-size: 0.78rem; }

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: #c7cadb; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Modais customizados (substituem alert/confirm/prompt) ---------- */
.overlay-modal {
    position: fixed;
    inset: 0;
    background: rgba(30, 34, 51, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: overlay-fade .15s ease-out;
    padding: 20px;
}

@keyframes overlay-fade { from { opacity: 0; } to { opacity: 1; } }

.modal-caixa {
    background: #fff;
    border-radius: var(--radius);
    padding: 28px 26px 22px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 24px 64px -12px rgba(30, 34, 51, 0.4);
    text-align: center;
    animation: modal-pop .18s ease-out;
}

@keyframes modal-pop {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-icone {
    font-size: 2rem;
    margin-bottom: 10px;
}

.modal-mensagem {
    font-size: 0.95rem;
    color: var(--texto);
    line-height: 1.5;
    margin: 0 0 20px;
}

.modal-select, .modal-input {
    margin-bottom: 20px;
}

.modal-acoes {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.modal-acoes button { flex: 1; }

.modal-sucesso .modal-mensagem { color: #166534; }
.modal-erro .modal-mensagem { color: #991b1b; }

@media (max-width: 640px) {
    header.topbar { flex-direction: column; align-items: flex-start; padding: 14px 18px; }
    main { margin: 18px auto; padding: 0 14px 50px; }
    .painel { padding: 18px; }
    table, thead, tbody, th, td, tr { font-size: 0.78rem; }
}