/* Prism: dark glass. Frosted, translucent surfaces with lit edges float over a
   midnight canvas where violet, cyan and rose light drifts. The panel's variables
   color every page and plugin; the rules below restyle the shell and the component
   classes (ui-*) for looks only, so pages keep their layout.

   Motion: `--motion: anime` turns on the panel's anime.js motion (web/src/motion.ts),
   which adds the drifting light (.ui-aurora), the sliding menu pill (.ui-nav-pill),
   and sets --gx/--gy (card glare) and --rx/--ry/--ripple (button ripple) drawn
   here. With reduced motion the panel leaves all of it out and the static look
   below stands on its own. */
:root {
  color-scheme: dark;
  --motion: anime;

  --violet: #8b5cf6;
  --violet-soft: #c4b5fd;
  --cyan: #22d3ee;
  --rose: #f472b6;
  --amber: #fbbf24;
  --emerald: #34d399;
  --glass-edge: rgb(255 255 255 / 0.1);
  --glass-lit: rgb(255 255 255 / 0.2);
  --glass-blur: blur(22px) saturate(160%);
  --shadow-glass: 0 10px 40px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.09);
  --glow-violet: 0 0 0 1px rgb(196 181 253 / 0.25), 0 8px 30px rgb(139 92 246 / 0.35);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --primary: #7c5cff;
  --primary-hover: #8f74ff;
  --primary-active: #6845f0;
  --primary-subtle: rgb(124 92 255 / 0.2);
  --primary-border: rgb(167 139 250 / 0.55);
  --primary-text: var(--violet-soft);
  --danger: #e11d48;
  --danger-hover: #f43f5e;
  --danger-active: #be123c;
  --gold: var(--amber);

  --canvas: #05060e;
  --sidebar: rgb(12 12 28 / 0.45);
  --card: rgb(255 255 255 / 0.045);
  --elevated: rgb(255 255 255 / 0.065);
  --hover: rgb(255 255 255 / 0.08);
  --input: rgb(6 7 20 / 0.5);
  --modal: rgb(18 16 40 / 0.86);
  --code: rgb(3 4 12 / 0.7);
  --overlay: rgb(3 3 10 / 0.5);

  --fg: #f5f3ff;
  --fg-secondary: #c8c6e0;
  --fg-muted: #8b89a8;
  --fg-disabled: #5c5a78;

  --line: rgb(255 255 255 / 0.12);
  --line-soft: rgb(255 255 255 / 0.08);
  --line-strong: rgb(255 255 255 / 0.2);
  --ring: rgb(167 139 250 / 0.9);
  --ring-danger: #fb7185;

  --success: var(--emerald);
  --success-bg: rgb(52 211 153 / 0.13);
  --success-text: #6ee7b7;
  --warning: var(--amber);
  --warning-bg: rgb(251 191 36 / 0.13);
  --warning-text: #fcd34d;
  --error: #fb7185;
  --error-bg: rgb(251 113 133 / 0.13);
  --error-text: #fda4af;
  --info: #60a5fa;
  --info-bg: rgb(96 165 250 / 0.13);
  --info-text: #93c5fd;
  --neutral-bg: rgb(255 255 255 / 0.07);
  --neutral-text: #c8c6e0;

  --chart-cpu: #a78bfa;
  --chart-ram: var(--rose);
  --chart-storage: var(--amber);
  --chart-network: var(--cyan);

  --corner-sm: 8px;
  --corner-md: 12px;
  --corner-lg: 18px;
  --corner-xl: 24px;

  --font-ui: Inter, ui-sans-serif, system-ui, 'Segoe UI', 'Vazirmatn Variable', sans-serif;
  --font-code: 'JetBrains Mono', 'Cascadia Code', Consolas, 'SF Mono', monospace;

  scrollbar-color: rgb(255 255 255 / 0.14) transparent;
  accent-color: var(--primary);
}

:root[dir='rtl'] {
  --font-ui: 'Vazirmatn Variable', system-ui, sans-serif;
}

