/* Page visibility */
.page{display:none;}
.page.visible{display:block;}

* { box-sizing: border-box; }
html, body { height: 100%; max-width: 100%; overflow-x: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
               "Helvetica Neue", Arial, sans-serif;
  background: #f2f2f2; margin: 0; color: #111;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.container { max-width: 480px; margin: 0 auto; padding: 16px 12px; }

h1 { text-align: center; font-size: 22px; margin: 16px 0; }
.small { color: #666; font-size: 13px; }

:root {
  --chip-bg: #f2f6ff; --chip-border: #dbe8ff; --chip-text: #0b3b7a;
  --chip-active-bg: #007aff; --chip-active-text: #fff; --chip-hover-bg: #e6f0ff;
}

.section { background:#fff; padding:14px; border-radius:12px; margin-top:14px;
  box-shadow: 0 6px 20px rgba(16,24,40,.06); border:1px solid #eef2f7; }
.panel { background:#fff; border:1px solid #eee; border-radius:12px; padding:12px; margin-top:12px; }
.panel-header { font-weight: 600; margin-bottom: 8px; }
.panel-actions { display:flex; gap:8px; margin-top:8px; }
.hidden { display:none; }

input, select, button { width:100%; padding:12px; margin-top:10px; font-size:16px; }
button { background:#007aff; color:#fff; border:0; border-radius:10px; cursor:pointer; }
button.secondary { background:#e9f2ff; border:1px solid #cfe3ff; color:#0b3b7a; }
button.ghost { background:transparent; border:1px solid #ddd; color:#333; }
button.danger { background:#ff3b30; color:#fff; border:0; }

/* Topnav → bottombar mobilon */
.topnav { position: sticky; top:0; z-index:10; background:#ffffffcc; backdrop-filter: blur(4px);
  display:flex; gap:8px; padding:10px 14px; border-bottom:1px solid #eee; }
.nav-btn { flex:1; padding:10px; border-radius:10px; background:#e9f2ff; border:1px solid #cfe3ff; color:#0b3b7a; }
.nav-btn.active { background: var(--chip-active-bg); border-color: var(--chip-active-bg); color:#fff; }
@media (max-width: 480px){
  .topnav{ position: fixed; top:auto; bottom:0; left:0; right:0; border-bottom:none; border-top:1px solid #eee;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)); }
  .container{ padding-bottom: calc(70px + env(safe-area-inset-bottom,0px)); }
}

/* Csempe rács */
.meters-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:10px; align-items:start; }
.meter-tile { background:#fff; border:1px solid #eee; border-radius:12px; padding:12px; box-shadow:0 4px 14px rgba(16,24,40,.06);
  transition: box-shadow 160ms ease, transform 160ms ease; cursor:pointer; will-change: transform; }
.meter-tile:hover{ box-shadow:0 6px 18px rgba(16,24,40,.08); }
.meter-tile:active{ transform: scale(.995); }
.meter-tile.expanded{ transform: scale(1.03); z-index:3; box-shadow:0 10px 30px rgba(16,24,40,.12); }
.tile-head{ display:grid; grid-template-columns: 1fr; gap:6px; }
.tile-title{ display:flex; align-items:center; gap:8px; }
.unit-badge{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; border:1px solid #cfe3ff; background:#e9f2ff; color:#0b3b7a; font-size:12px; }
.tile-current .soft{ color:#888; }
.tile-body{ margin-top:10px; }
.tile-tools{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; border:1px solid #cfe3ff; background:#e9f2ff; color:#0b3b7a; font-size:14px; }
.icon-btn.del{ border-color:#ffd1cf; background:#ffe9e8; color:#b00020; }

/* Chip csoport */
.chip-group{ display:grid; gap:6px; grid-template-columns: repeat(3, minmax(0,1fr)); margin:8px 0 6px; }
@media (max-width:360px){ .chip-group{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.chip-group .chip{ width:100%; justify-content:center; display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; border:1px solid var(--chip-border); background:var(--chip-bg); color:var(--chip-text); font-size:13px; }
.chip-group .chip.is-active{ background:var(--chip-active-bg); border-color:var(--chip-active-bg); color:var(--chip-active-text); }

/* Lenyitók – egységes nyíl */
.accordion, .month-accordion{ border:1px solid #e6e6e6; border-radius:10px; background:#fff; margin-top:8px; overflow:hidden; }
.accordion-header, .month-accordion-header{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:8px 10px; background:#f8f9fb; border-bottom:1px solid #eee; cursor:pointer; user-select:none; }
.accordion-title, .month-accordion-title{ font-weight:600; color:#222; font-size:15px; }
.accordion-meta, .month-accordion-meta{ color:#666; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.accordion-toggle, .month-accordion-toggle{ width:28px; height:28px; min-width:28px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #cfe3ff; background:#e9f2ff; color:#0b3b7a; border-radius:6px; padding:0; font-size:0; }
.accordion-toggle::before, .month-accordion-toggle::before{ content:"▸"; font-size:14px; transform: translateX(1px); }
.open .accordion-toggle::before, .open .month-accordion-toggle::before{ content:"▾"; transform:none; }
.accordion-content, .month-accordion-content{ display:none; padding:8px 10px 10px; }
.accordion.open .accordion-content, .month-accordion.open .month-accordion-content{ display:block; }

/* Stats items collapse */
#statsResult .stat-card .accordion-content{display:none;}
#statsResult .stat-card.open .accordion-content{display:block;}

/* Óraállás sor */
.reading-row{ background:#fff; border:1px solid #eee; border-radius:8px; padding:8px 10px; margin-top:8px; font-size:14px; }
.reading-row .actions{ margin-top:6px; }

/* Átlag badge – kompakt, egységes */
.tile-averages{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; align-items:center; }
.tile-averages .avg-card{ width:108px; min-height:44px; display:inline-flex; flex-direction:column; justify-content:center; gap:4px; padding:6px 8px; border-radius:10px; border:1px solid #dbe8ff; background:#f2f6ff; color:#0b3b7a; }
.tile-averages .avg-label{ font-size:11px; line-height:1.2; color:#6b7a90; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile-averages .avg-value{ font-size:13px; font-weight:600; color:#102a43; white-space:nowrap; }
@media (max-width:420px){ .tile-averages .avg-card{ width:96px; min-height:40px; padding:5px 7px; } .tile-averages{ gap:4px; } .tile-averages .avg-value{ font-size:12px; } }

/* Quick range */
.range-quick{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.range-quick button{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--chip-border); background:var(--chip-bg); color:var(--chip-text); font-size:13px; cursor:pointer; }
.range-quick .is-active{ background:var(--chip-active-bg); border-color:var(--chip-active-bg); color:var(--chip-active-text); }

/* Chart */
.chart-box{ position:relative; width:100%; max-width:100%; height:280px; margin-top:8px; }
@media (min-width:480px){ .chart-box{ height:320px; } }
@media (min-width:768px){ .chart-box{ height:380px; } }
#statsChart{ display:block; width:100%!important; height:100%!important; }

/* Üres állapot */
.empty-state{ background:#fffdf5; border:1px dashed #ffd98a; color:#6b5b2a; padding:10px 12px; border-radius:8px; margin-top:10px; margin-bottom:8px; font-size:14px; }