/* ==========================================================================
   APG Inventários — Portal do Cliente
   Stylesheet compartilhado (index.html + app.html)
   Paleta: APG Brand Guidelines
   ========================================================================== */
:root{
  /* Brand */
  --navy:#222143;       /* primary dark */
  --cyan:#6CC2FF;       /* primary accent */
  --amarelo:#FFD25A;    /* primary yellow */
  --light-ocean:#C4F3F7;
  --ocean:#76EEFF;
  --light-blue:#4A93FB;
  --vivid-blue:#3B69FD; /* primary action */
  --dark-blue:#3056A7;
  --orange:#F3A462;

  /* Semantic aliases */
  --green:#3B69FD;       /* "primary" (mapped to Vivid Blue) */
  --green-dark:#222143;  /* "deepest" (Navy) */
  --green-light:#C4F3F7; /* light bg */
  --red:#D94F1F;         /* negative/critical */
  --red-light:#FDECE0;
  --amber:#8A6400;       /* warning text */
  --amber-light:#FFF5D6;
  --success:#0E8F6E;

  /* Neutral */
  --gray-bg:#F5F7F9;
  --gray-border:#E2E8F0;
  --gray-text:#64748B;
  --dark:#1A1A1A;
  --white:#FFFFFF;

  --shadow:0 1px 3px rgba(34,33,67,0.08), 0 1px 2px rgba(34,33,67,0.05);
  --shadow-lg:0 10px 15px -3px rgba(34,33,67,0.12), 0 4px 6px -2px rgba(34,33,67,0.06);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter','Segoe UI',Tahoma,sans-serif;
  background:var(--gray-bg); color:var(--dark); line-height:1.5;
  min-height:100vh;
}
a{color:var(--vivid-blue); text-decoration:none}
a:hover{text-decoration:underline}

/* ===== HEADER ===== */
.topbar{
  background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%);
  color:#fff; padding:18px 40px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  position:sticky; top:0; z-index:100;
}
.topbar-inner{
  max-width:1400px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
}
.brand{display:flex; align-items:center; gap:14px; color:#fff}
.brand-logo{
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.brand-logo svg{width:100%; height:100%}
.brand-name{font-size:18px; font-weight:700; letter-spacing:0.3px}
.brand-sub{font-size:12px; opacity:0.85; margin-top:2px}
.client-chip{
  background:rgba(255,255,255,0.15);
  padding:8px 14px; border-radius:20px;
  font-size:13px; display:flex; align-items:center; gap:8px;
  backdrop-filter:blur(8px); color:#fff;
}
.client-chip .dot{
  width:8px; height:8px; border-radius:50%;
  background:#76EEFF; box-shadow:0 0 10px #76EEFF;
}

/* ===== NAV ===== */
.nav{
  background:#fff; border-bottom:1px solid var(--gray-border);
  padding:0 40px; position:sticky; top:80px; z-index:90;
}
.nav-inner{max-width:1400px; margin:0 auto; display:flex; gap:4px; overflow-x:auto}
.nav-item{
  padding:16px 20px; cursor:pointer;
  font-size:14px; font-weight:500; color:var(--gray-text);
  border-bottom:3px solid transparent;
  transition:all 0.2s; white-space:nowrap;
  display:flex; align-items:center; gap:8px;
}
.nav-item:hover{color:var(--green); background:var(--green-light)}
.nav-item.active{color:var(--green-dark); border-bottom-color:var(--green); font-weight:600}

/* ===== MAIN ===== */
.main{max-width:1400px; margin:0 auto; padding:32px 40px}
.page{display:none}
.page.active{display:block; animation:fadeIn 0.3s ease}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}

.page-header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; flex-wrap:wrap; gap:12px}
.page-title{font-size:28px; font-weight:700; color:var(--green-dark)}
.page-subtitle{color:var(--gray-text); font-size:14px; margin-top:4px}

