/* ── DeepWhale AI — FileBrowser Theme ──
   Colour-only overrides. No layout changes.
   ============================================== */

:root {
  --background: #07070f;
  --surfacePrimary: #0c0c1a;
  --surfaceSecondary: #10101f;
  --textPrimary: #e2e8f0;
  --textSecondary: rgba(200, 214, 229, 0.55);
  --blue: #64c8ff;
  --dark-blue: #3a9ed8;
  --borderPrimary: rgba(100, 200, 255, 0.08);
  --borderSecondary: rgba(100, 200, 255, 0.18);
}

body, #app { background: #07070f !important; color: #e2e8f0 !important; }
header, .header, nav, .navbar { background: #0c0c1a !important; }
th { color: #64748b !important; }
td { color: #e2e8f0 !important; }
tr:hover { background: rgba(100, 200, 255, 0.04) !important; }
.selected { background: rgba(100, 200, 255, 0.06) !important; }

/* Breadcrumbs */
.breadcrumbs, [class*="breadcrumb"] { background: #07070f !important; color: #94a3b8 !important; }
.breadcrumbs a, [class*="breadcrumb"] a { color: #94a3b8 !important; }
.breadcrumbs a:hover, [class*="breadcrumb"] a:hover { color: #64c8ff !important; }

/* Inputs */
input, .input, textarea, select {
  background: #0c0c1a !important;
  color: #e2e8f0 !important;
  border-color: rgba(100, 200, 255, 0.08) !important;
}
input:focus, .input:focus, textarea:focus, select:focus {
  border-color: #64c8ff !important;
  box-shadow: 0 0 0 1px rgba(100, 200, 255, 0.1) !important;
  outline: none !important;
}

/* Placeholders */
::placeholder, input::placeholder, textarea::placeholder { color: #cbd5e1 !important; opacity: 1 !important; }

/* Buttons */
.button--blue {
  background: rgba(100, 200, 255, 0.08) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(100, 200, 255, 0.15) !important;
  border-radius: 60px !important;
}

/* Cards, modals, dialogs, share panels */
.card, .modal-content, .panel, .share__box, .share__box__items,
[class*="modal"], [class*="dialog"], [class*="prompt"], [class*="settings"] {
  background: #0c0c1a !important;
  border-color: rgba(100, 200, 255, 0.06) !important;
  color: #e2e8f0 !important;
}

/* Sidebar nav */
#nav .action, .sidebar .action { background: transparent !important; border: none !important; color: #94a3b8 !important; }
#nav .action:hover, .sidebar .action:hover { background: rgba(100, 200, 255, 0.04) !important; color: #e2e8f0 !important; }
#nav .action.active, .sidebar .action.active { color: #64c8ff !important; background: rgba(100, 200, 255, 0.06) !important; }

/* Search popup */
#search { background: #0c0c1a !important; border: 1px solid rgba(100, 200, 255, 0.06) !important; border-radius: 6px !important; }
#search.active > div { border-radius: 0 !important; }
#search.active i, #search.active input, #search.active span { color: #e2e8f0 !important; }
#search input { background: transparent !important; border: none !important; color: #e2e8f0 !important; }
#search input:focus { outline: none !important; box-shadow: none !important; }
#search .action { background: transparent !important; border: none !important; color: #94a3b8 !important; }
#search .action:hover { color: #e2e8f0 !important; }
#search .material-icons { color: #94a3b8 !important; }

/* Search header row — no bottom border/shadow on focus, keep proper height */
#search #input, #search .input { border-bottom: none !important; box-shadow: none !important; background: transparent !important; }

/* Search results */
#result { background: #0c0c1a !important; color: #e2e8f0 !important; }
#result li { background: transparent !important; border-bottom: 1px solid rgba(100, 200, 255, 0.04) !important; }
#result li:hover { background: rgba(100, 200, 255, 0.04) !important; }
#result li a { color: #e2e8f0 !important; text-decoration: none !important; }
#result li .name { color: #e2e8f0 !important; }
#result li .size, #result li .modified { color: #64748b !important; }
#result li i { color: #94a3b8 !important; }
#result li i.folder { color: #64c8ff !important; opacity: 0.65 !important; }

/* Search type filter boxes */
#search .boxes { background: #10101f !important; border: 1px solid rgba(100, 200, 255, 0.06) !important; }
#search .boxes h3 { color: #64748b !important; font-weight: 500 !important; }
#search .boxes > div > div { background: rgba(100, 200, 255, 0.06) !important; color: #e2e8f0 !important; }
#search .boxes > div > div:hover { background: rgba(100, 200, 255, 0.10) !important; }
#search .boxes i { color: #64c8ff !important; opacity: 0.7 !important; }

/* Login page — polished, scaled up, blended */
#login { background: #07070f !important; display: flex !important; align-items: center !important; justify-content: center !important; }
#login form {
  background: #07070f !important;
  border: none !important;
  padding: 3.5rem 3rem !important;
  max-width: 420px !important;
  width: 100% !important;
}
#login h1 {
  color: #e2e8f0 !important;
  text-align: center !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
  margin-bottom: 2rem !important;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace !important;
  text-transform: uppercase !important;
}
#login input {
  background: #0c0c1a !important;
  border: 1px solid rgba(100, 200, 255, 0.08) !important;
  border-radius: 8px !important;
  color: #e2e8f0 !important;
  font-size: 1rem !important;
  padding: 0.9em 1.2em !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 0.8rem !important;
  transition: all 0.2s ease !important;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace !important;
}
#login input:focus {
  border-color: #64c8ff !important;
  box-shadow: 0 0 0 2px rgba(100, 200, 255, 0.08), 0 0 20px rgba(100, 200, 255, 0.04) !important;
  outline: none !important;
}
#login input[type="submit"], #login button {
  background: rgba(100, 200, 255, 0.06) !important;
  border: 1px solid rgba(100, 200, 255, 0.15) !important;
  border-radius: 60px !important;
  color: #e2e8f0 !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  padding: 0.9em 1.5em !important;
  width: 100% !important;
  cursor: pointer !important;
  margin-top: 0.5rem !important;
  transition: all 0.25s ease !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  text-transform: uppercase !important;
}
#login input[type="submit"]:hover, #login button:hover {
  background: rgba(100, 200, 255, 0.10) !important;
  border-color: rgba(100, 200, 255, 0.30) !important;
  box-shadow: 0 4px 24px rgba(100, 200, 255, 0.08) !important;
  transform: translateY(-1px) !important;
}
#login input[type="submit"]:active, #login button:active {
  transform: translateY(0) !important;
}
#login p { color: #f87171 !important; text-align: center !important; font-size: 0.9rem !important; margin-bottom: 1rem !important; }

/* Footer */
footer, .footer { color: #64748b !important; border-top-color: rgba(100, 200, 255, 0.04) !important; }
.credits { margin: 1.5em 1em !important; color: #64748b !important; }

/* Progress */
.progress-bar { background: linear-gradient(90deg, #64c8ff, #a78bfa) !important; }

/* Scrollbar — global */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #07070f; }
::-webkit-scrollbar-thumb { background: rgba(100, 200, 255, 0.06); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100, 200, 255, 0.12); }