/* EV Charger operator console — design system ported from the device stream panel. */
:root {
  --bg:#eef0f3; --card:#ffffff; --inner:#f4f5f7; --fg:#1c2024; --muted:#6b7280;
  --ok:#1a9c45; --idle:#7a8290; --warn:#b7791f; --err:#d93025; --accent:#1769ff;
  --line:#e3e6ea; --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.4 system-ui,sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

header { padding:14px 22px; background:var(--card); border-bottom:1px solid var(--line);
         display:flex; justify-content:space-between; align-items:center; gap:14px;
         flex-wrap:wrap; box-shadow:var(--shadow); }
header strong { font-size:18px; }
header strong a { color:inherit; }
header strong a:hover { text-decoration:none; }
header .right { display:flex; align-items:center; gap:14px; }
header small { color:var(--muted); font-family:ui-monospace,monospace; }
.topnav { display:flex; gap:4px; flex-wrap:wrap; }
.topnav a { color:var(--muted); font-weight:500; font-size:14px; padding:6px 12px; border-radius:8px; }
.topnav a:hover { background:var(--inner); color:var(--fg); text-decoration:none; }

main { max-width:1200px; margin:0 auto; padding:18px; }

.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.col-12 { grid-column:span 12; } .col-8 { grid-column:span 8; }
.col-6 { grid-column:span 6; } .col-4 { grid-column:span 4; }
@media (max-width:880px){ .col-8,.col-6,.col-4 { grid-column:span 12; } }

.card { background:var(--card); border:1px solid var(--line); border-radius:14px;
        padding:18px; box-shadow:var(--shadow); }

h1.page { margin:0; font-size:24px; font-weight:800; letter-spacing:-.01em; }
.subline { color:var(--muted); font-size:13px; margin:4px 0 0; }
.pagehead { display:flex; justify-content:space-between; align-items:flex-end;
            margin-bottom:16px; gap:12px; flex-wrap:wrap; }
.back { font-size:13px; }

/* big charging-state hero */
.hero { display:flex; align-items:center; gap:26px; flex-wrap:wrap;
        border-left:8px solid var(--idle); }
.hero.charging { border-left-color:var(--ok); background:linear-gradient(90deg,#eafaf0,#fff); }
.hero.unknown  { border-left-color:var(--warn); background:linear-gradient(90deg,#fdf6e7,#fff); }
.hero .statebox { display:flex; align-items:center; gap:16px; min-width:240px; }
.hero .dot { width:22px; height:22px; border-radius:50%; background:var(--idle); flex:0 0 auto; }
.hero.charging .dot { background:var(--ok); box-shadow:0 0 0 6px rgba(26,156,69,.18); animation:pulse 1.6s infinite; }
.hero.unknown .dot { background:var(--warn); }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 6px rgba(26,156,69,.18)} 50%{box-shadow:0 0 0 12px rgba(26,156,69,.05)} }
.hero h1 { margin:0; font-size:56px; line-height:1; font-weight:800; letter-spacing:-.02em; text-transform:uppercase; }
.hero.charging h1 { color:var(--ok); } .hero.unknown h1 { color:var(--warn); }
.hero .bigreads { display:flex; gap:34px; margin-left:auto; flex-wrap:wrap; }
.hero .bigread .v { font-size:40px; font-weight:700; line-height:1; }
.hero .bigread .k { color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.05em; margin-top:6px; }

.controls { display:flex; gap:12px; }
button { flex:1; padding:16px; font-size:18px; font-weight:600; border:0; border-radius:12px; color:#fff; cursor:pointer; }
button.start { background:var(--ok); } button.stop { background:var(--err); }
button.ghost { flex:0 0 auto; padding:8px 14px; font-size:14px; background:var(--inner); color:var(--fg); border:1px solid var(--line); }
button.primary { flex:0 0 auto; padding:10px 18px; font-size:14px; background:var(--accent); }
/* Compact red button for inline table actions (vs the large .stop control button). */
button.danger { flex:0 0 auto; padding:10px 18px; font-size:14px; background:var(--err); }
button:disabled { opacity:.4; cursor:not-allowed; }

/* Form controls */
input[type=text], input[type=password], input[type=date], input:not([type]), select, textarea {
  width:100%; padding:9px 12px; font:inherit; font-size:14px; color:var(--fg);
  background:var(--card); border:1px solid var(--line); border-radius:10px;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); }
select { cursor:pointer; }

/* Stacked label + control, the default layout inside cards/forms. */
.field { margin-bottom:12px; }
.field label { display:block; margin-bottom:5px; color:var(--muted);
               font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
/* Side-by-side fields (e.g. a filter bar). */
.field-row { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }
.field-row .field { margin-bottom:0; }

/* Fleet overview — responsive charger cards (multi-column desktop, single column mobile). */
.cp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.cp-card { display:block; background:var(--card); border:1px solid var(--line);
           border-radius:14px; padding:16px; box-shadow:var(--shadow); color:inherit; }
.cp-card:hover { border-color:var(--accent); text-decoration:none; }
.cp-card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:4px; }
.cp-name { font-weight:600; font-size:16px; }
.cp-card-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }

.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; }
.metric { background:var(--inner); border-radius:10px; padding:12px; }
.metric .v { font-size:22px; font-weight:600; overflow-wrap:break-word; }
.metric .v.sid { font-size:14px; font-family:ui-monospace,monospace; }
.metric .v.sm { font-size:14px; }
.metric .k { color:var(--muted); font-size:13px; }
@media (max-width:560px){ .metric .v { font-size:18px; } }

h2 { font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:0 0 12px; }
.cardhead { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.cardhead h2 { margin:0; }

.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:500; }
tbody tr:hover { background:var(--inner); }
td.num, th.num { text-align:right; }

.events { margin:0; padding:0; }
.events li { list-style:none; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px;
             display:flex; justify-content:space-between; gap:10px; }
.events li:last-child { border-bottom:0; }

.pill { font-size:12px; padding:2px 10px; border-radius:20px; background:var(--inner); border:1px solid var(--line); color:var(--muted);
        display:inline-flex; align-items:center; gap:6px; }
.pill .dot { width:8px; height:8px; border-radius:50%; background:var(--idle); }
.pill.on { background:#e7f6ed; color:var(--ok); border-color:#bfe6cd; }
.pill.on .dot { background:var(--ok); }
.pill.off { background:#fdecea; color:var(--err); border-color:#f3c9c4; }
.pill.off .dot { background:var(--err); }
.pill.charging { background:#fdf3df; color:var(--warn); border-color:#f0e0b8; }

textarea { width:100%; padding:12px 14px; font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
           border:1px solid var(--line); border-radius:10px; background:var(--inner); color:var(--fg); resize:vertical; }
textarea:focus { outline:none; border-color:var(--accent); }

.muted { color:var(--muted); }
.warn { color:var(--warn); } .ok { color:var(--ok); } .err { color:var(--err); }
.result { font-size:13px; color:var(--muted); }

/* centered login card */
body.center { display:flex; min-height:100vh; align-items:center; justify-content:center; }
.login { width:100%; max-width:340px; margin:18px; }
.login h1 { margin:0 0 4px; font-size:22px; font-weight:800; letter-spacing:-.01em; }
.login p.sub { margin:0 0 20px; color:var(--muted); font-size:14px; }
.login label { display:block; color:var(--muted); font-size:13px; text-transform:uppercase;
               letter-spacing:.05em; margin:14px 0 6px; }
.login input { width:100%; padding:12px 14px; font-size:16px; border:1px solid var(--line);
               border-radius:10px; background:var(--inner); color:var(--fg); }
.login input:focus { outline:none; border-color:var(--accent); }
.login button { width:100%; flex:none; margin-top:18px; padding:13px; font-size:16px; background:var(--accent); }
.banner-err { background:#fdecea; color:var(--err); padding:10px 14px; border-radius:10px;
              font-size:14px; margin-bottom:16px; }