/* ===== CARDS & KPI ===== */
.card{
  background:#fff; border:1px solid var(--gray-border);
  border-radius:12px; padding:24px;
  box-shadow:var(--shadow);
}
.kpi-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px; margin-bottom:24px;
}
.kpi{
  background:#fff; border:1px solid var(--gray-border);
  border-radius:12px; padding:22px;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow);
}
.kpi::before{
  content:''; position:absolute; top:0; left:0; width:4px; height:100%;
  background:var(--green);
}
.kpi.negative::before{background:var(--red)}
.kpi.warning::before{background:var(--amber)}
.kpi-label{
  font-size:12px; color:var(--gray-text); font-weight:500;
  text-transform:uppercase; letter-spacing:0.5px;
}
.kpi-value{font-size:32px; font-weight:700; margin-top:6px; color:var(--dark)}
.kpi-value .currency{font-size:18px; color:var(--gray-text); font-weight:500; margin-right:4px}
.kpi-trend{font-size:12px; margin-top:8px; color:var(--gray-text); display:flex; align-items:center; gap:4px}
.kpi-trend.up{color:var(--success)}
.kpi-trend.down{color:var(--red)}

/* ===== WELCOME ===== */
.welcome-hero{
  background:linear-gradient(135deg,#fff 0%, var(--green-light) 100%);
  border:1px solid var(--gray-border); border-radius:16px;
  padding:40px; margin-bottom:24px;
  display:grid; grid-template-columns:2fr 1fr; gap:32px; align-items:center;
  box-shadow:var(--shadow);
}
@media(max-width:800px){.welcome-hero{grid-template-columns:1fr}}
.welcome-greeting{font-size:14px; color:var(--green); font-weight:600; text-transform:uppercase; letter-spacing:1px}
.welcome-title{font-size:36px; font-weight:700; color:var(--green-dark); margin:8px 0 16px; line-height:1.2}
.welcome-desc{color:var(--gray-text); font-size:15px; line-height:1.7}
.inventory-card{
  background:#fff; border-radius:12px; padding:20px;
  border:1px solid var(--gray-border);
}
.inventory-card h4{font-size:12px; color:var(--gray-text); text-transform:uppercase; margin-bottom:12px; letter-spacing:0.5px}
.inventory-detail{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--gray-border); font-size:14px}
.inventory-detail:last-child{border:none}
.inventory-detail span:first-child{color:var(--gray-text)}
.inventory-detail span:last-child{font-weight:600; color:var(--dark)}

/* ===== CHARTS ===== */
.chart-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px}
@media(max-width:900px){.chart-grid{grid-template-columns:1fr}}
.chart-card h3{font-size:16px; margin-bottom:4px; color:var(--green-dark)}
.chart-card .chart-sub{font-size:13px; color:var(--gray-text); margin-bottom:16px}
.chart-container{position:relative; height:280px}
.chart-container.tall{height:340px}

/* ===== TABLE ===== */
.table-controls{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  margin-bottom:16px;
}
.filter-input, .filter-select{
  padding:10px 14px; border:1px solid var(--gray-border); border-radius:8px;
  font-size:14px; font-family:inherit; background:#fff; color:var(--dark);
  outline:none; transition:border-color 0.2s;
}
.filter-input:focus, .filter-select:focus{border-color:var(--green)}
.filter-input{flex:1; min-width:200px}

