/* =================================================================
   MAIN CSS - Trip Memo Application
   Entry point for all styles
   ================================================================= */

/* Import order is important:
   1. Variables (CSS custom properties)
   2. Animations (keyframes and animation classes)
   3. Components (reusable UI components)
   4. Layout (page structure and layouts)
   5. Utilities (helper classes)
*/

@import url('./variables.css');
@import url('./animations.css');
@import url('./components.css');
@import url('./layout.css');
@import url('./utilities.css');

/* =================================================================
   LEGACY COMPATIBILITY
   Deprecated classes - use for backward compatibility only
   TODO: Remove these after updating templates
   ================================================================= */

/* Legacy button class - use .btn-primary-custom instead */
.btn-auth-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border: none;
    transition: all var(--transition-normal);
    color: white;
}

.btn-auth-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(1, 123, 254, 0.3);
    color: white;
}

/* Legacy wrapper classes - use .page-wrapper instead */
.index-wrapper {
    min-height: calc(100vh - 68px);
    position: relative;
}

.index-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 0;
}

.index-wrapper .container {
    position: relative;
    z-index: 1;
}

/* Legacy card header - use .card-header-primary instead */
.card-header-custom {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    font-weight: 600;
    padding: 0.75rem 1rem;
}

/* =================================================================
   MIGRATION NOTES
   ================================================================= */
/*
MIGRATION GUIDE:

Old Class Name → New Class Name
================================
.btn-auth-primary → .btn-primary-custom
.index-wrapper → .page-wrapper or .dashboard-wrapper
.card-header-custom → .card-header-primary
--auth-primary → --primary-color
--auth-primary-dark → --primary-dark
--auth-bg-light → --primary-light

Pages to update:
- Update all templates to use new class names
- Replace old CSS variable names
- Use new layout wrapper classes
- Migrate to component-based classes
*/
