/* Sertaneja Conciliação — Design System */
:root{
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e4e8f0;
  --text: #1b2333;
  --text-muted: #6b7488;
  --primary: #2f5ce0;
  --primary-dark: #1f3fa8;
  --primary-soft: #e8edfd;
  --success: #16a34a;
  --success-soft: #e7f8ee;
  --warning: #d97706;
  --warning-soft: #fef3e0;
  --danger: #dc2626;
  --danger-soft: #fdeaea;
  --accent: #7c3aed;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20,25,45,.04), 0 8px 24px rgba(20,25,45,.06);
  --sidebar-w: 250px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
a{color:inherit; text-decoration:none}
.muted{color:var(--text-muted)}
.small{font-size:12px}
code{background:var(--surface-2); padding:2px 6px; border-radius:6px}

/* ---------- Layout ---------- */
.app-shell{display:flex; min-height:100vh}
.sidebar{
  width: var(--sidebar-w); flex-shrink:0; background: #10152a; color:#c7cde3;
  padding: 20px 14px; position:sticky; top:0; height:100vh; overflow-y:auto;
  transition: margin-left .2s ease;
}
.sidebar.collapsed{ margin-left: calc(-1 * var(--sidebar-w)); }
.sidebar-brand{display:flex; align-items:center; gap:10px; padding: 6px 8px 22px}
.brand-mark{
  width:36px; height:36px; border-radius:9px; background: linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
}
.brand-name{font-weight:700; color:#fff; font-size:14px; line-height:1.2}
.brand-name small{font-weight:400; color:#8b93b3}

.sidebar-nav{display:flex; flex-direction:column; gap:2px}
.sidebar-nav a{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:#c7cde3; font-size:13.5px;
}
.sidebar-nav a svg{width:16px; height:16px; fill:currentColor; opacity:.8}
.sidebar-nav a:hover{background:#1a2140; color:#fff}
.sidebar-nav a.active{background: var(--primary); color:#fff}
.nav-group-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:#5c6488; margin:14px 10px 4px}

.main-col{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  height:60px; background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:0 20px; position:sticky; top:0; z-index:10;
}
.topbar-title{font-weight:700; font-size:16px}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.user-chip{background:var(--surface-2); padding:5px 12px; border-radius:20px; font-size:12.5px; font-weight:600}
.btn-icon{background:none; border:none; cursor:pointer; padding:6px; border-radius:8px; display:flex}
.btn-icon svg{width:20px; height:20px; fill:var(--text)}
.btn-icon:hover{background:var(--surface-2)}
.content{padding:22px 26px 60px; max-width:1440px; width:100%; margin:0 auto}

/* ---------- Buttons ---------- */
.btn-primary, .btn-ghost{
  border:none; border-radius:9px; padding:9px 16px; font-size:13.5px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-primary:disabled, .btn-ghost:disabled{opacity:.5; cursor:not-allowed}
.btn-ghost:disabled:hover{background:var(--surface)}
.btn-ghost{background:var(--surface); color:var(--text); border:1px solid var(--border)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{padding:6px 11px; font-size:12.5px}
.btn-xs{padding:3px 8px; font-size:11.5px; margin-left:6px}
.btn-block{width:100%; justify-content:center}
.link{color:var(--primary); font-weight:600; margin-left:8px}

/* ---------- Page header ---------- */
.page-header{margin-bottom:18px}
.page-header h1{margin:0 0 4px; font-size:22px}
.page-header-row{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.page-header-actions{display:flex; gap:8px}

/* ---------- Cards ---------- */
.card{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden}
.card-header{padding:14px 18px; border-bottom:1px solid var(--border); font-weight:700; font-size:13.5px}
.card-body{padding:18px}

/* ---------- KPI grid ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px}
.kpi-card{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px}
.kpi-label{font-size:12px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em}
.kpi-value{font-size:22px; font-weight:800; margin-top:6px}
.kpi-success .kpi-value{color:var(--success)}
.kpi-warning .kpi-value{color:var(--warning)}
.kpi-accent{background:linear-gradient(135deg,var(--primary-soft),#fff)}
.kpi-accent .kpi-value{color:var(--primary-dark)}

.chart-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}

/* ---------- Tables ---------- */
.table-responsive{overflow-x:auto}
.data-table{width:100%; border-collapse:collapse; font-size:13px; min-width:720px}
.data-table th{
  text-align:left; padding:10px 14px; background:var(--surface-2); color:var(--text-muted);
  font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.data-table td{padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap}
.data-table tbody tr:hover{background:var(--surface-2)}
.clickable-row{cursor:pointer}
.empty-state{text-align:center; color:var(--text-muted); padding:36px !important; white-space:normal}

/* ---------- Badges ---------- */
.badge{padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700; white-space:nowrap}
.badge-Conciliado{background:var(--success-soft); color:var(--success)}
.badge-inactive{background:var(--surface-2); color:var(--text-muted)}
.badge-Divergência,
.badge-Erro-de-processamento{background:var(--danger-soft); color:var(--danger)}
[class*="badge-Não"],[class*="badge-Cidade"],[class*="badge-Erro"],[class*="badge-Comissão"],[class*="badge-Impostos"]{background:var(--warning-soft); color:var(--warning)}

/* ---------- Filters ---------- */
.filters-bar{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.filters-bar input, .filters-bar select{
  padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:var(--surface);
}

/* ---------- Alerts / Toasts ---------- */
.alert{border-radius:10px; padding:12px 16px; margin-bottom:16px; font-size:13px}
.alert-warning{background:var(--warning-soft); color:#8a5a06}
.alert-danger{background:var(--danger-soft); color:#a11414}
.alert ul{margin:6px 0 0; padding-left:18px}
.toast-root{position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:999}
.toast{background:#1b2333; color:#fff; padding:12px 16px; border-radius:9px; font-size:13px; box-shadow:var(--shadow); min-width:220px}
.toast.success{background:var(--success)}
.toast.error{background:var(--danger)}

/* ---------- Auth ---------- */
.auth-body{display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#0e1330,#1f2c66)}
.auth-card{background:#fff; padding:34px 32px; border-radius:16px; width:360px; box-shadow:0 20px 60px rgba(0,0,0,.35)}
.auth-brand{display:flex; align-items:center; gap:12px; margin-bottom:22px}
.auth-form{display:flex; flex-direction:column; gap:14px}
.auth-form label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-muted)}
.auth-form input{padding:10px 12px; border:1px solid var(--border); border-radius:9px; font-size:14px}

/* ---------- Import / dropzones ---------- */
.upload-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.dropzone{
  border:2px dashed var(--border); border-radius:var(--radius); padding:28px 14px; text-align:center; cursor:pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.dragover{border-color:var(--primary); background:var(--primary-soft)}
.dropzone.filled{border-style:solid; border-color:var(--success); background:var(--success-soft)}
.dropzone-icon{font-size:28px}
.dropzone-title{font-weight:700; margin-top:6px; letter-spacing:.03em}
.dropzone-hint{font-size:12px; color:var(--text-muted); margin-top:4px}
.dropzone-filename{font-size:12.5px; font-weight:600; margin-top:8px; color:var(--success); word-break:break-all}
.upload-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px}

.progress-track{height:10px; background:var(--surface-2); border-radius:20px; overflow:hidden; margin:14px 0}
.progress-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--primary),var(--accent)); transition:width .3s}
.checklist{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.checklist li{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-muted)}
.checklist li .dot{width:18px; height:18px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px}
.checklist li.done{color:var(--text)}
.checklist li.done .dot{background:var(--success); border-color:var(--success); color:#fff}
.checklist li.active .dot{border-color:var(--primary)}
.checklist li.error .dot{background:var(--danger); border-color:var(--danger); color:#fff}
.text-danger{color:var(--danger)}

/* ---------- Modal / Drawer ---------- */
.modal-backdrop, .drawer-backdrop{
  position:fixed; inset:0; background:rgba(15,20,40,.45); display:flex; align-items:center; justify-content:center; z-index:100;
}
.modal{background:#fff; border-radius:14px; padding:22px 24px; width:380px; box-shadow:var(--shadow)}
.modal h3{margin-top:0}
.modal form{display:flex; flex-direction:column; gap:12px}
.modal label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-muted)}
.modal input[type=text],.modal input[type=number]{padding:9px 11px; border:1px solid var(--border); border-radius:8px; font-size:13.5px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.checkbox-row{flex-direction:row !important; align-items:center; gap:8px !important}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:6px}

.drawer-backdrop{justify-content:flex-end}
.drawer{background:#fff; width:420px; max-width:92vw; height:100vh; padding:22px 24px; overflow-y:auto; box-shadow:-10px 0 30px rgba(0,0,0,.15)}
.drawer-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.detail-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:13.5px}
.detail-row .k{color:var(--text-muted)}
.detail-row .v{font-weight:600; text-align:right}

/* ---------- Pagination ---------- */
.pagination{display:flex; gap:6px; padding:14px 18px; flex-wrap:wrap}
.pagination a{padding:6px 11px; border-radius:7px; border:1px solid var(--border); font-size:12.5px}
.pagination a.active{background:var(--primary); color:#fff; border-color:var(--primary)}

@media (max-width: 980px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .chart-grid{grid-template-columns:1fr}
  .upload-grid{grid-template-columns:1fr}
  .sidebar{position:fixed; z-index:50; margin-left:calc(-1 * var(--sidebar-w))}
  .sidebar.open{margin-left:0}
}

/* ---------- Trava de acesso (mesmo padrão visual dos outros dashboards) ---------- */
.auth-overlay{
  position:fixed; inset:0; z-index:3000; background:var(--bg);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth-overlay[hidden]{display:none}
.auth-box{
  width:100%; max-width:340px; text-align:center;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:32px 28px;
}
.auth-logo{
  width:48px; height:48px; margin:0 auto 14px; border-radius:10px;
  background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
}
.auth-box h1{margin:0 0 6px; font-size:17px; font-weight:800; color:var(--text)}
.auth-box p{margin:0 0 18px; font-size:13px; color:var(--text-muted)}
.auth-box form{display:flex; flex-direction:column; gap:10px}
.auth-box input[type=password]{
  padding:10px 12px; border:1px solid var(--border); border-radius:8px;
  background:var(--bg); color:var(--text); font-size:14px; text-align:center;
}
.auth-box input[type=password]:focus{
  outline:2px solid var(--primary-soft); outline-offset:1px; border-color:var(--primary);
}
.auth-box button{
  padding:10px 12px; border:none; border-radius:8px; background:var(--primary);
  color:#fff; font-size:14px; font-weight:700; cursor:pointer;
}
.auth-box button:hover{filter:brightness(1.08)}
.auth-error{color:var(--danger); font-size:12.5px; margin:12px 0 0}