/* WiVi customer account pages (login.html / account.html) — extends site.css. */

.account-auth-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:start}
.account-login-form h3{margin-bottom:.9rem}
.account-login-note{margin:.4rem 0 0}

.account-hero{padding-bottom:14px}
.account-hero .page-summary{display:grid;gap:.4rem;justify-items:start}
.account-logout{margin-top:.7rem;padding:.6rem 1rem;font-size:.86rem}

.account-stats{margin-bottom:22px}
.account-stats .stat b{font-size:1.55rem;letter-spacing:-.03em}

.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:18px}
.account-grid-top{margin-top:0;margin-bottom:22px}
.account-card{min-height:0}
.account-card h3{margin-bottom:.6rem}
.account-card-wide{grid-column:1 / -1}
.account-window-label{color:var(--soft);font-size:.9rem;font-weight:800}
.account-window-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:14px}
.account-window-btn{padding:.5rem .85rem;font-size:.8rem;box-shadow:none}
.account-window-btn[aria-pressed="true"]{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;border:0}
.account-chart-wrap{position:relative;width:100%;min-height:220px}

.account-inline-form{gap:10px}
.account-inline-form label{font-size:.92rem}
.account-inline-form input[type="range"]{padding:0;border:0;background:transparent;-webkit-appearance:none;appearance:none;height:30px}
.account-inline-form input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--cyan),var(--green))}
.account-inline-form input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--blue);margin-top:-7px;cursor:pointer;box-shadow:0 4px 10px rgba(13,38,76,.18)}
.account-inline-form input[type="range"]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--cyan),var(--green))}
.account-inline-form input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--blue);cursor:pointer}

.account-otp{display:grid;gap:10px;border:1px dashed rgba(255,176,0,.35);border-radius:16px;padding:14px;background:rgba(255,176,0,.08)}
.account-otp[hidden]{display:none !important}

