/* ============================================================
   TASK MANAGER
   ============================================================ */
.tm {
  position:relative;

  display:flex;
  flex-direction:column;

  height:100%
}

.tm-body {
  flex:1;

  display:flex;

  min-height:0
}

.tm-side {
  width:148px;

  flex-shrink:0;

  display:flex;
  flex-direction:column;

  gap:2px;

  padding:12px 8px 12px 12px;

  overflow:auto;

  background:var(--surface-2);

  border-right:1px solid var(--line)
}

.tm-navbtn {
  display:flex;
  align-items:center;

  gap:10px;

  padding:8px 10px;

  border:none;
  border-left:2px solid transparent;
  border-radius:0 4px 4px 0;

  background:none;
  color:var(--text-dim);

  font-family:var(--sans);
  font-size:12px;
  text-align:left;

  cursor:pointer;

  transition:background .12s var(--ease), color .12s var(--ease)
}

.tm-navbtn:hover {
  background:var(--surface-3);
  color:var(--text)
}

.tm-navbtn.active {
  background:var(--surface-3);

  border-left-color:var(--accent);

  color:var(--text)
}

.tm-main {
  flex:1;

  display:flex;
  flex-direction:column;

  min-width:0;
  min-height:0
}

.tm-view {
  flex:1;

  overflow:auto;

  padding:12px 14px 16px
}

.tm-tablewrap {
  overflow-x:auto
}

.tm-table {
  min-width:560px
}

.tm-head,
.tm-row {
  display:grid;

  grid-template-columns:30px 1fr 76px 60px 66px 60px 66px;
  align-items:center;

  gap:8px
}

.tm-head {
  padding:6px 8px;

  color:var(--text-faint);

  font-family:var(--mono);
  font-size:9px;
  font-weight:600;

  letter-spacing:.04em;
  text-transform:uppercase
}

.tm-head span:nth-child(n+3) {
  text-align:right
}

.tm-row {
  width:100%;

  padding:7px 8px;

  border:none;
  border-bottom:1px solid var(--line);
  border-radius:4px;

  background:none;
  color:var(--text);

  font-size:12px;
  text-align:left;

  cursor:default;

  transition:background .12s var(--ease)
}

.tm-row:hover {
  background:var(--surface-2)
}

.tm-row.selected {
  background:var(--surface-3);

  box-shadow:inset 2px 0 0 var(--accent)
}

.tm-row .ico {
  position:relative;

  width:22px;
  height:22px
}

.tm-row .ico .glyph-file,
.tm-row .ico .glyph-folder,
.tm-row .ico .glyph-app,
.tm-row .ico .glyph-link {
  width:44px;
  height:44px;

  transform:scale(.5);
  transform-origin:top left
}

.tm-row .n {
  overflow:hidden;

  white-space:nowrap;
  text-overflow:ellipsis
}

.tm-row .s,
.tm-row .c,
.tm-row .m,
.tm-row .d,
.tm-row .e {
  overflow:hidden;

  color:var(--text-dim);

  font-family:var(--mono);
  font-size:11px;
  text-align:right;

  white-space:nowrap
}

.tm-row .s.running {
  color:var(--green)
}

.tm-row .s.suspended {
  color:var(--accent)
}

.tm-empty {
  padding:26px 10px;

  color:var(--text-faint);

  font-family:var(--mono);
  font-size:11px;
  text-align:center
}

.tm-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  padding:10px 14px;

  border-top:1px solid var(--line);

  color:var(--text-faint);

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

.tm-foot .spacer {
  flex:1
}

/* ---------- performance ---------- */

.tm-perf-layout {
  display:flex;

  gap:0;

  min-height:100%
}

.tm-reslist {
  width:150px;

  flex-shrink:0;

  display:flex;
  flex-direction:column;

  gap:2px
}

.tm-res {
  padding:9px 10px;

  border:none;
  border-left:2px solid transparent;
  border-radius:0 4px 4px 0;

  background:none;

  text-align:left;

  cursor:pointer;

  transition:background .12s var(--ease)
}

.tm-res:hover {
  background:var(--surface-2)
}

.tm-res.active {
  background:var(--surface-3);

  border-left-color:var(--accent)
}

