/* ===============================
   LIGHT THEME (RESET + VARIABLES)
   =============================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  /* surfaces */
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f3f4f6;

  /* borders/shadows */
  --border: #e5e7eb;
  --shadow: 0 8px 20px rgba(17, 24, 39, 0.08);

  /* text */
  --text: #111827;
  --muted: #6b7280;

  /* brand */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;

  /* status */
  --pos: #16a34a;
  --neg: #dc2626;
}

html, body{
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ===============================
   LAYOUT
   =============================== */
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.container{
  flex:1;
  padding:20px;
  max-width:1100px;
  margin:0 auto;
}

/* ===============================
   TOP BAR
   =============================== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.brand-logo{
  width:28px;
  height:28px;
  display:block;
}

.brand-text{
  color: var(--text);
  font-weight:700;
  letter-spacing:0.2px;
}

.nav{
  display:flex;
  gap:18px;
}

.nav a{
  font-size:14px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.nav a:hover{
  background: var(--surface-2);
  color: var(--text);
}

.nav a.active{
  background: rgba(37, 99, 235, 0.10);
  color: var(--primary);
}

/* ===============================
   CARDS
   =============================== */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.card + .card { margin-top: 16px; }

.clickable{ cursor:pointer; }
.clickable:active{ transform: scale(0.99); }

/* ===============================
   TYPOGRAPHY
   =============================== */
.h1{
  font-size:22px;
  font-weight:700;
  margin-bottom:10px;
  color: var(--text);
}

.h2{
  font-size:16px;
  font-weight:700;
  margin-bottom:6px;
  color: var(--text);
}

.p{
  font-size:14px;
  color: var(--muted);
  line-height:1.55;
}

.muted{ opacity: 1; color: var(--muted); }

/* ===============================
   BUTTONS
   =============================== */
.btn{
  display:inline-block;
  background: var(--primary);
  color:#fff;
  font-size:13px;
  padding: 9px 14px;
  border-radius: 10px;
  border:none;
  cursor:pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}

.btn:hover{ background: var(--primary-hover); }
.btn:active{ transform: translateY(1px); }

.btn.secondary{
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn.secondary:hover{
  background: #eef2ff;
  border-color: #c7d2fe;
}

/* ===============================
   INPUTS
   =============================== */
.input{
  width:100%;
  margin-top:8px;
  padding:10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  outline: none;
}

.input:focus{
  border-color: rgba(37,99,235,0.6);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

/* ===============================
   UTILS
   =============================== */
.mt{ margin-top:14px; }

.row{
  display:flex;
  align-items:center;
  gap:12px;
}

.hr{
  height:1px;
  background: var(--border);
  opacity: 1;
  margin-top:18px;
}

/* ===============================
   NEWS
   =============================== */
.news-img{
  display:block;
  width:100%;
  max-height:180px;
  object-fit:cover;
  border-radius: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}

/* ===============================
   POST CONTENT (News detail)
   =============================== */
.post-content{
  color: var(--text);
  line-height:1.65;
  overflow:hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.post-content p,
.post-content li{ font-size:14px; color: var(--text); }

.post-content h1{
  color: var(--text);
  font-weight: 800;
  font-size: clamp(22px, 5.2vw, 36px);
  line-height: 1.15;
  margin: 14px 0 10px;
}
.post-content h2{
  color: var(--text);
  font-weight: 750;
  font-size: clamp(18px, 4.2vw, 28px);
  line-height: 1.2;
  margin: 16px 0 10px;
}
.post-content h3{
  color: var(--text);
  font-weight: 700;
  font-size: clamp(16px, 3.6vw, 22px);
  line-height: 1.25;
  margin: 14px 0 8px;
}

.post-content figure,
.post-content .wp-caption{ margin:12px 0; }

.post-content img{
  max-width:100%;
  height:auto;
  border-radius: 14px;
  display:block;
  margin: 12px 0;
  border: 1px solid var(--border);
}

.post-content a{ text-decoration: underline; color: var(--primary); }

/* ===============================
   FOOTER
   =============================== */
.footer{
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 14px 20px;
  text-align:center;
}

.footer small{
  font-size:12px;
  color: var(--muted);
}

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 600px){
  .nav{ gap: 10px; }
  .container{ padding: 14px; }
  .h1{ font-size: 20px; }
}

/* ===============================
   TRACKING UI
   =============================== */
.main-card{
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1100px){
  .main-card{ max-width: 700px; }
}

.annualWrap{
  margin:14px 0 16px 0;
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background: var(--surface-2);
}

.annualTitle{ font-size:18px; font-weight:800; margin-bottom:6px; color: var(--text); }
.annualBox{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
}

.annualRow{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:6px 2px;
  font-size:14px;
}

.annualLabel{ color: var(--muted); }
.annualValue{ font-weight:700; color: var(--text); }

/* bar styles used by app.js */
.qbar-track{
  height:10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
  margin-top:8px;
}
.qbar-fill{ height:100%; width:0%; }
.qbar-fill.pos{ background: var(--pos); }
.qbar-fill.neg{ background: var(--neg); }

.pct.pos{ color: var(--pos); font-weight:700; }
.pct.neg{ color: var(--neg); font-weight:700; }

/* ===============================
   INVESTMENTS FORM (PWA)
   =============================== */
html.form-noscr, body.form-noscr{
  height: 100%;
  overflow: hidden;
}

/* solo quando visualizziamo il form */
body.form-mode .container{
  max-width: none;
  padding: 0;
}

body.form-mode #view{
  padding: 0;
}

body.form-mode .footer{
  display: none; /* evita che “mangi” spazio e crei doppio scroll */
}

.formShell{
  height: calc(100vh - 64px); /* topbar sticky */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.formTop{
  flex: 0 0 auto;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.formFrame{
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}

/* OVERRIDE: Investimenti form con stessa larghezza del resto app */
body.form-mode .container{
  max-width: 1100px;     /* come Tracking / e come il tuo Jotform width */
  margin: 0 auto;
  padding: 20px;         /* ripristina padding coerente */
}

body.form-mode .formShell{
  overflow: visible;     /* evita tagli strani */
}

body.form-mode .formFrame{
  height: 80vh;          /* altezza “umana” dentro layout standard */
}

/* evita blocco scroll globale se form-noscr è attivo */
html.form-noscr, body.form-noscr{
  overflow: auto;
}
/* FINAL: form in modalità pagina (no doppio scroll, full height) */
html.form-noscr, body.form-noscr{
  height: 100%;
  overflow: hidden;
}

body.form-mode .container{
  max-width: none;
  margin: 0;
  padding: 0;
}

body.form-mode #view{
  padding: 0;
}

body.form-mode .formShell{
  height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.form-mode .formTop{
  flex: 0 0 auto;
}

body.form-mode .formFrame{
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}


/* iOS Safari: evita zoom su focus input */
@supports (-webkit-touch-callout: none) {
  .auth-card input,
  .auth-card select,
  .auth-card textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
    line-height: 1.25 !important;
  }
}