/* ==========================================================================
   Solheure — components
   Reusable building blocks used across sections: cards, pills/radio groups,
   the EV toggle, buttons, status text, modals, chips, plan cards, stats.
   ========================================================================== */

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
  margin-bottom:var(--space-5);
}

.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1/-1;}
.setup-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

/* --- Pill radio groups (contract type, orientation-style choices) ---
   Real <input type="radio"> under the hood, hidden but still focusable and
   operable by keyboard — :has() drives the checked/focus visuals so no JS
   is needed for styling state. */
.type-pills{display:flex;gap:10px;flex-wrap:wrap;}
.pill{
  flex:1;
  min-width:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  font-size:var(--text-base);
}
.pill input{position:absolute;opacity:0;width:0;height:0;}
.pill:has(input:checked){border-color:var(--gold);background:var(--gold-dim);color:var(--gold);}
.pill:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px;}

.checkbox-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:var(--text-base);
  cursor:pointer;
}
.checkbox-row input{width:16px;height:16px;accent-color:var(--gold);flex-shrink:0;}

/* --- EV on/off switch ---
   A real checkbox (role="switch" via HTML) visually rendered as a track +
   knob. Native semantics, native keyboard support (Space toggles), and the
   browser announces "checked/unchecked" to screen readers for free. */
.switch-row{display:flex;align-items:center;gap:10px;}
.switch{
  position:relative;
  width:42px;height:24px;
  flex-shrink:0;
}
.switch input{
  position:absolute;inset:0;
  width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
}
.switch-track{
  position:absolute;inset:0;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  pointer-events:none;
}
.switch-track .knob{
  position:absolute;top:2px;left:2px;
  width:18px;height:18px;border-radius:50%;
  background:var(--text-dim);
  transition:transform var(--ease), background var(--ease);
}
.switch input:checked + .switch-track{background:var(--gold-dim);border-color:var(--gold);}
.switch input:checked + .switch-track .knob{transform:translateX(18px);background:var(--gold);}
.switch input:focus-visible + .switch-track{outline:2px solid var(--gold);outline-offset:2px;}

.ev-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* --- Buttons --- */
button.primary{
  width:100%;
  background:var(--gold);
  color:#1C1300;
  border:none;
  padding:13px 16px;
  border-radius:var(--radius-md);
  font-size:0.95rem;
  font-weight:600;
  font-family:var(--font-body);
  cursor:pointer;
}
button.primary:disabled{opacity:0.5;cursor:wait;}
button.primary:hover:not(:disabled){filter:brightness(1.06);}

.status{
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  color:var(--text-dim);
  text-align:center;
  padding:8px 0;
}
.status.error{color:var(--red);}

/* --- Tariff / preset blocks --- */
.tariff-block{
  margin-top:6px;
  padding:14px;
  background:var(--surface-2);
  border-radius:var(--radius-md);
}
.preset-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.preset-row label{margin:0;white-space:nowrap;}
.preset-row select{
  flex:1;min-width:160px;
  background:var(--surface);
  padding:8px 10px;
  border-radius:var(--radius-sm);
  font-size:0.85rem;
}

/* --- Collapsible details (appliance list, installation form) --- */
.equip-details{margin-top:14px;}
.equip-details summary{
  cursor:pointer;
  font-size:var(--text-sm);
  color:var(--teal);
  font-family:var(--font-mono);
  padding:4px 0;
}
.equip-details summary::marker{color:var(--teal);}
.equip-hint{font-size:var(--text-xs);color:var(--text-dim);margin-top:10px;line-height:1.5;}

.appliance-group{margin-top:14px;}
.appliance-group:first-child{margin-top:12px;}
.appliance-group-title{
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-dim);
  font-family:var(--font-mono);
  margin-bottom:8px;
}
.appliance-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:7px 0;border-top:1px solid var(--line);
}
.appliance-group .appliance-row:first-of-type{border-top:none;}
.appliance-label{display:flex;align-items:center;gap:10px;font-size:0.86rem;}
.appliance-label input[type="checkbox"]{width:16px;height:16px;accent-color:var(--gold);flex-shrink:0;}
.appliance-label .note{display:block;font-size:0.68rem;color:var(--text-dim);font-weight:400;}
.appliance-count{
  width:52px;text-align:center;
  background:var(--surface-2);
  border-radius:8px;padding:5px 4px;
  font-family:var(--font-mono);
  flex-shrink:0;
}

.est-conso{
  margin-top:var(--space-3);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  color:var(--gold);
  line-height:1.6;
}

/* --- "Mon installation" summary details --- */
#setupDetails{margin:0;}
#setupDetails > summary{
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.98rem;
  color:var(--text);
  padding:2px 0 16px 0;
  list-style:none;
}
#setupDetails > summary::-webkit-details-marker{display:none;}
#setupDetails > summary::after{
  content:'▾';
  float:right;
  color:var(--gold);
  transition:transform var(--ease);
  font-size:0.85rem;
}
#setupDetails[open] > summary::after{transform:rotate(180deg);}
#setupDetails > summary:hover{color:var(--gold);}
#setupSummaryText{font-weight:400;color:var(--text-dim);font-size:0.86rem;}
#setupDetails > summary:hover #setupSummaryText{color:var(--gold);}

/* --- Stats row (generic label/value pairs) --- */
.stats-row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.stat{flex:1;min-width:120px;background:var(--surface-2);border-radius:var(--radius-md);padding:12px 14px;}
.stat-num{font-family:var(--font-mono);font-size:1.15rem;color:var(--text);}
.stat-label{font-size:var(--text-xs);color:var(--text-dim);margin-top:2px;}

