body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f7f6f2;color:#24211b}
a{text-decoration:none}
*{box-sizing:border-box}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{width:100%;max-width:420px;background:#fbfaf7;border:1px solid #d9d4cc;border-radius:10px;padding:24px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.login-card h1{margin:0 0 10px;font-size:24px}
.login-card p{margin:0 0 20px;color:#716e68}

.field{margin-bottom:14px}
.field label{display:block;margin-bottom:6px;font-size:14px;font-weight:bold}
.field input,
.field select,
.field textarea{width:100%;padding:10px;border:1px solid #d9d4cc;border-radius:6px;background:#fff;color:#24211b}

.btn{display:inline-block;background:#0f766e;color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer}
.btn:hover{background:#0b5e58}

.error{background:#f7d9dd;color:#991b1b;padding:10px;border-radius:6px;margin-bottom:14px}

.layout{display:flex;min-height:100vh}
.sidebar{width:250px;background:#fbfaf7;color:#24211b;padding:20px;border-right:1px solid #d9d4cc}
.brand{font-size:22px;font-weight:bold;margin-bottom:20px}
.brand small{display:block;font-size:12px;color:#716e68;margin-top:4px}

.menu-group{margin-top:20px}
.menu-title{font-size:11px;text-transform:uppercase;color:#716e68;margin-bottom:8px}
.menu-item{display:block;padding:10px 12px;color:#24211b;border-radius:6px;margin-bottom:6px}
.menu-item:hover,.menu-item.active{background:#f1eee9}

.sidebar a{display:block;padding:10px 12px;color:#24211b;border-radius:6px;margin-bottom:6px}
.sidebar a:hover,.sidebar a.active{background:#f1eee9}

.content{flex:1;padding:24px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;background:#fbfaf7;border:1px solid #d9d4cc;padding:14px 18px;border-radius:10px}
.page-title{font-size:24px;font-weight:bold}
.user-box{font-size:14px;color:#716e68}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:20px}
.card{background:#fbfaf7;border:1px solid #d9d4cc;border-radius:10px;padding:18px}
.card .label{font-size:13px;color:#716e68;margin-bottom:8px}
.card .value{font-size:28px;font-weight:bold}

.panel{background:#fbfaf7;border:1px solid #d9d4cc;border-radius:10px;padding:18px;margin-bottom:20px}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #e5e0d8;text-align:left;font-size:14px}
.table th{color:#716e68}

.tag{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px}
.tag.green{background:#d8ead1;color:#285614}
.tag.yellow{background:#efe2bf;color:#7d5600}
.tag.red{background:#f7d9dd;color:#7a2231}

.actions a{margin-right:10px;color:#0f766e}

.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:16px}

.alert{padding:14px 16px;border-radius:12px;margin-bottom:16px}
.alert.error{background:#f7d9dd;color:#7a2231}
.alert.success{background:#d8ead1;color:#285614}

/* EXTRATO */
.statement-summary{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:18px;
}

.statement-opening,
.statement-card{
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:10px;
    padding:16px;
}

.statement-filter{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:end;
}

.statement-table{
    width:100%;
    border-collapse:collapse;
}

.statement-table th,
.statement-table td{
    padding:10px 12px;
    border-bottom:1px solid #ececec;
    font-size:14px;
    text-align:left;
    vertical-align:middle;
}

.statement-table thead th{
    background:#f8fafc;
    color:#333;
    font-weight:700;
    white-space:nowrap;
}

.statement-table tbody tr:hover{
    background:#fafafa;
}

.statement-table td:nth-child(1){
    white-space:nowrap;
    width:160px;
}

.statement-table td:nth-child(3),
.statement-table td:nth-child(4),
.statement-table th:nth-child(3),
.statement-table th:nth-child(4){
    text-align:right;
    white-space:nowrap;
    width:170px;
}

.statement-table td:last-child,
.statement-table th:last-child{
    text-align:right;
}

.statement-balance-row{
    background:#f8fafc;
    font-weight:600;
}

.credit-value{
    color:#111;
    font-weight:700;
}

.debit-value{
    color:#c62828;
    font-weight:700;
}

.statement-muted{
    font-size:12px;
    color:#666;
}

.statement-title{
    margin:0 0 12px;
}

.statement-empty{
    text-align:center;
    color:#666;
    padding:24px 12px;
}

/* RESPONSIVO */
@media (max-width:1000px){
    .statement-summary{
        grid-template-columns:1fr;
    }
}

@media(max-width:900px){
    .layout{display:block}
    .sidebar{width:auto;border-right:0;border-bottom:1px solid #d9d4cc}
    .grid-2{grid-template-columns:1fr}
}

/* IMPRESSÃO / PDF */
@media print{
    @page{
        size:A4 portrait;
        margin:12mm;
    }

    html,
    body{
        background:#fff !important;
        color:#000 !important;
    }

    .sidebar,
    .topbar,
    .tabs,
    .toolbar,
    .btn,
    .menu-group,
    form,
    .alert{
        display:none !important;
    }

    .content{
        margin:0 !important;
        padding:0 !important;
    }

    .layout,
    .content{
        display:block !important;
        width:100% !important;
    }

    .table-wrap,
    .card,
    .statement-card,
    .statement-opening{
        border:none !important;
        box-shadow:none !important;
        background:#fff !important;
    }

    .statement-summary{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:10px;
        margin:0 0 16px 0;
    }

    .statement-table{
        width:100%;
        border-collapse:collapse;
    }

    .statement-table th,
    .statement-table td{
        border:1px solid #bbb !important;
        padding:7px 8px !important;
        font-size:11px !important;
        color:#000 !important;
    }

    .statement-table thead{
        display:table-header-group;
    }

    .statement-table tr,
    .statement-table td,
    .statement-table th{
        page-break-inside:avoid;
    }

    .statement-table tbody tr:hover{
        background:transparent !important;
    }

    .credit-value,
    .debit-value{
        color:#000 !important;
        font-weight:700 !important;
    }

    a{
        color:#000 !important;
        text-decoration:none !important;
    }
}