:root {
  --ink: #172033;
  --muted: #667085;
  --line: #e4e7ec;
  --bg: #f6f8fb;
  --panel: #ffffff;
  --primary: #1769aa;
  --accent: #168a6f;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { text-decoration: none; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { background: #111827; color: #fff; padding: 22px 16px; position: sticky; top: 0; height: 100vh; }
.brand { font-size: 21px; font-weight: 800; margin-bottom: 24px; letter-spacing: .04em; }
.sidebar nav { display: grid; gap: 5px; }
.sidebar a { color: #d1d5db; padding: 11px 12px; border-radius: 7px; }
.sidebar a:hover { color: #fff; background: rgba(255,255,255,.1); }
.main { padding: 24px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; }
.topbar h1 { font-size: 26px; margin: 0; font-weight: 800; }
.userbox { color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.userbox span { border: 1px solid var(--line); padding: 3px 8px; border-radius: 999px; background: #fff; color: var(--ink); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px; margin-bottom: 18px; box-shadow: 0 8px 24px rgba(16,24,40,.04); }
.panel h2 { font-size: 18px; margin: 0 0 14px; font-weight: 750; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.metric { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.metric span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 7px; }
.metric strong { font-size: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; align-items: end; }
.form-inline, .filters { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.form-label { width: 100%; font-weight: 600; color: #344054; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-outline-success { color: var(--accent); border-color: var(--accent); }
.empty { color: var(--muted); margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.critical-actions { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(5, auto); gap: 8px; align-items: center; margin-bottom: 12px; }
.mini-form { display: contents; }
.mini-form input { width: 92px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; }
.payroll-panel { overflow: hidden; border-radius:18px; padding:22px; background:#fff; }
.payroll-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid #edf1f7; }
.payroll-title-group { display:flex; align-items:center; gap:14px; }
.payroll-doc-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:14px; color:#fff; font-size:28px; background:linear-gradient(135deg,#60a5fa,#2563eb); box-shadow:0 12px 26px rgba(37,99,235,.26); }
.payroll-title-line { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.payroll-header h2 { margin:0; font-size:30px; color:#172033; font-weight:900; letter-spacing:-.03em; }
.payroll-subtitle { margin-top:5px; color:#667085; font-weight:700; }
.payroll-reference { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:#667085; background:#fff; box-shadow:0 8px 22px rgba(16,24,40,.04); }
.payroll-reference i, .payroll-reference strong { color:#1d4ed8; }
.payroll-toolbar { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; margin-bottom:18px; }
.payroll-print-month { background:#2563eb; color:#fff; border:0; border-radius:8px; padding:13px 18px; font-weight:800; box-shadow:0 10px 20px rgba(37,99,235,.22); }
.payroll-print-month:hover { color:#fff; background:#1d4ed8; transform:translateY(-1px); }
.payroll-critical-actions { display:grid; grid-template-columns:minmax(280px,1fr) repeat(4,auto); gap:12px; align-items:center; }
.payroll-critical-actions .form-control { height:44px; border-radius:8px; }
.payroll-summary-cards { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:18px; margin-bottom:22px; }
.payroll-summary-card { min-height:104px; display:flex; align-items:center; gap:16px; border:1px solid var(--line); border-radius:12px; padding:18px; background:#fff; box-shadow:0 12px 28px rgba(16,24,40,.05); }
.payroll-summary-card span { display:block; color:#344054; font-size:14px; margin-bottom:8px; }
.payroll-summary-card strong { display:block; color:#172033; font-size:20px; font-weight:900; }
.payroll-summary-card small { display:block; color:#344054; font-size:13px; margin-top:4px; }
.summary-icon { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:12px; font-size:24px; }
.summary-blue .summary-icon { color:#2563eb; background:#dbeafe; }
.summary-purple .summary-icon { color:#9333ea; background:#f3e8ff; }
.summary-green .summary-icon { color:#059669; background:#dcfce7; }
.summary-orange .summary-icon { color:#ea580c; background:#ffedd5; }
.summary-red .summary-icon { color:#e11d48; background:#ffe4e6; }
.payroll-wrap { border:1px solid var(--line); border-radius:12px; overflow:auto; background:#fff; }
.payroll-table { min-width: 1780px; margin-bottom:0; border-collapse:separate; border-spacing:0; }
.payroll-table th { background:#fbfcfe; vertical-align:bottom; white-space:nowrap; font-weight:900; color:#172033; padding:20px 14px; border-bottom:1px solid #e2e8f0; }
.payroll-table .th-sub { display:block; font-size:11px; margin-top:3px; text-transform:none; }
.payroll-table .form-control { min-width: 112px; padding: 7px 4px; border-radius:8px; border-color:transparent; background:transparent; transition:.18s ease; font-weight:800; }
.payroll-table .form-control:hover { background:#f8fafc; border-color:#e2e8f0; }
.payroll-table .form-control:focus { background:#fff; border-color:#93c5fd; box-shadow:0 0 0 .18rem rgba(37,99,235,.14); }
.payroll-table td { vertical-align: middle; padding:14px 12px; border-bottom:1px solid #e8edf3; }
.payroll-table tbody tr:last-child td { border-bottom:0; }
.payroll-table [data-payroll-liquid], .liquid-value { white-space: nowrap; color: #1d4ed8; font-weight:900; }
.money-cell { white-space:nowrap; font-weight:700; }
.employee-cell { min-width:240px; font-weight:750; display:flex; align-items:center; gap:12px; }
.payroll-avatar { width:34px; height:34px; display:inline-grid; place-items:center; border-radius:50%; color:#6d28d9; background:#f3e8ff; font-weight:900; }
.payroll-table tbody tr:nth-child(2n) .payroll-avatar { color:#2563eb; background:#dbeafe; }
.payroll-table tbody tr:nth-child(3n) .payroll-avatar { color:#c2410c; background:#ffedd5; }
.payroll-table tbody tr:nth-child(5n) .payroll-avatar { color:#047857; background:#dcfce7; }
.increment, .payroll-table .increment { color:#15803d; font-weight:750; }
.discount, .payroll-table .discount-input { color:#dc2626; font-weight:750; }
.payroll-status { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:6px 11px; font-size:12px; font-weight:850; text-transform:uppercase; }
.payroll-status.status-pendente { color:#ea580c; background:#ffedd5; }
.payroll-status.status-pago, .payroll-status.status-paga, .payroll-status.status-conferida, .payroll-status.status-calculada { color:#047857; background:#dcfce7; }
.payroll-status.status-cancelado, .payroll-status.status-cancelada { color:#be123c; background:#ffe4e6; }
.payroll-status.status-fechada { color:#1d4ed8; background:#dbeafe; }
.payroll-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; align-items:center; }
.btn-pay-save, .btn-pay-pay, .btn-pay-receipt, .btn-pay-print { border:0; transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease; font-weight:750; }
.btn-pay-save { background:#2563eb; color:#fff; }
.btn-pay-pay { background:#16a34a; color:#fff; }
.btn-pay-receipt { background:#fff; color:#667085; border:1px solid #98a2b3; }
.btn-pay-print { background:#fff; color:#2563eb; border:1px solid #60a5fa; }
.btn-pay-save:hover, .btn-pay-pay:hover, .btn-pay-receipt:hover, .btn-pay-print:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(15,23,42,.14); opacity:.95; }
.payroll-totals { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)) 1.25fr; gap:0; margin-top:10px; border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.payroll-total-card { border-right:1px solid var(--line); padding:14px 12px; background:#fff; text-align:center; box-shadow:none; }
.payroll-total-card:last-child { border-right:0; border:1px solid #60a5fa; border-radius:8px; margin:-1px; background:linear-gradient(180deg,#eff6ff,#fff); }
.payroll-total-card span { display:block; color:#667085; font-size:12px; margin-bottom:6px; font-weight:800; }
.payroll-total-card strong { font-size:16px; }
.payroll-total-card:last-child span { color:#1d4ed8; font-size:17px; }
.payroll-total-card:last-child strong { font-size:22px; }
.total-increment strong { color:#15803d; }
.total-discount strong { color:#dc2626; }
.total-liquid strong { color:#1d4ed8; }
.payroll-notes { display:grid; grid-template-columns:1fr; gap:8px; margin-top:18px; color:#344054; border:1px solid #dbeafe; border-radius:10px; padding:14px; background:#f8fbff; }
.payroll-notes div { border:0; border-radius:0; padding:0; background:transparent; }
.payroll-notes i { margin-right:6px; }
.note-green { color:#16a34a; }
.note-red { color:#dc2626; }
.payroll-flash { animation: payrollFlash .55s ease; }
@keyframes payrollFlash { 0%{background:#dbeafe;border-radius:8px} 100%{background:transparent} }
.login-page { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #eef6ff, #f8fafc 55%, #edfdf7); padding: 24px; }
.login-card { width: min(420px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 28px; box-shadow: 0 18px 60px rgba(16,24,40,.12); display: grid; gap: 13px; }
.install-card { width: min(540px, 100%); }
.login-card h1 { margin: 0; font-weight: 850; }
.login-card p { margin: 0 0 8px; color: var(--muted); }
.table th { color: #475467; font-size: 13px; text-transform: capitalize; }
.checklist { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.checklist span { border-radius: 7px; padding: 8px 10px; font-size: 13px; border: 1px solid var(--line); }
.checklist .ok { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.checklist .warn { background: #fff7ed; color: #b54708; border-color: #fed7aa; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .sidebar nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .main { padding: 16px; }
  .cards, .grid-2, .form-grid { grid-template-columns: 1fr; }
  .critical-actions { grid-template-columns: 1fr; }
  .payroll-header { flex-direction:column; }
  .payroll-header-status { text-align:left; }
  .payroll-toolbar, .payroll-critical-actions { grid-template-columns:1fr; }
  .payroll-summary-cards { grid-template-columns:1fr; }
  .payroll-totals, .payroll-notes { grid-template-columns:1fr; }
  .payroll-total-card { border-right:0; border-bottom:1px solid var(--line); }
  .payroll-total-card:last-child { margin:0; }
  .topbar { align-items: flex-start; flex-direction: column; }
}

@media (min-width: 901px) and (max-width: 1500px) {
  .payroll-summary-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .payroll-totals { grid-template-columns:repeat(3,minmax(0,1fr)); }
}