/* ─────────────────────────────────────────────────────
   KELDIVO ADMIN — Panel-specific additions
   Everything else (colors, sidebar, cards, buttons, modal,
   table) comes from the Customer Portal's own style.css /
   animations.css, copied byte-for-byte for visual parity.
───────────────────────────────────────────────────── */

/* ── Command Center hero — the signature element.
   An admin's entire job is "what needs me right now" — so the hero
   IS that queue, not a decorative number. The ring fills proportionally
   to how much is waiting; a live ticker underneath streams the most
   recent resolved actions, like a security operations center feed. ── */
.command-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, hsl(240, 30%, 8%), hsl(250, 35%, 6%));
  border: 1px solid hsl(38, 90%, 58% / 0.18);
  padding: 2rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: center;
}
.command-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, hsl(38, 90%, 58% / 0.10), transparent 55%),
              radial-gradient(circle at 85% 80%, hsl(255, 85%, 65% / 0.10), transparent 55%);
  pointer-events: none;
}
.command-orb {
  position: relative;
  width: 7rem;
  height: 7rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.command-orb svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.command-orb-track { fill: none; stroke: hsl(240, 18%, 20%); stroke-width: 6; }
.command-orb-fill {
  fill: none;
  stroke: url(#command-orb-gradient);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.command-orb-core {
  position: relative;
  z-index: 1;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: hsl(240, 24%, 11%);
  border: 1px solid hsl(38, 90%, 58% / 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.command-orb-core .num { font-size: 1.5rem; font-weight: 800; line-height: 1; color: hsl(38, 90%, 58%); }
.command-orb-core.all-clear .num { color: hsl(152, 76%, 60%); }
.command-hero-text { position: relative; z-index: 1; }
.command-hero-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.375rem; }
.command-hero-sub { font-size: 0.9375rem; color: var(--muted-foreground); }
.command-hero-queues { display: flex; gap: 0.75rem; position: relative; z-index: 1; flex-wrap: wrap; }
.command-queue-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.625rem 1rem;
  border-radius: 0.875rem;
  background: hsl(240, 24%, 11% / 0.6);
  border: 1px solid var(--border);
  min-width: 5.5rem;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.command-queue-pill:hover { border-color: hsl(38, 90%, 58% / 0.4); transform: translateY(-2px); }
.command-queue-pill .val { font-size: 1.375rem; font-weight: 800; color: var(--foreground); }
.command-queue-pill .lbl { font-size: 0.6875rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Live activity ticker — a slim marquee strip under the hero. ── */
.activity-ticker-wrap {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0.625rem 0;
  margin-top: 1.25rem;
  position: relative;
}
.activity-ticker-wrap::before, .activity-ticker-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 3rem;
  z-index: 2;
  pointer-events: none;
}
.activity-ticker-wrap::before { left: 0; background: linear-gradient(90deg, var(--card), transparent); }
.activity-ticker-wrap::after { right: 0; background: linear-gradient(270deg, var(--card), transparent); }
.activity-ticker-track {
  display: flex;
  gap: 2.5rem;
  white-space: nowrap;
  width: max-content;
  animation: kv-ticker-scroll 32s linear infinite;
}
.activity-ticker-wrap:hover .activity-ticker-track { animation-play-state: paused; }
.activity-ticker-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--muted-foreground); }
.activity-ticker-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; flex-shrink: 0; }

/* ── Queue cards (Payments / Withdrawals / Disputes list pages) ── */
.queue-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  transition: border-color 0.15s;
}
.queue-card:hover { border-color: hsl(38, 90%, 58% / 0.3); }
.queue-card + .queue-card { margin-top: 0.75rem; }
.queue-card-avatar {
  width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: hsl(255, 85%, 65% / 0.12); color: hsl(255, 85%, 70%);
  font-weight: 700; font-size: 0.9375rem;
}
.queue-card-body { flex: 1; min-width: 0; }
.queue-card-title { font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.125rem; }
.queue-card-meta { font-size: 0.8125rem; color: var(--muted-foreground); display: flex; gap: 0.75rem; flex-wrap: wrap; }
.queue-card-amount { font-size: 1.125rem; font-weight: 800; color: var(--foreground); white-space: nowrap; }
.queue-card-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ── Severity / priority pills ── */
.severity-pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem; border-radius: 9999px;
  font-size: 0.75rem; font-weight: 600;
}
.severity-pill.high { color: hsl(0, 78%, 68%); background: hsl(0, 78%, 68% / 0.1); }
.severity-pill.medium { color: hsl(38, 90%, 58%); background: hsl(38, 90%, 58% / 0.1); }
.severity-pill.low { color: hsl(190, 95%, 60%); background: hsl(190, 95%, 60% / 0.1); }

