:root{--bg-dark:#0f172a;--card-bg:#1e293bb3;--text-main:#f8fafc;--text-dim:#94a3b8;--success:#10b981;--danger:#ef4444;--accent:#3b82f6;--glass-border:#ffffff1a}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter','Segoe UI',system-ui,sans-serif}
body{background-color:var(--bg-dark);color:var(--text-main);min-height:100vh;overflow-x:hidden;display:block}
#app-container{width:100%;min-height:100vh}
.body-no-scroll{overflow:hidden!important}
.loader-overlay{position:fixed;inset:0;background:#0f172ad9;backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:9999}
.loader-content{text-align:center;color:var(--text-main)}
.spinner{width:50px;height:50px;border:5px solid var(--glass-border);border-top:5px solid var(--success);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 15px}
@keyframes spin {
to{transform:rotate(360deg)}
}
#login-screen{position:fixed;inset:0;background:var(--bg-dark);z-index:999;display:flex;justify-content:center;align-items:center;padding:20px}
.login-card{background:var(--card-bg);padding:40px;border-radius:24px;border:1px solid var(--glass-border);width:100%;max-width:400px;text-align:center;transition:transform .3s ease}
.shake{animation:shakeAnim .4s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shakeAnim {
10%,90%{transform:translate3d(-1px,0,0)}
20%,80%{transform:translate3d(2px,0,0)}
30%,50%,70%{transform:translate3d(-4px,0,0)}
40%,60%{transform:translate3d(4px,0,0)}
}
.main-content{margin-left:260px;padding:40px;width:calc(100% - 260px);min-height:100vh;position:relative}
.header-flex{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;gap:15px}
.header h1{font-size:1.8rem}
.header p{color:var(--text-dim)}
.month-filter{background:var(--card-bg);border:1px solid var(--glass-border);color:#fff;padding:10px 15px;border-radius:12px;outline:none;cursor:pointer;font-weight:600}
.glass-panel{background:var(--card-bg);backdrop-filter:blur(12px);padding:30px;border-radius:24px;border:1px solid var(--glass-border)}
.panel-title{margin-bottom:25px;font-size:1.1rem;display:flex;align-items:center;gap:10px}
.form-group{display:flex;flex-direction:column;gap:15px}
.input-box{background:#0f172a80;border:1px solid var(--glass-border);padding:14px;border-radius:12px;color:#fff;outline:none;width:100%;transition:all .2s ease}
.input-box:focus{border-color:var(--accent);box-shadow:0 0 0 4px #3b82f633}
.toggle-password:hover{color:var(--text-main)!important}
button.btn-save{background:var(--success);color:#fff;padding:15px;border:none;border-radius:12px;font-weight:700;cursor:pointer;transition:all .2s}
button.btn-save:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px #10b98133}
button.btn-save:disabled{opacity:.6;cursor:not-allowed}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0f172ae6;backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}
.modal-content{background:var(--bg-dark);border:1px solid var(--glass-border);padding:30px;border-radius:24px;width:100%;max-width:400px;max-height:90vh;overflow-y:auto;text-align:center;box-shadow:0 25px 50px -12px #00000080}
.modal-actions-row{display:flex;justify-content:center;gap:20px;margin-top:15px}
.btn-icon-round{width:50px;height:50px;border-radius:50%;border:none;display:center;justify-content:center;align-items:center;font-size:1.2rem;color:#fff;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #0003}
.btn-icon-round:hover{transform:translateY(-3px);filter:brightness(1.2)}
.btn-confirm{background:var(--success)}
.btn-cancel{background:#ff4545}
table{width:100%;border-collapse:collapse;margin-top:15px}
th{text-align:left;color:var(--text-dim);font-size:.85rem;text-transform:uppercase;padding:15px;border-bottom:1px solid var(--glass-border)}
td{padding:15px;border-bottom:1px solid var(--glass-border);font-size:.95rem;vertical-align:middle}
.actions{display:flex;gap:12px;align-items:center}
.btn-action{border:none;cursor:pointer;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);font-size:1.1rem}
.btn-edit{background:#3b82f626;color:var(--accent)}
.btn-edit:hover{background:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f64d}
.btn-delete{background:#ef444426;color:var(--danger)}
.btn-delete:hover{background:var(--danger);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #ef44444d}

/* Paginação - Correção para evitar que os botões se movam */
.pagination-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--glass-border);
    flex-wrap: wrap;
}

/* Fix para o texto da página não empurrar os botões */
.pagination-footer span[id$="-page-info"] {
    min-width: 160px;
    text-align: center;
    font-weight: 600;
    color: var(--text-dim);
    display: inline-block;
    user-select: none;
    font-variant-numeric: tabular-nums;
}

/* Toast Notifications Estilizado */
.toast-container {
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    background: #1e293bf2;
    backdrop-filter: blur(15px);
    color: var(--text-main);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.4);
    min-width: 320px;
    max-width: 450px;
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    animation: toastSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: all 0.3s ease;
}

.toast-body {
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.toast.success { border-left: 5px solid var(--success); }
.toast.error { border-left: 5px solid var(--danger); }
.toast.info { border-left: 5px solid var(--accent); }
.toast.warning { border-left: 5px solid #f59e0b; }

.toast i { font-size: 1.3rem; flex-shrink: 0; }
.toast.success i { color: var(--success); }
.toast.error i { color: var(--danger); }
.toast.info i { color: var(--accent); }
.toast.warning i { color: #f59e0b; }

.toast span { font-size: 0.9rem; font-weight: 500; line-height: 1.4; }

.toast-close {
    margin-left: 10px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.toast-close:hover { opacity: 1; }

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
}

.toast.success .toast-progress { background: var(--success); }
.toast.error .toast-progress { background: var(--danger); }
.toast.info .toast-progress { background: var(--accent); }
.toast.warning .toast-progress { background: #f59e0b; }

@keyframes toastSlideIn {
    from { transform: translateX(110%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast.fade-out {
    transform: translateX(110%);
    opacity: 0;
}

@media (max-width:768px) {
.main-content{margin-left:0;width:100%;padding:10px;padding-bottom:100px}
.header-flex{flex-direction:column;align-items:center;text-align:center;gap:10px;margin-bottom:15px}
.header h1{font-size:1.3rem}
.header p{font-size:.8rem}
.glass-panel{padding:12px;border-radius:16px}
.panel-title{margin-bottom:10px;font-size:.95rem}
.input-box{padding:10px;font-size:.85rem;border-radius:8px}
button.btn-save{padding:12px;font-size:.85rem;border-radius:8px}
thead{display:none}
.actions{display:flex;gap:8px;width:100%;justify-content:center}
.btn-action{flex:1;max-width:110px;height:34px;font-size:.85rem;border-radius:8px}
.toast-container { top: 20px; right: 10px; left: 10px; align-items: center; }
.toast { min-width: 0; width: 100%; }
.pagination-footer span[id$="-page-info"] { min-width: 120px; font-size: 0.8rem; }
}