/* Animated by the browser when a card is hovered: the glare fades in and out. */
@property --glare {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

::selection {
  background: rgb(139 92 246 / 0.45);
  color: #fff;
}

/* Canvas: a still mesh of colored light, a frosted grain above it, and (with
   motion) the drifting aurora between them. */

body {
  background:
    radial-gradient(ellipse 60% 50% at 12% 8%, rgb(124 92 255 / 0.28), transparent 70%),
    radial-gradient(ellipse 50% 45% at 92% 18%, rgb(34 211 238 / 0.16), transparent 70%),
    radial-gradient(ellipse 55% 50% at 70% 100%, rgb(244 114 182 / 0.16), transparent 70%),
    radial-gradient(ellipse 40% 40% at 0% 100%, rgb(59 130 246 / 0.14), transparent 70%),
    var(--canvas);
  background-attachment: fixed;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.06;
  background: url(noise.svg) 0 0 / 220px 220px;
  mix-blend-mode: overlay;
}

.ui-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ui-aurora > i {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.38;
  mix-blend-mode: screen;
  will-change: transform;
}

.ui-aurora > i:nth-child(1) { top: -12vmax; left: -8vmax; background: radial-gradient(circle, var(--violet), transparent 65%); }
.ui-aurora > i:nth-child(2) { top: 10vh; right: -14vmax; background: radial-gradient(circle, var(--cyan), transparent 65%); opacity: 0.26; }
.ui-aurora > i:nth-child(3) { bottom: -18vmax; left: 30vw; background: radial-gradient(circle, var(--rose), transparent 65%); opacity: 0.24; }
.ui-aurora > i:nth-child(4) { top: 40vh; left: -10vmax; width: 30vmax; height: 30vmax; background: radial-gradient(circle, #3b82f6, transparent 65%); opacity: 0.3; }

/* Shell */

.ui-shell {
  background: transparent;
}

.ui-sidebar {
  position: relative;
  gap: 4px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.02)), var(--sidebar);
  border-color: var(--glass-edge);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset -1px 0 0 rgb(255 255 255 / 0.04);
}

@media (min-width: 768px) {
  .ui-sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    z-index: 20;
    height: 100dvh;
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

@media (max-width: 767px) {
  .ui-sidebar {
    scrollbar-width: none;
  }
}

/* Only where the brand shows: the panel hides it on phones. */
@media (min-width: 768px) {
  .ui-brand {
    display: flex;
  }
}

.ui-brand {
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(100deg, #fff 20%, var(--violet-soft) 55%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ui-brand::before {
  content: '';
  flex: none;
  width: 34px;
  height: 34px;
  background: url(brand.svg) center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgb(139 92 246 / 0.6));
}

.ui-nav-link {
  position: relative;
  z-index: 1;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--corner-md);
  font-weight: 500;
  color: var(--fg-secondary);
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}

.ui-nav-link > svg {
  transition: transform 0.35s var(--ease-out), filter 0.35s ease-out, color 0.2s;
}

.ui-nav-link:hover {
  background: rgb(255 255 255 / 0.06);
  color: var(--fg);
}

.ui-nav-link:hover > svg {
  transform: scale(1.12) rotate(-4deg);
}

.ui-nav-link[aria-current='page'],
.ui-nav-pill {
  border-color: rgb(196 181 253 / 0.35);
  border-radius: var(--corner-md);
  background: linear-gradient(90deg, rgb(139 92 246 / 0.38), rgb(34 211 238 / 0.14));
  box-shadow: 0 0 26px rgb(139 92 246 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.16);
}

.ui-nav-link[aria-current='page'] {
  color: #fff;
}

.ui-nav-link[aria-current='page'] > svg {
  color: var(--violet-soft);
  filter: drop-shadow(0 0 6px rgb(167 139 250 / 0.9));
}

/* With motion the pill carries the current page's look and slides between links. */
.ui-nav-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-width: 1px;
  border-style: solid;
  pointer-events: none;
}

:root[data-motion] .ui-nav-link[aria-current='page'] {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.ui-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(10 10 26 / 0.35);
  border-color: var(--glass-edge);
  backdrop-filter: var(--glass-blur);
}

@media (max-width: 767px) {
  .ui-topbar {
    position: static;
  }
}

