/* Ableton-style font: Use 'Fira Sans', 'Inter', or 'Montserrat' as a close match */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&display=swap');

:root {
  --color-bg: #fff;
  --color-bg-alt: #f8f9fa;
  --color-text: #181a1b;
  --color-text-muted: #6c757d;
  --color-border: #ccc;
  --color-primary: #1a73e8;
  --color-success: #388e3c;
  --color-alert-bg: #fff3cd;
  --color-alert-text: #856404;
  --color-placeholder: #bdbdbd;
}
body.dark-mode {
  --color-bg: #181a1b;
  --color-bg-alt: #23272a;
  --color-text: #e0e0e0;
  --color-text-muted: #bdbdbd;
  --color-border: #444;
  --color-primary: #1a73e8;
  --color-success: #388e3c;
  --color-alert-bg: #222;
  --color-alert-text: #ffe082;
  --color-placeholder: #bdbdbd;
}

body, .navbar-brand, .form-label, .form-control, .btn, .badge {
  font-family: 'Fira Sans', 'Inter', 'Montserrat', Arial, sans-serif;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.05em;
}

.btn-primary, .btn-outline-primary {
  border-radius: 2em;
  font-weight: 600;
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn-outline-dark {
  border-radius: 2em;
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-color: var(--color-border);
}

.badge.bg-success {
  font-size: 1em;
  padding: 0.5em 1em;
  border-radius: 1em;
  background: var(--color-success) !important;
  color: #fff;
}

/* Subtle card effect for form */
.container {
  background: var(--color-bg-alt);
  border-radius: 1.2em;
  box-shadow: 0 2px 16px #0001;
  padding: 2em 2.5em;
  margin-top: 2em;
  max-width: 600px;
  color: var(--color-text);
}

/* Dark mode styles */
body.dark-mode {
  background: var(--color-bg);
  color: var(--color-text);
}
body.dark-mode .container {
  background: var(--color-bg-alt);
  color: var(--color-text);
  box-shadow: 0 2px 16px #0006;
}
body.dark-mode .navbar {
  background: var(--color-bg-alt) !important;
  color: var(--color-text);
}
body.dark-mode .navbar .navbar-brand {
  color: var(--color-text);
}
body.dark-mode .form-control {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}
body.dark-mode .form-label {
  color: var(--color-text);
}
body.dark-mode .btn-primary, body.dark-mode .btn-outline-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
body.dark-mode .btn-outline-dark {
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-color: var(--color-border);
}
body.dark-mode .badge.bg-success {
  background: var(--color-success) !important;
  color: #fff;
}
body.dark-mode .alert {
  background: var(--color-alert-bg);
  color: var(--color-alert-text);
  border-color: var(--color-border);
}
body.dark-mode .form-text {
  color: var(--color-placeholder);
}
body.dark-mode .navbar, body.dark-mode .navbar * {
  color: var(--color-text) !important;
}
body.dark-mode .btn-outline-secondary, body.dark-mode .btn-outline-info, body.dark-mode .btn-outline-success {
  color: #fff;
  border-color: #bbb;
}
body.dark-mode .form-control::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}
body.dark-mode .text-muted {
  color: var(--color-text-muted) !important;
}
body.dark-mode input[type="file"].form-control,
body.dark-mode select.form-select {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}
body.dark-mode select.form-select option {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

/* Misc polish */
#darkModeToggle {
  min-width: 100px;
}

::-webkit-scrollbar {
  width: 8px;
  background: #eee;
}
body.dark-mode ::-webkit-scrollbar {
  background: #23272a;
}
body.dark-mode ::-webkit-scrollbar-thumb {
  background: #444;
}

.navbar .container-fluid > div:first-child,
#navbar-toolbar {
  flex: 1 1 0;
}

.navbar .navbar-brand {
  flex: 0 1 auto;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}

#darkModeToggle.position-fixed {
  box-shadow: 0 2px 8px #0002;
  border-radius: 2em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  opacity: 0.95;
}
#darkModeToggle.position-fixed:hover {
  opacity: 1;
}

/*
 * FirebaseUI Dark Mode Overrides (restored and refined)
 * Ensures all FirebaseUI elements are styled for dark mode, including input fields, buttons, and placeholders.
 * Place after general dark mode rules for maximum specificity.
 */
