/* NEW ANGEL - the admin / customer panel extras: needs-attention list, program chips, charts, customer tools, setup wizard,
   status and changelog pages. Loaded after site.css and experience.css. */

/* ================================================================ dashboard */

.stat .note { display: block; margin-top: 4px; font-style: normal; font-size: 11px; line-height: 1.3; color: var(--dim); letter-spacing: 0.02em; }

.todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.todo li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; }
.todo li:last-child { border-bottom: 0; }
.todo .dot { flex: none; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--dim); color: var(--dim); box-shadow: 0 0 8px currentColor; }
.todo li.bad .dot { background: var(--bad); color: var(--bad); }
.todo li.warn .dot { background: var(--warn); color: var(--warn); }
.todo li.info .dot { background: var(--blue); color: var(--blue); }
.todo a:not(.btn) { font-weight: 700; }
.todo a.small { font-weight: 400; margin-left: 4px; }

.funnel.funnel-6 { grid-template-columns: repeat(6, 1fr); }
.funnel-6 .funnel-step:nth-last-child(2) b { color: var(--ice); }
@media (max-width: 1100px) { .funnel.funnel-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .funnel.funnel-6 { grid-template-columns: repeat(2, 1fr); } }
.trialbar { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; padding: 10px 12px; margin: 4px 0 10px; border: 1px solid var(--line); background: rgba(2, 6, 12, 0.5); font-size: 13px; }
.trialbar b { color: var(--title); }

.chart { display: block; width: 100%; height: 110px; }
.chart rect { fill: var(--blue); opacity: 0.85; }
.chart rect:hover { fill: var(--ice); opacity: 1; }
.chart rect.nil { fill: var(--line-2); opacity: 0.6; }
.chart-axis { display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; color: var(--dim); }

/* the five programs of one server: GameServer, DataServer, JoinServer, ConnectServer, NAGuard */
.chips { display: inline-flex; gap: 4px; flex-wrap: nowrap; vertical-align: middle; }
.chip { display: inline-block; min-width: 27px; padding: 2px 5px; font: 700 10.5px/1.35 var(--f-ui); letter-spacing: 0.06em; text-align: center; color: var(--dim); border: 1px solid var(--line-2); background: rgba(2, 6, 12, 0.6); cursor: default; }
.chip.on { color: var(--exc); border-color: rgba(96, 232, 136, 0.55); background: rgba(96, 232, 136, 0.09); box-shadow: 0 0 8px rgba(96, 232, 136, 0.2); }
.chip.stale { color: var(--warn); border-color: rgba(255, 172, 64, 0.5); background: rgba(255, 172, 64, 0.09); }
.chip.off { opacity: 0.55; }
.chips-key { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 12px; }

/* ================================================================ panel chrome */

.panel-search { position: relative; flex: 1 1 320px; max-width: 460px; margin: 0 12px; }
.panel-search input { padding-right: 64px; }
.panel-search kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); padding: 2px 6px; font: 700 10px/1.3 var(--f-ui); color: var(--dim); border: 1px solid var(--line-2); pointer-events: none; }
kbd { font: 700 11px/1.3 var(--f-ui); padding: 1px 6px; color: var(--ice); border: 1px solid var(--line-2); background: rgba(2, 6, 12, 0.7); }
@media (max-width: 960px) { .panel-search kbd { display: none; } }
.panel-side a.only-mobile { display: none; }
@media (max-width: 640px) {
  .panel-search { display: none; }
  .panel-side a.only-mobile { display: flex; }
  .panel-user .btn:not(:last-child) { display: none; }
}

