/* ============================================================
   app-real.css — DOSLOVNÁ kopie CSS z wallbox_evse/web_hlavicka.h
   (PAGE_HEAD styl blok). Používá se jen v wallbox/previews/*.html —
   statických otiscích skutečných stránek zařízení. Web má svůj
   vlastní styl (site.css/wallbox.css), tohle je styl APLIKACE.
   Nic tu neměň bez porovnání se zdrojem ve wallbox_evse.
   ============================================================ */

*, *::before, *::after {box-sizing: border-box;}
body{background:#0f172a;color:#f8fafc;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;display:flex;justify-content:center;align-items:flex-start;padding:20px;margin:0;min-height:100vh;}

.card{background:#1e293b;padding:1.5rem;border-radius:1rem;box-shadow:0 10px 25px rgba(0,0,0,0.5);width:100%;max-width:400px;border:1px solid #334155;height:fit-content;margin-bottom:20px;}

.status-box{background:#161e2e; padding:12px; border-radius:8px; margin-bottom:20px; border-left:4px solid #38bdf8;}
.status-box-evse{border-left-color:#10b981; padding:16px;}
.status-box-header{border-left-color:#0d9488; text-align:center; padding:15px; margin-bottom:20px;}

.status-item{display:flex; justify-content:space-between; align-items:center; font-size:0.85rem; margin-bottom:8px; color:#cbd5e1;}
.evse-text{font-size:1.05rem; color:#e2e8f0;}

.status-val{font-weight:bold; color:#38bdf8;}
.evse-val{font-size:1.2rem; color:#10b981;}

.online{color:#10b981;} .offline{color:#ef4444;}
h2{color:#e2e8f0;margin:0;font-size:1.4rem;}
h3{color:#cbd5e1;text-align:center;margin-top:0;font-size:1.2rem;}
label{display:block;margin:15px 0 5px;color:#94a3b8;font-size:0.85rem;}
input[type='text'], input[type='number'], input[type='password'], select{width:100%;padding:12px;background:#0f172a;border:1px solid #334155;border-radius:8px;color:white;box-sizing:border-box;font-size:16px;-webkit-appearance:none;}

input[type='range']{width:100%; margin:10px 0; accent-color:#10b981; cursor:pointer;}

.btn{display:block;width:100%;padding:14px;background:#0284c7;border:none;border-radius:8px;color:white;font-weight:bold;cursor:pointer;margin-top:15px;font-size:1rem;text-align:center;text-decoration:none;box-sizing:border-box;-webkit-appearance:none;}
.btn-green{background:#10b981;}

.btn-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:10px;}
.btn-amp{padding:12px 0; background:#334155; border:none; border-radius:6px; color:white; font-weight:bold; cursor:pointer; text-align:center; text-decoration:none; font-size:1rem;}
.btn-amp.active{background:#0284c7;}
.btn-amp.disabled{opacity:0.3;}

.btn-sys{display:block;width:100%;padding:10px;background:#1e293b;border:1px solid #334155;border-radius:8px;color:#94a3b8;font-weight:normal;cursor:pointer;margin-top:12px;font-size:0.85rem;text-align:center;text-decoration:none;box-sizing:border-box;}

.evse-viz{display:flex; flex-direction:column; align-items:center; justify-content:center; margin:25px 0; gap:15px; width:100%; padding:0;}
.battery-ico{width:100%; max-width:350px; height:60px; border:5px solid #cbd5e1; border-radius:10px; position:relative; padding:5px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.battery-ico::after{content:''; position:absolute; left:-12px; top:15px; width:8px; height:22px; background:#cbd5e1; border-radius:2px 0 0 2px;}
.battery-fill{height:100%; background:#10b981; position:absolute; top:0; left:0; box-shadow: 0 0 20px rgba(16,185,129,0.6); border-radius:2px;}
.bat-pct-text{position:relative; z-index:2; font-size:1.1rem; font-weight:bold; color:#ffffff; text-shadow:1px 1px 4px rgba(0,0,0,0.9);}

.wire-wrapper{display:flex; align-items:center; justify-content:center; width:100%; max-width:350px; position:relative;}
.connector{width:18px; height:24px; background:#94a3b8; z-index:2;}
.plug-left{border-radius:4px 0 0 4px; border-right:2px solid #475569;}
.plug-right{border-radius:0 4px 4px 0; border-left:2px solid #475569;}
.wire{flex-grow:1; height:8px; background:#334155; position:relative; overflow:hidden;}
.current-flow{position:absolute; width:40px; height:100%; background:#06b6d4; left:40px; top:0; filter:blur(3px);}

.btn-danger{display:block;width:100%;padding:10px;background:transparent;border:1px solid #451a03;border-radius:8px;color:#ef4444;font-size:0.8rem;margin-bottom:15px;}
.btn-reset{display:block; width:100%; background:transparent; border:none; color:#ef4444; font-size:0.8rem; text-align:right; text-decoration:none; margin-top:40px; padding:5px 0; opacity:0.7;}
.back{display:block; text-align:center; margin-top:30px; color:#94a3b8; text-decoration:none; font-size:0.9rem; width:100%;}

.switch-container{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:12px;background:#1e293b;border-radius:8px; border:1px solid #334155;}
.switch{position:relative;display:inline-block;width:50px;height:24px;}
.switch input{display:none;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#334155;border-radius:24px;}
.slider:before{position:absolute;content:'';height:18px;width:18px;left:3px;bottom:3px;background-color:white;border-radius:50%;}
input:checked + .slider{background-color:#0284c7;}
input:checked + .slider:before{transform:translateX(26px);}

.switch-box{display:flex;flex-direction:column;margin-top:10px;padding:12px;background:#1e293b;border-radius:8px; border:1px solid #334155;}
.switch-row{display:flex;align-items:center;justify-content:space-between;}
.switch-row + .switch-row{margin-top:12px;padding-top:12px;border-top:1px solid #334155;}

.calib-box{background:#1e293b;padding:12px;border-radius:8px;border:1px solid #334155;margin-top:10px;}
.calib-row + .calib-row{margin-top:14px;padding-top:14px;border-top:1px solid #334155;}
.calib-row-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.calib-row-head span:first-child{color:#cbd5e1;font-size:0.9rem;}
.calib-btns{display:flex;gap:10px;margin-top:14px;}
.calib-btns button{flex:1;margin-top:0;font-family:inherit;padding:8px;font-size:0.85rem;}

.mt-20 { margin-top: 20px; }
.radio-group { display: flex; gap: 8px; }
.radio-group input[type='radio'] { display: none; }
.radio-label { display: inline-block; width: 32px; height: 42px; line-height: 42px; text-align: center; border: 1px solid #334155; border-radius: 6px; cursor: pointer; background: #0f172a; color: #94a3b8; font-weight: normal; font-size: 15px; }
.radio-group input[type='radio']:checked + .radio-label { background: #0284c7; color: white; border-color: #0284c7; }
.switch-container span { font-weight: normal; color: #cbd5e1; }