/* ═══════════════════════════════════════════════════════════
   KPOX RIVER TABLES — Design System v1.0
   Artesãos · Mobile-first · Multilingual · Accessible
═══════════════════════════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;font-size:16px}

/* ── Tokens ── */
:root{
  --bg:#080808;
  --s1:#111111;
  --s2:#181818;
  --s3:#202020;
  --b1:#2a2a2a;
  --b2:#333333;
  --b3:#444444;
  --tx:#f0ece0;
  --tx2:#c8c0b0;
  --mt:#888070;
  --mt2:#555048;
  --A:#e8a020;
  --Ad:#3a2800;
  --Ag:rgba(232,160,32,.10);
  --Ab:rgba(232,160,32,.25);
  --G:#3db87a;
  --Gg:rgba(61,184,122,.10);
  --Gb:rgba(61,184,122,.25);
  --R:#d05050;
  --Rg:rgba(208,80,80,.10);
  --Rb:rgba(208,80,80,.25);
  --B:#4f8fc9;
  --Bg:rgba(79,143,201,.10);
  --Bb:rgba(79,143,201,.25);
  --P:#7f77dd;
  --Pg:rgba(127,119,221,.10);
  --Pb:rgba(127,119,221,.25);
  --F:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Arial,sans-serif;
  --FM:'Courier New',Courier,monospace;
  --radius:10px;
  --radius-sm:6px;
  --radius-lg:14px;
  --nav-h:60px;
  --bottom-nav-h:68px;
  --sidebar-w:220px;
  --max-w:1200px;
  --pad:20px;
}

/* ── Base ── */
body{
  background:var(--bg);
  color:var(--tx);
  font-family:var(--F);
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:var(--F);cursor:pointer;border:none;background:none}
input,select,textarea{font-family:var(--F);font-size:16px}
img{max-width:100%;display:block}

/* ════════════════════════════
   TOPBAR
════════════════════════════ */
.kpox-topbar{
  position:sticky;top:0;z-index:100;
  height:var(--nav-h);
  background:var(--s1);
  border-bottom:1px solid var(--b1);
  display:flex;align-items:center;
  padding:0 var(--pad);
  gap:12px;
}
.kpox-logo{
  display:flex;align-items:center;gap:6px;
  flex-shrink:0;
  text-decoration:none;
}
.kpox-logo-box{
  border:1.5px solid var(--A);
  padding:5px 11px;
  font-family:var(--FM);
  font-size:16px;font-weight:700;
  letter-spacing:4px;
  color:var(--tx);
  transition:background .2s;
}
.kpox-logo:hover .kpox-logo-box{background:var(--Ag)}
.kpox-logo-sub{
  font-family:var(--FM);
  font-size:8px;letter-spacing:2px;
  color:var(--A);text-transform:uppercase;
}
.kpox-topbar-sep{
  width:1px;height:28px;
  background:var(--b1);
  flex-shrink:0;margin:0 4px;
}
/* Top nav — tablet/desktop */
.kpox-top-nav{
  display:flex;gap:2px;
  overflow-x:auto;
  scrollbar-width:none;
}
.kpox-top-nav::-webkit-scrollbar{display:none}
.kpox-nav-item{
  display:flex;align-items:center;gap:6px;
  height:40px;padding:0 14px;
  border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;
  color:var(--mt);
  white-space:nowrap;
  transition:background .15s,color .15s;
  text-decoration:none;
}
.kpox-nav-item:hover{background:var(--s2);color:var(--tx2)}
.kpox-nav-item.active{background:var(--Ag);color:var(--A)}
.kpox-nav-icon{font-size:16px;flex-shrink:0}
.kpox-topbar-right{
  margin-left:auto;
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;
}

/* ════════════════════════════
   LANGUAGE SELECTOR
════════════════════════════ */
.kpox-lang{
  background:var(--s2);
  border:1px solid var(--b2);
  color:var(--tx2);
  font-size:13px;font-weight:600;
  padding:6px 10px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  min-width:60px;
  appearance:none;
  -webkit-appearance:none;
}
.kpox-lang:focus{outline:none;border-color:var(--A)}

