/*
  Tanz Probe UI — Linear-inspired dark operations dashboard for Nezha Monitoring
  Safe overlay: pure CSS, injected by Nginx. Remove the Nginx sub_filter block to roll back.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root,
html,
html.dark,
html.light {
  color-scheme: dark !important;
  --background: 225 17% 4% !important;
  --foreground: 210 20% 96% !important;
  --card: 220 14% 7% !important;
  --card-foreground: 210 20% 96% !important;
  --popover: 220 14% 8% !important;
  --popover-foreground: 210 20% 96% !important;
  --primary: 238 58% 62% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 220 12% 12% !important;
  --secondary-foreground: 214 18% 83% !important;
  --muted: 220 12% 12% !important;
  --muted-foreground: 218 10% 62% !important;
  --accent: 238 90% 72% !important;
  --accent-foreground: 0 0% 100% !important;
  --destructive: 0 72% 51% !important;
  --destructive-foreground: 0 0% 98% !important;
  --border: 220 12% 18% !important;
  --input: 220 12% 18% !important;
  --ring: 238 90% 72% !important;
  --radius: 0.75rem !important;
  --tanz-bg: #08090a;
  --tanz-bg-2: #0f1011;
  --tanz-surface: rgba(255,255,255,.035);
  --tanz-surface-2: rgba(255,255,255,.055);
  --tanz-border: rgba(255,255,255,.08);
  --tanz-border-soft: rgba(255,255,255,.05);
  --tanz-text: #f7f8f8;
  --tanz-muted: #8a8f98;
  --tanz-soft: #d0d6e0;
  --tanz-accent: #7170ff;
  --tanz-accent-2: #5e6ad2;
  --tanz-green: #27a644;
}

html, body, #root {
  background: radial-gradient(circle at 18% 0%, rgba(113,112,255,.16), transparent 30rem),
              radial-gradient(circle at 82% 14%, rgba(39,166,68,.11), transparent 28rem),
              linear-gradient(180deg, #08090a 0%, #0b0d12 42%, #08090a 100%) !important;
  color: var(--tanz-text) !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-feature-settings: "cv01", "ss03" !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 75%);
}

#root > * { position: relative; z-index: 1; }

* {
  scrollbar-color: rgba(113,112,255,.55) rgba(255,255,255,.04) !important;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(113,112,255,.8), rgba(94,106,210,.45));
  border: 2px solid #08090a;
  border-radius: 999px;
}

/* Global surfaces */
.bg-background, .bg-card, .bg-popover, .bg-muted, .bg-secondary,
[class*="bg-background"], [class*="bg-card"], [class*="bg-popover"] {
  background-color: rgba(15,16,17,.78) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
}

.border, [class*="border-border"], [class*="border-input"] {
  border-color: var(--tanz-border) !important;
}

.shadow, [class*="shadow"] {
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 20px 60px rgba(0,0,0,.34) !important;
}

/* Cards and panels */
.rounded-lg, .rounded-xl, .rounded-md,
[class*="rounded-lg"], [class*="rounded-xl"] {
  border-radius: 16px !important;
}

