/* ── Design Tokens ─────────────────────────────────────── */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);

  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;
  --space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;
  --space-8:2rem;--space-10:2.5rem;--space-12:3rem;

  --radius-sm:0.375rem;--radius-md:0.5rem;
  --radius-lg:0.75rem;--radius-xl:1rem;

  --transition:180ms cubic-bezier(0.16,1,0.3,1);

  --font-display:'Cabinet Grotesk','Inter',sans-serif;
  --font-body:'General Sans','Inter',sans-serif;
}

:root,[data-theme="dark"] {
  --bg:#0d1117;--surface:#161b22;--surface-2:#1c2333;--surface-3:#21262d;
  --border:#30363d;--divider:#21262d;
  --text:#e6edf3;--text-muted:#8b949e;--text-faint:#484f58;
  --primary:#58a6ff;--primary-hover:#79b8ff;--primary-bg:#1f2d3d;
  --success:#3fb950;--success-bg:#1b2f1e;--success-text:#56d364;
  --warning:#e3b341;--warning-bg:#2d2416;--warning-text:#e3b341;
  --danger:#f85149;--danger-bg:#2d1618;--danger-text:#ff7b72;
  --purple:#bc8cff;--purple-bg:#1d1535;
  --gold-text:#e3b341;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:0 8px 32px rgba(0,0,0,.6);
}

[data-theme="light"] {
  --bg:#f0f2f5;--surface:#fff;--surface-2:#f6f8fa;--surface-3:#f0f2f5;
  --border:#d0d7de;--divider:#e8ebee;
  --text:#1c2128;--text-muted:#57606a;--text-faint:#8c959f;
  --primary:#0969da;--primary-hover:#0550ae;--primary-bg:#ddf4ff;
  --success:#1a7f37;--success-bg:#dafbe1;--success-text:#1a7f37;
  --warning:#9a6700;--warning-bg:#fff8c5;--warning-text:#7d4e00;
  --danger:#cf222e;--danger-bg:#ffebe9;--danger-text:#cf222e;
  --purple:#6e40c9;--purple-bg:#fbefff;
  --gold-text:#9a6700;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 4px 16px rgba(0,0,0,.1);
  --shadow-lg:0 8px 32px rgba(0,0,0,.14);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);color:var(--text);background:var(--bg)}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
a{color:var(--primary);text-decoration:none}

/* ── Layout ── */
#app{display:flex;min-height:100dvh}

.sidebar{
  width:220px;min-height:100dvh;background:var(--surface);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  flex-shrink:0;position:sticky;top:0;height:100dvh;overflow-y:auto
}
.sidebar-logo{
  padding:var(--space-5) var(--space-5) var(--space-4);
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--space-3)
}
.logo-title{font-family:var(--font-display);font-weight:800;font-size:13px;line-height:1.2;white-space:nowrap}
.logo-sub{font-size:11px;color:var(--text-muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}

.sidebar-nav{padding:var(--space-4) var(--space-3);flex:1}
.nav-label{font-size:var(--text-xs);font-weight:600;color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;padding:var(--space-4) var(--space-3) var(--space-2)}
.nav-item{
  display:flex;align-items:center;gap:var(--space-2);
  padding:6px var(--space-3);border-radius:var(--radius-md);
  font-size:13px;font-weight:500;color:var(--text-muted);
  cursor:pointer;transition:all var(--transition);margin-bottom:2px;
  width:100%;text-align:left;white-space:nowrap;overflow:hidden
}
.nav-item svg{
  width:14px;height:14px;flex-shrink:0;display:block;
  stroke:currentColor;fill:none
}
.nav-item span[class~="nav-badge"]{flex-shrink:0}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--primary-bg);color:var(--primary)}
.nav-badge{
  margin-left:auto;background:var(--surface-3);color:var(--text-muted);
  font-size:10px;font-weight:600;padding:1px 5px;border-radius:999px;
  min-width:18px;text-align:center;flex-shrink:0
}
.nav-item.active .nav-badge{background:var(--primary-bg);color:var(--primary)}

.sidebar-footer{padding:var(--space-4) var(--space-3);border-top:1px solid var(--border)}