/* ════════════════════════════
   SIDEBAR (desktop)
════════════════════════════ */
.kpox-layout{display:flex;flex:1;min-height:0}
.kpox-sidebar{
  width:var(--sidebar-w);
  background:var(--s1);
  border-right:1px solid var(--b1);
  padding:12px 8px;
  display:flex;flex-direction:column;gap:2px;
  flex-shrink:0;
}
.kpox-side-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  font-size:15px;font-weight:500;
  color:var(--mt);
  text-decoration:none;
  transition:background .15s,color .15s;
}
.kpox-side-item:hover{background:var(--s2);color:var(--tx2)}
.kpox-side-item.active{background:var(--Ag);color:var(--A)}
.kpox-side-icon{font-size:20px;flex-shrink:0;width:24px;text-align:center}
.kpox-side-divider{height:1px;background:var(--b1);margin:8px 4px}
.kpox-main{flex:1;overflow-y:auto;display:flex;flex-direction:column}

/* ════════════════════════════
   BOTTOM NAV (mobile)
════════════════════════════ */
.kpox-bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:var(--bottom-nav-h);
  background:var(--s1);
  border-top:1px solid var(--b1);
  z-index:100;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.kpox-bottom-nav-inner{
  display:flex;height:var(--bottom-nav-h);
}
.kpox-bottom-item{
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:4px;
  text-decoration:none;
  color:var(--mt);
  -webkit-tap-highlight-color:transparent;
}
.kpox-bottom-item.active{color:var(--A)}
.kpox-bottom-icon{font-size:22px;line-height:1}
.kpox-bottom-label{font-size:11px;font-weight:600;letter-spacing:.3px}

/* ════════════════════════════
   CONTENT AREA
════════════════════════════ */
.kpox-page{
  flex:1;
  padding:24px var(--pad) 100px;
  max-width:var(--max-w);
  width:100%;
  margin:0 auto;
}
.kpox-page-header{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:1px solid var(--b1);
}
.kpox-page-title{
  font-size:24px;font-weight:700;
  color:var(--tx);letter-spacing:-.3px;
}
.kpox-page-sub{
  font-size:14px;color:var(--mt);
  margin-top:2px;
}

/* ════════════════════════════
   CARDS
════════════════════════════ */
.kpox-card{
  background:var(--s2);
  border:1px solid var(--b1);
  border-radius:var(--radius);
  padding:20px;
}
.kpox-card-title{
  font-size:13px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--A);margin-bottom:16px;
}
.kpox-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
}

/* ════════════════════════════
   STAT CARDS
════════════════════════════ */
.kpox-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
  margin-bottom:28px;
}
.kpox-stat{
  background:var(--s2);
  border:1px solid var(--b1);
  border-radius:var(--radius);
  padding:18px 20px;
  display:flex;flex-direction:column;gap:6px;
}
.kpox-stat-num{
  font-size:32px;font-weight:700;
  font-family:var(--FM);
  color:var(--tx);line-height:1;
}
.kpox-stat-num.amber{color:var(--A)}
.kpox-stat-num.green{color:var(--G)}
.kpox-stat-num.blue{color:var(--B)}
.kpox-stat-num.purple{color:var(--P)}
.kpox-stat-label{
  font-size:12px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;
  color:var(--mt);
}