.tm-res .n {
  color:var(--text);

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

.tm-res .v {
  margin-top:2px;

  color:var(--text-dim);

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

.tm-detail {
  flex:1;

  min-width:0;

  padding:2px 0 0 18px
}

.tm-big {
  color:var(--text);

  font-size:24px;
  font-weight:650;

  letter-spacing:-.02em
}

.tm-big small {
  color:var(--text-faint);

  font-size:11px;
  font-weight:400
}

.tm-graph {
  width:100%;
  height:150px;

  margin-top:10px;

  display:block;

  background:var(--surface-2);

  border:1px solid var(--line);
  border-radius:4px
}

.tm-graph .tm-grid {
  stroke:var(--line);
  stroke-width:.5
}

.tm-graph .tm-area {
  fill:var(--accent);
  opacity:.12;
  stroke:none
}

.tm-graph .tm-line {
  fill:none;
  stroke:var(--accent);
  stroke-width:1.5;
  stroke-linejoin:round;
  stroke-linecap:round
}

.tm-axis {
  display:flex;
  justify-content:space-between;

  margin-top:5px;

  color:var(--text-faint);

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

.tm-stats {
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:0 18px;

  margin-top:12px
}

/* ---------- shared meters (also used by Device Info) ---------- */

.tm-perf {
  display:flex;
  flex-direction:column;

  gap:14px;

  padding:6px 2px
}

.tm-meter .t {
  display:flex;
  justify-content:space-between;

  margin-bottom:6px;

  color:var(--text-dim);

  font-size:12px
}

.tm-meter .t .v {
  color:var(--text);

  font-family:var(--mono)
}

.tm-bar {
  height:8px;

  overflow:hidden;

  background:var(--surface-3);

  border-radius:4px
}

.tm-bar > span {
  display:block;

  height:100%;

  background:var(--accent);

  border-radius:4px;

  transition:width .8s var(--ease)
}

/* ---------- startup / users / details / services ---------- */

.tm-startup-row {
  display:flex;
  align-items:center;

  gap:12px;

  padding:9px 8px;

  border:none;
  border-bottom:1px solid var(--line);
  border-radius:4px;

  background:none;

  font-size:12px;
  text-align:left;

  transition:background .12s var(--ease)
}

button.tm-startup-row {
  width:100%;

  cursor:pointer
}

button.tm-startup-row:hover {
  background:var(--surface-2)
}

.tm-startup-row .ico {
  position:relative;

  width:22px;
  height:22px;

  flex-shrink:0
}

.tm-startup-row .ico .glyph-file,
.tm-startup-row .ico .glyph-folder,
.tm-startup-row .ico .glyph-app,
.tm-startup-row .ico .glyph-link {
  width:44px;
  height:44px;

  transform:scale(.5);
  transform-origin:top left
}

.tm-startup-row .n {
  flex:1;

  overflow:hidden;

  color:var(--text);

  white-space:nowrap;
  text-overflow:ellipsis
}

.tm-startup-row .impact {
  color:var(--text-faint);

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

.tm-pill {
  flex-shrink:0;

  padding:3px 9px;

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

  color:var(--text-dim);

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

button.tm-pill {
  cursor:pointer
}

button.tm-pill:hover {
  background:var(--surface-3);
  color:var(--text)
}

.tm-pill.on {
  border-color:var(--green);
  color:var(--green)
}

.tm-pill.off {
  border-color:var(--line-strong);
  color:var(--text-faint)
}

.tm-user {
  display:flex;
  align-items:center;

  gap:12px;

  padding:12px 8px;

  border-bottom:1px solid var(--line)
}

.tm-avatar {
  width:32px;
  height:32px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  background:var(--surface-3);

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

  color:var(--accent);

  font-family:var(--mono);
  font-size:13px;
  font-weight:700
}

.tm-user .n {
  color:var(--text);

  font-size:13px;
  font-weight:600
}

.tm-user .s {
  margin-top:2px;

  color:var(--text-dim);

  font-size:11px
}

.tm-user .s.sub {
  display:block
}

/* ============================================================
   TASK MANAGER — RUN NEW TASK
   ============================================================ */

.tm-run-overlay {
  position:absolute;
  inset:0;
  z-index:10;

  display:flex;
  align-items:flex-start;
  justify-content:center;

  padding:28px 16px;

  overflow:auto;

  background:rgba(0,0,0,.5)
}

.tm-run-box {
  width:min(380px, 100%);

  padding:20px;

  background:var(--surface);

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

  box-shadow:var(--shadow)
}

.tm-run-title {
  color:var(--text);

  font-size:14px;
  font-weight:650
}

.tm-run-desc {
  margin-top:8px;

  color:var(--text-dim);

  font-size:12px;
  line-height:1.6
}

.tm-run-input {
  width:100%;

  margin-top:12px;
  padding:10px 12px;

  background:var(--surface-2);

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

  color:var(--text);

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

.tm-run-input:focus {
  border-color:var(--accent);

  outline:none
}

.tm-run-admin {
  display:flex;
  align-items:center;

  gap:8px;

  margin-top:12px;

  color:var(--text-dim);

  font-size:11px;

  cursor:pointer
}

.tm-run-admin input {
  accent-color:var(--accent)
}

.tm-run-error {
  margin-top:10px;

  color:var(--danger);

  font-family:var(--mono);
  font-size:11px;
  line-height:1.5
}

.tm-run-btns {
  display:flex;
  justify-content:flex-end;

  gap:8px;

  margin-top:16px
}

/* ============================================================
   TASK MANAGER — RESPONSIVE
   ============================================================ */

@media (max-width:640px) {
  .tm-body {
    flex-direction:column
  }

  .tm-side {
    width:auto;

    flex-direction:row;

    padding:8px;

    overflow-x:auto;

    border-right:none;
    border-bottom:1px solid var(--line)
  }

  .tm-navbtn {
    flex-shrink:0;

    border-left:none;
    border-bottom:2px solid transparent;
    border-radius:4px 4px 0 0
  }

  .tm-navbtn.active {
    border-bottom-color:var(--accent)
  }

  .tm-main {
    min-height:0
  }

  .tm-perf-layout {
    flex-direction:column
  }

  .tm-reslist {
    width:auto;

    flex-direction:row;

    overflow-x:auto;

    padding-bottom:4px
  }

  .tm-res {
    flex-shrink:0;

    min-width:96px;

    border-left:none;
    border-bottom:2px solid transparent;
    border-radius:4px 4px 0 0
  }

  .tm-res.active {
    border-bottom-color:var(--accent)
  }

  .tm-detail {
    padding:12px 0 0
  }

  .tm-graph {
    height:120px
  }

  .tm-stats {
    grid-template-columns:1fr
  }

  .tm-table {
    min-width:600px
  }
}