/* PoolStyle — веб-версия приложения удалённого мониторинга.
   Тёмная тема и цвета повторяют Android-приложение (values/colors.xml). */

:root{
  --bg:#121214;
  --appbar:#1b1b1e;
  --card-normal:#2a2a2c;
  --card-group:#15323c;
  --group-header:#4fd6e7;
  --primary:#00adef;
  --primary-dark:#0089bc;
  --txt:#ededf0;
  --txt-2:#a7abb0;
  --muted:#6f93a2;
  --divider:rgba(255,255,255,.10);

  --ph:#b8c5f5;
  --rx:#eef783;
  --cl:#f7b0d2;
  --t:#ff9d6c;
  --flow:#6aa8ff;

  --green:#34e3a4;
  --blue:#3b82f6;
  --red:#ff5d72;

  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);color:var(--txt);
  font-family:var(--sans);
  overscroll-behavior-y:contain;
  -webkit-font-smoothing:antialiased;
}

.screen{min-height:100%;display:flex;flex-direction:column}
[hidden]{display:none !important}

/* ---------- app bar ---------- */
.appbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:12px;
  padding:calc(var(--safe-top) + 10px) 14px 10px;
  background:var(--appbar);
  border-bottom:1px solid var(--divider);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.appbar__brand{display:flex;align-items:center;gap:10px;min-width:0}
