/* ============================================================================
   BEAT-IT DASHBOARD — GLACIER CYAN THEME
   Single source of truth for colour + shared component classes.
   Tailwind utility tokens (text-kw-green, bg-surface, …) are repointed to the
   same palette in each page's inline tailwind.config so existing class
   references render in cold blue without per-file churn.
   ============================================================================ */

:root {
  /* — Base surfaces — */
  --ice-bg:      #060B14;  /* page background (navy-black)            */
  --ice-panel:   #0C1626;  /* cards / surfaces                       */
  --ice-line:    #1C2A40;  /* borders / dividers / muted fills       */

  /* — Accents (cold cyan family) — */
  --accent:      #22D3EE;  /* primary accent (bright cyan)           */
  --accent-mid:  #1BB6CE;  /* mid cyan                               */
  --accent-deep: #0E5566;  /* deep teal (buttons / fills)            */
  --accent-cold: #67E8F9;  /* cold cyan                              */
  --accent-ice:  #A5F3FC;  /* pale ice highlight                     */
  --accent-blue: #3B82F6;  /* mid blue (icon/button ramp)            */
  --accent-violet:#8B5CF6; /* violet (icon/button ramp end)          */
  --label:       #5C7E96;  /* muted blue-grey labels                 */

  /* — Text + status — */
  --text:        #E2F2FB;  /* primary text                          */
  --alert:       #FB7185;  /* alert / offline (rose)                 */
  --warn:        #FACC15;  /* degraded (amber)                      */

  /* — Gradients — */
  --grad-accent:      linear-gradient(100deg, var(--accent) 0%, var(--accent-blue) 55%, var(--accent-violet) 100%);
  --grad-card-border: linear-gradient(135deg, var(--accent) 0%, transparent 40%, var(--accent-cold) 100%);
  --grad-text:        linear-gradient(100deg, var(--accent) 0%, var(--accent-ice) 100%);
  --grad-icon:        linear-gradient(135deg, var(--accent) 0%, var(--accent-blue) 52%, var(--accent-violet) 100%);
  --grad-hero:        linear-gradient(135deg, #060B14 0%, #08182A 35%, #0A2535 65%, #08141F 100%);
}

/* === Gradient text === */
.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === Gradient border glow for cards === */
.card-glow { position: relative; }
.card-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-card-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* === Status dots === */
.status-online  { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background-color: var(--accent); }
.status-offline { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background-color: var(--alert); }

/* === Module health === */
.mod-ok       { color: var(--accent); }
.mod-degraded { color: var(--warn); }
.mod-error    { color: var(--alert); }

/* === Scanline overlay === */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* === Cold grid background === */
.main-content {
  background-image:
    linear-gradient(rgba(34,211,238,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,0.045) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* === Glow text effects (legacy class names kept; now cyan) === */
.green-glow,
.accent-glow { text-shadow: 0 0 40px rgba(34,211,238,0.55), 0 0 80px rgba(34,211,238,0.22); }
.ice-glow    { text-shadow: 0 0 40px rgba(165,243,252,0.45); }

/* === Section labels === */
.section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* === Card hover === */
.card-hover {
  border: 1px solid var(--ice-line);
  transition: border-color 0.3s, transform 0.3s;
}
.card-hover:hover { border-color: var(--accent); transform: translateY(-4px); }
.card-hover.ice:hover { border-color: var(--accent-ice); }

/* === Module badge === */
.module-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: rgba(34,211,238,0.08);
  border: 1px solid rgba(34,211,238,0.25);
  color: var(--accent);
}
.module-badge.ice {
  background: rgba(165,243,252,0.08);
  border-color: rgba(165,243,252,0.25);
  color: var(--accent-ice);
}

/* ============================================================================
   HOME — stat cards, big numbers, ambient orbs (moved out of home.html)
   ============================================================================ */

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(34,211,238,0); }
}
.dot-pulse { animation: pulse-glow 2.5s ease-in-out infinite; }

.stat-card {
  background: rgba(12,22,38,0.85);
  border-radius: 0.875rem;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(34,211,238,0.05) 0%, transparent 55%);
}

/* Big numbers */
.num-green,
.num-accent {
  font-size: 2.75rem; font-weight: 700; line-height: 1;
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-ice) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.num-red {
  font-size: 2.75rem; font-weight: 700; line-height: 1;
  background: linear-gradient(100deg, #fb7185 0%, #fbbf24 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.num-blue {
  font-size: 2.75rem; font-weight: 700; line-height: 1;
  background: linear-gradient(100deg, var(--accent-cold) 0%, var(--accent-ice) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.num-muted {
  font-size: 2.75rem; font-weight: 700; line-height: 1; color: #3a4a63;
}

/* Ambient orbs */
.orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }

/* ============================================================================
   QUICK-NAV TILES (Home) + freshness widgets (Metrics)
   ============================================================================ */

.quick-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(12,22,38,0.85);
  border: 1px solid var(--ice-line);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.quick-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}

/* Heartbeat freshness bar (metrics) */
.fresh-track {
  width: 100%;
  height: 4px;
  border-radius: 9999px;
  background: var(--ice-line);
  overflow: hidden;
}
.fresh-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.4s linear, background-color 0.4s;
}

/* ============================================================================
   REDESIGN 2026 — gradient icon badges, primary button, top-bar, panels, login
   ============================================================================ */

