/* ============================================================
   GP Team Hub - mylinks.css
   One table: name, address, edit, trash, and the switch that decides
   whether a row is a card on Today.
   ============================================================ */

.mlk{
  margin-top:16px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.mlk-head,
.mlk-row{
  display:grid;
  grid-template-columns:minmax(120px,1.1fr) minmax(0,2.4fr) 38px 38px 54px;
  align-items:center;
  gap:10px;
  padding:9px 14px;
}
.mlk-head-trash{grid-template-columns:minmax(120px,1.1fr) minmax(0,2.4fr) 64px 38px 38px;}
.mlk-row-trash{grid-template-columns:minmax(120px,1.1fr) minmax(0,2.4fr) 64px 38px 38px;}
.mlk-head{
  background:var(--surface-sunken);
  border-bottom:1px solid var(--line);
  font-size:.7rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--ink-faint);
}
.mlk-c-act,
.mlk-c-show{text-align:center;}
.mlk-row + .mlk-row{border-top:1px solid var(--line);}
.mlk-rows .mlk-row:hover{background:var(--surface-high);}
.mlk-off{opacity:.6;}

.mlk-name{font-size:.92rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;}
.mlk-url{
  font-size:.82rem;
  color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mlk-url a{color:var(--accent);}
.mlk-empty{color:var(--ink-faint);font-style:normal;}
.mlk-when{font-size:.8rem;color:var(--ink-faint);text-align:center;}

/* Edit is the action, so it is the one that is filled. */
.mlk-edit{
  width:30px;height:30px;
  margin:0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  background:var(--accent);
  color:var(--ink-inverse);
  font-size:.74rem;
}
.mlk-edit:hover{background:var(--accent-hover);}
.mlk-bin{
  width:30px;height:30px;
  margin:0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  color:var(--ink-faint);
  font-size:.74rem;
}
.mlk-bin:hover{background:var(--surface-hover);color:var(--ink);}
.mlk-bin[data-armed="1"]{border-color:var(--danger-edge);color:var(--danger);}
.mlk-purge:hover{border-color:var(--danger-edge);color:var(--danger);}

/* The switch. Off is a neutral track, on is the accent, and a row with
   no address cannot be switched on at all. */
.sw{
  position:relative;
  width:42px;height:23px;
  margin:0 auto;
  display:block;
  border-radius:var(--radius-pill);
  background:var(--surface-hover);
  border:1px solid var(--line-strong);
  transition:background .16s,border-color .16s;
}
.sw-dot{
  position:absolute;top:2px;left:2px;
  width:17px;height:17px;
  border-radius:var(--radius-pill);
  background:var(--surface-raised);
  box-shadow:0 1px 2px #00000033;
  transition:transform .16s;
}
.sw-on{background:var(--accent);border-color:var(--accent);}
.sw-on .sw-dot{transform:translateX(19px);}
.sw:disabled{opacity:.4;cursor:default;}

/* The always-present row at the bottom. */
.mlk-new{
  border-top:1px solid var(--line);
  background:var(--surface-sunken);
}
.mlk-in{
  width:100%;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:7px 10px;
  font-size:.88rem;
  outline:none;
}
.mlk-in::placeholder{color:var(--ink-faint);}
.mlk-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
/* Adding a row is the same kind of action as editing one, so it
   wears the same button. */
.mlk-plus{background:var(--accent);}
.mlk-plus:hover{background:var(--accent-hover);}

.mlk-err{margin-top:14px;}
.mlk-foot{margin-top:12px;}

@media (max-width:700px){
  .mlk-head{display:none;}
  .mlk-row,
  .mlk-row-trash{
    grid-template-columns:minmax(0,1fr) 38px 38px 54px;
    row-gap:4px;
  }
  .mlk-name{grid-column:1 / -1;}
  .mlk-url{grid-column:1 / -1;white-space:normal;overflow-wrap:anywhere;}
  .mlk-when{grid-column:1 / -1;text-align:left;}
  .mlk-new .mlk-in{grid-column:1 / -1;}
}

/* The editor drops into the row it belongs to. */
.mlk-editing{background:var(--surface-high);}
.mlk-form{
  grid-column:1 / -1;
  display:grid;
  gap:7px;
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid var(--line);
}
.mlk-form-acts{display:flex;gap:7px;}
@media (min-width:700px){
  .mlk-form{grid-template-columns:minmax(120px,1.1fr) minmax(0,2.4fr) auto;align-items:center;}
  .mlk-form-acts{justify-content:flex-end;}
}