/* ============================================================
   CENCIL Financeiro — Design System
   ============================================================ */

:root {
  --primary:      #1e40af;
  --primary-dark: #1e3a8a;
  --primary-light:#dbeafe;
  --success:      #16a34a;
  --danger:       #dc2626;
  --warning:      #d97706;
  --info:         #0891b2;
  --secondary:    #64748b;
  --light:        #f8fafc;
  --dark:         #1e293b;
  --border:       #e2e8f0;
  --sidebar-w:    260px;
  --header-h:     64px;
  --radius:       10px;
  --shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:    0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:    0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#f1f5f9;color:var(--dark);line-height:1.5}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar{
  position:fixed;top:0;left:0;height:100vh;width:var(--sidebar-w);
  background:#0f172a;color:#94a3b8;overflow-y:auto;z-index:100;
  display:flex;flex-direction:column;transition:transform .25s ease
}
.sidebar-logo{
  padding:20px 24px;border-bottom:1px solid #1e293b;
  display:flex;align-items:center;gap:12px
}
.sidebar-logo img{width:36px;height:36px;border-radius:8px}
.sidebar-logo .brand{font-size:1.1rem;font-weight:700;color:#f1f5f9;line-height:1.2}
.sidebar-logo .version{font-size:.72rem;color:#475569}
.sidebar-menu{padding:16px 0;flex:1}
.sidebar-section{padding:8px 24px 4px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#475569}
.sidebar-item{display:flex;align-items:center;gap:10px;padding:10px 24px;font-size:.88rem;color:#94a3b8;text-decoration:none;transition:all .15s}
.sidebar-item:hover,.sidebar-item.active{color:#f1f5f9;background:rgba(255,255,255,.06);border-left:3px solid var(--primary)}
.sidebar-item .icon{font-size:1rem;width:20px;text-align:center;flex-shrink:0}
.sidebar-item.active{color:#93c5fd}
.sidebar-footer{padding:16px 24px;border-top:1px solid #1e293b;font-size:.8rem}
.sidebar-footer a{color:#64748b;text-decoration:none}
.sidebar-footer a:hover{color:#94a3b8}

/* ── TOPBAR ──────────────────────────────────────────────── */
.topbar{
  position:fixed;top:0;left:var(--sidebar-w);right:0;height:var(--header-h);
  background:#fff;border-bottom:1px solid var(--border);z-index:50;
  display:flex;align-items:center;padding:0 24px;gap:16px;
  box-shadow:var(--shadow)
}
.topbar-title{font-size:1rem;font-weight:600;color:var(--dark);flex:1}
.topbar-user{display:flex;align-items:center;gap:10px;cursor:pointer}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}
.topbar-user-info{text-align:right;line-height:1.3}
.topbar-user-info .uname{font-size:.85rem;font-weight:600;color:var(--dark)}
.topbar-user-info .urole{font-size:.72rem;color:var(--secondary)}

/* ── MAIN CONTENT ────────────────────────────────────────── */
.main{margin-left:var(--sidebar-w);padding-top:var(--header-h)}
.content{padding:28px 32px;max-width:1400px}

/* ── PAGE HEADER ─────────────────────────────────────────── */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.page-header h1{font-size:1.4rem;font-weight:700;color:var(--dark)}
.page-header p{font-size:.85rem;color:var(--secondary);margin-top:2px}
.breadcrumb{font-size:.8rem;color:var(--secondary);margin-bottom:6px}
.breadcrumb a{color:var(--primary);text-decoration:none}

/* ── CARDS KPI ───────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-bottom:28px}
.kpi-card{
  background:#fff;border-radius:var(--radius);padding:20px 22px;
  box-shadow:var(--shadow);border:1px solid var(--border);
  display:flex;align-items:flex-start;gap:16px;transition:box-shadow .2s
}
.kpi-card:hover{box-shadow:var(--shadow-md)}
.kpi-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.kpi-icon.blue  {background:#eff6ff;color:var(--primary)}
.kpi-icon.green {background:#f0fdf4;color:var(--success)}
.kpi-icon.red   {background:#fef2f2;color:var(--danger)}
.kpi-icon.orange{background:#fff7ed;color:var(--warning)}
.kpi-icon.cyan  {background:#ecfeff;color:var(--info)}
.kpi-body .label{font-size:.78rem;color:var(--secondary);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.kpi-body .value{font-size:1.4rem;font-weight:700;color:var(--dark);margin:2px 0;line-height:1}
.kpi-body .sub  {font-size:.78rem;color:var(--secondary)}

/* ── DATA TABLE ──────────────────────────────────────────── */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden}
.card-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-header h2{font-size:1rem;font-weight:700;color:var(--dark)}
.card-body{padding:22px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.85rem}
thead th{background:#f8fafc;padding:11px 14px;text-align:left;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--secondary);border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:12px 14px;border-bottom:1px solid #f1f5f9;color:var(--dark);vertical-align:middle}
tbody tr:hover td{background:#f8fafc}
tbody tr:last-child td{border-bottom:none}

/* ── BADGES / STATUS ─────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600;white-space:nowrap}
.badge-pendente{background:#fef3c7;color:#92400e}
.badge-pago    {background:#d1fae5;color:#065f46}
.badge-vencido {background:#fee2e2;color:#991b1b}
.badge-cancelado{background:#f1f5f9;color:#64748b}
.badge-pagar   {background:#fce7f3;color:#9d174d}
.badge-receber {background:#d1fae5;color:#065f46}

/* ── BOTÕES ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:8px;font-size:.85rem;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:all .15s;white-space:nowrap}
.btn-primary  {background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-success  {background:var(--success);color:#fff}
.btn-success:hover{background:#15803d}
.btn-danger   {background:var(--danger);color:#fff}
.btn-danger:hover{background:#b91c1c}
.btn-warning  {background:var(--warning);color:#fff}
.btn-warning:hover{background:#b45309}
.btn-secondary{background:#f1f5f9;color:var(--secondary);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--border)}
.btn-outline  {background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn-outline:hover{background:var(--primary-light)}
.btn-sm{padding:5px 12px;font-size:.78rem}
.btn-icon{padding:7px;border-radius:7px}

/* ── FORMS ───────────────────────────────────────────────── */
.form-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:16px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group label{font-size:.8rem;font-weight:600;color:var(--secondary)}
.form-group input,.form-group select,.form-group textarea{
  padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:.88rem;
  color:var(--dark);background:#fff;transition:border-color .15s;outline:none;width:100%
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,64,175,.1)}
.form-group textarea{resize:vertical;min-height:80px}
.form-hint{font-size:.75rem;color:var(--secondary)}
.form-error{font-size:.75rem;color:var(--danger)}

/* ── FILTROS ─────────────────────────────────────────────── */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:16px 22px;background:#f8fafc;border-bottom:1px solid var(--border)}
.filter-bar .form-group{flex:1;min-width:160px}
.filter-bar label{font-size:.75rem}

/* ── PAGINAÇÃO ───────────────────────────────────────────── */
.pagination{display:flex;align-items:center;justify-content:between;gap:6px;margin-top:16px;flex-wrap:wrap}
.pagination a,.pagination span{padding:6px 12px;border-radius:7px;font-size:.82rem;text-decoration:none;color:var(--secondary);border:1px solid var(--border)}
.pagination a:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}
.pagination .active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}

/* ── ALERTAS ─────────────────────────────────────────────── */
.alert{padding:13px 16px;border-radius:8px;font-size:.85rem;margin-bottom:20px;display:flex;align-items:flex-start;gap:10px;border:1px solid transparent}
.alert-success{background:#d1fae5;color:#065f46;border-color:#a7f3d0}
.alert-danger {background:#fee2e2;color:#991b1b;border-color:#fca5a5}
.alert-warning{background:#fef3c7;color:#92400e;border-color:#fde68a}
.alert-info   {background:#e0f2fe;color:#075985;border-color:#bae6fd}

/* ── MODAL ───────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:12px;width:100%;max-width:620px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-header h3{font-size:1rem;font-weight:700}
.modal-close{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--secondary);padding:4px}
.modal-body{padding:24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}

/* ── LOGIN PAGE ──────────────────────────────────────────── */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f172a 0%,#1e40af 100%);padding:20px}
.login-card{background:#fff;border-radius:16px;padding:40px 44px;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo .logo-icon{width:56px;height:56px;background:var(--primary);border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;margin-bottom:12px}
.login-logo h1{font-size:1.3rem;font-weight:800;color:var(--dark)}
.login-logo p {font-size:.82rem;color:var(--secondary);margin-top:4px}
.login-card .form-group{margin-bottom:16px}

/* ── CHARTS ──────────────────────────────────────────────── */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px;margin-bottom:28px}
.chart-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);padding:20px}
.chart-card h3{font-size:.9rem;font-weight:700;color:var(--dark);margin-bottom:16px}

/* ── VENCIMENTOS URGENTES ────────────────────────────────── */
.urgente-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);gap:10px}
.urgente-item:last-child{border-bottom:none}
.urgente-nome{font-size:.85rem;font-weight:600;color:var(--dark);flex:1}
.urgente-valor{font-size:.85rem;font-weight:700;color:var(--danger)}

/* ── UTILS ───────────────────────────────────────────────── */
.text-right{text-align:right}
.text-center{text-align:center}
.text-muted{color:var(--secondary)}
.text-success{color:var(--success)}
.text-danger{color:var(--danger)}
.text-warning{color:var(--warning)}
.fw-bold{font-weight:700}
.d-flex{display:flex}
.gap-2{gap:8px}
.align-center{align-items:center}
.justify-between{justify-content:space-between}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.hidden{display:none}
.w-full{width:100%}
.divider{height:1px;background:var(--border);margin:16px 0}

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .topbar{left:0}
  .content{padding:20px 16px}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .chart-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .kpi-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .filter-bar{flex-direction:column}
  .login-card{padding:28px 24px}
}

/* ── PRINT ───────────────────────────────────────────────── */
@media print{
  .sidebar,.topbar,.btn,.filter-bar,.pagination{display:none!important}
  .main{margin-left:0;padding-top:0}
  .content{padding:0}
  .card{box-shadow:none;border:1px solid #ddd}
  body{background:#fff}
}