/* FirebaseUI dark mode: force input text visibility (ultra-specific) */
body.dark-mode .firebaseui-container,
body.dark-mode .firebaseui-card-content,
body.dark-mode .firebaseui-input,
body.dark-mode input.firebaseui-input,
body.dark-mode input[type="email"].firebaseui-input,
body.dark-mode input[type="password"].firebaseui-input,
body.dark-mode input[type="tel"].firebaseui-input {
  background: #23272b !important;
}

body.dark-mode #firebaseui-auth-container > div > div {
  background: #23272b !important;
  color: #fff !important;
}

.firebaseui-info-bar-message {
  color: #23272b !important;
}

body.dark-mode .firebaseui-idp-google,
body.dark-mode .firebaseui-idp-google[style] {
  background-color: #15395d !important;
  color: #fff !important;
  border: 1px solid #444 !important;
}
body.dark-mode .firebaseui-idp-google .firebaseui-idp-text {
  color: #fff !important;
}
body.dark-mode .firebaseui-idp-google .firebaseui-idp-icon {
  filter: brightness(0.9) contrast(1.2);
}

/* --- NAVBAR PROFESSIONAL RESPONSIVE LAYOUT --- */

/* Desktop: Center logo, right-align toolbar, 50px gap */
@media (min-width: 1100px) {
  .navbar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-left: 2em;
    padding-right: 2em;
    min-height: 64px;
  }
  .navbar .navbar-brand {
    flex: 0 1 auto;
    margin-left: 50px;
    margin-right: 50px;
    text-align: center;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.7rem;
    letter-spacing: 0.05em;
  }
  #navbar-toolbar {
    flex: 1 1 0;
    justify-content: flex-end !important;
    text-align: right;
    display: flex;
    gap: 0.3em;
    min-width: 50px;
    align-items: center;
  }
  #navbar-toolbar > * {
    white-space: nowrap;
    font-size: 1rem;
  }
}

/* Tablet/Mobile: Stack, center everything, adjust spacing */
@media (max-width: 1099px) {
  .navbar .container-fluid {
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    min-height: 56px;
  }
  .navbar .navbar-brand {
    order: 1;
    margin-bottom: 0.5em;
    font-size: 1.2rem;
    max-width: 80vw;
    white-space: nowrap;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #navbar-toolbar {
    order: 2;
    width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
    gap: 0.3em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  #navbar-toolbar > * {
    font-size: 0.98em;
    margin: 0 0.2em 0.2em 0.2em;
    white-space: nowrap;
  }
}

/* Prevent horizontal scroll on mobile */
html, body {
  overflow-x: hidden;
}

/* Ensure dark mode toggle is always visible and not overlapping content */
#darkModeToggle.position-fixed {
  z-index: 2000;
  right: 2rem;
  bottom: 2rem;
}

/* Button polish for accessibility */
.btn:focus, .btn:active {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px;
}

/* Badge and toolbar item spacing */
#navbar-toolbar .badge,
#navbar-toolbar .btn {
  margin-bottom: 0 !important;
}

/* Logo font polish */
.navbar-brand {
  font-family: 'Fira Sans', 'Inter', 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Hide overflowed logo text with ellipsis */
.navbar .navbar-brand {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100vw;
}

/* --- PAGEWIDE RESPONSIVE POLISH & UNIFORM SPACING --- */

/* Container: reduce padding on small screens for more usable space */
@media (max-width: 600px) {
  .container {
    padding: 1em 0.5em;
    margin-top: 1em;
    max-width: 100vw;
  }
}

/* --- SMART, UNIFORM FORM SPACING --- */

/* Related elements: small spacing */
form .form-label,
form .form-control,
form .form-select,
form .form-text {
  margin-bottom: 0.4em !important;
}

/* Unrelated groups: larger spacing (max 1em) */
form .mb-3,
form .form-group,
form .alert,
form .btn-primary {
  margin-bottom: 1em !important;
}

/* Remove bottom margin from last form group/button to avoid extra space at the end */
form .mb-3:last-child,
form .form-group:last-child,
form .btn-primary:last-child {
  margin-bottom: 0 !important;
}

/* Adjust help text to sit closer to its input */
form .form-text {
  margin-top: -0.2em !important;
}

/* On mobile, keep main action button full width and spacing consistent */
@media (max-width: 600px) {
  form .btn-primary {
    width: 100%;
    display: block;
  }
  .container {
    padding: 1em 0.5em;
    margin-top: 1em;
    max-width: 100vw;
  }
}

/* File input and select: consistent look */
input[type="file"].form-control, select.form-select {
  padding: 0.5em 1em;
  font-size: 1em;
  border-radius: 0.5em;
}

/* Advanced options toggle: clear and tappable */
#toggleAdvanced {
  font-size: 1em;
  padding: 0.4em 0.8em;
  margin-bottom: 1em;
  text-decoration: underline;
  cursor: pointer;
}

