/**
 * BUDE Logo Generator - Main Stylesheet
 * 
 * This stylesheet provides all styling for the BUDE Global Logo Generator.
 * Organized into logical sections for easy maintenance.
 * 
 * @author BUDE Global Enterprise
 * @version 1.0.0
 * @license MIT
 * 
 * Table of Contents:
 * 1. Base Styles
 * 2. Layout Components
 * 3. Form Elements
 * 4. Buttons
 * 5. Dropdown
 * 6. SVG & Canvas
 * 7. Typography
 * 8. Dark Theme
 */

/* =============================================================================
   1. BASE STYLES
   ============================================================================= */

body {
  font-family: "Inter", sans-serif !important;
}

.bg-light-white {
  background-color: #f3f3f3;
}

/* =============================================================================
   2. LAYOUT COMPONENTS
   ============================================================================= */

.lg-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-bottom: 6rem;
}

/* =============================================================================
   3. FORM ELEMENTS
   ============================================================================= */

.lg-input {
  font-size: 1.5rem;
  border-radius: 0.45rem !important;
  width: 30rem !important;
}

/* =============================================================================
   4. BUTTONS
   ============================================================================= */

.btn {
  width: fit-content !important;
}

.btn-primary {
  color: white !important;
  background-color: #4169E1 !important;
  border-color: #4169E1 !important;
}

.btn-primary:hover {
  background-color: #3457D5 !important;
}

/* =============================================================================
   5. DROPDOWN
   ============================================================================= */

.dropdown-menu {
  margin-top: 0;
  transform: translateX(65%);
  min-width: 100%;
}

.dropdown-item {
  cursor: pointer;
  border-bottom: 1px solid #e9ecef !important;
}

.dropdown-item:focus {
  background-color: #f8f9fae3 !important;
}

.dropdown-item:active {
  background-color: #f8f9fa !important;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
}

/* =============================================================================
   6. SVG & CANVAS
   ============================================================================= */

#svgLogo {
  width: 60%;
  height: auto;
}

#canvas,
#image {
  width: 0;
  height: auto;
}

svg {
  transition: 0.5s;
}

/* =============================================================================
   7. TYPOGRAPHY & HELPERS
   ============================================================================= */

.text-sm {
  font-size: small;
}

.preview-text {
  color: #6c757d;
  transition: 0.5s;
}

.social-icon {
  color: #1a1a1a;
  text-decoration: none !important;
}

.text-blue {
  color: #1a1a1a;
}

/* =============================================================================
   8. DARK THEME
   Theme-specific overrides for dark mode display.
   Applied when body has 'dark-theme' class.
   ============================================================================= */

body.dark-theme {
  background-color: #1a1a1a;
  color: #f3f3f3;
}

body.dark-theme .card {
  background-color: #2c2c2c;
  border-color: #444;
}

body.dark-theme .text-blue {
  color: #f3f3f3;
}

body.dark-theme .btn-primary {
  background-color: #3457D5 !important;
  border-color: #3457D5 !important;
}

body.dark-theme .dropdown-menu {
  background-color: #2c2c2c;
}

body.dark-theme .dropdown-item {
  color: #f3f3f3;
  border-bottom-color: #444 !important;
}

body.dark-theme .dropdown-item:hover,
body.dark-theme .dropdown-item:focus,
body.dark-theme .dropdown-item:active {
  background-color: #3a3a3a !important;
}