/* ============================================================
   MANAGE TAB — reuses the Command tab's Liquid Glass tokens.
   Scoped to #page-manage so it cannot leak into the legacy tabs.
   ============================================================ */
#page-manage {
  --cmd-glass: rgba(255, 255, 255, 0.055);
  --cmd-border: rgba(255, 255, 255, 0.09);
  --cmd-accent: #8B5CF6;
  --cmd-accent2: #06B6D4;
  --cmd-good: #34D399;
  --cmd-warn: #F59E0B;
  --cmd-crit: #F87171;
  --cmd-t1: rgba(255, 255, 255, 0.92);
  --cmd-t2: rgba(255, 255, 255, 0.55);
  --cmd-t3: rgba(255, 255, 255, 0.32);
  --cmd-track: rgba(255, 255, 255, 0.07);
  --cmd-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  color: var(--cmd-t1);
}
[data-theme="light"] #page-manage {
  --cmd-glass: rgba(255, 255, 255, 0.78);
  --cmd-border: rgba(0, 0, 0, 0.08);
  --cmd-accent: #E8450B;
  --cmd-accent2: #B4530A;
  --cmd-good: #0F8A5F;
  --cmd-warn: #B57400;
  --cmd-crit: #C6383C;
  --cmd-t1: rgba(17, 17, 17, 0.92);
  --cmd-t2: rgba(17, 17, 17, 0.55);
  --cmd-t3: rgba(17, 17, 17, 0.34);
  --cmd-track: rgba(0, 0, 0, 0.08);
  --cmd-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
}

#manage-root {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  max-width: 1100px; margin: 0 auto;
}
#manage-root .cmd-card { position: relative; z-index: 1; }
#page-manage .cmd-card {
  background: var(--cmd-glass);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--cmd-border);
  border-radius: 24px;
  box-shadow: var(--cmd-shadow);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 13px;
}