[class*="border"]:has(> div),
[class*="rounded"]:has(svg),
.card, section, main > div > div {
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

main [class*="rounded"],
main [class*="border"],
[role="dialog"],
[cmdk-root],
table, thead, tbody {
  border-color: var(--tanz-border) !important;
}

main [class*="rounded"][class*="border"],
main [class*="border"][class*="bg"],
[role="dialog"],
[cmdk-root] {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 55px rgba(0,0,0,.28) !important;
}

main [class*="rounded"][class*="border"]:hover,
main [class*="border"][class*="bg"]:hover {
  border-color: rgba(113,112,255,.32) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
  transform: translateY(-1px);
}

/* Header/sidebar/navigation */
header, nav, aside, [class*="sticky"], [class*="fixed"] {
  background: rgba(8,9,10,.72) !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
  border-color: rgba(255,255,255,.065) !important;
}

a, button, [role="button"] {
  transition: all .16s ease !important;
}

a { color: #d0d6e0 !important; }
a:hover { color: #f7f8f8 !important; }

button,
[role="button"],
input,
select,
textarea {
  border-radius: 10px !important;
  font-family: inherit !important;
}

button:not([disabled]), [role="button"]:not([aria-disabled="true"]) {
  border-color: rgba(255,255,255,.08) !important;
}

button:hover, [role="button"]:hover {
  transform: translateY(-1px);
  border-color: rgba(113,112,255,.38) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(113,112,255,.12) !important;
}

.bg-primary, button[class*="bg-primary"], [class*="bg-primary"] {
  background: linear-gradient(135deg, #5e6ad2, #7170ff) !important;
  color: #fff !important;
  box-shadow: 0 10px 34px rgba(94,106,210,.32) !important;
}

/* Text hierarchy */
h1, h2, h3, .text-foreground, [class*="text-foreground"] { color: #f7f8f8 !important; }
h1, h2 {
  letter-spacing: -0.045em !important;
  font-weight: 560 !important;
}
h3, h4 { letter-spacing: -0.02em !important; }
.text-muted-foreground, [class*="text-muted-foreground"] { color: #8a8f98 !important; }
.text-secondary-foreground, [class*="text-secondary-foreground"] { color: #d0d6e0 !important; }

/* Numeric / metrics feel */
[class*="font-mono"], code, pre,
[aria-label*="CPU"], [aria-label*="RAM"], [aria-label*="SWAP"], [aria-label*="Net"] {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* Tables */
table {
  overflow: hidden !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.025) !important;
}
thead, thead tr {
  background: rgba(255,255,255,.045) !important;
}
th, td {
  border-color: rgba(255,255,255,.055) !important;
}
tr:hover, tbody tr:hover {
  background: rgba(113,112,255,.075) !important;
}

/* Badges/status */
[class*="bg-green"], [class*="text-green"], [data-state="checked"] {
  color: #9ff6b8 !important;
  background-color: rgba(39,166,68,.16) !important;
  border-color: rgba(39,166,68,.35) !important;
}
[class*="bg-red"], [class*="text-red"], [class*="destructive"] {
  color: #ffb4b4 !important;
  background-color: rgba(239,68,68,.14) !important;
  border-color: rgba(239,68,68,.34) !important;
}
[class*="bg-yellow"], [class*="text-yellow"], [class*="bg-orange"], [class*="text-orange"] {
  color: #ffd88a !important;
  background-color: rgba(245,158,11,.14) !important;
  border-color: rgba(245,158,11,.32) !important;
}

/* Charts */
.recharts-cartesian-grid line { stroke: rgba(255,255,255,.075) !important; }
.recharts-text, .recharts-label, .recharts-legend-item-text { fill: #8a8f98 !important; color: #8a8f98 !important; }
.recharts-tooltip-wrapper [class*="rounded"], .recharts-default-tooltip {
  background: rgba(15,16,17,.94) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;
}

/* Forms */
input, textarea, select, [cmdk-input] {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #f7f8f8 !important;
  outline: none !important;
}
input:focus, textarea:focus, select:focus, [cmdk-input]:focus {
  border-color: rgba(113,112,255,.62) !important;
  box-shadow: 0 0 0 3px rgba(113,112,255,.14) !important;
}
::placeholder { color: #62666d !important; }

/* Tanz brand tag */
body::after {
  content: "TANZ · OBSERVABILITY";
  position: fixed;
  right: 18px;
  bottom: 14px;
  z-index: 40;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(8,9,10,.52);
  color: rgba(208,214,224,.66);
  font: 500 10px/1 'JetBrains Mono', monospace;
  letter-spacing: .14em;
  backdrop-filter: blur(14px);
  pointer-events: none;
}

/* Mobile */
@media (max-width: 768px) {
  body::after { display: none; }
  main [class*="rounded"][class*="border"] { border-radius: 12px !important; }
  h1 { font-size: 2rem !important; }
}