/* PVKit Web UI — shared design tokens, semantic classes, sidebar & base styles.
   Extracted from pvkit-web-ui design system. Loaded by every page via <link>. */

:root {
  /* Primary brand scale — indigo */
  --pvkit-brand-50: #eef2ff;
  --pvkit-brand-100: #e0e7ff;
  --pvkit-brand-200: #c7d2fe;
  --pvkit-brand-300: #a5b4fc;
  --pvkit-brand-400: #818cf8;
  --pvkit-brand-500: #6366f1;
  --pvkit-brand-600: #4f46e5;
  --pvkit-brand-700: #4338ca;
  --pvkit-brand-800: #3730a3;
  --pvkit-brand-900: #312e81;

  /* Neutral scale — slate */
  --pvkit-neutral-0: #ffffff;
  --pvkit-neutral-50: #f8fafc;
  --pvkit-neutral-100: #f1f5f9;
  --pvkit-neutral-200: #e2e8f0;
  --pvkit-neutral-300: #cbd5e1;
  --pvkit-neutral-400: #94a3b8;
  --pvkit-neutral-500: #64748b;
  --pvkit-neutral-600: #475569;
  --pvkit-neutral-700: #334155;
  --pvkit-neutral-800: #1e293b;
  --pvkit-neutral-900: #0f172a;

  /* State colors */
  --pvkit-state-success: #10b981;
  --pvkit-state-success-bg: #ecfdf5;
  --pvkit-state-warning: #f59e0b;
  --pvkit-state-warning-bg: #fffbeb;
  --pvkit-state-error: #f43f5e;
  --pvkit-state-error-bg: #fff1f2;
  --pvkit-state-info: #3b82f6;
  --pvkit-state-info-bg: #eff6ff;

  /* Semantic tokens — light mode */
  --pvkit-background: var(--pvkit-neutral-0);
  --pvkit-foreground: var(--pvkit-neutral-900);
  --pvkit-card: var(--pvkit-neutral-0);
  --pvkit-card-foreground: var(--pvkit-neutral-900);
  --pvkit-popover: var(--pvkit-neutral-0);
  --pvkit-popover-foreground: var(--pvkit-neutral-900);
  --pvkit-primary: var(--pvkit-brand-600);
  --pvkit-primary-foreground: var(--pvkit-neutral-0);
  --pvkit-secondary: var(--pvkit-neutral-100);
  --pvkit-secondary-foreground: var(--pvkit-neutral-900);
  --pvkit-muted: var(--pvkit-neutral-100);
  --pvkit-muted-foreground: var(--pvkit-neutral-500);
  --pvkit-accent: var(--pvkit-neutral-100);
  --pvkit-accent-foreground: var(--pvkit-neutral-900);
  --pvkit-border: var(--pvkit-neutral-200);
  --pvkit-input: var(--pvkit-neutral-200);
  --pvkit-ring: var(--pvkit-brand-500);

  /* Sidebar */
  --pvkit-sidebar: var(--pvkit-neutral-0);
  --pvkit-sidebar-foreground: var(--pvkit-neutral-900);

  /* Radius scale */
  --pvkit-radius-small: 4px;
  --pvkit-radius-medium: 8px;
  --pvkit-radius-large: 12px;

  /* Shadows */
  --pvkit-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.02);
  --pvkit-shadow-2: 0 8px 24px -8px rgba(15, 23, 42, 0.12);
  --pvkit-shadow-3: 0 24px 60px -20px rgba(15, 23, 42, 0.22);

  /* Typography */
  --pvkit-font-sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --pvkit-font-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Consolas", monospace;

  /* Spacing */
  --pvkit-space-1: 4px;
  --pvkit-space-2: 8px;
  --pvkit-space-3: 12px;
  --pvkit-space-4: 16px;
  --pvkit-space-5: 24px;
  --pvkit-space-6: 32px;
  --pvkit-space-7: 48px;
  --pvkit-space-8: 64px;
  --pvkit-space-9: 96px;

  /* Legacy aliases */
  --pvkit-radius-sm: var(--pvkit-radius-small);
  --pvkit-radius-md: var(--pvkit-radius-medium);
  --pvkit-radius-lg: var(--pvkit-radius-large);
  --pvkit-radius-full: 9999px;
}