.theme-toggle{
  display:flex;align-items:center;gap:var(--space-2);
  padding:6px var(--space-3);border-radius:var(--radius-md);
  font-size:13px;font-weight:500;color:var(--text-faint);
  cursor:pointer;transition:all var(--transition);width:100%;
  white-space:nowrap
}
.theme-toggle svg{width:14px;height:14px;flex-shrink:0;display:block;stroke:currentColor;fill:none}
.theme-toggle:hover{background:var(--surface-2);color:var(--text)}

.main{flex:1;display:flex;flex-direction:column;min-height:100dvh;overflow-x:hidden}
.topbar{
  height:52px;border-bottom:1px solid var(--border);display:flex;
  align-items:center;padding:0 var(--space-8);gap:var(--space-4);
  background:var(--surface);position:sticky;top:0;z-index:10
}
.topbar-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-base);flex:1}
.topbar-actions{display:flex;gap:var(--space-2);align-items:center}

.content{flex:1;padding:var(--space-8);max-width:1400px;width:100%}

/* ── Buttons ── */
.btn-primary{
  display:inline-flex;align-items:center;gap:var(--space-2);
  background:var(--primary);color:#fff;padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm);
  transition:all var(--transition);cursor:pointer
}
.btn-primary:hover{opacity:.88;transform:translateY(-1px)}
.btn-sm{padding:var(--space-2) var(--space-4)!important;font-size:var(--text-xs)!important}
.btn-ghost{
  display:inline-flex;align-items:center;gap:var(--space-2);
  color:var(--text-muted);padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;
  transition:all var(--transition)
}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-danger{
  display:inline-flex;align-items:center;gap:var(--space-2);
  background:var(--danger);color:#fff;padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm);
  transition:all var(--transition);cursor:pointer
}
.btn-danger:hover{opacity:.88}

/* ── KPI Cards ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.kpi-label{font-size:var(--text-xs);color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.kpi-value{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;line-height:1}
.kpi-sub{font-size:var(--text-xs);color:var(--text-muted)}
.kpi-card.green .kpi-value{color:var(--success-text)}
.kpi-card.blue .kpi-value{color:var(--primary)}
.kpi-card.gold .kpi-value{color:var(--gold-text)}
.kpi-card.red .kpi-value{color:var(--danger-text)}
.kpi-card.purple .kpi-value{color:var(--purple)}

/* ── Table Card ── */
.table-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-4)}
.table-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.table-header-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-base);flex:1}
.table-scroll{overflow-x:auto}
.data-table{font-size:var(--text-sm)}
.data-table th{
  text-align:left;padding:var(--space-3) var(--space-4);
  font-size:var(--text-xs);font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-2)
}
.data-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--divider);white-space:nowrap}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr{transition:background var(--transition);cursor:default}
.data-table tbody tr:hover{background:var(--surface-2)}

/* ── Search & Filters ── */
.search-input,.select-filter{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);
  font-size:var(--text-sm);color:var(--text);outline:none;
  transition:border-color var(--transition)
}
.search-input{width:220px}
.search-input:focus,.select-filter:focus{border-color:var(--primary)}
.search-input::placeholder{color:var(--text-faint)}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-green{background:var(--success-bg);color:var(--success-text)}
.badge-red{background:var(--danger-bg);color:var(--danger-text)}
.badge-yellow{background:var(--warning-bg);color:var(--warning-text)}
.badge-blue{background:var(--primary-bg);color:var(--primary)}
.badge-gray{background:var(--surface-3);color:var(--text-muted)}
.badge-purple{background:var(--purple-bg);color:var(--purple)}

