/* ============================================================
   DEVICE — tray, quick settings, brightness overlay
   ============================================================ */

.tb-tray {
  gap:7px;
}

.tb-tray .wifi-off {
  display:none;
}

.tb-tray.offline {
  color:var(--danger);
}

.tb-tray.offline .wifi-off {
  display:block;
}

.tray-batt.charging,
.m-st-ico.charging {
  color:var(--green);
}

.tray-batt.battery-warn,
.m-st-ico.battery-warn {
  color:#e0a33a;
}

.tray-batt.battery-critical,
.m-st-ico.battery-critical {
  color:var(--danger);
}

.tray-batt {
  display:flex;
  align-items:center;
  gap:5px;
}

.tray-batt .tray-pct {
  color:var(--text-dim);
}

.tray-pct {
  font-family:var(--mono);
  font-size:10px;
}

.tray-panel {
  position:absolute;

  right:8px;
  bottom:calc(var(--taskbar-h) + 8px);

  z-index:100;

  width:300px;
  max-height:min(70vh, 480px);

  overflow:auto;

  padding:6px 0;

  background:color-mix(in srgb,var(--surface) 94%,transparent);

  border:1px solid var(--line-strong);
  border-radius:10px;

  box-shadow:0 18px 45px rgba(0,0,0,.42),0 3px 10px rgba(0,0,0,.24);
  backdrop-filter:blur(14px);
}

.tray-row {
  display:flex;
  align-items:center;

  gap:12px;

  padding:12px 14px;
}

.tray-row + .tray-row {
  border-top:1px solid var(--line);
}

.tray-row-ico {
  display:flex;
  align-items:center;

  flex-shrink:0;

  color:var(--text-dim);
}

.tray-row-tx {
  display:flex;
  flex-direction:column;

  min-width:0;
}

.tray-row-tx .t {
  color:var(--text);

  font-size:12px;
  font-weight:500;
}

.tray-row-tx .d {
  margin-top:2px;

  color:var(--text-faint);

  font-family:var(--mono);
  font-size:10px;
}

.tray-slider {
  flex:1;

  min-width:0;

  accent-color:var(--accent);

  cursor:pointer;
}

.tray-temp {
  gap:8px
}

.tray-scale {
  flex-shrink:0;

  color:var(--text-faint);

  font-family:var(--mono);
  font-size:9px;
  text-transform:uppercase
}

.m-set-slider {
  width:130px;

  flex-shrink:0;

  accent-color:var(--accent);

  cursor:pointer;
}

#bright-overlay {
  position:fixed;
  inset:0;
  z-index:5000;

  background:#000;
  opacity:0;

  pointer-events:none
}

#night-overlay {
  position:fixed;
  inset:0;
  z-index:4999;

  background:rgba(255,165,0,.08);

  pointer-events:none
}