/* ==========================================================================
   CsaGuard — design system comun (panou, statistici publice, network, widget)
   ========================================================================== */

:root {
  /* ===== TEMA — schimba doar aceste valori ca sa recolorezi tot CsaGuard ===== */
  /* Fundal: grafit (dark spre gri), neutru, fara tenta albastra */
  --csa-bg: #1c1f24;
  --csa-bg2: #20242a;
  --csa-card: #252a31;
  --csa-card2: #2c3139;
  --csa-card3: #353b44;
  --csa-glass: color-mix(in srgb, var(--csa-card) 88%, transparent);
  --csa-line: rgba(255, 255, 255, 0.07);
  --csa-line2: rgba(255, 255, 255, 0.13);
  --csa-tx: #eeeeec;
  --csa-tx2: #cfd0cc;
  --csa-mu: #9c9fa4;
  --csa-mu2: #6f7379;
  /* Culori de accent -- luate din logo-ul CsaGuard (scutul portocaliu) */
  --csa-a1: #ffb21a;
  --csa-a2: #ff8a00;
  --csa-a3: #f26100;
  --csa-on-accent: #1a1205; /* textul de pe butoanele colorate */
  --csa-grad: linear-gradient(135deg, var(--csa-a1) 0%, var(--csa-a2) 55%, var(--csa-a3) 100%);
  --csa-grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--csa-a1) 16%, transparent), color-mix(in srgb, var(--csa-a2) 12%, transparent) 55%, color-mix(in srgb, var(--csa-a3) 16%, transparent));
  /* Stari */
  --csa-ok: #4cc38a;
  --csa-warn: #e8c547;
  --csa-bad: #e5534b;
  --csa-talk: #4cc38a;
  --csa-r: 16px;
  --csa-r-sm: 10px;
  --csa-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 16px 40px -24px rgba(0,0,0,.6);
  --csa-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --csa-display: "Sora", "Inter", -apple-system, sans-serif;
  --csa-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.csa {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 50% -18%, color-mix(in srgb, var(--csa-a2) 9%, transparent), transparent 70%),
    var(--csa-bg);
  background-attachment: fixed;
  color: var(--csa-tx);
  font-family: var(--csa-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: color-mix(in srgb, var(--csa-a2) 35%, transparent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.16); }
::-webkit-scrollbar-track { background: transparent; }