.account-list{display:grid;gap:10px;margin-top:6px}
.account-device{display:flex;justify-content:space-between;gap:12px;border:1px solid var(--dash-line,#2e2e2e);border-radius:16px;padding:12px 14px;background:#1d1d1d}
.account-device b{color:#e8eef5;font-size:.92rem}
.account-device code{font-size:.78rem;color:#8b8b8b}
.account-device .live{color:#68d391;font-weight:850;font-size:.8rem}
.account-device .idle{color:#8b8b8b;font-weight:750;font-size:.8rem}

.account-table-wrap{margin-top:8px}
.account-table-wrap table{min-width:520px}
.account-table-wrap th,.account-table-wrap td{padding:12px 14px;font-size:.9rem}

.account-flash{margin-bottom:18px}
.account-loading-panel{text-align:center}

/* Dark usage/BI dashboard — matches the staff customer telemetry view. */
.account-dash{
  --dash-bg:#0f1115;
  --dash-card:#171717;
  --dash-line:#2e2e2e;
  --dash-muted:#8b8b8b;
  --dash-text:#e8eef5;
  margin:0 0 28px;
  padding:22px;
  border-radius:28px;
  background:var(--dash-bg);
  color:var(--dash-text);
}
.account-dash-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.account-dash-head h2{color:#fff;font-size:1.45rem;margin:0 0 .25rem}
.account-dash-head .small{color:var(--dash-muted);margin:0}
.account-dash .account-window-btn{background:#1d1d1d;color:#d5deea;border:1px solid var(--dash-line);box-shadow:none}
.account-dash .account-window-btn[aria-pressed="true"]{background:linear-gradient(135deg,#5b6cff,#2f49d0);color:#fff;border:0}

.dash-card{background:var(--dash-card);border:1px solid var(--dash-line);border-radius:16px;padding:16px 16px 14px;min-width:0}
.dash-card h3{color:#fff;font-size:.98rem;margin:0 0 .35rem}
.dash-muted{color:var(--dash-muted);font-size:.78rem;margin:.15rem 0 .7rem}

.dash-kpi-row,.dash-triple,.dash-dual{display:grid;gap:14px;margin-bottom:14px}
.dash-kpi-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.dash-triple{grid-template-columns:repeat(3,minmax(0,1fr))}
.dash-dual{grid-template-columns:repeat(2,minmax(0,1fr))}

.dash-kpi{position:relative;min-height:168px}
.dash-kpi-main{display:flex;gap:10px;align-items:flex-start}
.dash-kpi-main h3{margin:0}
.dash-kpi-main p{margin:0;color:var(--dash-muted);font-size:.78rem}
.dash-avatar{width:32px;height:32px;border-radius:50%;background:#2d2d2d;color:#fff;display:grid;place-items:center;font-weight:850;font-size:.75rem;flex-shrink:0}
.dash-foot{color:var(--dash-muted);font-size:.75rem;margin:.7rem 0 .4rem}
.dash-progress{height:6px;border-radius:3px;background:#2d2d2d;overflow:hidden;display:flex}
.dash-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8E76EF,#3912D2);border-radius:3px}
.dash-progress.used i{background:linear-gradient(90deg,#F6AD55,#dd6b20)}
.dash-progress.burn i{background:linear-gradient(90deg,#805AD5,#4FD1C5)}
.dash-spark{display:block;width:100%;height:28px;margin:8px 0 4px}
.dash-spark polyline{fill:none;stroke:#4FD1C5;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.dash-spark[data-spark-session] polyline{stroke:#F6AD55}
.dash-spark[data-spark-burn] polyline{stroke:#805AD5}
.dash-hero{position:absolute;top:16px;right:16px;text-align:right;max-width:46%}
.dash-hero b{display:block;font-size:1.25rem;color:#fff;letter-spacing:-.03em}
.dash-hero span{display:block;color:var(--dash-muted);font-size:.72rem}
.dash-hero.green b{color:#68d391}

.dash-bi{list-style:none;margin:0;padding:0}
.dash-bi li{display:grid;grid-template-columns:22px 8px 1fr auto 16px;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid #2a2a2a;font-size:.86rem}
.dash-bi li:last-child{border-bottom:0}
.dash-bi .n{color:var(--dash-muted)}
.dash-bi .dot{width:8px;height:8px;border-radius:50%}
.dash-bi .val{font-weight:750;text-align:right}
.dash-bi .trend{font-size:.85rem}
.dash-bi .up{color:#68d391}
.dash-bi .down{color:#fc8181}

.dash-apps{display:grid;grid-template-columns:1fr 22px;gap:12px;min-height:160px}
.dash-apps ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.dash-apps li{display:flex;justify-content:space-between;gap:10px;font-size:.86rem}
.dash-apps li span{color:var(--dash-muted);font-variant-numeric:tabular-nums}
.dash-apps .bar{background:#2d2d2d;border-radius:8px;overflow:hidden;display:flex;flex-direction:column-reverse}
.dash-apps .bar i{display:block;min-height:3%}

.dash-gauge-card{display:flex;flex-direction:column}
.dash-gauge-wrap{position:relative;width:220px;height:120px;margin:8px auto 0}
.dash-gauge{width:220px;height:120px}
.dash-gauge-wrap strong{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);color:#5b7cff;font-size:1.15rem}
.dash-gauge-labels{display:flex;justify-content:space-between;gap:8px;color:var(--dash-muted);font-size:.72rem;margin-top:6px}

.dash-chart{position:relative;width:100%;min-height:240px}
.dash-chart.tall{min-height:300px}
.dash-table-wrap{margin-top:8px}
.dash-table-wrap table{min-width:480px;width:100%;border-collapse:collapse}
.dash-table-wrap th,.dash-table-wrap td{padding:10px 12px;font-size:.84rem;border-bottom:1px solid #2a2a2a;text-align:left}
.dash-table-wrap th{color:var(--dash-muted);font-weight:750}
.dash-table-wrap td:not(:first-child),.dash-table-wrap th:not(:first-child){text-align:right}

.account-dash h2,.account-dash h3{color:#fff}
.account-dash p,.account-dash .small,.account-dash .muted,.account-dash .lede{color:var(--dash-muted)}
.account-dash strong{color:#e8eef5}
.account-dash .form label{color:#d5deea}
.account-dash .form input,
.account-dash .form textarea,
.account-dash .form select{
  background:#1d1d1d;
  color:#e8eef5;
  border:1px solid var(--dash-line);
}
.account-dash .form input::placeholder{color:#6f7a88}
.account-dash .form input:focus,
.account-dash .form textarea:focus,
.account-dash .form select:focus{
  outline:2px solid rgba(91,108,255,.45);
  border-color:#5b6cff;
}
.account-dash .form option{background:#171717;color:#e8eef5}
.account-dash .btn.ghost{
  background:#1d1d1d;
  color:#d5deea;
  border:1px solid var(--dash-line);
  box-shadow:none;
}
.account-dash .table-wrap{
  background:#171717;
  border:1px solid var(--dash-line);
  box-shadow:none;
}
.account-dash .table-wrap th{
  background:#1d1d1d;
  color:#8b8b8b;
  border-bottom:1px solid #2a2a2a;
}
.account-dash .table-wrap td{
  color:#d5deea;
  border-bottom:1px solid #2a2a2a;
}
.account-dash .form-status[data-kind="success"]{
  background:rgba(104,211,145,.12);
  border-color:rgba(104,211,145,.28);
  color:#9ae6b4;
}
.account-dash .form-status[data-kind="error"]{
  background:rgba(252,129,129,.1);
  border-color:rgba(252,129,129,.28);
  color:#feb2b2;
}
.account-accent-green{border-top:3px solid #68d391}
.account-accent-amber{border-top:3px solid #f6ad55}
.account-accent-purple{border-top:3px solid #805ad5}
.account-accent-magenta{border-top:3px solid #f687b3}

@media (max-width:1100px){
  .account-auth-grid{grid-template-columns:1fr}
  .account-grid,.dash-kpi-row,.dash-triple,.dash-dual{grid-template-columns:1fr}
  .dash-hero{position:static;text-align:left;max-width:none;margin-top:8px}
  .dash-kpi{min-height:0}
}