/* --- Plan cards --- */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:12px;}
.plan-card{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  display:flex;flex-direction:column;gap:10px;
}
.plan-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.plan-icon-badge{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.plan-icon-badge svg{width:19px;height:19px;}
.plan-card.cat-appliance .plan-icon-badge{background:var(--gold-dim);color:var(--gold);}
.plan-card.cat-ev .plan-icon-badge{background:var(--teal-dim);color:var(--teal);}
.plan-card.cat-grid .plan-icon-badge{background:var(--red-dim);color:var(--red);}
.plan-card.cat-battery .plan-icon-badge{background:var(--violet-dim);color:var(--violet);}
.plan-card-time{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-dim);white-space:nowrap;}
.plan-card-text{font-size:0.88rem;line-height:1.45;color:var(--text);}

/* --- Calendar chips (history + upcoming, unified) --- */
.history-strip{
  display:flex;gap:8px;overflow-x:auto;
  padding:4px 2px 8px;margin-bottom:4px;
  -webkit-overflow-scrolling:touch;
}
.history-strip::-webkit-scrollbar{height:4px;}
.history-chip{
  flex-shrink:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:11px;
  padding:8px 13px;
  font-size:0.76rem;
  font-family:var(--font-mono);
  color:var(--text-dim);
  cursor:pointer;
  white-space:nowrap;
  display:flex;align-items:center;gap:6px;
}
.history-chip:hover{border-color:var(--gold);}
.history-chip.active{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);}
.history-chip.live{border-color:var(--gold);color:var(--gold);font-weight:700;}
.history-chip.live.active{background:var(--gold);color:#1C1300;}
.history-chip.today{border-color:var(--teal);color:var(--teal);font-weight:700;}
.history-chip.today.active{background:var(--teal-dim);}
.history-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0;}
.history-chip .dot.pending{background:var(--text-dim);opacity:0.5;}
.history-chip .dot.future{background:var(--violet);}

.viewing-banner{
  position:sticky;top:8px;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#2A2450;
  border:2px solid var(--violet);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:14px;
  font-size:0.86rem;font-weight:600;color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.back-btn{
  background:var(--violet);color:#14162C;border:none;
  padding:10px 18px;border-radius:var(--radius-sm);
  font-size:0.85rem;font-weight:700;font-family:var(--font-body);
  cursor:pointer;flex-shrink:0;white-space:nowrap;
}
.back-btn:hover{filter:brightness(1.1);}

.bilan-card{
  background:linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:16px 18px;
  margin-bottom:16px;
  display:flex;align-items:center;gap:14px;
}
.bilan-icon{font-size:1.6rem;flex-shrink:0;}
.bilan-title{font-family:var(--font-display);font-weight:600;font-size:0.88rem;margin-bottom:3px;}
.bilan-text{font-size:0.82rem;color:var(--text-dim);line-height:1.5;}
.bilan-text b{color:var(--text);font-weight:600;}
.bilan-text .up{color:var(--gold);}
.bilan-text .down{color:var(--red);}

/* --- Install banner --- */
.install-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface);border:1px solid var(--gold);
  border-radius:var(--radius-md);padding:12px 14px;margin-top:20px;
  font-size:0.82rem;color:var(--text);
}
.install-btn{
  background:var(--gold);color:#1C1300;border:none;
  padding:8px 14px;border-radius:var(--radius-sm);
  font-size:0.82rem;font-weight:600;font-family:var(--font-body);
  cursor:pointer;flex-shrink:0;
}
.install-btn:hover{filter:brightness(1.06);}

/* --- Footer --- */
.footer-note{
  text-align:center;font-size:0.76rem;color:var(--text-dim);
  margin-top:8px;font-family:var(--font-mono);
}
.version-link{
  background:none;border:none;color:var(--gold);
  font-family:var(--font-mono);font-size:0.76rem;
  text-decoration:underline;text-underline-offset:2px;
  cursor:pointer;padding:0;
}

/* --- Floating feedback button --- */
.fab{
  position:fixed;right:20px;bottom:20px;
  width:52px;height:52px;border-radius:50%;
  background:var(--gold);border:none;font-size:1.4rem;
  cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,0.35);
  z-index:40;
}
.fab:hover{filter:brightness(1.08);}

/* --- Modals --- */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(9,11,22,0.72);z-index:50;
  align-items:flex-end;justify-content:center;padding:0;
}
.modal-overlay.show{display:flex;}
.modal-box{
  background:var(--surface);border:1px solid var(--line);
  border-radius:20px 20px 0 0;width:100%;max-width:520px;
  max-height:85vh;overflow-y:auto;padding:22px 22px 28px;
}
@media (min-width:600px){
  .modal-overlay{align-items:center;padding:20px;}
  .modal-box{border-radius:20px;}
}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.modal-title{font-family:var(--font-display);font-weight:500;font-size:1.2rem;}
.modal-close{
  background:var(--surface-2);border:none;color:var(--text);
  width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:0.9rem;
}
.bot-field-wrap{position:absolute;left:-9999px;}
.type-pills + .field.full{margin-top:14px;}

.changelog-entry{padding:14px 0;border-top:1px solid var(--line);}
.changelog-entry:first-child{border-top:none;padding-top:0;}
.changelog-version{font-family:var(--font-mono);color:var(--gold);font-size:0.85rem;margin-bottom:4px;}
.changelog-date{color:var(--text-dim);font-weight:400;}
.changelog-entry ul{margin:6px 0 0 18px;padding:0;font-size:0.88rem;line-height:1.55;}
.changelog-entry li{margin-bottom:2px;}

@media (max-width:520px){
  .setup-grid, .ev-fields{grid-template-columns:1fr;}
}