/* Shared primary button (cyan → blue → violet ramp). Used on login + forms. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: var(--grad-accent);
  color: #04121b;
  font-weight: 700;
  border: none;
  border-radius: 0.6rem;
  padding: 0.65rem 1.5rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 24px rgba(59,130,246,0.25);
}
.btn-primary:hover { filter: brightness(1.08) saturate(1.1); box-shadow: 0 10px 30px rgba(139,92,246,0.32); }

/* Gradient circular icon badge — the stat-card marquee element */
.stat-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  background: var(--grad-icon);
  box-shadow: 0 10px 28px rgba(34,211,238,0.28), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.stat-icon svg { width: 1.55rem; height: 1.55rem; opacity: 0.95; }
/* warm variant for offline / critical cards */
.stat-icon.alert {
  background: linear-gradient(135deg, var(--alert) 0%, #f472b6 50%, var(--accent-violet) 100%);
  box-shadow: 0 10px 28px rgba(251,113,133,0.28), inset 0 0 0 1px rgba(255,255,255,0.08);
}
/* dimmed variant when the metric is zero / idle */
.stat-icon.idle {
  background: linear-gradient(135deg, #1b2740 0%, #243757 100%);
  box-shadow: none;
  color: var(--label);
}

/* Small quick-tile icon chip */
.tile-icon {
  width: 2rem; height: 2rem; border-radius: 0.55rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(34,211,238,0.10);
  border: 1px solid rgba(34,211,238,0.22);
  color: var(--accent);
}
.tile-icon svg { width: 1.05rem; height: 1.05rem; }

/* Generic panel (credential expiry / recent activity / page sections) */
.panel {
  background: rgba(12,22,38,0.85);
  border: 1px solid var(--ice-line);
  border-radius: 0.875rem;
}

/* Pill badge (e.g. "134 left", severities) */
.pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.7rem; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  background: rgba(34,211,238,0.10);
  border: 1px solid rgba(34,211,238,0.25);
  color: var(--accent);
}
.pill.warn   { background: rgba(250,204,21,0.10); border-color: rgba(250,204,21,0.30); color: var(--warn); }
.pill.alert  { background: rgba(251,113,133,0.10); border-color: rgba(251,113,133,0.30); color: var(--alert); }
.pill.muted  { background: rgba(92,126,150,0.12); border-color: rgba(92,126,150,0.25); color: var(--label); }

/* === Top bar: search === */
.topbar-search { position: relative; width: 20rem; max-width: 30vw; }
.topbar-search > svg {
  position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: var(--label); pointer-events: none;
}
.topbar-search input {
  width: 100%;
  background: var(--ice-bg);
  border: 1px solid var(--ice-line);
  border-radius: 0.6rem;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  color: var(--text); font-size: 0.8rem;
  transition: border-color 0.2s;
}
.topbar-search input::placeholder { color: var(--label); }
.topbar-search input:focus { outline: none; border-color: var(--accent); }

/* === Top bar: icon button (bell) + avatar === */
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 0.6rem;
  border: 1px solid var(--ice-line); color: var(--label); cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn svg { width: 1.15rem; height: 1.15rem; }
.icon-btn .badge {
  position: absolute; top: -0.4rem; right: -0.4rem;
  min-width: 1.05rem; height: 1.05rem; padding: 0 0.22rem;
  border-radius: 9999px; background: var(--alert); color: #fff;
  font-size: 0.6rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--ice-panel);
}

.avatar {
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-icon); color: #fff; font-weight: 700; font-size: 0.78rem;
  cursor: pointer; flex-shrink: 0; border: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}

/* === Dropdown menus (bell, avatar, search results) === */
.menu {
  background: var(--ice-panel);
  border: 1px solid var(--ice-line);
  border-radius: 0.75rem;
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
  overflow: hidden;
}
.menu-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.9rem; color: var(--text); font-size: 0.8rem;
  transition: background 0.15s; cursor: pointer;
}
.menu-item:hover { background: var(--ice-line); }
.menu-item svg { width: 1rem; height: 1rem; color: var(--label); flex-shrink: 0; }

/* === Login: icon-prefixed inputs === */
.input-icon { position: relative; }
.input-icon > svg.lead {
  position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
  width: 1.05rem; height: 1.05rem; color: var(--label); pointer-events: none;
}
.input-icon input { padding-left: 2.5rem; }
.input-icon .toggle {
  position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--label); background: none; border: none;
  cursor: pointer; padding: 0.3rem;
}
.input-icon .toggle:hover { color: var(--accent); }
.input-icon .toggle svg { width: 1.05rem; height: 1.05rem; }

/* Login particle-wave canvas anchors to the viewport bottom-left */
#login-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* Frosted-glass login card — translucent fill + blur over the wave backdrop.
   Pair with .card-glow for the gradient hairline border. */
.card-frost {
  background: rgba(10, 20, 40, 0.45);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
          backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid rgba(90, 170, 255, 0.22);
  box-shadow: 0 0 40px rgba(0, 180, 255, 0.15),
              0 0 80px rgba(0, 180, 255, 0.08),
              0 24px 60px rgba(0, 0, 0, 0.45);
}

/* Cyan halo behind the gradient triangle brand mark (tight glow + soft ambient) */
.brand-glow {
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.55))
          drop-shadow(0 10px 24px rgba(34, 211, 238, 0.32));
}