/* Live signals: the point is watching these move after an edit. */
.mg-strip { flex-direction: row !important; flex-wrap: wrap; align-items: baseline; gap: 34px !important; }
.mg-sig { display: flex; flex-direction: column; gap: 2px; }
.mg-sig-l { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cmd-t3); font-weight: 650; }
.mg-sig-v { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.mg-sig-n { font-size: 11.5px; color: var(--cmd-t3); }
.mg-sig-note { margin-left: auto; align-self: center; font-size: 11.5px; color: var(--cmd-t3); max-width: 240px; text-align: right; }

.mg-help { font-size: 12px; color: var(--cmd-t2); line-height: 1.5; margin: -4px 0 4px; }
.mg-help b { color: var(--cmd-t1); font-weight: 620; }

.mg-tbl { width: 100%; border-collapse: collapse; }
.mg-tbl td { padding: 9px 10px 9px 0; border-top: 1px solid var(--cmd-border); vertical-align: middle; font-size: 13px; }
.mg-tbl tr:first-child td { border-top: none; }
.mg-name { font-weight: 580; min-width: 130px; }
.mg-dim { color: var(--cmd-t3); font-size: 11.5px; white-space: nowrap; }
.mg-u { font-size: 11px; color: var(--cmd-t3); }
.mg-off { opacity: 0.45; }
.mg-age { font-size: 11.5px; color: var(--cmd-t3); text-align: right; }
.mg-age.hot { color: var(--cmd-warn); font-weight: 650; }
.mg-acts { text-align: right; white-space: nowrap; }

.mg-in {
  background: var(--cmd-track); color: var(--cmd-t1);
  border: 1px solid var(--cmd-border); border-radius: 9px;
  padding: 6px 9px; font: inherit; font-size: 12.5px; width: 118px;
}
.mg-in:focus { outline: none; border-color: var(--cmd-accent); background: transparent; }
.mg-in--s { width: 82px; }
.mg-in--w { width: 100%; min-width: 150px; }
.mg-in.num { font-variant-numeric: tabular-nums; }
#page-manage select.mg-in { width: auto; min-width: 150px; }

.mg-btn {
  background: var(--cmd-track); color: var(--cmd-t2);
  border: 1px solid var(--cmd-border); border-radius: 9px;
  padding: 6px 13px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.mg-btn:hover { color: var(--cmd-t1); border-color: var(--cmd-accent); }
.mg-btn--p { background: var(--cmd-accent); border-color: var(--cmd-accent); color: #fff; }
.mg-btn--p:hover { filter: brightness(1.12); color: #fff; }
.mg-btn--q:hover { border-color: var(--cmd-crit); color: var(--cmd-crit); }

.mg-new { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  border-top: 1px solid var(--cmd-border); padding-top: 13px; margin-top: 3px; }

.mg-msg { border-radius: 12px; padding: 11px 16px; font-size: 13px; border: 1px solid; }
.mg-msg--ok  { color: var(--cmd-good); border-color: var(--cmd-good); background: rgba(52, 211, 153, 0.07); }
.mg-msg--err { color: var(--cmd-crit); border-color: var(--cmd-crit); background: rgba(248, 113, 113, 0.07); }

.mg-st { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; font-weight: 650;
  border: 1px solid var(--cmd-border); border-radius: 6px; padding: 3px 7px; }
.mg-st--paid { color: var(--cmd-good); border-color: var(--cmd-good); }
.mg-st--pending { color: var(--cmd-warn); border-color: var(--cmd-warn); }
.mg-st--cancelled { color: var(--cmd-t3); }


/* ---- client book ---- */
.mg-book { display: flex; flex-direction: column; }
.mg-client { border-top: 1px solid var(--cmd-border); }
.mg-client:first-child { border-top: none; }
.mg-crow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 2px;
  background: none; border: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mg-crow:hover .mg-cname { color: var(--cmd-accent); }
.mg-chev { color: var(--cmd-t3); width: 12px; font-size: 11px; }
.mg-cname { font-weight: 620; font-size: 14px; min-width: 150px; }
.mg-cbits { display: flex; gap: 6px; flex-wrap: wrap; }
.mg-clast { margin-left: auto; font-size: 11px; color: var(--cmd-t3); white-space: nowrap; }
.mg-pill { font-size: 10.5px; font-weight: 650; border: 1px solid var(--cmd-border);
  border-radius: 6px; padding: 2px 7px; color: var(--cmd-t2); font-variant-numeric: tabular-nums; }
.mg-pill--r { color: var(--cmd-good); border-color: var(--cmd-good); }
.mg-pill--u { color: var(--cmd-accent2); border-color: var(--cmd-accent2); }
.mg-pill--o { color: var(--cmd-warn); border-color: var(--cmd-warn); }

.mg-detail { padding: 4px 0 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.mg-detail h4 { font-size: 12px; font-weight: 680; margin: 0 0 9px;
  display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.mg-detail h4 em { font-style: normal; font-size: 11px; font-weight: 450; color: var(--cmd-t3); }
.mg-none { font-size: 12px; color: var(--cmd-t3); margin: 0 0 9px; }

.mg-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid var(--cmd-border); }
.mg-line:first-of-type { border-top: none; }
.mg-line--head { border-top: none; padding-top: 2px; }
.mg-sp { flex: 1; }
.mg-inv-n { font-weight: 600; min-width: 78px; font-size: 12.5px; }

.mg-proj { border: 1px solid var(--cmd-border); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.mg-ms { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 6px 0 6px 14px;
  border-left: 2px solid var(--cmd-border); margin: 5px 0 5px 3px; }
.mg-in--m { width: 128px; }
.mg-add { display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  border-top: 1px dashed var(--cmd-border); padding-top: 10px; margin-top: 8px; }
.mg-add--ms { border-top-style: dotted; margin-left: 17px; }

@media (max-width: 760px) {
  .mg-strip { gap: 20px !important; }
  .mg-sig-note { margin-left: 0; text-align: left; max-width: none; }
  .mg-sig-v { font-size: 24px; }
  .mg-detail { padding-left: 6px; }
  .mg-clast { margin-left: 0; width: 100%; }
  .mg-in, .mg-in--s, .mg-in--m { width: 100%; }
  .mg-line, .mg-ms, .mg-add { flex-direction: column; align-items: stretch; }
  .mg-ms { padding-left: 8px; }
}