/* Alerts: uniform margin */
.alert {
  margin-bottom: 1.2em !important;
}

/* Badge and toolbar item spacing (already present, but reinforce) */
#navbar-toolbar .badge,
#navbar-toolbar .btn {
  margin-bottom: 0 !important;
  margin-right: 0.4em;
}
#navbar-toolbar .btn:last-child {
  margin-right: 0 !important;
}

/* Ensure no horizontal scroll on mobile */
html, body {
  overflow-x: hidden;
}

/* TODO: Add /static/og-image.png (1200x630px) for Open Graph and Twitter Card previews. Should include the text 'Downgrade Ableton .als Files' and 'downgradABLE.com' in a visually appealing style. */

/*
TODO: Place the following files in /static for SEO:
- robots.txt (allow all):
  User-agent: *
  Disallow:
  Sitemap: https://downgradable.com/static/sitemap.xml
- sitemap.xml (basic):
  <?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
      <loc>https://downgradable.com/</loc>
      <priority>1.0</priority>
    </url>
  </urlset>
*/

#social-share {
  position: fixed;
  left: 2rem;
  bottom: 2rem;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--color-bg-alt);
  border-radius: 1em;
  box-shadow: 0 2px 16px #0002;
  padding: 0.75em;
  gap: 0.25em;
}
body.dark-mode #social-share {
  background: var(--color-bg-alt);
  box-shadow: 0 2px 16px #0004;
}
#social-share .btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25em;
  border-radius: 50%;
  padding: 0;
  border: none !important;
  box-shadow: none;
}
#social-share .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.icon-vertical-middle {
  vertical-align: middle;
}

.position-fixed-bottom-right {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 1050;
}

.custom-file-input-group {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.custom-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.custom-file-label {
  cursor: pointer;
  margin-bottom: 0;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.custom-file-filename {
  font-size: 0.98em;
  color: var(--color-text-muted);
  min-width: 120px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
body.dark-mode .custom-file-filename {
  color: var(--color-placeholder);
}
body.dark-mode .custom-file-label {
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-color: var(--color-border);
}

.custom-file-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: 0.75em;
  background: var(--color-bg-alt);
  padding: 1em 1em 0.5em 1em;
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
  position: relative;
  margin-bottom: 0.5em;
}
.custom-file-dropzone.dragover {
  border-color: var(--color-primary);
  background: rgba(26, 115, 232, 0.08);
}
body.dark-mode .custom-file-dropzone {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
}
body.dark-mode .custom-file-dropzone.dragover {
  background: rgba(26, 115, 232, 0.13);
  border-color: var(--color-primary);
}
.custom-file-drop-message {
  font-size: 0.97em;
  color: var(--color-text-muted);
  margin-top: 0.5em;
  margin-bottom: 0.2em;
  text-align: left;
}
body.dark-mode .custom-file-drop-message {
  color: var(--color-placeholder);
}

@media (max-width: 900px) {
  #social-share {
    position: static;
    left: auto;
    bottom: auto;
    top: auto;
    right: auto;
    transform: none;
    z-index: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 2em;
    padding: 0.5em 1em;
    gap: 0.5em;
    box-shadow: 0 2px 16px #0002;
    margin-top: 2em;
  }
  #social-share .btn {
    margin-bottom: 0;
  }
  #darkModeToggle.position-fixed-bottom-right, #darkModeToggle.position-fixed {
    position: static !important;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 2em auto 0 auto;
    display: block;
    width: fit-content;
  }
}