/*
 * panel.css — the left command panel and all its controls.
 *
 * Covers the panel shell + brand header, section cards, label rows, and the
 * control widgets: range sliders, numeric steppers, selects, the cooling
 * segmented control, and the play/speed transport. Responsive size tweaks for
 * .brand / .sec live in base.css.
 */

/* ---------- left command panel ---------- */
#panel{width:344px;min-width:344px;height:100vh;overflow-y:auto;
  background:var(--sand);border-right:1px solid var(--line);padding:0 0 28px}
#panel::-webkit-scrollbar{width:9px}
#panel::-webkit-scrollbar-thumb{background:#d2ccb6;border-radius:6px}
.brand{padding:18px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--sand);z-index:5}
.brand h1{margin:0;font-size:16px;font-weight:700;letter-spacing:.005em;color:var(--ink);
  display:flex;align-items:center;gap:.5rem}
.brand h1 span{font-size:1.3rem;line-height:1}
.brand p{margin:5px 0 0;font-size:11.5px;color:var(--muted);letter-spacing:.01em}
.sec{padding:16px 18px;border-bottom:1px solid var(--line)}
.sec h2{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.sec h2 .dot{width:8px;height:8px;border-radius:50%;background:var(--solar)}
.sec.compute h2 .dot{background:var(--compute)}
.sec.cool h2 .dot{background:#c46a2a}
.sec.store h2 .dot{background:var(--batt)}
.row{margin-bottom:13px}
.row:last-child{margin-bottom:0}
.row .lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.row .lab span:first-child{font-size:12.5px;color:var(--ink-deep);font-weight:500}
.row .lab .val{font-variant-numeric:tabular-nums;font-size:12px;color:var(--solar);font-weight:700}

/* sliders */
input[type=range]{-webkit-appearance:none;width:100%;height:5px;border-radius:3px;
  background:#ddd6c2;outline:none;margin:3px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--ink);cursor:pointer;box-shadow:0 0 0 3px rgba(10,92,10,.15)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;
  background:var(--ink);cursor:pointer}

/* steppers */
.stp{display:flex;align-items:stretch;gap:5px}
.stp .num{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--bg);border:1.5px solid var(--line);border-radius:.375rem;
  font-variant-numeric:tabular-nums;font-size:16px;font-weight:700;color:var(--ink);min-height:36px}
.stp .num small{font-size:10px;color:var(--dim);font-weight:500}
#panel .btn,#controls .btn{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:.375rem;
  cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;
  min-width:34px;padding:0 9px;transition:.12s;user-select:none}
#panel .btn:hover,#controls .btn:hover{background:#fff;border-color:var(--muted)}
#panel .btn:active,#controls .btn:active{transform:translateY(1px)}
#panel .btn.wide,#controls .btn.wide{min-width:40px}
select{width:100%;background:var(--bg);border:1.5px solid var(--line);color:var(--ink);
  border-radius:.375rem;padding:9px;font-size:12.5px;font-family:inherit;cursor:pointer}
select:focus{outline:none;border-color:var(--ink)}
.spec{margin-top:8px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.55}
.seg{display:flex;gap:6px}
.seg button{flex:1;padding:10px 0;border:1.5px solid var(--line);background:var(--bg);color:var(--muted);
  border-radius:.375rem;cursor:pointer;font-size:12.5px;font-weight:600;font-family:inherit;transition:.12s;line-height:1.25}
.seg button.on{background:rgba(10,92,10,.07);border-color:var(--ink);color:var(--ink)}
.play{display:flex;gap:8px;align-items:center;margin-top:10px}
.play button{padding:8px 13px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);
  border-radius:.375rem;cursor:pointer;font-size:12.5px;font-weight:600;font-family:inherit}
.play button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.foot{padding:14px 18px;font-size:11px;color:var(--muted);line-height:1.6}

/* ---------- section dot for the appliances (load) section ---------- */
.sec.load h2 .dot{background:#2a8f86}

/* ---------- search picker ---------- */
.picker{position:relative;margin-bottom:10px}
.picker-input{width:100%;background:var(--bg);border:1.5px solid var(--line);color:var(--ink);
  border-radius:.375rem;padding:9px 10px;font-size:12.5px;font-family:inherit}
.picker-input:focus{outline:none;border-color:var(--ink)}
.picker-input::placeholder{color:var(--dim)}
.picker-results{margin-top:6px;border:1.5px solid var(--line);border-radius:.45rem;background:var(--bg);
  max-height:248px;overflow-y:auto;box-shadow:0 6px 18px rgba(28,51,32,.10)}
.picker-results::-webkit-scrollbar{width:8px}
.picker-results::-webkit-scrollbar-thumb{background:#d2ccb6;border-radius:6px}
.picker-item{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;
  padding:8px 10px;border:none;border-bottom:1px solid var(--line2);background:transparent;
  cursor:pointer;font-family:inherit}
.picker-item:last-child{border-bottom:none}
.picker-item:hover{background:rgba(10,92,10,.06)}
.picker-item-main{flex:1;min-width:0}
.picker-item-name{font-size:12px;font-weight:600;color:var(--ink-deep);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-item-sub{font-size:10.5px;color:var(--muted);margin-top:1px}
.picker-item-price{flex-shrink:0;font-size:11px;font-weight:700;color:var(--solar);
  font-variant-numeric:tabular-nums;margin-left:6px}
.picker-empty{padding:9px 10px;font-size:11.5px;color:var(--muted)}

/* ---------- selected-part rows ---------- */
.sel-list{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.sel-empty{font-size:11px;color:var(--dim);font-style:italic;padding:1px 0}
.sel-row{border:1.5px solid var(--line);border-radius:.45rem;background:var(--bg);padding:8px 9px}
.sel-top{display:flex;align-items:flex-start;gap:8px}
.sel-main{flex:1;min-width:0}
.sel-name{font-size:12px;font-weight:600;color:var(--ink-deep);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sel-spec{font-size:10.5px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.sel-ctrls{display:flex;align-items:center;gap:6px;flex-shrink:0}
.sel-remove{width:26px;height:26px;flex-shrink:0;border:1.5px solid var(--line);border-radius:.35rem;
  background:var(--bg);color:var(--danger);cursor:pointer;font-size:12px;font-weight:700;line-height:1;transition:.12s}
.sel-remove:hover{background:#fff;border-color:var(--danger)}
.sel-extra{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line2);
  display:flex;flex-direction:column;gap:7px}
.sel-est{font-size:10.5px;font-weight:600;color:var(--compute);font-variant-numeric:tabular-nums}

/* ---------- compact inline stepper ---------- */
.mini{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mini-lab{font-size:11px;color:var(--ink-deep);font-weight:500}
.mini-stp{display:flex;align-items:center;gap:5px}
.mini-stp .btn{min-width:26px;height:26px;padding:0 7px;font-size:13px}
.mini-val{min-width:52px;text-align:center;font-size:11.5px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.seg-mini{gap:5px}
.seg-mini button{padding:6px 4px;font-size:10.5px}

/* ---------- primary action buttons in panel ---------- */
#panel .btn.btn-primary,
#controls .btn.btn-primary {
  background: var(--foreground-color);
  color: var(--background-color);
  border-color: var(--foreground-color);
}
#panel .btn.btn-primary:hover,
#controls .btn.btn-primary:hover {
  opacity: 0.85;
}