/* ── Ação buttons na tabela ── */
.btn-tbl{
  border-radius:var(--radius-sm);padding:2px 8px;font-size:11px;
  font-weight:600;cursor:pointer;transition:all var(--transition);border:1px solid transparent
}
.btn-tbl-success{background:var(--success-bg);color:var(--success-text);border-color:var(--success)}
.btn-tbl-success:hover{background:var(--success);color:#fff}
.btn-tbl-done{background:var(--surface-3);color:var(--text-faint);border-color:var(--divider);cursor:default}
.btn-tbl-primary{background:var(--primary-bg);color:var(--primary);border-color:var(--primary)}
.btn-tbl-primary:hover{background:var(--primary);color:#fff}
.btn-tbl-edit{background:var(--surface-2);color:var(--text-muted);border-color:var(--border)}
.btn-tbl-edit:hover{border-color:var(--primary);color:var(--primary)}
.btn-tbl-del{background:var(--danger-bg);color:var(--danger-text);border-color:var(--danger)}
.btn-tbl-del:hover{background:var(--danger);color:#fff}
.btn-tbl-undo{background:var(--warning-bg);color:var(--warning-text);border-color:var(--warning)}
.btn-tbl-undo:hover{background:var(--warning);color:#000}

/* ── Progress ── */
.progress-wrap{background:var(--surface-3);border-radius:999px;height:6px;overflow:hidden;flex:1}
.progress-fill{height:100%;border-radius:999px;transition:width .6s ease}
.progress-row{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}

/* ── Page title ── */
.page-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;margin-bottom:var(--space-6)}
.section-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-6)}

/* ── Dashboard section labels ── */
.dash-section-label{
  font-size:var(--text-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-faint);
  margin-bottom:var(--space-3);margin-top:var(--space-5);
  padding-left:2px;border-left:3px solid var(--primary);padding-left:var(--space-3)
}

/* ── KPI grid variants ── */
.kpi-grid-3{grid-template-columns:repeat(3,1fr)}
.kpi-grid-4{grid-template-columns:repeat(4,1fr)}
.kpi-grid-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){
  .kpi-grid-5{grid-template-columns:repeat(3,1fr)}
  .kpi-grid-4{grid-template-columns:repeat(2,1fr)}
  .kpi-grid-3{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .kpi-grid-3,.kpi-grid-4,.kpi-grid-5{grid-template-columns:repeat(2,1fr)}
}

/* ── Modal ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:var(--space-4)
}
.modal-box{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);
  width:100%;max-width:680px;max-height:90dvh;overflow-y:auto;
  box-shadow:var(--shadow-lg)
}
.modal-header{
  padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:var(--surface);z-index:1
}
.modal-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-base)}
.modal-close{color:var(--text-muted);font-size:18px;line-height:1;padding:4px 8px;border-radius:var(--radius-sm)}
.modal-close:hover{background:var(--surface-2);color:var(--text)}
.modal-body{padding:var(--space-6)}
.modal-footer{display:flex;justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-5);border-top:1px solid var(--border);margin-top:var(--space-5)}

/* ── Form ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.form-group{display:flex;flex-direction:column;gap:var(--space-2)}
.form-group.col-2{grid-column:span 2}
.form-group label{font-size:var(--text-sm);font-weight:600}
.form-group input,.form-group select,.form-group textarea{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
  font-size:var(--text-sm);color:var(--text);outline:none;
  transition:border-color var(--transition)
}
.form-group input:focus,.form-group select:focus{border-color:var(--primary)}
.form-group input::placeholder{color:var(--text-faint)}

/* ── Toast ── */
#toast{
  position:fixed;bottom:var(--space-6);right:var(--space-6);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-5);
  font-size:var(--text-sm);font-weight:500;box-shadow:var(--shadow-lg);
  z-index:999;opacity:0;transform:translateY(8px);
  transition:all .25s ease;pointer-events:none
}
#toast.show{opacity:1;transform:translateY(0)}
#toast.success{border-left:3px solid var(--success)}
#toast.info{border-left:3px solid var(--primary)}
#toast.error{border-left:3px solid var(--danger)}

/* ── Loading ── */
.loading-full{display:flex;align-items:center;justify-content:center;min-height:300px}
.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Empty ── */
.empty-state{text-align:center;padding:var(--space-12) var(--space-8);color:var(--text-muted)}
.empty-state p{font-size:var(--text-sm)}

/* ── Activity log ── */
.activity-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--divider)}
.activity-item:last-child{border-bottom:none}
.activity-time{font-size:var(--text-xs);color:var(--text-faint);white-space:nowrap;min-width:55px}
.activity-msg{font-size:var(--text-sm)}

/* ── Responsive ── */
@media(max-width:768px){
  .sidebar{display:none}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .section-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-group.col-2{grid-column:span 1}
}

/* ── Footer ── */
.pplx-footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--border);text-align:center}
.pplx-footer a{font-size:var(--text-xs);color:var(--text-faint);text-decoration:none}
.pplx-footer a:hover{color:var(--primary)}