/* === OPTIMA FONT FAMILY === */
@font-face {
  font-family: 'Optima';
  src: url('fonts/OPTIMA.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  letter-spacing: 3px;
}





@font-face {
  font-family: 'Optima';
  src: url('fonts/Optima Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  letter-spacing: 3px;
}

@font-face {
  font-family: 'Optima';
  src: url('fonts/OPTIMA_B.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  letter-spacing: 3px;
}

@font-face {
  font-family: 'Optima';
  src: url('fonts/Optima_Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  letter-spacing: 3px;
}



:root{
    /* UI colors */
    --bg: #0b0f17;
    --glass: rgba(10,14,22,0.42);
    --panel: rgba(12,16,24,0.75);
    --border: rgba(255,255,255,0.16);
    --text: #eef2f6;
    --muted: #b9c2cf;
  
    /* lines */
    --stroke-w: 10;
    --blue: #4fb3ff;   /* panels→inverter, inverter→battery, battery→inverter */
    --red:  #ff6a6a;   /* inverter→house */
  }
  
  *{ box-sizing:border-box; }
  html,body{
    height:100%;
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family: 'Optima', sans-serif;
    font-size: 18px;
  }
  
  /* ===== App & Scene ===== */
  .app{ padding:0; }
  
  .scene{
    position:relative;
    width:100%;
    max-width:1400px;
    margin:0 auto;
    aspect-ratio:9/16;                  /* JS will update to true image ratio */
    overflow:hidden;
    border-radius:14px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
  }
  .svg{ width:100%; height:100%; display:block; }
  
  /* ===== Overlays ===== */
  .overlay{
    position:absolute; left:0; right:0;
    padding:12px 16px;
    pointer-events:none;
  }
  .overlay *{ pointer-events:auto; }
  .overlay-top{ top:0; }
  .overlay-bottom{ bottom:0; }
  
  .topbar, .note{
    background: linear-gradient(to bottom, var(--glass), rgba(10,14,22,0.6));
    border:1px solid var(--border);
    border-radius:14px;
    /*backdrop-filter: blur(8px) saturate(1.05);*/
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }
  
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding:10px 12px;
  }
  
  .brand{ display:flex; align-items:center; gap:10px; font-weight:600; }
  .brand .dot{
    width:10px; height:10px; border-radius:999px;
    background:#7ef9a1; box-shadow:0 0 8px 2px rgba(126,249,161,.7);
  }
  
  .controls{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; }
  .controls label{ color:var(--muted); font-size:18px; }
  .controls select, .size-input, .btn{
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 10px;
    outline: none;
  }
  .size-input{ display:inline-flex; align-items:center; gap:8px; }
  .size-input input{ width:80px; background:transparent; border:none; color:var(--text); font-size:14px; outline:none; }
  .size-input span{ color:var(--muted); font-size:18px; }
  .btn{ cursor:pointer; }
  .hint{ color:var(--muted); }
  
  .note{
    font-size:18px; color:var(--muted);
    padding:10px 12px; border-radius:12px;
  }
  
  /* ===== Lines (thick, dashed, animated) ===== */
  .flows polyline{
    fill:none;
    stroke-width: var(--stroke-w);
    stroke-linecap: round;
    stroke-linejoin: round;
    /*filter: drop-shadow(0 0 10px rgba(0,0,0,.35));*/
    stroke-dasharray: 18 14;
    animation: flowDash 1.1s linear infinite;
  }


/* Weather background transition */
/*#bgImg {*/
/*  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;*/
/*  opacity: 1;*/
/*  transform: scale(1);*/
/*}*/

/*#bgImg.bg-fade {*/
/*  opacity: 0;*/
/*  transform: scale(1.03); */
/*}*/

/* Glow boost on lines when new weather is applied */
.flows {
  /*transition: filter 0.4s ease-in-out;*/
}

.flows.boost {
  /*filter: drop-shadow(0 0 20px rgba(255,255,255,0.45));*/
}


  
  /* Fixed colors per segment */
  #line-panels-inverter,
  #line-inverter-battery,
  #line-battery-inverter{ stroke: var(--blue); }
  #line-inverter-house{ stroke: var(--red); }
  
  @keyframes flowDash { to { stroke-dashoffset: -32; } }
  
  /* ===== SVG Cards ===== */
  /* ===== SVG Cards (Improved) ===== */
/* ===== SVG Cards (final) ===== */
.cards .card rect{
    fill: rgba(12,16,24,0.78);
    stroke: var(--border);
    stroke-width: 1.5;
    /*filter: drop-shadow(0 12px 28px rgba(0,0,0,.4));*/
    z-index: 99;
    width: 350px;
    min-height: 150px;;
  }
  
  /* SVG text: let y act as top edge */
  .cards text{
    fill: #fff;
    font-family: 'Optima', sans-serif;
    user-select: none;
    dominant-baseline: hanging;
  }
  
  .cards .title{ font-size: 35px; letter-spacing: .3px; fill: var(--muted); }
  .cards .big  { font-size: 70px; font-weight: 800; letter-spacing: .4px; }
  .cards .sub  { font-size: 28px; fill: var(--muted); }
  
  
  
  /* ===== Calibration dots ===== */
  #calibDots{ display:none; }
  .calibrating #calibDots{ display:block; }
  .calib-dots circle{ fill:#7ef9a1; stroke:#111827; stroke-width:2; }
  .calib-dots text{ fill:#fff; font-size:14px; }
  
  /* ===== Responsive ===== */
  @media (max-width: 880px){
    .topbar{ flex-direction:column; align-items:stretch; }
  }
  .cursor-info{
    position: fixed;
    z-index: 9999;
    background: rgba(15,20,30,0.92);
    color: #eef2f6;
    font: 12px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    padding: 6px 8px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    pointer-events: none;
    box-shadow: 0 8px 18px rgba(0,0,0,.35);
    white-space: nowrap;
}

  
/* ==== House modal layout ==== */
.house-container{
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
  
    /* New background just for the modal */
    background:url("img/house.png");
    background-size: cover;
    background-position: center center;
    color:#fff;
    font-family: 'Optima', sans-serif;
    padding-top: 25%;
      /* animation state */
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  }
  .house-container.visible{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  
  
  .house-header{
    font-weight:700;
    font-size:52px;
    letter-spacing:.2px;
  }
  
  .house-topbar{
    display:flex; justify-content:space-between; align-items:center;
    background: rgba(12,16,24,0.85);
    border:1px solid rgba(255,255,255,0.16);
    border-radius:14px;
    padding:12px 16px;
  }
  .house-topbar *{
    font-size: 80px !important;
    padding: 30px;
  }
  .house-title{ color:#b9c2cf; font-size:40px; }
  .house-total{ font-weight:800; font-size:40px; }
  

  .house-topbar,
.appliances-grid,
.house-actions{
  width:100%;
  max-width:2200px;   /* adjust if you want narrower/wider */
  margin:0 auto;
}
.house-actions button{
  font-size: 42px;
}


  /* ==== Larger House UI Layout ==== */
  .appliances-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
    gap:30px;                   /* tighter spacing */
    align-items:start;
    justify-items:center;
    padding:50px 0 4px;
  }
  
  .appliance-card{
    width:100%;
    max-width:none;
    min-height:230px;           /* bigger height */
    background: rgba(12,16,24,0.9);
    border:2px solid rgba(255,255,255,0.18);
    border-radius:22px;
    padding:18px 20px;
    box-shadow:0 8px 28px rgba(0,0,0,0.35);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  }
  .appliance-card:hover{
    transform: translateY(-2px);
  }
  
  .appliance-card .appliance-img{
    width: 250px;
    height:250px;
    object-fit:contain;
    filter: brightness(0) invert(1);
    padding: 20px;
  }
  .appliance-card.on{
    border-color: #4ade80; /* soft green */
    box-shadow: 0 0 16px rgba(69, 107, 235, 0.9);
    background: rgba(54, 54, 59, 0.9);
  }
  
  .appliance-card h4{
    margin:0;
    font-size:60px;
    font-weight:700;
  }
  
  .appliance-card .kw{
    font-size:35px;
    color:#b9c2cf;
  }
  
  
  .toggle-img{
    width: 150px !important;
    margin-top: 8px;
    object-fit: cover;
    pointer-events: none; /* so clicks still hit the card */
    /*filter: grayscale(1) brightness(0.6);*/
    color: #351ba8;
    font-size: 40px;
  }
  .appliance-card.on .toggle-img {
    /*filter: grayscale(0) brightness(1.8) saturate(2);*/
  }
  
  
  /* ==== Bigger Buttons ==== */
  .house-actions {
    margin-top: 20px;
    display: flex;
    gap: 20px;
    justify-content: center;
  }
  
  .btn-add, .btn-exit {
    font-size: 28px;
    padding: 26px 40px;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: background 0.25s ease;
  }
  
  .btn-add { background: #392A81; color: #ffffff;}
  .btn-add:hover { background: #2f2f2f; }
  .btn-exit { background: #f2f2f2; }
  .btn-exit:hover { background: #4b5563; }
  
  #saveApplianceBtn { background: #392A81; color: #ffffff;}
  #saveApplianceBtn:hover { background: #2f2f2f; }
  /* ==== Modal ==== */
  .modal{
    position:fixed; inset:0;
    inset:0;
    background: rgba(0,0,0,0.95);
    display:none;
    align-items:start; justify-content:center;
    z-index: 1002;
    padding-top: 20%;

    opacity:0;
  transition: opacity 0.25s ease-out;
  }
  .modal.show{
    opacity:1;
  }

  .modal-content{
    width:min(2200px);
    background:#0f1420;
    border:1px solid rgba(255,255,255,0.15);
    border-radius:16px;
    padding:18px;
    display:flex; flex-direction:column; gap:10px;

    transform: translateY(18px) scale(0.96);
    transition: transform 0.25s ease-out;
  }


  .modal.show .modal-content{
    transform: translateY(0) scale(1);
  }


  .modal-content h3{ margin:0 0 4px; font-size: 50px !important;}
  .modal-content label{ color:#b9c2cf; font-size:29px;padding-top: 20px; padding-bottom: 20px;}
  .modal-content input{
    background:rgba(255,255,255,0.06);
    color:#fff; border:1px solid rgba(255,255,255,0.16);
    border-radius:10px; padding:10px 12px; outline:none;
    min-height: 100px;
    font-size: 24px;
  }
  .modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
  .modal-actions button{
    border:none; border-radius:10px; padding:30px 40px; cursor:pointer; font-weight:700;font-size: 45px;
  }
  .modal-actions .secondary{ background:#2d3748; color:#fff; }
  .modal-actions button:not(.secondary){ background:#1f9d5a; color:#fff; }
  

  .quote-modal{
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.55);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999;
    width:100%;
    height:100vh;
  }
  .quote-modal-content{
    width:min(480px, 94vw);
    background:#0f1420;
    border-radius:16px;
    padding:20px;
    border:1px solid rgba(255,255,255,0.18);
    color:#fff;
    margin:auto;
    align-self:center;
  }
  .quote-modal-content label{
    display:block;
    margin-top:10px;
    font-size:14px;
    color:#b9c2cf;
  }
  .quote-modal-content input{
    width:100%;
    margin-top:4px;
    padding:9px 10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.2);
    background:rgba(15,23,42,0.9);
    color:#fff;
  }
  .quote-summary{
    margin-top:12px;
    font-size:14px;
    color:#e5e7eb;
  }
  .quote-actions{
    margin-top:16px;
    display:flex;
    gap:10px;
    justify-content:flex-end;
  }
  .btn-quote{
    cursor:pointer;
  }
  .btn-primary{
    background:#22c55e;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:10px 16px;
  }
  .btn-secondary{
    background:#374151;
    color:#fff;
    border:none;
    border-radius:10px;
    padding:10px 16px;
  }
  .weather-select option{
    background-color: rgba(0,0,0,0.9);
    min-height: 50px;
  }