.csa-grad-text { background: var(--csa-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.csa-num { font-family: var(--csa-mono); font-variant-numeric: tabular-nums; }

/* ---------- Logo ---------- */
.csa-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--csa-tx); }
.csa-logo img { width: 30px; height: 30px; }
.csa-logo img.csa-wordlogo, img.csa-wordlogo { height: 30px; width: auto; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
.csa-logo.big img.csa-wordlogo { height: 52px; width: auto; }
.csa-logo b { font-family: var(--csa-display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.csa-logo b span { background: var(--csa-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Live pill ---------- */
.csa-live {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  background: color-mix(in srgb, var(--csa-ok) 10%, transparent); color: var(--csa-ok); border: 1px solid color-mix(in srgb, var(--csa-ok) 25%, transparent);
}
.csa-live i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: csaPulse 1.8s infinite; }
.csa-live.connecting, .csa-live.reconnecting { background: color-mix(in srgb, var(--csa-warn) 10%, transparent); color: var(--csa-warn); border-color: color-mix(in srgb, var(--csa-warn) 25%, transparent); }
.csa-live.off, .csa-live.closed { background: color-mix(in srgb, var(--csa-bad) 10%, transparent); color: var(--csa-bad); border-color: color-mix(in srgb, var(--csa-bad) 25%, transparent); }
.csa-live.off i, .csa-live.closed i { animation: none; }
@keyframes csaPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Avatar ---------- */
.csa-av {
  --h: 200;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 12px;
  font-weight: 800; font-size: 13px; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 38% 46%), hsl(calc(var(--h) + 25) 38% 36%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.csa-av.sm { width: 26px; height: 26px; border-radius: 8px; font-size: 10px; }

/* ---------- Pills ---------- */
.csa-cc {
  display: inline-flex; align-items: center; height: 17px; padding: 0 5px; border-radius: 5px;
  font: 700 9.5px/1 var(--csa-mono); letter-spacing: .04em; color: var(--csa-tx2);
  background: rgba(255,255,255,.06); border: 1px solid var(--csa-line);
}
.csa-grp {
  --h: 200;
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
  color: hsl(var(--h) 45% 78%); background: hsl(var(--h) 35% 50% / .14); border: 1px solid hsl(var(--h) 35% 60% / .22);
}
.csa-grp.more { --h: 230; color: var(--csa-mu); background: rgba(255,255,255,.05); border-color: var(--csa-line); }
.csa-rank {
  display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 6px;
  font-size: 10.5px; font-weight: 800; color: color-mix(in srgb, var(--csa-a1) 60%, white); background: color-mix(in srgb, var(--csa-warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--csa-warn) 25%, transparent);
}
.csa-rank svg { width: 11px; height: 11px; }
.csa-flag {
  display: inline-flex; align-items: center; gap: 3px; height: 17px; padding: 0 5px; border-radius: 5px;
  font: 800 9.5px/1 var(--csa-mono); letter-spacing: .04em;
}
.csa-flag svg { width: 11px; height: 11px; }
.csa-flag.rec { color: #fff; background: var(--csa-bad); animation: csaBlink 1.4s infinite; }
.csa-flag.cc { color: var(--csa-a1); background: color-mix(in srgb, var(--csa-a1) 12%, transparent); }
.csa-flag.prio { color: var(--csa-warn); background: color-mix(in srgb, var(--csa-warn) 12%, transparent); }
@keyframes csaBlink { 50% { opacity: .55; } }

/* ---------- Status icon (cerc) ---------- */
.csa-st {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  color: var(--csa-mu); background: rgba(255,255,255,.05);
  transition: background .2s, color .2s, box-shadow .2s;
}
.csa-st svg { width: 13px; height: 13px; }
.st-online .csa-st { color: #b3b8c0; }
.st-talk .csa-st { color: var(--csa-on-accent); background: var(--csa-talk); box-shadow: 0 0 0 3px color-mix(in srgb, var(--csa-ok) 22%, transparent), 0 0 16px color-mix(in srgb, var(--csa-ok) 55%, transparent); }
.st-away .csa-st { color: #b99cff; background: color-mix(in srgb, var(--csa-a3) 16%, transparent); }
.st-muted .csa-st, .st-hwoff .csa-st { color: var(--csa-bad); background: color-mix(in srgb, var(--csa-bad) 13%, transparent); }
.st-deaf .csa-st { color: #ff8a5a; background: rgba(255,138,90,.13); }
.st-idle .csa-st { color: var(--csa-warn); background: color-mix(in srgb, var(--csa-warn) 12%, transparent); }

/* ---------- Arbore canale ---------- */
.csa-tree { font-size: 13px; user-select: none; }
.csa-tree-root, .csa-ch, .csa-tc, .csa-spacer {
  display: flex; align-items: center; gap: 8px; min-height: 30px;
  padding: 3px 10px 3px calc(10px + var(--d, 0) * 18px);
  border-radius: 9px;
}
.csa-tree-cl { padding-left: calc(var(--d, 0) * 18px); }
.csa-tree-cl > .csa-tc { --d: 0; }
.csa-tree-root { padding-left: 10px; font-weight: 800; color: var(--csa-tx); margin-bottom: 4px; background: rgba(255,255,255,.03); border: 1px solid var(--csa-line); }
.csa-ch-ic { display: inline-flex; color: var(--csa-mu2); flex: 0 0 auto; }
.csa-ch-ic svg { width: 14px; height: 14px; }
.csa-tree-root .csa-ch-ic { color: var(--csa-a1); }
.csa-ch-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--csa-tx2); }
.csa-ch.has .csa-ch-name { color: var(--csa-tx); font-weight: 600; }
.csa-ch.has .csa-ch-ic { color: var(--csa-a2); }
.csa-ch.def .csa-ch-ic { color: var(--csa-a1); }
.csa-ch-lock { display: inline-flex; color: var(--csa-warn); opacity: .8; }
.csa-ch-lock svg { width: 12px; height: 12px; }
.csa-ch-count { font: 700 11px/1 var(--csa-mono); color: var(--csa-mu); padding: 3px 7px; border-radius: 6px; background: rgba(255,255,255,.05); }
.csa-ch-count.full { color: var(--csa-bad); }
.csa-spacer { justify-content: flex-start; color: var(--csa-mu); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: none; min-height: 26px; }
.csa-spacer span { white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%; }
.csa-spacer.al-c { justify-content: center; }
.csa-spacer.al-r { justify-content: flex-end; }
.csa-spacer.al-c span { background: var(--csa-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.csa-spacer.al-fill span { opacity: .35; letter-spacing: 0; }
.csa-tc { gap: 8px; min-height: 32px; transition: background .15s; }
.csa-tc:hover { background: rgba(255,255,255,.035); }
.csa-tc.clickable { cursor: pointer; }
.csa-tc-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--csa-tx); }
.st-away .csa-tc-name, .st-idle .csa-tc-name { color: var(--csa-mu); }
.st-talk .csa-tc-name { color: color-mix(in srgb, var(--csa-talk) 45%, white); }
.csa-tc-meta { margin-left: auto; display: inline-flex; gap: 5px; align-items: center; flex: 0 0 auto; }
.csa-tree.compact .csa-tc-meta .csa-grp { display: none; }

/* ---------- Carduri membri ---------- */
.csa-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.csa-mc {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border: 1px solid var(--csa-line); transition: border-color .2s, transform .2s, box-shadow .2s;
}
.csa-mc.enter { animation: csaIn .4s ease both; }
.csa-mc.clickable { cursor: pointer; }
.csa-mc:hover { border-color: var(--csa-line2); transform: translateY(-2px); }
.csa-mc.st-talk { border-color: color-mix(in srgb, var(--csa-ok) 45%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--csa-ok) 15%, transparent), 0 12px 30px -16px color-mix(in srgb, var(--csa-ok) 50%, transparent); }
.csa-mc-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.csa-mc-av { position: relative; }
.csa-mc-st {
  position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--csa-card2); color: var(--csa-mu); border: 2px solid var(--csa-card);
}
.csa-mc-st svg { width: 11px; height: 11px; }
.st-talk .csa-mc-st { background: var(--csa-talk); color: var(--csa-on-accent); animation: csaTalk 1.2s ease-in-out infinite; }
.st-away .csa-mc-st { color: #b99cff; }
.st-muted .csa-mc-st, .st-hwoff .csa-mc-st { color: var(--csa-bad); }
.st-deaf .csa-mc-st { color: #ff8a5a; }
.st-idle .csa-mc-st { color: var(--csa-warn); }
@keyframes csaTalk { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--csa-ok) 18%, transparent); } }
.csa-mc-id { min-width: 0; flex: 1; }
.csa-mc-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csa-mc-sub { font-size: 11.5px; color: var(--csa-mu); }
.st-talk .csa-mc-state { color: var(--csa-talk); font-weight: 700; }
.st-muted .csa-mc-state, .st-hwoff .csa-mc-state { color: color-mix(in srgb, var(--csa-bad) 60%, white); }
.st-away .csa-mc-state { color: #b99cff; }
.csa-mc-ch { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--csa-tx2); padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.03); min-width: 0; }
.csa-mc-ch svg { width: 12px; height: 12px; color: var(--csa-a2); flex: 0 0 auto; }
.csa-mc-ch span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csa-mc-foot { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--csa-mu); }
.csa-mc-foot > span { display: inline-flex; align-items: center; gap: 5px; }
.csa-mc-foot svg { width: 13px; height: 13px; }
.csa-mc-foot b { color: var(--csa-tx2); font-family: var(--csa-mono); font-weight: 600; font-size: 11.5px; }
.csa-mc-plat { margin-left: auto; }
.csa-mc-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.csa-mc-admin { display: flex; justify-content: space-between; font: 500 10.5px var(--csa-mono); color: var(--csa-mu2); border-top: 1px dashed var(--csa-line); padding-top: 8px; }
@keyframes csaIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Feed ---------- */
.csa-feed { display: flex; flex-direction: column; gap: 2px; }
.csa-feed-it { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: 13px; animation: csaIn .3s ease both; }
.csa-feed-it:hover { background: rgba(255,255,255,.03); }
.csa-feed-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; background: rgba(255,255,255,.05); color: var(--csa-mu); }
.csa-feed-ic svg { width: 13px; height: 13px; }
.csa-feed-it.join .csa-feed-ic { color: var(--csa-ok); background: color-mix(in srgb, var(--csa-ok) 12%, transparent); }
.csa-feed-it.leave .csa-feed-ic { color: var(--csa-bad); background: color-mix(in srgb, var(--csa-bad) 12%, transparent); }
.csa-feed-it.move .csa-feed-ic { color: var(--csa-a2); background: color-mix(in srgb, var(--csa-a2) 12%, transparent); }
.csa-feed-it.away .csa-feed-ic { color: #b99cff; background: color-mix(in srgb, var(--csa-a3) 14%, transparent); }
.csa-feed-it.record .csa-feed-ic { color: var(--csa-warn); background: color-mix(in srgb, var(--csa-warn) 14%, transparent); }
.csa-feed-it.online .csa-feed-ic { color: var(--csa-a1); background: color-mix(in srgb, var(--csa-a1) 12%, transparent); }
.csa-feed-tx { flex: 1; min-width: 0; color: var(--csa-tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csa-feed-tx b { color: var(--csa-tx); font-weight: 700; }
.csa-feed-it time { font: 500 11px var(--csa-mono); color: var(--csa-mu2); flex: 0 0 auto; }

/* ---------- Sparkline ---------- */
.csa-spark { width: 100%; height: 64px; display: block; overflow: visible; }
.csa-spark .ln { fill: none; stroke: var(--csa-a1); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.csa-spark .base { stroke: var(--csa-line2); stroke-dasharray: 4 4; }
.csa-spark .end { fill: var(--csa-a1); filter: drop-shadow(0 0 6px var(--csa-a1)); }

.csa-empty { color: var(--csa-mu); font-size: 13px; padding: 16px 4px; text-align: center; }

.bump { animation: csaBump .45s ease; }
@keyframes csaBump { 30% { transform: scale(1.12); color: var(--csa-a1); } }

/* ---------- Toolbar filtre ---------- */
.csa-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.csa-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--csa-mu); background: rgba(255,255,255,.035); border: 1px solid var(--csa-line);
  transition: all .15s; user-select: none;
}
.csa-chip:hover { color: var(--csa-tx); border-color: var(--csa-line2); }
.csa-chip.on { color: #fff; background: var(--csa-grad-soft); border-color: color-mix(in srgb, var(--csa-a2) 45%, transparent); }
.csa-chip b { font-family: var(--csa-mono); font-size: 11px; color: var(--csa-tx2); background: rgba(255,255,255,.07); padding: 1px 6px; border-radius: 6px; }
.csa-search { position: relative; flex: 1 1 200px; max-width: 320px; }
.csa-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--csa-mu2); }
.csa-search input {
  width: 100%; height: 34px; padding: 0 12px 0 34px; border-radius: 10px; font: inherit; font-size: 13px;
  color: var(--csa-tx); background: rgba(255,255,255,.035); border: 1px solid var(--csa-line); outline: none;
}
.csa-search input:focus { border-color: color-mix(in srgb, var(--csa-a2) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--csa-a2) 15%, transparent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}