/* Shared content components: cards, panels, tables, chips, KPI tiles/donuts.
   Depends on tokens.css. Page-unique styling (chat bubbles, auth screens,
   remote-session modal, install wizard) stays local to each page. */

section, .authcard, .card-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0)), var(--panel);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 1.25rem 1.4rem; margin-top: 1.15rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 30px -20px rgba(0,0,0,0.7);
}
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Panel chrome: title row plus a decorative drag-handle + chart-type icon
   cluster in the corner, matching the ManageEngine card-panel look. Purely
   visual — panels are not actually reorderable. */
.panel-icons { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-faint); flex-shrink: 0; }
.panel-icons svg { width: 0.95rem; height: 0.95rem; }
.panel-icons .drag-handle { cursor: grab; opacity: 0.7; }

input, select, textarea {
  font-size: 0.92rem; padding: 0.58rem 0.68rem; border-radius: 9px;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03);
  color: var(--text); font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,0.15); }
select { appearance: none; }
select option, select optgroup { background: var(--panel); color: var(--text); }

.plat-badge { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim); background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; padding: 0.05rem 0.35rem; vertical-align: middle; }
.stale-badge { font-size: 0.66rem; font-weight: 700; color: #cf9422; background: rgba(224,168,60,0.14); border: 1px solid rgba(224,168,60,0.34); border-radius: 5px; padding: 0.05rem 0.4rem; vertical-align: middle; cursor: help; }

/* Friendly result cards (rendered by output-format.js) */
.result-slot { margin-top: 0.7rem; }
.run-detail { margin-top: 0.45rem; }
.agent-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 0.95rem; }
.agent-card .card-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.agent-card .card-title { font-weight: 700; color: var(--text-strong); font-size: 0.95rem; }
.agent-card .card-sec { margin-top: 0.6rem; }
.agent-card .card-sec .k { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); font-weight: 700; margin-bottom: 0.2rem; }
.agent-card .card-sec .v { font-size: 0.9rem; color: var(--text); line-height: 1.5; }
.agent-card .checks { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.agent-card .checks .tag { font-size: 0.76rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.12rem 0.55rem; color: var(--text-dim); }
.agent-card .card-actions { margin-top: 0.7rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.agent-card .field { margin: 0.45rem 0; }
.agent-card .field label { display: block; font-size: 0.72rem; color: var(--text-dim); margin-bottom: 0.2rem; }
.agent-card .field input, .agent-card .field select { width: 100%; }

.chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.73rem; font-weight: 700; padding: 0.18rem 0.55rem; border-radius: 999px; }
.chip.ok { background: rgba(52,199,123,0.14); color: #2fb673; border: 1px solid rgba(52,199,123,0.32); }
.chip.warn { background: rgba(224,168,60,0.16); color: #cf9422; border: 1px solid rgba(224,168,60,0.34); }
.chip.fail { background: rgba(247,138,138,0.16); color: #e46a6a; border: 1px solid rgba(247,138,138,0.34); }
.chip.pending { background: rgba(120,160,240,0.16); color: #6f9bf0; border: 1px solid rgba(120,160,240,0.34); }

.raw-output, .log-output { margin-top: 0.5rem; background: #060c17; color: #dce4f3; padding: 0.7rem 0.85rem; border-radius: 8px; font-family: var(--mono); font-size: 0.78rem; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; border: 1px solid var(--line-strong); }
.run-summary { font-size: 0.9rem; color: var(--text); line-height: 1.5; margin-bottom: 0.45rem; }
.run-raw-toggle { font-size: 0.8rem; padding: 0.35rem 0.7rem; }
.list-scroll { max-height: 340px; overflow: auto; margin-top: 0.6rem; border: 1px solid var(--line); border-radius: 8px; }
.mini-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.mini-table th { text-align: left; position: sticky; top: 0; background: var(--panel); color: var(--text-faint); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); }
.mini-table td { padding: 0.42rem 0.6rem; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: top; }
.mini-table tr:last-child td { border-bottom: none; }
.upd-list { list-style: none; margin: 0; padding: 0; }
.upd-list li { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); font-size: 0.88rem; display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; }
.upd-list li:last-child { border-bottom: none; }
.upd-sev { font-size: 0.72rem; color: var(--text-faint); white-space: nowrap; }
.list-filter { margin-top: 0.6rem; width: 100%; }

button {
  font-size: 0.92rem; padding: 0.6rem 0.95rem; border-radius: 9px; border: none;
  background: var(--brand); color: #fff; cursor: pointer; font-weight: 600; font-family: inherit;
  transition: background .15s, transform .05s;
}
button:hover { background: #4a80bb; }
button:active { transform: translateY(1px); }
button.secondary { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--line-strong); }
button.secondary:hover { background: rgba(255,255,255,0.1); }
button.approve { background: var(--ok); } button.approve:hover { background: #2fa869; }
button.reject { background: var(--crit); } button.reject:hover { background: #e14b4b; }
button:disabled { opacity: 0.45; cursor: default; }
.row { display: flex; gap: 0.55rem; align-items: center; flex-wrap: wrap; }
/* !important so this utility class always wins regardless of where in the
   cascade a component later sets its own `display` (e.g. .stats, .donut-row) —
   without it, whichever rule happens to come later in the file wins a tie. */
.hidden { display: none !important; }

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th { text-align: left; padding: 0.5rem 0.5rem; color: var(--text-faint); font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; border-bottom: 1px solid var(--line); }
td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }

.pill { font-size: 0.7rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-weight: 600; }
.pill.online { background: rgba(52,192,122,0.15); color: #6ee7a8; }
.pill.offline { background: rgba(255,255,255,0.06); color: var(--text-faint); }
.pill.pending { background: rgba(245,185,66,0.16); color: #f7cd6b; }
.badge { font-size: 0.7rem; padding: 0.12rem 0.5rem; border-radius: 5px; margin-left: 0.35rem; font-weight: 600; }
.badge.low { background: rgba(52,192,122,0.16); color: #6ee7a8; }
.badge.medium { background: rgba(245,185,66,0.16); color: #f7cd6b; }
.badge.high { background: rgba(239,91,91,0.16); color: #f78a8a; }
.sev { font-size: 0.7rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-weight: 600; }
.sev.critical { background: rgba(239,91,91,0.16); color: #f78a8a; }
.sev.warning { background: rgba(245,185,66,0.16); color: #f7cd6b; }
.sev.info { background: rgba(91,155,213,0.16); color: #93c0ec; }
.sev.ok { background: rgba(52,192,122,0.16); color: #6ee7a8; }
.metric-bad { color: #f78a8a; font-weight: 650; }
.metric-warn { color: #f7cd6b; font-weight: 650; }

.tabs { display: flex; gap: 0.4rem; }
.tabs button { background: rgba(255,255,255,0.06); color: var(--text-dim); border: 1px solid var(--line); padding: 0.35rem 0.75rem; font-size: 0.82rem; }
.tabs button.active { background: rgba(249,115,22,0.15); color: var(--accent-2); border-color: rgba(249,115,22,0.4); }
.ticket-row { cursor: pointer; } .ticket-row:hover td { background: rgba(255,255,255,0.03); }

.inv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.9rem; margin-top: 0.9rem; }
.inv-card { border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; background: rgba(255,255,255,0.02); }
.inv-title { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 1rem 0 0.4rem; }
.inv-card .inv-title { margin-top: 0; }
.inv-kv { display: grid; grid-template-columns: auto 1fr; gap: 0.32rem 0.9rem; font-size: 0.86rem; }
.inv-kv .k { color: var(--text-faint); white-space: nowrap; }
.inv-kv .v { color: var(--text); word-break: break-word; }
.err { color: #f78a8a; font-size: 0.9rem; }
.code-box { font-family: var(--mono); background: #060c17; color: var(--accent-2); padding: 0.35rem 0.7rem; border-radius: 7px; border: 1px solid var(--line-strong); }
.invite-link { font-family: var(--mono); font-size: 0.78rem; word-break: break-all; background: #060c17; border: 1px solid var(--line); color: var(--text-dim); padding: 0.55rem; border-radius: 8px; margin-top: 0.45rem; }
pre { background: #060c17; color: #dce4f3; padding: 0.85rem 1rem; border-radius: 10px; white-space: pre-wrap; font-size: 0.82rem; max-height: 240px; overflow: auto; border: 1px solid rgba(255,255,255,0.1); }

/* ---------- KPI tiles: flat number cards (still used where a ring chart
   doesn't fit) and donut-card ring charts with a centered big number + a
   side legend, ManageEngine dashboard-style. ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; margin-top: 1.2rem; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 1rem 1.15rem; box-shadow: 0 10px 30px -24px rgba(0,0,0,0.7); }
.stat .n { font-size: 1.75rem; font-weight: 700; color: var(--text-strong); line-height: 1.1; }
.stat .l { color: var(--text-dim); font-size: 0.8rem; margin-top: 0.2rem; }

.donut-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.9rem; margin-top: 1.2rem; }
.donut-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  padding: 1rem 1.15rem; box-shadow: 0 10px 30px -24px rgba(0,0,0,0.7);
  display: flex; flex-direction: column;
}
.donut-card .donut-title { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; margin-bottom: 0.6rem; }
.donut-card .donut-body { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; }
.donut-card .donut-ring { position: relative; flex-shrink: 0; width: 92px; height: 92px; }
.donut-card .donut-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-card .donut-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.donut-card .donut-center .n { font-size: 1.3rem; font-weight: 700; color: var(--text-strong); line-height: 1; }
.donut-card .donut-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.32rem; }
.donut-card .donut-legend .item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--text-dim); }
.donut-card .donut-legend .item .sw { width: 0.6rem; height: 0.6rem; border-radius: 3px; flex-shrink: 0; }
.donut-card .donut-legend .item .v { margin-left: auto; font-weight: 700; color: var(--text-strong); }