/* alfaserver palette for Filebrowser — matches Gaym devlog */
@import url("https://fonts.bunny.net/css?family=inter:400,500,600,700|inter-tight:600,700,800|jetbrains-mono:400,500,600&display=swap");

:root,
body.dark-mode,
[data-theme="dark"] {
  /* Filebrowser CSS custom properties */
  --background: #0b0d10 !important;
  --surfacePrimary: #13161b !important;
  --surfaceSecondary: #161a20 !important;
  --divider: rgba(255,255,255,0.08) !important;
  --icon: #9aa3af !important;
  --textPrimary: #e9eef5 !important;
  --textSecondary: #9aa3af !important;
  --blue: #7ad7ff !important;
  --primaryColor: #7ad7ff !important;

  /* alfaserver tokens (for our own rules) */
  --alfa-bg: #0b0d10;
  --alfa-elevated: #13161b;
  --alfa-card: #161a20;
  --alfa-border: rgba(255,255,255,0.08);
  --alfa-border-strong: rgba(255,255,255,0.18);
  --alfa-fg: #e9eef5;
  --alfa-muted: #9aa3af;
  --alfa-accent: #7ad7ff;
}

html, body, #app {
  background-color: var(--alfa-bg) !important;
  color: var(--alfa-fg);
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif !important;
  letter-spacing: -0.02em;
}

code, pre, .mono {
  font-family: 'JetBrains Mono', Menlo, Consolas, monospace !important;
}

/* Header / top bar */
header {
  background-color: var(--alfa-bg) !important;
  border-bottom: 1px solid var(--alfa-border) !important;
  color: var(--alfa-fg) !important;
}
header .action,
header .search,
header > div {
  color: var(--alfa-fg) !important;
}

/* Sidebar / nav */
nav, .sidebar, aside {
  background-color: var(--alfa-bg) !important;
  border-right: 1px solid var(--alfa-border) !important;
}
nav a, .sidebar a {
  color: var(--alfa-muted) !important;
}
nav a:hover, .sidebar a:hover,
nav a.active, .sidebar a.active {
  color: var(--alfa-accent) !important;
  background-color: rgba(122, 215, 255, 0.08) !important;
}

/* Main listing area */
main, .main, #listing {
  background-color: var(--alfa-bg) !important;
}

/* File / folder rows */
#listing .item,
.item,
.file-list > * {
  background-color: var(--alfa-card) !important;
  border: 1px solid var(--alfa-border) !important;
  color: var(--alfa-fg) !important;
  transition: border-color 0.15s, transform 0.15s;
}
#listing .item:hover,
.item:hover {
  border-color: var(--alfa-border-strong) !important;
  background-color: var(--alfa-elevated) !important;
}
#listing .item.selected,
.item.selected,
.item[aria-selected="true"] {
  border-color: var(--alfa-accent) !important;
  background-color: rgba(122, 215, 255, 0.08) !important;
}

/* Buttons */
.action,
button,
.button {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: var(--alfa-fg) !important;
}
button:hover, .button:hover, .action:hover {
  color: var(--alfa-accent) !important;
}
button.primary,
.button.primary,
button[type="submit"] {
  background-color: var(--alfa-accent) !important;
  color: var(--alfa-bg) !important;
  border: 1px solid var(--alfa-accent) !important;
  font-weight: 600 !important;
}
button.primary:hover,
.button.primary:hover,
button[type="submit"]:hover {
  background-color: var(--alfa-fg) !important;
  color: var(--alfa-bg) !important;
}

/* Inputs */
input, textarea, select {
  background-color: var(--alfa-elevated) !important;
  border: 1px solid var(--alfa-border) !important;
  color: var(--alfa-fg) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--alfa-accent) !important;
  outline: none !important;
}

/* Login card */
.card,
#login,
.login-card {
  background-color: var(--alfa-card) !important;
  border: 1px solid var(--alfa-border) !important;
  border-radius: 8px;
}

/* Breadcrumb / path */
.breadcrumbs,
.breadcrumbs a {
  color: var(--alfa-muted) !important;
}
.breadcrumbs a:hover {
  color: var(--alfa-accent) !important;
}

/* Selection */
::selection {
  background-color: rgba(122, 215, 255, 0.25);
  color: var(--alfa-fg);
}

/* Scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--alfa-bg); }
::-webkit-scrollbar-thumb {
  background: #2a2f37;
  border-radius: 6px;
  border: 3px solid var(--alfa-bg);
}
::-webkit-scrollbar-thumb:hover { background: #3a4049; }

/* alfaserver wordmark in the header (visual only — Filebrowser CSS sandbox
   doesn't support DOM injection, so we use a pseudo-element. Cross-site
   navigation is via the browser back-button or the URL bar.) */
header .action::before,
header > div:first-child::after {
  content: "";
}
header::before {
  content: "alfaserver / files";
  position: absolute;
  left: 4.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--alfa-accent);
  font-weight: 500;
  pointer-events: none;
  z-index: 5;
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--alfa-accent);
  outline-offset: 2px;
}

/* Spinner / progress */
.spinner, .loader, [class*="spinner"] {
  color: var(--alfa-accent) !important;
  border-color: var(--alfa-accent) !important;
}

/* Status text */
.status, .info, footer {
  color: var(--alfa-muted) !important;
  font-family: 'JetBrains Mono', Menlo, monospace !important;
  font-size: 0.75rem !important;
}