.ui-profile {
  border-color: var(--glass-edge);
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.ui-avatar {
  background: conic-gradient(from 210deg, var(--violet), var(--cyan), var(--rose), var(--violet));
  color: #fff;
  box-shadow: 0 0 16px rgb(139 92 246 / 0.45);
}

.ui-search-list,
.ui-select-list {
  border-color: var(--glass-lit);
  background: var(--modal);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.ui-search-list {
  animation: prism-drop 0.22s var(--ease-out);
}

/* Fades only: the drop-down is placed by the panel, which a transform would undo. */
.ui-select-list {
  animation: prism-fade 0.18s ease-out;
}

.ui-search-list [aria-selected='true'] {
  background: rgb(139 92 246 / 0.25);
}

.ui-select-option[data-focus] {
  background: rgb(139 92 246 / 0.22);
}

.ui-bell-dot {
  box-shadow: 0 0 10px var(--error);
}

.ui-impersonation {
  backdrop-filter: var(--glass-blur);
}

/* Page */

.ui-main {
  max-width: 1400px;
  font-feature-settings: 'tnum' 1;
}

.ui-main h1 {
  font-weight: 700;
  letter-spacing: -0.025em;
  text-shadow: 0 0 30px rgb(167 139 250 / 0.35);
}

.ui-main h2 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ui-main pre {
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(8px);
}

.ui-main table th {
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ui-main table tbody tr {
  transition: background-color 0.15s ease-out;
}

.ui-main table tbody tr:hover {
  background: rgb(255 255 255 / 0.04);
}

/* Glass: a translucent, blurred surface with a lit top edge, a corner tint
   (--tint) and a glare that follows the pointer. */

.ui-card {
  --tint: transparent;
  border-color: var(--glass-edge);
  border-top-color: var(--glass-lit);
  background:
    radial-gradient(520px circle at var(--gx, 50%) var(--gy, 0%), rgb(255 255 255 / calc(var(--glare) * 0.09)), transparent 42%),
    radial-gradient(120% 90% at 100% 0%, var(--tint), transparent 60%),
    linear-gradient(160deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.02));
  box-shadow: var(--shadow-glass);
  backdrop-filter: var(--glass-blur);
  transition: --glare 0.45s ease-out, border-color 0.3s ease-out, box-shadow 0.4s ease-out;
}

.ui-card:hover {
  --glare: 1;
}

a.ui-card:hover,
a:hover > .ui-card,
.ui-stat:hover {
  border-color: rgb(196 181 253 / 0.3);
  box-shadow: var(--shadow-glass), 0 0 0 1px rgb(196 181 253 / 0.12), 0 14px 40px rgb(124 92 255 / 0.18);
}

.ui-dialog {
  border-color: var(--glass-lit);
  background: linear-gradient(160deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02)), var(--modal);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 30px 90px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.ui-dialog::backdrop {
  backdrop-filter: blur(8px) saturate(120%);
}

/* Buttons. A press draws a ripple from the pointer, as a background layer so no
   button needs to be positioned. */

.ui-button,
.ui-button-quiet,
.ui-icon-button,
.ui-tile,
.ui-segmented > button {
  --ripple-layer: radial-gradient(
    circle at var(--rx, 50%) var(--ry, 50%),
    rgb(255 255 255 / calc(0.35 - 0.35 * var(--ripple, 1))) calc(var(--ripple, 1) * 150%),
    transparent calc(var(--ripple, 1) * 150% + 1px)
  );
  background-image: var(--ripple-layer);
}

.ui-button {
  border-radius: var(--corner-md);
  transition: background-color 0.2s, box-shadow 0.3s ease-out, filter 0.2s;
}

.ui-button-primary:not(:disabled) {
  background-image: var(--ripple-layer), linear-gradient(120deg, #7c5cff, #a855f7 50%, #22d3ee 140%);
  box-shadow: 0 6px 22px rgb(124 92 255 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.25);
}

.ui-button-primary:not(:disabled):hover {
  filter: brightness(1.12) saturate(1.1);
  box-shadow: var(--glow-violet), inset 0 1px 0 rgb(255 255 255 / 0.3);
}

.ui-button-danger:not(:disabled) {
  background-image: var(--ripple-layer), linear-gradient(120deg, #e11d48, #f43f5e 60%, #fb7185);
  box-shadow: 0 6px 22px rgb(225 29 72 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.2);
}

.ui-button-danger:not(:disabled):hover {
  filter: brightness(1.1);
}

.ui-button-secondary:not(:disabled) {
  border-color: var(--glass-edge);
  border-top-color: var(--glass-lit);
  background-color: rgb(255 255 255 / 0.05);
  backdrop-filter: blur(12px);
}

.ui-button-secondary:not(:disabled):hover {
  background-color: rgb(255 255 255 / 0.1);
  border-color: var(--line-strong);
}

.ui-button:disabled {
  opacity: 0.55;
}

/* Waiting on the server: light sweeps across the button. */
.ui-button-primary[aria-busy='true'] {
  background-image: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.3) 50%, transparent 70%), linear-gradient(120deg, #7c5cff, #a855f7);
  background-size: 200% 100%, 100% 100%;
  animation: prism-sweep 1.2s linear infinite;
}

.ui-icon-button:hover {
  background-color: rgb(255 255 255 / 0.08);
}

/* Fields */

.ui-input {
  border-color: var(--glass-edge);
  background-color: var(--input);
  backdrop-filter: blur(10px);
  transition: border-color 0.2s, box-shadow 0.25s ease-out, background-color 0.2s;
}

.ui-input:hover {
  border-color: var(--line-strong);
}

.ui-input:focus,
.ui-input:focus-within {
  border-color: var(--primary-border);
  background-color: rgb(12 10 32 / 0.65);
  box-shadow: 0 0 0 3px rgb(139 92 246 / 0.22), 0 0 24px rgb(139 92 246 / 0.18);
  outline: none;
}

.ui-input[aria-invalid='true'] {
  border-color: var(--error);
}

label:focus-within > .ui-label {
  color: var(--violet-soft);
}

.ui-label {
  transition: color 0.2s;
}

/* Badges: glass pills with a tinted edge. */

.ui-badge {
  border: 1px solid transparent;
  border-radius: 999px;
  padding-inline: 10px;
  backdrop-filter: blur(8px);
}

.ui-badge-success { border-color: rgb(52 211 153 / 0.28); box-shadow: 0 0 14px rgb(52 211 153 / 0.12); }
.ui-badge-warning { border-color: rgb(251 191 36 / 0.28); }
.ui-badge-error { border-color: rgb(251 113 133 / 0.3); box-shadow: 0 0 14px rgb(251 113 133 / 0.14); }
.ui-badge-info { border-color: rgb(96 165 250 / 0.3); }
.ui-badge-neutral { border-color: rgb(255 255 255 / 0.1); }

.ui-error {
  border: 1px solid rgb(251 113 133 / 0.3);
  backdrop-filter: blur(10px);
}

.ui-tabs {
  border-color: var(--line-soft);
}

/* Overview */

.ui-stat {
  --tint: color-mix(in srgb, var(--accent) 24%, transparent);
}

.ui-stat-icon {
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.15);
}

.ui-stat-value {
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 55%, transparent);
}

.ui-chart-plot path[fill='none'] {
  filter: drop-shadow(0 0 6px currentColor);
}

.ui-chart-tooltip {
  border-color: var(--glass-lit);
  backdrop-filter: var(--glass-blur);
}

.ui-segmented {
  padding: 3px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--corner-md);
  background: rgb(255 255 255 / 0.04);
}