/* ════════════════════════════
   BUTTONS
════════════════════════════ */
.kpox-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:44px;padding:0 20px;
  border-radius:var(--radius-sm);
  font-size:14px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;
  cursor:pointer;border:none;
  transition:all .15s;white-space:nowrap;
  text-decoration:none;
}
.kpox-btn-primary{background:var(--A);color:#000}
.kpox-btn-primary:hover{background:#f5b030}
.kpox-btn-ghost{background:transparent;color:var(--mt);border:1px solid var(--b2)}
.kpox-btn-ghost:hover{border-color:var(--tx2);color:var(--tx2)}
.kpox-btn-danger{background:var(--Rg);color:var(--R);border:1px solid var(--Rb)}
.kpox-btn-success{background:var(--Gg);color:var(--G);border:1px solid var(--Gb)}
.kpox-btn-sm{height:36px;padding:0 14px;font-size:12px}
.kpox-btn-icon{width:44px;padding:0;justify-content:center}

/* ════════════════════════════
   FORMS
════════════════════════════ */
.kpox-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.kpox-label{
  font-size:13px;font-weight:600;
  letter-spacing:.5px;color:var(--tx2);
}
.kpox-input,.kpox-select,.kpox-textarea{
  background:var(--s3);
  border:1px solid var(--b2);
  color:var(--tx);
  font-size:16px;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  outline:none;
  width:100%;
  transition:border-color .15s;
}
.kpox-input:focus,.kpox-select:focus,.kpox-textarea:focus{border-color:var(--A)}
.kpox-select{cursor:pointer}
.kpox-select option{background:var(--s2)}
.kpox-textarea{resize:vertical;min-height:88px;line-height:1.5}
.kpox-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ════════════════════════════
   TABLE / LIST
════════════════════════════ */
.kpox-table{width:100%;border-collapse:collapse}
.kpox-table th{
  font-size:12px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--mt);padding:12px 14px;
  border-bottom:1px solid var(--b1);
  text-align:left;background:var(--s2);
}
.kpox-table td{
  padding:14px;
  border-bottom:1px solid var(--b1);
  font-size:15px;color:var(--tx2);
  vertical-align:middle;
}
.kpox-table tr:last-child td{border-bottom:none}
.kpox-table tr:hover td{background:var(--s2)}
.kpox-table-wrap{
  background:var(--s2);
  border:1px solid var(--b1);
  border-radius:var(--radius);
  overflow:hidden;
}

/* ════════════════════════════
   BADGES / PILLS
════════════════════════════ */
.kpox-badge{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:700;
  padding:4px 12px;border-radius:20px;
  letter-spacing:.5px;text-transform:uppercase;
}
.kpox-badge-amber{background:var(--Ag);color:var(--A);border:1px solid var(--Ab)}
.kpox-badge-green{background:var(--Gg);color:var(--G);border:1px solid var(--Gb)}
.kpox-badge-blue{background:var(--Bg);color:var(--B);border:1px solid var(--Bb)}
.kpox-badge-purple{background:var(--Pg);color:var(--P);border:1px solid var(--Pb)}
.kpox-badge-red{background:var(--Rg);color:var(--R);border:1px solid var(--Rb)}
.kpox-badge-gray{background:var(--s3);color:var(--mt);border:1px solid var(--b2)}

/* ════════════════════════════
   SECTION HEADER
════════════════════════════ */
.kpox-section{
  background:var(--s2);
  border:1px solid var(--b1);
  border-radius:var(--radius);
  margin-bottom:14px;
  overflow:hidden;
}
.kpox-section-hdr{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--b1);
  cursor:pointer;
}
.kpox-section-title{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  color:var(--A);
}
.kpox-section-n{
  width:24px;height:24px;
  border-radius:4px;
  background:var(--Ad);
  color:var(--A);
  font-family:var(--FM);
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.kpox-section-body{padding:20px}

/* ════════════════════════════
   FOOTER
════════════════════════════ */
.kpox-footer{
  background:var(--s1);
  border-top:1px solid var(--b1);
  margin-top:auto;
  padding:0 var(--pad);
}
.kpox-footer-inner{
  max-width:var(--max-w);
  margin:0 auto;
  height:52px;
  display:flex;align-items:center;
  justify-content:space-between;
  gap:12px;
}
.kpox-footer-left{display:flex;align-items:center;gap:10px}
.kpox-footer-logo{
  font-family:var(--FM);
  border:1px solid var(--b2);
  padding:3px 8px;
  font-size:12px;font-weight:700;letter-spacing:3px;
  color:var(--tx);text-decoration:none;
}
.kpox-footer-logo:hover{border-color:var(--A);color:var(--A)}
.kpox-footer-sub{font-size:12px;color:var(--mt2)}
.kpox-footer-copy{font-size:12px;color:var(--mt2)}

/* ════════════════════════════
   NOTIFICATIONS
════════════════════════════ */
.kpox-toast{
  padding:12px 16px;
  border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;
  display:none;margin-bottom:14px;
}
.kpox-toast.ok{background:var(--Gg);border:1px solid var(--Gb);color:var(--G)}
.kpox-toast.err{background:var(--Rg);border:1px solid var(--Rb);color:var(--R)}
.kpox-toast.show{display:block}

/* ════════════════════════════
   SEARCH BAR
════════════════════════════ */
.kpox-search{
  display:flex;align-items:center;gap:10px;
  background:var(--s3);
  border:1px solid var(--b2);
  border-radius:var(--radius-sm);
  padding:0 14px;
  height:44px;
}
.kpox-search input{
  background:none;border:none;
  color:var(--tx);font-size:15px;
  outline:none;flex:1;
}
.kpox-search input::placeholder{color:var(--mt)}
.kpox-search-icon{color:var(--mt);font-size:16px}

/* ════════════════════════════
   MODAL
════════════════════════════ */
.kpox-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.75);
  z-index:200;
  display:flex;align-items:flex-end;
  justify-content:center;
  padding:0;
}
@media(min-width:640px){.kpox-overlay{align-items:center;padding:20px}}
.kpox-modal{
  background:var(--s2);
  border:1px solid var(--b1);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:24px;
  width:100%;max-width:560px;
  max-height:90vh;overflow-y:auto;
}
@media(min-width:640px){.kpox-modal{border-radius:var(--radius-lg)}}
.kpox-modal-hdr{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:20px;padding-bottom:16px;
  border-bottom:1px solid var(--b1);
}
.kpox-modal-title{font-size:18px;font-weight:700;color:var(--tx)}
.kpox-modal-close{
  width:36px;height:36px;border-radius:50%;
  background:var(--s3);border:1px solid var(--b2);
  color:var(--mt);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.kpox-modal-close:hover{border-color:var(--R);color:var(--R)}

/* ════════════════════════════
   EMPTY STATE
════════════════════════════ */
.kpox-empty{
  text-align:center;padding:48px 20px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.kpox-empty-icon{font-size:48px;opacity:.3}
.kpox-empty-title{font-size:18px;font-weight:600;color:var(--tx2)}
.kpox-empty-sub{font-size:14px;color:var(--mt);max-width:280px;line-height:1.6}

/* ════════════════════════════
   RESPONSIVE
════════════════════════════ */
/* Mobile (< 640px) */
@media(max-width:639px){
  :root{--pad:14px;--nav-h:56px}
  .kpox-top-nav,.kpox-topbar-sep:not(.kpox-topbar-sep-always){display:none!important}
  .kpox-bottom-nav{display:block}
  .kpox-sidebar{display:none}
  .kpox-main{padding-bottom:calc(var(--bottom-nav-h) + 16px)}
  .kpox-page{padding-bottom:calc(var(--bottom-nav-h) + 20px)}
  .kpox-stats{grid-template-columns:1fr 1fr}
  .kpox-form-grid{grid-template-columns:1fr}
  .kpox-page-title{font-size:20px}
  .kpox-stat-num{font-size:26px}
  .kpox-table th:nth-child(n+4),.kpox-table td:nth-child(n+4){display:none}
  .kpox-topbar-right .kpox-btn-primary span{display:none}
}
/* Tablet (640px - 1023px) */
@media(min-width:640px) and (max-width:1023px){
  .kpox-sidebar{display:none}
  .kpox-bottom-nav{display:none}
  .kpox-top-nav{display:flex!important}
  .kpox-stats{grid-template-columns:repeat(2,1fr)}
}
/* Desktop (>= 1024px) */
@media(min-width:1024px){
  .kpox-top-nav{display:none!important}
  .kpox-sidebar{display:flex}
  .kpox-bottom-nav{display:none}
  .kpox-layout{flex-direction:row}
}

/* ════════════════════════════
   UTILITIES
════════════════════════════ */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.text-amber{color:var(--A)}.text-green{color:var(--G)}.text-muted{color:var(--mt)}.text-sm{font-size:14px}.text-xs{font-size:12px}
.font-mono{font-family:var(--FM)}.font-bold{font-weight:700}
.w-full{width:100%}.hidden{display:none!important}