/**
 * Flowbite-inspired Gemini API overlay (api.nailooong.eu.cc)
 * Tokens: Flowbite gray + blue (https://github.com/themesberg/flowbite)
 * New API CSS uses HEX + color-mix() — never HSL triplets.
 * Only two themes: light and html.dark
 */

:root,
html.light {
  --fb-blue-50: #ebf5ff;
  --fb-blue-100: #e1effe;
  --fb-blue-200: #c3ddfd;
  --fb-blue-500: #3f83f8;
  --fb-blue-600: #1c64f2;
  --fb-blue-700: #1a56db;
  --fb-blue-800: #1e429f;
  --fb-gray-50: #f9fafb;
  --fb-gray-100: #f3f4f6;
  --fb-gray-200: #e5e7eb;
  --fb-gray-300: #d1d5db;
  --fb-gray-400: #9ca3af;
  --fb-gray-500: #6b7280;
  --fb-gray-600: #4b5563;
  --fb-gray-700: #374151;
  --fb-gray-800: #1f2937;
  --fb-gray-900: #111827;
  --fb-red-600: #e02424;
  --fb-red-700: #c81e1e;

  --background: #f9fafb !important;
  --foreground: #111827 !important;
  --card: #ffffff !important;
  --card-foreground: #111827 !important;
  --popover: #ffffff !important;
  --popover-foreground: #111827 !important;
  --primary: #1a56db !important;
  --primary-foreground: #ffffff !important;
  --secondary: #e1effe !important;
  --secondary-foreground: #1e429f !important;
  --muted: #f3f4f6 !important;
  --muted-foreground: #4b5563 !important;
  --accent: #e1effe !important;
  --accent-foreground: #1e429f !important;
  --destructive: #e02424 !important;
  --destructive-foreground: #ffffff !important;
  --border: #e5e7eb !important;
  --input: #d1d5db !important;
  --ring: #1c64f2 !important;
  --radius: 0.5rem !important;

  --sidebar-background: #ffffff !important;
  --sidebar-foreground: #111827 !important;
  --sidebar-primary: #1a56db !important;
  --sidebar-primary-foreground: #ffffff !important;
  --sidebar-accent: #ebf5ff !important;
  --sidebar-accent-foreground: #1e429f !important;
  --sidebar-border: #e5e7eb !important;
  --sidebar-ring: #1c64f2 !important;
}

html.dark {
  --background: #111827 !important;
  --foreground: #f9fafb !important;
  --card: #1f2937 !important;
  --card-foreground: #f9fafb !important;
  --popover: #1f2937 !important;
  --popover-foreground: #f9fafb !important;
  --primary: #3f83f8 !important;
  --primary-foreground: #ffffff !important;
  --secondary: #374151 !important;
  --secondary-foreground: #e1effe !important;
  --muted: #1f2937 !important;
  --muted-foreground: #9ca3af !important;
  --accent: #1e429f !important;
  --accent-foreground: #e1effe !important;
  --destructive: #f05252 !important;
  --destructive-foreground: #111827 !important;
  --border: #374151 !important;
  --input: #4b5563 !important;
  --ring: #3f83f8 !important;

  --sidebar-background: #1f2937 !important;
  --sidebar-foreground: #f9fafb !important;
  --sidebar-primary: #3f83f8 !important;
  --sidebar-primary-foreground: #111827 !important;
  --sidebar-accent: #374151 !important;
  --sidebar-accent-foreground: #e1effe !important;
  --sidebar-border: #374151 !important;
  --sidebar-ring: #3f83f8 !important;
}

html, body {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  font-family: Inter, "Noto Sans SC", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Kill extra theme presets at the CSS layer */
html[data-theme-preset]:not([data-theme-preset="default"]) {
  /* overlay still wins via !important tokens */
}

button[aria-label*="Open theme" i],
button[aria-label*="theme settings" i],
button[aria-label*="主题设置"],
button[title*="主题设置"],
button[title*="Theme settings" i] {
  display: none !important;
}

/* ---------- Sidebar ---------- */
aside,
[data-sidebar="sidebar"] {
  background-color: var(--sidebar-background) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  color: var(--sidebar-foreground) !important;
}

aside a,
[data-sidebar="menu-button"] {
  border-radius: 0.5rem !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--sidebar-foreground) !important;
}

aside a[aria-current="page"],
[data-sidebar="menu-button"][data-active="true"] {
  background-color: var(--sidebar-accent) !important;
  color: var(--sidebar-accent-foreground) !important;
  font-weight: 600 !important;
}

aside a:hover,
[data-sidebar="menu-button"]:hover {
  background-color: var(--muted) !important;
}

/* ---------- Tables ---------- */
th {
  background-color: var(--muted) !important;
  color: var(--muted-foreground) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--border) !important;
}
td {
  border-bottom: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  font-size: 14px !important;
}

