/* ==========================================================================
   Main CSS - Import Manager - PRODUCTION READY
   Imports all CSS files in the correct order
   ========================================================================== */

/* ==========================================================================
   1. CSS Reset & Base Styles
   ========================================================================== */
@import 'base/reset.css';
@import 'base/variables.css';
@import 'base/typography.css';
@import 'base/layout.css';


/* ==========================================================================
   2. Layout Styles
   ========================================================================== */
@import 'layouts/grid.css';
/* REMOVED: layouts/header.css - Not used by base.html */
@import 'layouts/footer.css';

/* ==========================================================================
   3. Component Styles
   ========================================================================== */
@import 'components/buttons.css';
@import 'components/forms.css';
@import 'components/cards.css';
@import 'components/navigation.css';
@import 'components/badges.css';

/* ==========================================================================
   4. Modern Components (NEW - Contains all modern-* classes)
   ========================================================================== */
@import 'components/modern-components.css';

/* ==========================================================================
   5. Responsive Utilities (Optional - contains additional responsive styles)
   ========================================================================== */
/* @import 'base/responsive.css'; */ /* Commented out - has duplicates */

/* ==========================================================================
   6. Page-specific Styles (will be loaded separately per page)
   ========================================================================== */
/* Note: Page-specific styles should be loaded individually in templates */
/* Example: <link rel="stylesheet" href="{% static 'css/pages/home.css' %}"> */

/* ==========================================================================
   7. Global Utility Classes
   ========================================================================== */

/* Display Utilities */
.hidden { display: none !important; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }

/* Visibility */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* Position */
.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

/* Width & Height */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }

/* Border Radius */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Background Colors */
.bg-transparent { background-color: transparent; }
.bg-white { background-color: white; }
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }

/* Text Colors - FIXED: Added input protection */
.text-white { color: white; }
.text-black { color: black; }

/* REMOVED: .text-transparent utility to prevent accidental invisible text */
/* If you need transparent text effects, use specific classes like .gradient-text */

/* ===== CRITICAL: Form Input Text Protection ===== */
/* Prevents ANY utility class from making form text invisible */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.form-input,
.form-textarea,
.form-select,
.form-control {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
}

/* Newsletter input on dark background */
.newsletter-input,
.newsletter-input.form-control {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Ensure placeholders are always visible */
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  opacity: 0.6 !important;
  -webkit-text-fill-color: currentColor !important;
}

/* If you NEED transparent text for specific design elements, use this class */
.text-gradient-effect:not(input):not(textarea):not(select):not(.form-control):not(.form-input) {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* CRITICAL: Also protect legacy .text-gradient class */
.text-gradient:not(input):not(textarea):not(select):not(.form-control):not(.form-input) {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Ensure inputs NEVER inherit gradient text */
.text-gradient input,
.text-gradient textarea,
.text-gradient select,
.text-gradient .form-control,
.text-gradient .form-input {
  color: var(--secondary-900, #1e293b) !important;
  -webkit-text-fill-color: var(--secondary-900, #1e293b) !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
}

/* ═══════════════════════════════════════════════════════
   CRITICAL: Global Input Protection
   Prevents gradient text from affecting input fields
   ═══════════════════════════════════════════════════════ */
input,
textarea,
select,
.form-control,
.form-control-modern,
.form-input {
    color: var(--secondary-900, #1e293b) !important;
    -webkit-text-fill-color: var(--secondary-900, #1e293b) !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--secondary-400, #94a3b8) !important;
    -webkit-text-fill-color: var(--secondary-400, #94a3b8) !important;
}

/* Protect against accidental application to forms */
.text-gradient-effect input,
.text-gradient-effect textarea,
.text-gradient-effect select {
  -webkit-text-fill-color: currentColor !important;
  background-clip: padding-box !important;
  color: var(--text-primary) !important;
}

/* Cursor */
.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }

/* User Select */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

/* Pointer Events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus Ring */
.focus-ring:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* Transitions - FIXED: Using correct variable names */
.transition-none { transition: none; }
.transition-all { transition: all var(--transition-normal); }
.transition-colors { transition: color var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal); }
.transition-transform { transition: transform var(--transition-normal); }

/* Transform */
.transform { transform: translateZ(0); }
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }

/* Responsive Utilities */
@media (max-width: 640px) {
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:flex { display: flex; }
  .sm\:grid { display: grid; }
}

@media (max-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
  .md\:grid { display: grid; }
}

@media (max-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:grid { display: grid; }
}

/* ==========================================================================
   8. Print Styles
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  
  .no-print {
    display: none !important;
  }
  
  .page-break {
    page-break-before: always;
  }
}