/* MyStationHub Ver025 — shared UI Controls Design System.
   Applies to actual Master Admin/customer forms. No API or state mutation. */
:root{
 --msh-ui-blue:#0857f8;
 --msh-ui-blue-hover:#0749dc;
 --msh-ui-ink:#182c4c;
 --msh-ui-line:#dce5f3;
 --msh-ui-soft:#f8faff;
 --msh-ui-focus:#8bb6ff;
 --msh-ui-success:#168963;
 --msh-ui-warn:#b56b13;
 --msh-ui-danger:#cc4056;
}
:is(.app,.msh-dashboard-page,.msh-admin-billing-page,.msh-customer-account-page) :is(button,input,select,textarea,summary){-webkit-tap-highlight-color:transparent}
:is(.app,.msh-dashboard-page,.msh-admin-billing-page) :is(button,a,input,select,textarea,summary):focus-visible{
 outline:3px solid var(--msh-ui-focus);outline-offset:2px;
}
/* Real fields: inherited forms, payment-management and station editors. */
.app .field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea),
.msh-dashboard-page #msh-command .msh-cmd-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea),
.msh-admin-billing-page :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea),
.msh-dashboard-page .msh-billing-customer :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea),
.msh-account-control-scope .formfield :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){
 border:1px solid var(--msh-ui-line);
 border-radius:12px;
 box-shadow:0 1px 2px rgba(17,47,94,.025);
 background-color:#fff;
 color:var(--msh-ui-ink);
 min-height:44px;
 max-width:100%;
 transition:border-color .15s,box-shadow .15s;
}
.app .field :is(input,select,textarea):focus,
.msh-admin-billing-page :is(input,select,textarea):focus,
.msh-dashboard-page #msh-command .msh-cmd-form :is(input,select,textarea):focus{
 border-color:#6e9af6;box-shadow:0 0 0 3px rgba(8,87,248,.11);
}
@media(max-width:1120px){
 :is(.app,.msh-dashboard-page,.msh-admin-billing-page,.msh-account-control-scope)
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]),
 :is(.app,.msh-dashboard-page,.msh-admin-billing-page,.msh-account-control-scope) :is(select,textarea){font-size:16px!important;}
}
/* User-editable toggles, checkboxes and radios remain genuine HTML inputs. */
.app :is(input[type=checkbox],input[type=radio]),
.msh-dashboard-page :is(input[type=checkbox],input[type=radio]),
.msh-admin-billing-page :is(input[type=checkbox],input[type=radio]),
.msh-account-control-scope :is(input[type=checkbox],input[type=radio]){
 accent-color:var(--msh-ui-blue);
 cursor:pointer;
}
.app input:disabled,.msh-dashboard-page input:disabled,
.msh-admin-billing-page input:disabled{cursor:not-allowed;opacity:.6}
.app .btn:not(:disabled):not(.danger),.msh-dashboard-page .msh-cmd-btn:not(:disabled),
.msh-dashboard-page .button:not(:disabled),
.msh-admin-billing-page button:not(:disabled){
 transition:box-shadow .15s,transform .15s,background-color .15s;
}
.app .btn:not(:disabled):active,.msh-dashboard-page .msh-cmd-btn:not(:disabled):active,
.msh-admin-billing-page button:not(:disabled):active{transform:translateY(1px)}
/* Cleaner true-status chips; never replace source-derived status strings. */
.app .pill,.msh-dashboard-page #msh-command .msh-cmd-tag,
.msh-admin-billing-page .bill-status-badge,
.msh-dashboard-page .msh-billing-status{
 border-radius:999px;
 font-weight:750;
}
.app .card,.msh-dashboard-page .msh-cmd-card,.msh-dashboard-page .msh-cmd-stat,
.msh-admin-billing-page .bill-account{box-shadow:0 9px 25px rgba(14,48,93,.035)}
.app .table-wrap,.msh-dashboard-page #msh-command .msh-cmd-table-wrap{border-radius:14px}
.app .table tbody tr:hover{background:#f7faff}
/* Real fuel gauges: the existing meter gets a circular ring plus linear bar.
   No placeholder percentage is invented; unread tanks show "—". */
#msh-command .msh-cmd-tank-meter{display:grid;grid-template-columns:78px minmax(0,1fr);gap:13px;align-items:center;margin-top:12px}
#msh-command .msh-cmd-tank-level{min-width:0}
#msh-command .msh-cmd-tank-ring{
 --ring-color:#1bb781;
 width:76px;height:76px;border-radius:50%;
 background:conic-gradient(var(--ring-color) calc(var(--tank-pct) * 1%),#e9eef5 0);
 display:grid;place-items:center;position:relative;flex:0 0 76px;
}
#msh-command .msh-cmd-tank-ring.low{--ring-color:#f09a34}
#msh-command .msh-cmd-tank-ring.critical{--ring-color:#e14e5d}
#msh-command .msh-cmd-tank-ring.unknown{--ring-color:#c7d1e1}
#msh-command .msh-cmd-tank-ring:before{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}
#msh-command .msh-cmd-tank-ring span{position:relative;z-index:1;color:#203859;font-size:15px;font-weight:850}
#msh-command .msh-cmd-tank-meter .msh-cmd-gauge{margin:1px 0 9px;overflow:hidden;border-radius:999px;height:10px}
#msh-command .msh-cmd-tank-meter .msh-cmd-gauge i{border-radius:999px;display:block;height:100%;transition:width .35s ease}
#msh-command .msh-cmd-tank-meter .msh-cmd-tank-bottom{margin:0;gap:5px}
@media(max-width:550px){
 #msh-command .msh-cmd-tank-meter{grid-template-columns:68px minmax(0,1fr);gap:11px}
 #msh-command .msh-cmd-tank-ring{width:68px;height:68px}
 #msh-command .msh-cmd-tank-ring:before{inset:8px}
}
/* Interactive, Master Admin-only component gallery. Never sends a request. */
.msh-kit{color:#1d3051;font-size:14px}
.msh-kit *{box-sizing:border-box}
.msh-kit-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.msh-kit .msh-kit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.msh-kit .msh-kit-panel{border:1px solid #e0e7f2;border-radius:17px;background:#fff;padding:21px;min-width:0}
.msh-kit .msh-kit-panel h2{font-size:17px;margin:0 0 5px;color:#162d50}
.msh-kit .msh-kit-panel p{margin:0 0 18px;color:#65758f;font-size:12px;line-height:1.55}
.msh-kit .msh-kit-wide{grid-column:1/-1}
.msh-kit .msh-kit-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.msh-kit .msh-kit-col{display:grid;gap:12px}
.msh-kit .msh-kit-label{font-weight:730;font-size:12px;color:#3e5272;display:grid;gap:7px;min-width:0}
.msh-kit :is(input[type=text],input[type=email],input[type=date],input[type=search],input[type=number],select,textarea){
 font:inherit;font-size:16px;min-height:44px;width:100%;max-width:100%;
 padding:10px 12px;background:#fff;border:1px solid #d9e3f1;border-radius:11px;
 color:#1e3452;outline-offset:2px;
}
.msh-kit :is(input,textarea,select):focus-visible{outline:3px solid #9bbdfc}
.msh-kit textarea{resize:vertical;min-height:84px}
.msh-kit button{cursor:pointer}
.msh-kit .msh-kit-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;min-height:43px;border:1px solid transparent;border-radius:11px;background:#0857f8;color:#fff;font-weight:750;font-size:13px}
.msh-kit .msh-kit-btn.secondary{border-color:#c9ddff;background:#edf4ff;color:#0857f8}
.msh-kit .msh-kit-btn.ghost{border-color:#e3e8f0;background:#f5f7fb;color:#465775}
.msh-kit .msh-kit-btn.danger{border-color:#fed5dd;background:#fff1f3;color:#bc344b}
.msh-kit .msh-kit-btn:disabled{cursor:not-allowed;opacity:.48}
.msh-kit .msh-kit-check{display:flex;align-items:center;gap:10px;cursor:pointer;line-height:1.4}
.msh-kit .msh-kit-check input{accent-color:#0857f8;flex:0 0 auto;width:19px;height:19px;margin:0}
.msh-kit .msh-kit-switch{display:flex;align-items:center;justify-content:space-between;gap:9px;border:1px solid #e3eafa;padding:10px 12px;border-radius:11px;cursor:pointer}
.msh-kit .msh-kit-switch input{appearance:none;width:41px;height:24px;flex:0 0 41px;border-radius:99px;background:#bfc9d8;position:relative;margin:0;cursor:pointer;transition:background .2s}
.msh-kit .msh-kit-switch input:before{content:"";position:absolute;width:18px;height:18px;top:3px;left:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0002;transition:transform .2s}
.msh-kit .msh-kit-switch input:checked{background:#0c63eb}
.msh-kit .msh-kit-switch input:checked:before{transform:translateX(17px)}
.msh-kit .msh-kit-segments{display:flex;gap:3px;padding:4px;background:#f1f4fa;border:1px solid #e3eafa;border-radius:12px;max-width:max-content}
.msh-kit .msh-kit-segments button{border:0;padding:9px 14px;min-height:36px;border-radius:9px;background:transparent;color:#5e6c83;font-size:12px;font-weight:750;line-height:1.2;font-family:inherit}
.msh-kit .msh-kit-segments button[aria-pressed=true]{background:#0857f8;color:#fff;box-shadow:0 3px 9px #0c5ae622}
.msh-kit input[type=range]{width:100%;accent-color:#0857f8;cursor:pointer;min-height:32px}
.msh-kit .msh-kit-rangeline{display:flex;justify-content:space-between;color:#728098;font-size:11px}
.msh-kit .msh-kit-badges{display:flex;flex-wrap:wrap;gap:10px}
.msh-kit .msh-kit-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;font-size:12px;font-weight:750;color:#1557aa;background:#eaf2ff}
.msh-kit .msh-kit-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.msh-kit .msh-kit-badge.success{color:#13805a;background:#e8f8f0}
.msh-kit .msh-kit-badge.warning{color:#a96310;background:#fff2e2}
.msh-kit .msh-kit-badge.danger{color:#bd3d51;background:#fff0f2}
.msh-kit .msh-kit-badge.offline{color:#58677c;background:#edf0f4}
.msh-kit .msh-kit-badge.complimentary{color:#6b36ae;background:#f1eafb}
.msh-kit .msh-kit-meters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.msh-kit .msh-kit-meter{border:1px solid #e4eaf3;border-radius:13px;padding:16px 10px;text-align:center}
.msh-kit .msh-kit-meter b{display:block;font-size:12px;color:#243b5a;margin:9px 0 3px}
.msh-kit .msh-kit-meter small{display:block;color:#7b899e;font-size:11px}
.msh-kit .msh-kit-ring{--percent:70;--tone:#0b68ef;width:92px;height:92px;margin:auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--tone) calc(var(--percent) * 1%),#e8edf5 0);position:relative}
.msh-kit .msh-kit-ring:before{position:absolute;inset:10px;content:"";background:#fff;border-radius:50%}
.msh-kit .msh-kit-ring strong{position:relative;font-size:19px;color:#182c47}
.msh-kit .msh-kit-ring.low{--tone:#e5a133}
.msh-kit .msh-kit-ring.critical{--tone:#e45060}
.msh-kit .msh-kit-ring.good{--tone:#27b781}
.msh-kit .msh-kit-progress{width:100%;height:10px;background:#e8edf4;border-radius:99px;overflow:hidden}
.msh-kit .msh-kit-progress>span{height:100%;display:block;width:var(--percent);background:#1261ef;border-radius:99px;transition:width .2s}
.msh-kit .msh-kit-table-wrap{overflow:auto;max-width:100%;border:1px solid #e3e9f3;border-radius:13px}
.msh-kit table{border-collapse:collapse;width:100%;text-align:left;min-width:480px}
.msh-kit th,.msh-kit td{padding:12px 14px;border-bottom:1px solid #e7eef8;font-size:12px}
.msh-kit th{background:#f5f8fd;color:#6b7c95;text-transform:uppercase;font-size:10px}
.msh-kit tr:last-child td{border-bottom:0}
.msh-kit .msh-kit-callout{border:1px solid #d8e7fc;border-radius:12px;background:#f5f9ff;padding:14px;font-size:12px;color:#506584}
@media(max-width:920px){.msh-kit .msh-kit-meters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.msh-kit .msh-kit-grid{grid-template-columns:minmax(0,1fr)}.msh-kit .msh-kit-wide{grid-column:auto}.msh-kit .msh-kit-panel{padding:16px}}
@media(max-width:380px){.msh-kit .msh-kit-meters{gap:7px}.msh-kit .msh-kit-ring{width:75px;height:75px}.msh-kit .msh-kit-ring:before{inset:8px}}
@media(prefers-reduced-motion:reduce){.msh-kit .msh-kit-switch input,.msh-kit .msh-kit-switch input:before,.msh-kit .msh-kit-progress>span{transition:none}}