table{width:100%; border-collapse:collapse; font-size:14px}
thead th{
  text-align:left; padding:12px 14px;
  background:var(--green-dark); color:#fff; font-weight:600;
  font-size:12px; text-transform:uppercase; letter-spacing:0.4px;
  cursor:pointer; user-select:none;
}
thead th:first-child{border-top-left-radius:8px}
thead th:last-child{border-top-right-radius:8px}
tbody td{padding:12px 14px; border-bottom:1px solid var(--gray-border)}
tbody tr:nth-child(even){background:var(--gray-bg)}
tbody tr:hover{background:var(--green-light)}
.badge{
  display:inline-block; padding:3px 10px; border-radius:12px;
  font-size:11px; font-weight:600; text-transform:uppercase;
}
.badge-falta{background:var(--red-light); color:var(--red)}
.badge-sobra{background:var(--green-light); color:var(--green-dark)}
.badge-fantasma{background:var(--amber-light); color:var(--amber)}
.badge-nc{background:#F1F5F9; color:var(--gray-text)}
td.num{text-align:right; font-variant-numeric:tabular-nums}
td.mono{font-family:'JetBrains Mono','Consolas',monospace; font-size:12.5px; color:var(--gray-text)}

.pagination{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; color:var(--gray-text); font-size:13px;
}
.pagination button{
  padding:6px 14px; border:1px solid var(--gray-border); background:#fff;
  border-radius:6px; cursor:pointer; font-size:13px; font-family:inherit;
}
.pagination button:disabled{opacity:0.4; cursor:not-allowed}

/* ===== BUTTONS ===== */
.btn{
  padding:10px 18px; border:1px solid var(--gray-border); border-radius:8px;
  font-size:14px; font-weight:500; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:6px;
  transition:all 0.15s;
}
.btn-primary{background:var(--green); color:#fff; border-color:var(--green)}
.btn-primary:hover{background:var(--green-dark); border-color:var(--green-dark)}
.btn-ghost{background:#fff; color:var(--green-dark)}
.btn-ghost:hover{background:var(--green-light)}
.btn-big{padding:14px 22px; font-size:15px}

/* ===== DOWNLOAD MODAL ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(34,33,67,0.55);
  display:none; align-items:center; justify-content:center; z-index:200;
  padding:20px;
}
.modal-overlay.active{display:flex}
.modal{
  background:#fff; border-radius:16px; padding:32px;
  max-width:680px; width:100%; max-height:90vh; overflow-y:auto;
  box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);
  position:relative;
}
.modal h2{color:var(--green-dark); margin-bottom:6px; font-size:22px}
.modal .sub{color:var(--gray-text); margin-bottom:22px; font-size:14px}
.modal-close{
  position:absolute; top:16px; right:16px;
  background:none; border:none; font-size:24px; cursor:pointer;
  color:var(--gray-text); width:32px; height:32px; border-radius:6px;
}
.modal-close:hover{background:var(--gray-bg); color:var(--dark)}
.format-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:10px; margin-bottom:20px;
}
.format-opt{
  border:1.5px solid var(--gray-border); border-radius:10px;
  padding:12px 8px; cursor:pointer; text-align:center;
  background:#fff; transition:all 0.15s;
}
.format-opt:hover{border-color:var(--green)}
.format-opt.selected{
  border-color:var(--green); background:var(--green-light);
  box-shadow:0 0 0 3px rgba(59,105,253,0.18);
}
.fmt-icon{font-size:22px; margin-bottom:6px}
.fmt-name{font-weight:600; font-size:13px}
.fmt-desc{font-size:11px; color:var(--gray-text); margin-top:2px}

.adv-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px}
@media(max-width:600px){.adv-grid{grid-template-columns:1fr}}
.adv-row{display:flex; flex-direction:column; gap:4px}
.adv-row label{font-size:12px; color:var(--gray-text); font-weight:600; text-transform:uppercase; letter-spacing:0.4px}
.adv-row select, .adv-row input{
  padding:8px 10px; border:1px solid var(--gray-border); border-radius:6px;
  font-size:13px; background:#fff; font-family:inherit;
}
.checkbox-row{
  display:flex; align-items:center; gap:8px; padding:6px 0;
  font-size:13px; cursor:pointer;
}

.estimated{
  font-size:12px; color:var(--gray-text); margin-top:12px; font-style:italic;
}
.modal-actions{
  display:flex; justify-content:flex-end; gap:10px; margin-top:22px;
  padding-top:16px; border-top:1px solid var(--gray-border);
}

/* ===== HEATMAP ===== */
.heatmap-grid{
  display:grid; grid-template-columns:repeat(10, 1fr); gap:6px;
  margin:16px 0;
}
.heatmap-legend{
  display:flex; align-items:center; gap:14px; font-size:12px; color:var(--gray-text);
  margin-top:10px;
}

/* ===== TOAST ===== */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(60px);
  background:var(--green-dark); color:#fff;
  padding:14px 24px; border-radius:8px; font-size:14px; font-weight:500;
  opacity:0; transition:all 0.3s; z-index:300;
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ===== FOOTER ===== */
.portal-footer{
  background:#fff; border-top:1px solid var(--gray-border);
  padding:20px 40px; text-align:center; color:var(--gray-text); font-size:13px;
  margin-top:40px;
}

/* ==========================================================================
   LANDING PAGE (index.html) — upload screen
   ========================================================================== */
.landing{
  min-height:100vh;
  background:
    radial-gradient(ellipse 1200px 600px at 80% -10%, rgba(108,194,255,0.18), transparent 60%),
    radial-gradient(ellipse 800px 500px at -5% 110%, rgba(255,210,90,0.10), transparent 60%),
    linear-gradient(135deg, #F8FAFC 0%, #EEF3F8 100%);
  display:flex; flex-direction:column;
}
.landing-header{
  padding:24px 40px; display:flex; align-items:center; gap:14px;
  color:var(--green-dark);
}
.landing-header .brand-logo{color:var(--green-dark); filter:none}
.landing-header .brand-name{color:var(--green-dark); font-weight:800}
.landing-header .brand-sub{color:var(--gray-text)}

.landing-main{
  flex:1; display:grid; grid-template-columns:1.1fr 1fr;
  gap:60px; align-items:center; padding:40px 80px 60px;
  max-width:1400px; margin:0 auto; width:100%;
}
@media(max-width:960px){
  .landing-main{grid-template-columns:1fr; padding:20px 24px 40px; gap:32px}
}
.landing-hero h1{
  font-size:42px; font-weight:800; color:var(--green-dark);
  line-height:1.15; letter-spacing:-0.5px; margin-bottom:16px;
}
.landing-hero h1 em{color:var(--vivid-blue); font-style:normal}
.landing-hero p.lead{
  font-size:17px; color:var(--gray-text); line-height:1.7; margin-bottom:22px;
}
.feature-list{list-style:none; padding:0}
.feature-list li{
  display:flex; align-items:flex-start; gap:12px; margin-bottom:14px;
  font-size:15px; color:var(--dark);
}
.feature-list li .icon{
  flex:0 0 26px; height:26px; border-radius:50%;
  background:var(--green-light); color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px;
}
.feature-list li strong{color:var(--green-dark)}

.upload-panel{
  background:#fff; border-radius:20px; padding:32px;
  box-shadow:0 20px 50px -15px rgba(34,33,67,0.25), 0 5px 15px -3px rgba(34,33,67,0.08);
  border:1px solid var(--gray-border);
}
.upload-panel h2{
  font-size:22px; color:var(--green-dark); margin-bottom:6px; font-weight:700;
}
.upload-panel .hint{color:var(--gray-text); font-size:13px; margin-bottom:22px}
.dropzone{
  border:2px dashed var(--gray-border); border-radius:14px;
  padding:38px 20px; text-align:center; cursor:pointer;
  transition:all 0.2s; background:#F8FAFC;
}
.dropzone:hover, .dropzone.dragover{
  border-color:var(--vivid-blue); background:rgba(59,105,253,0.05);
}
.dropzone .big-icon{
  font-size:42px; color:var(--vivid-blue); margin-bottom:10px; line-height:1;
}
.dropzone .drop-title{font-weight:600; color:var(--dark); margin-bottom:6px; font-size:15px}
.dropzone .drop-sub{font-size:13px; color:var(--gray-text)}
.dropzone input[type=file]{display:none}

.upload-actions{
  display:flex; flex-direction:column; gap:10px; margin-top:18px;
}
.upload-actions .sample-link{
  font-size:13px; color:var(--gray-text); text-align:center;
}
.upload-actions .sample-link a{font-weight:600}

.status-box{
  margin-top:18px; padding:14px 16px; border-radius:10px;
  font-size:14px; display:none; align-items:flex-start; gap:10px;
}
.status-box.show{display:flex}
.status-box.info{background:rgba(108,194,255,0.15); color:var(--dark-blue)}
.status-box.success{background:var(--green-light); color:var(--green-dark)}
.status-box.error{background:var(--red-light); color:var(--red)}
.status-box .sb-icon{font-size:18px; line-height:1}

.column-mapper{
  margin-top:18px; background:#FAFBFC; border:1px solid var(--gray-border);
  border-radius:10px; padding:16px; display:none;
}
.column-mapper.show{display:block}
.column-mapper h3{font-size:14px; color:var(--green-dark); margin-bottom:10px}
.column-mapper .mapper-row{
  display:grid; grid-template-columns:160px 1fr; gap:10px; margin-bottom:8px;
  align-items:center; font-size:13px;
}
.column-mapper label{color:var(--gray-text); font-weight:500}
.column-mapper select{
  padding:6px 10px; border:1px solid var(--gray-border); border-radius:6px;
  font-size:13px; background:#fff;
}

.landing-footer{
  padding:20px 40px; text-align:center;
  color:var(--gray-text); font-size:12px;
  border-top:1px solid var(--gray-border); background:#fff;
}

/* Pequeno helper para ícones inline */
.ic{font-family:'Segoe UI Symbol','Apple Symbols',sans-serif; line-height:1}