.dark {
  --pvkit-background: #0b0b0f;
  --pvkit-foreground: var(--pvkit-neutral-100);
  --pvkit-card: #111318;
  --pvkit-card-foreground: var(--pvkit-neutral-100);
  --pvkit-popover: #111318;
  --pvkit-popover-foreground: var(--pvkit-neutral-100);
  --pvkit-primary: var(--pvkit-brand-500);
  --pvkit-primary-foreground: var(--pvkit-neutral-0);
  --pvkit-secondary: #1a1d23;
  --pvkit-secondary-foreground: var(--pvkit-neutral-100);
  --pvkit-muted: #1a1d23;
  --pvkit-muted-foreground: var(--pvkit-neutral-400);
  --pvkit-accent: #1a1d23;
  --pvkit-accent-foreground: var(--pvkit-neutral-100);
  --pvkit-border: #272a31;
  --pvkit-input: #272a31;
  --pvkit-ring: var(--pvkit-brand-400);
  --pvkit-sidebar: #111318;
  --pvkit-sidebar-foreground: var(--pvkit-neutral-100);
}

/* Base typography */
html { font-family: var(--pvkit-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background-color: var(--pvkit-background); color: var(--pvkit-foreground); font-size: 15px; line-height: 1.6; }
pre, code { font-family: var(--pvkit-font-mono); }

/* Semantic token fallback (mirror Tailwind utilities so colors resolve even before CDN compiles) */
.bg-background { background-color: var(--pvkit-background); }
.text-background { color: var(--pvkit-background); }
.border-background { border-color: var(--pvkit-background); }
.bg-foreground { background-color: var(--pvkit-foreground); }
.text-foreground { color: var(--pvkit-foreground); }
.border-foreground { border-color: var(--pvkit-foreground); }
.bg-card { background-color: var(--pvkit-card); }
.text-card { color: var(--pvkit-card); }
.border-card { border-color: var(--pvkit-card); }
.bg-card-foreground { background-color: var(--pvkit-card-foreground); }
.text-card-foreground { color: var(--pvkit-card-foreground); }
.border-card-foreground { border-color: var(--pvkit-card-foreground); }
.bg-popover { background-color: var(--pvkit-popover); }
.text-popover { color: var(--pvkit-popover); }
.border-popover { border-color: var(--pvkit-popover); }
.bg-popover-foreground { background-color: var(--pvkit-popover-foreground); }
.text-popover-foreground { color: var(--pvkit-popover-foreground); }
.border-popover-foreground { border-color: var(--pvkit-popover-foreground); }
.bg-primary { background-color: var(--pvkit-primary); }
.text-primary { color: var(--pvkit-primary); }
.border-primary { border-color: var(--pvkit-primary); }
.bg-primary-foreground { background-color: var(--pvkit-primary-foreground); }
.text-primary-foreground { color: var(--pvkit-primary-foreground); }
.border-primary-foreground { border-color: var(--pvkit-primary-foreground); }
.bg-secondary { background-color: var(--pvkit-secondary); }
.text-secondary { color: var(--pvkit-secondary); }
.border-secondary { border-color: var(--pvkit-secondary); }
.bg-secondary-foreground { background-color: var(--pvkit-secondary-foreground); }
.text-secondary-foreground { color: var(--pvkit-secondary-foreground); }
.border-secondary-foreground { border-color: var(--pvkit-secondary-foreground); }
.bg-muted { background-color: var(--pvkit-muted); }
.text-muted { color: var(--pvkit-muted); }
.border-muted { border-color: var(--pvkit-muted); }
.bg-muted-foreground { background-color: var(--pvkit-muted-foreground); }
.text-muted-foreground { color: var(--pvkit-muted-foreground); }
.border-muted-foreground { border-color: var(--pvkit-muted-foreground); }
.bg-accent { background-color: var(--pvkit-accent); }
.text-accent { color: var(--pvkit-accent); }
.border-accent { border-color: var(--pvkit-accent); }
.bg-accent-foreground { background-color: var(--pvkit-accent-foreground); }
.text-accent-foreground { color: var(--pvkit-accent-foreground); }
.border-accent-foreground { border-color: var(--pvkit-accent-foreground); }
.bg-border { background-color: var(--pvkit-border); }
.text-border { color: var(--pvkit-border); }
.border-border { border-color: var(--pvkit-border); }
.bg-input { background-color: var(--pvkit-input); }
.text-input { color: var(--pvkit-input); }
.border-input { border-color: var(--pvkit-input); }
.bg-ring { background-color: var(--pvkit-ring); }
.text-ring { color: var(--pvkit-ring); }
.border-ring { border-color: var(--pvkit-ring); }

/* Sidebar resizer */
:root { --sidebar-width: 240px; }
html.sidebar-collapsed { --sidebar-width: 64px; }
@media (max-width: 767px) {
  :root { --sidebar-width: 0px !important; }
  html.sidebar-collapsed { --sidebar-width: 0px !important; }
  .main-content { margin-left: 0 !important; }
  .sidebar-panel { display: none !important; }
}
.main-content { transition: margin-left 0.25s ease; }
.sidebar-panel { transition: width 0.25s ease; width: var(--sidebar-width, 240px) !important; }
html.sidebar-collapsed .sidebar-panel { width: 64px !important; }
.sidebar-panel .nav-label {
  display: inline-block; max-width: 200px; opacity: 1; overflow: hidden;
  white-space: nowrap; transition: max-width 0.25s ease, opacity 0.2s ease, margin-left 0.2s ease; margin-left: 0;
}
html.sidebar-collapsed .sidebar-panel .nav-label { max-width: 0; opacity: 0; margin-left: -4px; }
.sidebar-panel nav a { transition: padding-left 0.25s ease, padding-right 0.25s ease, gap 0.25s ease; }
html.sidebar-collapsed .sidebar-panel nav a { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
.sidebar-resizer {
  position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize;
  background: transparent; transition: background 0.2s; z-index: 35;
}
.sidebar-resizer:hover, .sidebar-resizer:focus { background: var(--pvkit-primary); outline: none; }
.sidebar-resizer::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2px; height: 24px; border-radius: 9999px; background: var(--pvkit-border);
}
.sidebar-resizer:hover::after, .sidebar-resizer:focus::after { background: var(--pvkit-primary-foreground); }

/* Layered UI polish */
header.fixed { box-shadow: var(--pvkit-shadow-1); }
aside.sidebar-panel { background-color: var(--pvkit-sidebar); color: var(--pvkit-sidebar-foreground); box-shadow: 2px 0 8px rgba(15,23,42,0.04); }
main [style*="background-color: var(--pvkit-card)"] { box-shadow: var(--pvkit-shadow-1); transition: box-shadow 0.2s ease, transform 0.2s ease; }
main [style*="background-color: var(--pvkit-card)"]:hover { box-shadow: var(--pvkit-shadow-2); }
main table tbody tr { transition: background-color 0.15s; }
main table tbody tr:hover { background-color: var(--pvkit-muted); }
button, [role="button"] { transition: box-shadow 0.2s ease, opacity 0.2s ease; }
/* Buttons stay still on hover/active — no vertical shift */
button:hover, [role="button"]:hover { transform: none; }
button:active, [role="button"]:active { transform: none; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }

/* Utilities */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[data-icon] {
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background-color: currentColor;
}

/* Toast */
.pvkit-toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 100; padding: 10px 16px; border-radius: 8px; font-size: 14px;
  box-shadow: var(--pvkit-shadow-2); max-width: 90vw;
}
.pvkit-toast-error { background-color: var(--pvkit-state-error-bg); color: var(--pvkit-state-error); border: 1px solid var(--pvkit-state-error); }
.pvkit-toast-success { background-color: var(--pvkit-state-success-bg); color: var(--pvkit-state-success); border: 1px solid var(--pvkit-state-success); }
.pvkit-toast-info { background-color: var(--pvkit-state-info-bg); color: var(--pvkit-state-info); border: 1px solid var(--pvkit-state-info); }

