/**
 * Fujifilm AI Custom Theme Overrides
 *
 * Primary brand green: #119B82 (Fujifilm Green)
 *
 * This file is loaded dynamically via custom-loader.js
 * Mount to: /app/client/dist/custom.css
 */

:root {
  /* Fujifilm green palette based on #119B82 */
  --green-50:  #e8f7f4;
  --green-100: #bde9de;
  --green-200: #88d6c5;
  --green-300: #52c3ab;
  --green-400: #2aaf96;
  --green-500: #119B82;  /* Primary brand color */
  --green-600: #0e8570;  /* Hover / active states */
  --green-700: #0b6e5c;  /* Used for buttons */
  --green-800: #085848;  /* Used for hover states */
  --green-900: #054135;
  --green-950: #022b22;

  /* Override semantic surface colors */
  --surface-submit: var(--green-500);
  --surface-submit-hover: var(--green-600);
}

/* Dark mode overrides */
html.dark {
  --surface-submit: var(--green-500);
  --surface-submit-hover: var(--green-600);
}

/* Ensure links and accents use the brand green */
.text-green-600 {
  color: #119B82 !important;
}

.text-green-700 {
  color: #0e8570 !important;
}

.hover\:text-green-700:hover {
  color: #0e8570 !important;
}

.focus\:text-green-700:focus {
  color: #0e8570 !important;
}

.dark .text-green-500 {
  color: #119B82 !important;
}

.dark .hover\:text-green-400:hover {
  color: #2aaf96 !important;
}

.dark .focus\:text-green-400:focus {
  color: #2aaf96 !important;
}

.bg-green-600 {
  background-color: #119B82 !important;
}

.bg-green-700 {
  background-color: #0e8570 !important;
}

.hover\:bg-green-600:hover {
  background-color: #119B82 !important;
}

.hover\:bg-green-700:hover {
  background-color: #0e8570 !important;
}

/* Focus rings */
.focus\:ring-green-500:focus {
  --tw-ring-color: #119B82 !important;
}

.ring-green-500 {
  --tw-ring-color: #119B82 !important;
}

/* Border colors */
.border-green-500 {
  border-color: #119B82 !important;
}

.border-green-600 {
  border-color: #0e8570 !important;
}

/* Focus-visible outline on auth inputs */
.focus\:border-green-500:focus {
  border-color: #119B82 !important;
}

/* ===========================================
   Login/Auth Page Customizations
   =========================================== */

/* Hide the dark mode toggle button on login screen (bottom-left corner) */
button[aria-label="Toggle theme"] {
  display: none !important;
}

/* Hide the "Or" social-login divider when no social providers are shown.
   Targets the unique mt-6 + border-t + uppercase combination used only by this element. */
.mt-6.border-t.uppercase {
  display: none !important;
}

/* ===========================================
   Login Page Logo Positioning Fix
   =========================================== */

/*
 * The login page uses a flex-column layout where the logo is at the very top
 * and the form is centered in the remaining space, creating a large gap.
 *
 * This fix repositions the logo to appear closer to the form.
 */

/* Logo container on login/register pages - reposition closer to form */
.min-h-screen.flex-col > .mt-6.h-10.w-full.bg-cover {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -250px) !important;
  width: auto !important;
  max-width: 240px !important;
  height: auto !important;
  margin-top: 0 !important;
}

/* Make the logo itself properly sized */
.min-h-screen.flex-col > .mt-6.h-10.w-full.bg-cover img {
  height: 48px !important;
  width: auto !important;
}

/* ===========================================
   TTS Download Bar
   Floating pill that appears when TTS audio plays.
   Injected via customizations/index.html script.
   =========================================== */

#tts-download-bar {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--surface-tertiary, #2a2a2a);
  border: 1px solid var(--border-light, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  padding: 6px 12px;
  /* Above LibreChat modals / side panels */
  z-index: 2147483646;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Avoid class name "visible" — Tailwind also defines .visible (visibility only, no opacity). */
#tts-download-bar.tts-download-bar-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#tts-download-bar a {
  color: var(--text-primary, #e5e5e5);
  text-decoration: none;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

#tts-download-bar a:hover {
  color: var(--green-400, #2aaf96);
}

/* Light mode adjustment */
html:not(.dark) #tts-download-bar {
  background: var(--surface-secondary, #f4f4f4);
  border-color: var(--border-light, rgba(0, 0, 0, 0.1));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

html:not(.dark) #tts-download-bar a {
  color: var(--text-primary, #111);
}