.appbar__logo{width:30px;height:30px;border-radius:8px;flex:none}
.appbar__title{font-size:1.22rem;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.appbar__title--device{overflow:hidden;text-overflow:ellipsis;flex:1}
.appbar__actions{margin-left:auto;display:flex;align-items:center;gap:4px}
.appbar--device .iconbtn{margin:0}

.iconbtn{
  position:relative;
  width:42px;height:42px;flex:none;border:none;background:transparent;color:var(--txt);
  border-radius:50%;display:grid;place-items:center;cursor:pointer;
  transition:background .15s;
}
.iconbtn:hover,.iconbtn:active{background:rgba(255,255,255,.08)}
.iconbtn svg{width:23px;height:23px}
.iconbtn__dot{position:absolute;top:8px;right:9px;width:9px;height:9px;border-radius:50%;
  background:var(--red);border:2px solid var(--appbar)}
.iconbtn.on{color:var(--primary)}

/* ---------- notification bar ---------- */
.notifbar{
  margin:10px 12px 0;padding:12px 14px;border-radius:12px;font-size:.86rem;line-height:1.4;
  background:linear-gradient(120deg,rgba(0,173,239,.16),rgba(52,227,164,.10));
  border:1px solid rgba(0,173,239,.3);color:var(--txt);
  display:flex;align-items:center;gap:12px;
}
.notifbar b{color:#fff}
.notifbar .nb-actions{margin-left:auto;display:flex;gap:8px;flex:none}
.notifbar button{
  border:none;border-radius:9px;padding:8px 14px;font-weight:600;font-size:.83rem;cursor:pointer;
  background:linear-gradient(120deg,var(--primary),var(--primary-dark));color:#04141c;white-space:nowrap;
}
.notifbar button.ghost{background:transparent;color:var(--txt-2);padding:8px 10px}

/* ---------- list ---------- */
.list{flex:1;padding:8px 0 96px}

.group-header{display:flex;align-items:center;gap:9px;padding:14px 18px 4px}
.group-header .bar{width:3px;height:16px;border-radius:2px;background:var(--group-header)}
.group-header .ttl{font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--group-header);text-transform:uppercase}

.group-divider{height:1px;margin:12px 16px 6px;background:rgba(136,136,136,.2)}

/* card */
.card{
  position:relative;
  margin:3px 12px;padding:10px 20px 10px 14px;border-radius:11px;
  background:var(--card-normal);
  display:flex;align-items:center;gap:10px;
  cursor:pointer;user-select:none;
  transition:transform .08s, background .15s;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.card:active{transform:scale(.992)}
.card.grouped{background:var(--card-group)}
.card.dragging{opacity:.6;box-shadow:0 8px 26px rgba(0,0,0,.5)}

.card__info{flex:1;min-width:0}
.card__name{font-size:1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__serial{margin-top:2px;font-size:.75rem;color:var(--txt-2)}

.card__params{display:flex;align-items:center;flex:none}
.card__col{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 7px;min-width:34px;position:relative;
}
.card__col + .card__col::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:22px;background:var(--divider);
}
.card__col.wide{min-width:48px}
.card__lbl{font-size:.56rem;color:var(--muted);letter-spacing:.04em;text-transform:none}
.card__val{margin-top:1px;font-size:.9rem;font-weight:700;font-family:var(--mono);line-height:1.1}

.card__dot{position:absolute;top:7px;right:7px;width:10px;height:10px;border-radius:50%;background:var(--muted)}
.card__dot.green{background:var(--green)}
.card__dot.red{background:var(--red);animation:blink .9s ease-in-out infinite}
.card__fresh{position:absolute;bottom:6px;right:8px;font-size:.62rem;font-weight:700;font-family:var(--mono)}
.card__fresh.green{color:var(--green)}
.card__fresh.blue{color:var(--blue)}
.card__fresh.red{color:var(--red)}

.blink{animation:blink .9s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}

/* empty */
.empty{
  position:absolute;left:0;right:0;top:45%;transform:translateY(-50%);
  text-align:center;color:#888;font-size:1rem;line-height:1.6;padding:0 24px;pointer-events:none;
}

/* FAB */
.fab{
  position:fixed;right:18px;bottom:calc(var(--safe-bottom) + 18px);z-index:15;
  width:58px;height:58px;border-radius:18px;border:none;cursor:pointer;
  background:linear-gradient(150deg,var(--primary),var(--primary-dark));color:#fff;
  display:grid;place-items:center;
  box-shadow:0 12px 26px -8px rgba(0,173,239,.7);
  transition:transform .12s, box-shadow .2s;
}
.fab:active{transform:scale(.94)}
.fab svg{width:26px;height:26px}

.refresh-hint{
  position:fixed;top:calc(var(--safe-top) + 60px);left:50%;transform:translateX(-50%);z-index:16;
  background:var(--appbar);border:1px solid var(--divider);color:var(--txt-2);
  padding:7px 16px;border-radius:999px;font-size:.8rem;box-shadow:0 6px 18px rgba(0,0,0,.4);
}

/* ---------- device screen ---------- */
.screen--device{height:100%}
.appbar--device{gap:6px}
.device-frame{flex:1;width:100%;border:none;background:#04141c}
.device-loading{
  position:absolute;inset:0;top:56px;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:var(--primary);color:#fff;
}
.device-loading span{font-size:.95rem;letter-spacing:.03em}
.spinner{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- modal / dialog ---------- */
.modal-root{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.dialog{
  position:relative;width:100%;max-width:400px;max-height:88vh;overflow:auto;
  background:#232326;border:1px solid var(--divider);border-radius:18px;
  padding:22px;box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
  animation:pop .16s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.dialog h3{font-size:1.15rem;font-weight:700;margin-bottom:16px}
.dialog .field{margin-bottom:14px}
.dialog label{display:block;font-size:.72rem;color:var(--txt-2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.dialog input{
  width:100%;padding:12px 13px;border-radius:11px;background:#161617;
  border:1px solid var(--divider);color:var(--txt);font-size:.95rem;font-family:var(--sans);outline:none;
  transition:border .15s,box-shadow .15s;
}
.dialog input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,173,239,.18)}
.dialog .hint{font-size:.7rem;color:var(--muted);margin-top:5px}
.dialog .err{color:var(--red);font-size:.78rem;margin:-6px 0 12px}
.dialog .datalist{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.dialog .chip{font-size:.76rem;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid var(--divider);color:var(--txt-2);cursor:pointer}
.dialog .chip:hover{color:var(--txt);border-color:var(--primary)}
.dialog__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.btn{border:none;border-radius:11px;padding:11px 18px;font-weight:600;font-size:.92rem;cursor:pointer;font-family:var(--sans)}
.btn-text{background:transparent;color:var(--txt-2)}
.btn-text:hover{color:var(--txt)}
.btn-primary{background:linear-gradient(120deg,var(--primary),var(--primary-dark));color:#04141c}
.btn-primary:disabled{opacity:.45;cursor:default}
.btn-danger{background:transparent;color:var(--red)}

/* action sheet (long-press menu) */
.sheet{
  position:relative;width:100%;max-width:420px;margin-top:auto;
  background:#232326;border:1px solid var(--divider);border-radius:18px;overflow:hidden;
  animation:sheetUp .2s ease-out;
}
.modal-root.bottom{align-items:flex-end;padding:0 0 calc(var(--safe-bottom) + 8px)}
.modal-root.bottom .sheet{max-width:520px;margin:0 8px}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet__title{padding:16px 20px 8px;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.sheet__item{padding:15px 20px;font-size:1rem;cursor:pointer;display:flex;align-items:center;gap:13px;border-top:1px solid var(--divider)}
.sheet__item:hover{background:rgba(255,255,255,.05)}
.sheet__item.danger{color:var(--red)}
.sheet__item svg{width:20px;height:20px;opacity:.85}

@media (min-width:560px){
  .list{max-width:640px;margin:0 auto;width:100%}
  .empty{max-width:640px;margin:0 auto}
}