/* ---------- Flowbite-style buttons ---------- */
button,
a[class*="inline-flex"],
[data-slot="button"] {
  font-weight: 500 !important;
  border-radius: 0.5rem !important;
}

button:focus-visible,
a[class*="inline-flex"]:focus-visible,
[data-slot="button"]:focus-visible {
  outline: 2px solid var(--ring) !important;
  outline-offset: 2px !important;
}

button[class*="bg-primary"],
a[class*="bg-primary"],
[data-slot="button"][class*="bg-primary"] {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08) !important;
}
html.light button[class*="bg-primary"],
html.light a[class*="bg-primary"] {
  background-color: #1a56db !important;
  color: #ffffff !important;
}
html.dark button[class*="bg-primary"],
html.dark a[class*="bg-primary"] {
  background-color: #3f83f8 !important;
  color: #ffffff !important;
}
button[class*="bg-primary"]:hover,
a[class*="bg-primary"]:hover {
  filter: brightness(0.92);
}
button[class*="bg-primary"] svg,
a[class*="bg-primary"] svg {
  color: inherit !important;
  stroke: currentColor !important;
}

button[class*="bg-secondary"],
a[class*="bg-secondary"] {
  background-color: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
  border: 1px solid var(--border) !important;
}
button[class*="bg-secondary"] svg {
  color: var(--primary) !important;
}

button[class*="bg-accent"],
a[class*="bg-accent"] {
  background-color: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

button[class*="bg-muted"],
a[class*="bg-muted"] {
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
}

button[class*="border"]:not([class*="bg-primary"]):not([class*="bg-destructive"]):not([class*="bg-secondary"]),
[data-slot="button"][class*="outline"] {
  background-color: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
}
button[class*="border"]:not([class*="bg-primary"]):hover {
  background-color: var(--muted) !important;
}

button[class*="bg-destructive"],
a[class*="bg-destructive"] {
  background-color: var(--destructive) !important;
  color: var(--destructive-foreground) !important;
}
button[class*="text-destructive"] {
  color: var(--destructive) !important;
}
button[class*="text-destructive"]:hover {
  background-color: color-mix(in srgb, var(--destructive) 12%, var(--card)) !important;
}

button[class*="ghost"],
button[class*="size-icon"],
td button,
th button {
  color: var(--foreground) !important;
  background-color: transparent !important;
}
button[class*="ghost"]:hover,
td button:hover,
button[class*="size-icon"]:hover {
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
}
td button svg,
button[class*="size-icon"] svg,
button[class*="ghost"] svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

button:disabled,
button[disabled],
button[aria-disabled="true"] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ---------- Dialogs ---------- */
[data-slot="dialog-overlay"],
div[class*="fixed"][class*="inset-0"][class*="bg-black"] {
  background-color: rgba(17, 24, 39, 0.55) !important;
  backdrop-filter: blur(4px) !important;
}

[data-slot="dialog-content"],
div[role="dialog"] {
  background-color: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 15px -3px rgba(17, 24, 39, 0.15), 0 4px 6px -4px rgba(17, 24, 39, 0.1) !important;
}

[data-slot="dialog-close"],
[role="dialog"] button[class*="absolute"][class*="right-"] {
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  opacity: 1 !important;
  border-radius: 9999px !important;
}

/* ---------- Inputs / select ---------- */
[data-slot="select-trigger"],
button[role="combobox"],
input, select, textarea {
  background-color: var(--card) !important;
  color: var(--foreground) !important;
  border-color: var(--border) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--muted-foreground) !important;
  opacity: 1 !important;
}
[data-slot="select-content"],
[data-radix-select-content] {
  background-color: var(--popover) !important;
  color: var(--popover-foreground) !important;
  border: 1px solid var(--border) !important;
}
[role="option"]:hover,
[role="option"][data-highlighted] {
  background-color: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

/* ---------- Theme settings panel: hide extras ---------- */
[data-nailong-hide="1"] {
  display: none !important;
}

#nailong-theme-toggle {
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 2147483646 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 9999px !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--foreground) !important;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.18) !important;
  cursor: pointer;
}
#nailong-theme-toggle:hover {
  background: var(--muted) !important;
}
#nailong-theme-toggle svg {
  width: 20px;
  height: 20px;
}

.gemini-nav-logo {
  height: 28px !important;
  width: auto !important;
  max-width: 32px !important;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: middle !important;
  border-radius: 6px !important;
  margin-right: 8px !important;
}

.gemini-hero-banner-container {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  width: 100%;
}
.gemini-hero-logo-img {
  max-width: 440px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

header nav {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  margin: 12px 16px 0 !important;
  max-width: calc(100% - 32px);
}
header nav a,
header nav button {
  border-radius: 8px !important;
}

footer {
  background-color: var(--muted) !important;
  border-top: 1px solid var(--border) !important;
}

@media (max-width: 768px) {
  .gemini-hero-logo-img { max-width: 280px; }
  td button, button[class*="size-icon"] {
    min-width: 36px;
    min-height: 36px;
  }
}