/* ---------- RESET / MOBILE FIRST ---------- */
:root{
  --bg-filter: rgba(255,255,255,0.9);
  --accent: #0066ff;
  --accent-2: #00b4ff;
  --card-bg: rgba(255,255,255,0.95);
  --text-dark: #222;
  --glass: rgba(255,255,255,0.12);
  --toast-bg: rgba(0,0,0,0.85);
  --shadow-1: 0 13px 35px rgba(0,0,0,0.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body,#root{height:100%}

body{
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  
  /* NOVO: altura dinâmica iOS e padding seguro */
  min-height: 100dvh;
  padding: env(safe-area-inset-top, 18px) 18px 18px 18px;

  background: linear-gradient(135deg,#7ec8ff 0%, #bcd9ff 50%, #eaf4ff 100%);
  color: var(--text-dark);

  display: flex;
  align-items: flex-start; /* evita corte no topo */
  justify-content: center;
}

/* Background image fallback */
body.has-bg {
  background: url('fundo.jpg') no-repeat center center fixed;
  background-size: cover;
}

/* App wrapper */
.app-wrapper{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  padding-top:12px; /* mantém conteúdo longe do topo no iPhone */
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand .logo{filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15)); border-radius:8px}
.brand-text h1{
  font-size:1.15rem;
  line-height:1;
}
.brand-text .tag{
  font-size:0.78rem;
  color:rgba(0,0,0,0.6);
}

/* Controls */
.controls{display:flex;gap:8px;align-items:center;}
.icon-btn{
  background:transparent;border:1px solid rgba(0,0,0,0.06);padding:8px;border-radius:8px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:1rem;
  transition:all .2s ease;
}
.icon-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.08)}

/* Main and card */
main{display:flex;justify-content:center;padding:6px}
.card{
  width:100%;
  background:var(--card-bg);
  border-radius:14px;
  padding:18px;
  box-shadow:var(--shadow-1);
  border:1px solid rgba(255,255,255,0.9);
  transition:transform .22s ease, box-shadow .22s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 60px rgba(0,0,0,0.5)}

/* header inside card */
.card-head h2{font-size:1.1rem;margin-bottom:6px}
.card-head .muted{font-size:0.85rem;color:rgba(0,0,0,0.6);margin-bottom:8px}

/* form */
form{display:block}
label{display:block;font-weight:600;font-size:0.85rem;margin-bottom:6px;cursor:pointer;transition:color .2s}
label:hover{color:var(--accent)}
input{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #cfcfcf;
  background:transparent;
  font-size:0.95rem;
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.04);
  transition:all .18s;
}
input[readonly]{background:rgba(0,0,0,0.03)}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 6px 18px rgba(0,102,255,0.12);transform:scale(1.01)}

/* button */
.btn-primary{
  width:100%;
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  border:none;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:white;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,102,255,0.18)}
.btn-primary:active{transform:translateY(0)}
.loader{
  display:none;
  width:16px;height:16px;border:3px solid rgba(255,255,255,0.9);border-top-color:transparent;border-radius:50%;
  animation:spin .8s linear infinite; position:absolute; right:14px; top:50%; transform:translateY(-50%);
}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

/* result grid */
.result-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.field{display:block}
.field.small input{width:100%}

/* history panel */
.history{margin-top:14px;border-top:1px dashed rgba(0,0,0,0.06);padding-top:12px}
.history-head{display:flex;align-items:center;justify-content:space-between}
.history-list{list-style:none;max-height:160px;overflow:auto;padding-top:8px}
.history-list li{
  display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:8px;margin-bottom:8px;
  background:linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01));
  cursor:pointer;transition:transform .12s ease,box-shadow .12s;
}
.history-list li:hover{transform:translateX(6px);box-shadow:0 8px 18px rgba(0,0,0,0.06)}
.link-btn{background:transparent;border:none;color:var(--accent);cursor:pointer;font-weight:600;padding:6px}

/* footer */
.footer{text-align:center;margin-top:14px;color:rgba(0,0,0,0.6)}

/* toasts */
.toast-container{position:fixed;right:18px;bottom:18px;z-index:1050;display:flex;flex-direction:column;gap:8px}
.toast{
  min-width:200px;padding:10px 12px;border-radius:8px;color:white;background:var(--toast-bg);box-shadow:0 8px 30px rgba(0,0,0,0.3);
  transform:translateY(8px);opacity:0;animation:toastIn .28s forwards;
}
@keyframes toastIn{to{transform:none;opacity:1}}

/* small screens adjustments */
@media(min-width:720px){
  .brand-text h1{font-size:1.2rem}
  .card{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
  .card-head{grid-column:1/2}
  form{grid-column:1/2}
  .history{grid-column:2/3}
  .result-grid{grid-template-columns:1fr 1fr;gap:10px}
}

/* ===================== */
/*      DARK THEME FIX   */
/* ===================== */
body.theme-dark {
  background: linear-gradient(135deg,#0f1724 0%, #07122a 60%, #021226 100%);
  color:#e6eef9;
}

body.theme-dark p,
body.theme-dark span,
body.theme-dark label,
body.theme-dark .card-head .muted {
  color:#e6eef9;
}

body.theme-dark .card{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.04)
}
body.theme-dark input{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  color:#e6eef9;
}
body.theme-dark .brand-text .tag{color:rgba(255,255,255,0.7)}
body.theme-dark .footer{color:rgba(255,255,255,0.6)}
body.theme-dark .toast{background:rgba(255,255,255,0.08);color:#e6eef9}

/* small polish */
label, .card-head p{user-select:none}

/* ====== HISTÓRICO FIX ====== */
.history-list {
  list-style: none;
  max-height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 8px;
  scrollbar-width: thin;
}

/* Scroll bonita */
.history-list::-webkit-scrollbar{
  width: 8px;
}
.history-list::-webkit-scrollbar-thumb{
 	background: rgba(0,0,0,0.15);
  border-radius: 8px;
}
.history-list::-webkit-scrollbar-thumb:hover{
  background: rgba(0,0,0,0.3);
}

/* ====== POPULAÇÃO ====== */
#populationValue {
  opacity: 1;
  transition: opacity .2s;
}

/* ===================== */
/* MOBILE FIX ABSOLUTO   */
/* ===================== */

@media(max-width: 480px) {

  .topbar {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 6px;
    text-align: center;
    padding-inline: 8px;
  }

  .brand {
    max-width: 100%;
    justify-content: center;
  }

  .brand .logo {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
  }

  .brand-text h1 {
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-text .tag {
    font-size: 0.72rem;
  }

  .controls {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  #themeToggle {
    margin-top: 4px;
  }

  .card {
    padding: 14px;
    width: 100%;
  }

  .card-head h2 {
    font-size: 1rem;
  }

  .card-head .muted {
    font-size: 0.8rem;
  }
}