.ui-segmented > [aria-pressed='true'] {
  background-color: rgb(139 92 246 / 0.32);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.15), 0 0 16px rgb(139 92 246 / 0.3);
}

.ui-row {
  transition: background-color 0.2s;
}

.ui-tile {
  border-color: var(--glass-edge);
  border-top-color: var(--glass-lit);
  background-color: rgb(255 255 255 / 0.04);
  backdrop-filter: blur(12px);
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.3s;
}

.ui-tile:hover {
  background-color: rgb(139 92 246 / 0.12);
  box-shadow: 0 10px 30px rgb(124 92 255 / 0.2);
}

.ui-tile > svg {
  filter: drop-shadow(0 0 8px rgb(167 139 250 / 0.7));
}

.ui-map-node {
  transform-box: fill-box;
  transform-origin: center;
}

/* Sign-in: the card floats in the light. */

.ui-login .ui-card {
  border-top-color: rgb(255 255 255 / 0.28);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.5), 0 0 80px rgb(124 92 255 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.ui-login h1::before {
  content: '';
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  background: url(badge.svg) center / contain no-repeat;
  filter: drop-shadow(0 0 14px rgb(139 92 246 / 0.7));
}

@keyframes prism-drop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

@keyframes prism-fade {
  from { opacity: 0; }
}

@keyframes prism-sweep {
  from { background-position: 150% 0, 0 0; }
  to { background-position: -50% 0, 0 0; }
}