/* ── Empty state (queue fully cleared) ── */
.queue-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--muted-foreground);
}
.queue-empty i { color: hsl(152, 76%, 60%); margin-bottom: 0.75rem; }

@keyframes kv-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Announcement banner — deliberately loud/attention-grabbing, ── */
/* unlike the muted activity ticker above. Same seamless-loop marquee */
/* mechanics (content duplicated ×2, translateX -50%) so multiple ────*/
/* announcements scroll continuously instead of cutting mid-line. ────*/
.announcement-ticker-wrap {
  overflow: hidden;
  position: relative;
  padding: 0.6rem 0;
  background: linear-gradient(90deg, hsl(280,85%,55%), hsl(330,85%,58%), hsl(38,92%,58%), hsl(280,85%,55%));
  background-size: 300% 100%;
  animation: kv-announcement-glow 8s ease infinite;
  border-bottom: 1px solid hsl(280,85%,70%,0.4);
}
.announcement-ticker-wrap::before, .announcement-ticker-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 3rem;
  z-index: 2;
  pointer-events: none;
}
.announcement-ticker-wrap::before { left: 0; background: linear-gradient(90deg, hsl(280,85%,45%), transparent); }
.announcement-ticker-wrap::after { right: 0; background: linear-gradient(270deg, hsl(280,85%,45%), transparent); }
.announcement-ticker-track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  width: max-content;
  animation: kv-ticker-scroll 28s linear infinite;
}
.announcement-ticker-wrap:hover .announcement-ticker-track { animation-play-state: paused; }
.announcement-ticker-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
@keyframes kv-announcement-glow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── Responsive tweaks specific to Admin pages ── */
@media (max-width: 900px) {
  .command-hero { grid-template-columns: 1fr; text-align: center; }
  .command-hero-queues { justify-content: center; }
  .dashboard-queue-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 700px) {
  .perm-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 420px) {
  .perm-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr !important; }
  .perm-grid-3col { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
  .perm-grid-2col { grid-template-columns: 1fr !important; }
  .perm-grid-3col { grid-template-columns: 1fr !important; }
}

/* ── Profile page banner ── */
.profile-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, hsl(240, 30%, 9%), hsl(30, 40%, 8%));
  border: 1px solid hsl(38, 90%, 58% / 0.2);
  padding: 2rem;
}
.profile-banner-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, hsl(38, 90%, 58% / 0.14), transparent 55%),
              radial-gradient(circle at 90% 90%, hsl(255, 85%, 65% / 0.10), transparent 55%);
  pointer-events: none;
}
@media (max-width: 700px) {
  .profile-grid { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────
   CUSTOM SCROLLBARS — the browser default (especially Windows' classic
   light, thick scrollbar) clashed badly with the dark theme, showing up
   as an oversized, jarring bar on any page with scrollable content
   (e.g. Notifications). Thin, dark, theme-matched scrollbars everywhere.
───────────────────────────────────────────────────── */
* {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: hsl(255 20% 30%) transparent; /* Firefox: thumb, track */
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(255 20% 28%);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(255 30% 38%);
}

/* ─────────────────────────────────────────────────────
   LIGHT MODE overrides for admin.css's custom components.
   These used hardcoded dark HSL values (not CSS variables) because they're
   deliberately dark "signature" surfaces even in dark mode (deeper than
   --card) — so they need their own explicit light-mode versions rather
   than just inheriting a variable.
───────────────────────────────────────────────────── */
html.light .command-hero {
  background: linear-gradient(135deg, hsl(38, 45%, 96%), hsl(255, 40%, 97%));
  border-color: hsl(38, 85%, 50% / 0.25);
}
html.light .command-orb-track {
  stroke: hsl(220, 15%, 88%);
}
html.light .command-orb-core {
  background: hsl(0, 0%, 100%);
  border-color: hsl(38, 85%, 50% / 0.3);
  box-shadow: var(--shadow-sm);
}
html.light .command-queue-pill {
  background: hsl(0, 0%, 100% / 0.7);
}
html.light .profile-banner {
  background: linear-gradient(135deg, hsl(38, 45%, 95%), hsl(255, 40%, 96%));
  border-color: hsl(38, 85%, 50% / 0.25);
}
html.light .profile-banner-glow {
  background: radial-gradient(circle at 20% 30%, hsl(38, 85%, 50% / 0.10), transparent 55%),
              radial-gradient(circle at 90% 90%, hsl(255, 85%, 60% / 0.08), transparent 55%);
}