/* Modal */
.pvkit-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pvkit-modal { width: 100%; max-width: 460px; background: var(--pvkit-card); color: var(--pvkit-card-foreground); border: 1px solid var(--pvkit-border); border-radius: 12px; box-shadow: var(--pvkit-shadow-3); }

/* Top-bar search (collapsible) + popovers */
.pvkit-search-input {
  width: 0; padding-left: 0; padding-right: 0; border-width: 0; opacity: 0;
  overflow: hidden; white-space: nowrap; box-sizing: border-box;
  transition: width .22s ease, opacity .18s ease, padding .2s ease, border-width .2s ease;
}
#search-cluster.is-open .pvkit-search-input {
  width: 240px; padding-left: 12px; padding-right: 38px; border-width: 1px; opacity: 1;
}
/* 放大镜按钮：默认相对定位（折叠态即独立的图标按钮）；展开时绝对定位到输入框右侧内部 */
#search-toggle { position: relative; z-index: 2; }
#search-cluster.is-open #search-toggle {
  position: absolute; right: 4px; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
}
.pvkit-pop {
  position: absolute; background: var(--pvkit-popover); color: var(--pvkit-popover-foreground);
  border: 1px solid var(--pvkit-border); border-radius: 12px; box-shadow: var(--pvkit-shadow-2); z-index: 60;
}
.pvkit-search-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 14px;
  text-decoration: none; cursor: pointer; border-bottom: 1px solid var(--pvkit-border);
}
.pvkit-search-item:last-child { border-bottom: 0; }
.pvkit-search-item:hover { background-color: var(--pvkit-muted); }

/* Continuous spin (used by refresh buttons while a request is in flight) */
@keyframes pvkit-spin { to { transform: rotate(360deg); } }
svg.spin { animation: pvkit-spin 0.8s linear infinite; }