.tabs a { white-space: nowrap; }
.sortlink { color: inherit; }
.sortlink:hover { color: #fff; text-shadow: none; }
.tag { display: inline-block; padding: 1px 7px; font: 700 10.5px/1.5 var(--f-ui); letter-spacing: 0.06em; color: var(--ice); border: 1px solid var(--ice-a); background: rgba(110, 176, 255, 0.08); text-transform: lowercase; }
a.tag:hover { color: #fff; background: rgba(110, 176, 255, 0.22); text-shadow: none; }
.badge[title] { cursor: help; }

/* ================================================================ customer page */

.quickbar { position: sticky; top: 62px; z-index: 30; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; margin: 0 0 22px; background: rgba(6, 12, 22, 0.94); border: 1px solid var(--line-2); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); }
.quickbar .inline-form { gap: 6px; }

.timeline { list-style: none; margin: 4px 0 0 6px; padding: 0 0 0 20px; border-left: 1px solid var(--line-2); }
.timeline li { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 7px 0; font-size: 13px; line-height: 1.5; }
.timeline li::before { content: ""; position: absolute; left: -25px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px rgba(110, 176, 255, 0.7); }
.timeline li.tl-paid::before { background: var(--exc); box-shadow: 0 0 8px rgba(96, 232, 136, 0.7); }
.timeline li.tl-refused::before { background: var(--bad); box-shadow: 0 0 8px rgba(255, 98, 82, 0.7); }
.timeline li.tl-ticket::before, .timeline li.tl-order::before { background: var(--warn); box-shadow: 0 0 8px rgba(255, 172, 64, 0.6); }
.timeline li.tl-audit::before { background: var(--dim); box-shadow: none; }
.timeline time { color: var(--dim); font-size: 12px; }
@media (max-width: 640px) { .timeline li { grid-template-columns: 1fr; gap: 0; } }

/* ================================================================ customer: setup wizard */

.wizard { margin-bottom: 24px; }
.wiz { list-style: none; margin: 0 0 8px; padding: 0; }
.wiz li { display: flex; align-items: center; gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.wiz li::before { content: ""; flex: none; width: 18px; height: 18px; background: url("../ui/pip-off.png") center / contain no-repeat; }
.wiz li.done::before { background-image: url("../ui/pip-on.png"); filter: drop-shadow(0 0 5px rgba(150, 218, 255, 0.7)); }
.wiz li > div { flex: 1; min-width: 0; }
.wiz b { display: block; color: var(--title); font-size: 14px; }
.wiz li.done b { color: var(--exc); }
.wiz small { display: block; margin-top: 2px; color: var(--label); font-size: 12.5px; line-height: 1.45; }
.wiz li.live { border-bottom: 0; }
@media (max-width: 640px) { .wiz li { flex-wrap: wrap; } .wiz li > div { flex: 1 1 60%; } }

/* ================================================================ public: status + changelog */

.status-now { display: flex; gap: 16px; align-items: center; padding: 16px 18px; margin-bottom: 16px; border: 1px solid var(--line-2); background: rgba(6, 12, 22, 0.7); }
.status-now .dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--exc); box-shadow: 0 0 14px var(--exc); }
.status-now.down .dot { background: var(--bad); box-shadow: 0 0 14px var(--bad); }
.status-now b { display: block; font-size: 17px; color: var(--title); }
.status-now span { color: var(--label); font-size: 13.5px; }
.status-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.status-facts > div { padding: 10px 14px; border: 1px solid var(--line); background: rgba(2, 6, 12, 0.5); }
.status-facts small { display: block; color: var(--label); font: 700 10.5px/1.2 var(--f-ui); letter-spacing: 0.1em; text-transform: uppercase; }
.status-facts b { display: block; margin-top: 6px; font: 800 20px/1.2 var(--f-title); color: var(--ice); }
.status-chart { margin-bottom: 22px; }
@media (max-width: 640px) { .status-facts { grid-template-columns: 1fr; } }

.changelog { list-style: none; margin: 0 0 18px; padding: 0; }
.changelog li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cl-head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.cl-head b { font: 800 18px/1.2 var(--f-title); color: var(--ice); }
.cl-head span { color: var(--title); font-weight: 700; }
.cl-head time { margin-left: auto; color: var(--dim); font-size: 12px; }
.changelog p { margin: 6px 0 0; color: var(--text); }

/* ================================================================ small screens: a table row becomes a card */

@media (max-width: 720px) {
  .tbl-stack thead { display: none; }
  .tbl-stack, .tbl-stack tbody, .tbl-stack tr, .tbl-stack td { display: block; width: 100%; }
  .tbl-stack tr { margin: 0 0 12px; padding: 4px 10px; border: 1px solid var(--line-2); background: rgba(2, 6, 12, 0.5); }
  .tbl-stack tbody tr:nth-child(even) td, .tbl-stack tbody tr:hover td { background: none; }
  .tbl-stack td { display: block; padding: 8px 2px; text-align: left; border-bottom: 1px solid var(--line); }
  .tbl-stack td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--label); font: 700 10.5px/1.6 var(--f-ui); letter-spacing: 0.1em; text-transform: uppercase; }
  .tbl-stack td[data-label=""]::before { display: none; }
  .tbl-stack td:last-child { border-bottom: 0; }
  .tbl-stack code { white-space: normal; word-break: break-all; }
}

.chips-key > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--label); }
.chips-key > small { flex-basis: 100%; }
.tbl .chips { margin: 0; }