/* 
 * CSS Imports Manager
 * 統一管理所有 CSS 檔案的引入
 * 
 * 使用方式：
 * 在 HTML head 中加入：
 * <link rel="stylesheet" href="/css/imports.css">
 * 
 * 或在主要的 CSS 檔案中引入：
 * @import url('/css/imports.css');
 */

/* Core Application Styles */
@import url('./application.css');

/* Page Specific Styles */
@import url('./home.css');

/* Component Specific Styles */
@import url('./header.css');
@import url('./brands.css');
@import url('./articles.css');
@import url('./users.css');
@import url('./styles.css');
@import url('./forms.css');
@import url('./admin.css');

/* Photos styles loaded last to override other styles */
@import url('./photos.css');

/* Additional utility classes and overrides can be added below */

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* Margin utilities */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }

.m-1 { margin: 8px !important; }
.mt-1 { margin-top: 8px !important; }
.mb-1 { margin-bottom: 8px !important; }
.ml-1 { margin-left: 8px !important; }
.mr-1 { margin-right: 8px !important; }

.m-2 { margin: 16px !important; }
.mt-2 { margin-top: 16px !important; }
.mb-2 { margin-bottom: 16px !important; }
.ml-2 { margin-left: 16px !important; }
.mr-2 { margin-right: 16px !important; }

.m-3 { margin: 24px !important; }
.mt-3 { margin-top: 24px !important; }
.mb-3 { margin-bottom: 24px !important; }
.ml-3 { margin-left: 24px !important; }
.mr-3 { margin-right: 24px !important; }

.m-4 { margin: 32px !important; }
.mt-4 { margin-top: 32px !important; }
.mb-4 { margin-bottom: 32px !important; }
.ml-4 { margin-left: 32px !important; }
.mr-4 { margin-right: 32px !important; }

.m-5 { margin: 40px !important; }
.mt-5 { margin-top: 40px !important; }
.mb-5 { margin-bottom: 40px !important; }
.ml-5 { margin-left: 40px !important; }
.mr-5 { margin-right: 40px !important; }

/* Padding utilities */
.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }

.p-1 { padding: 8px !important; }
.pt-1 { padding-top: 8px !important; }
.pb-1 { padding-bottom: 8px !important; }
.pl-1 { padding-left: 8px !important; }
.pr-1 { padding-right: 8px !important; }

.p-2 { padding: 16px !important; }
.pt-2 { padding-top: 16px !important; }
.pb-2 { padding-bottom: 16px !important; }
.pl-2 { padding-left: 16px !important; }
.pr-2 { padding-right: 16px !important; }

.p-3 { padding: 24px !important; }
.pt-3 { padding-top: 24px !important; }
.pb-3 { padding-bottom: 24px !important; }
.pl-3 { padding-left: 24px !important; }
.pr-3 { padding-right: 24px !important; }

.p-4 { padding: 32px !important; }
.pt-4 { padding-top: 32px !important; }
.pb-4 { padding-bottom: 32px !important; }
.pl-4 { padding-left: 32px !important; }
.pr-4 { padding-right: 32px !important; }

.p-5 { padding: 40px !important; }
.pt-5 { padding-top: 40px !important; }
.pb-5 { padding-bottom: 40px !important; }
.pl-5 { padding-left: 40px !important; }
.pr-5 { padding-right: 40px !important; }

/* Text utilities */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.font-weight-light { font-weight: 300 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-bold { font-weight: 700 !important; }

/* Color utilities */
.text-primary { color: #8336D6 !important; }
.text-secondary { color: #6c757d !important; }
.text-success { color: #28a745 !important; }
.text-danger { color: #dc3545 !important; }
.text-warning { color: #ffc107 !important; }
.text-info { color: #17a2b8 !important; }
.text-light { color: #f8f9fa !important; }
.text-dark { color: #343a40 !important; }
.text-muted { color: #6c757d !important; }
.text-white { color: #ffffff !important; }

/* Background utilities */
.bg-primary { background-color: #8336D6 !important; }
.bg-secondary { background-color: #6c757d !important; }
.bg-success { background-color: #28a745 !important; }
.bg-danger { background-color: #dc3545 !important; }
.bg-warning { background-color: #ffc107 !important; }
.bg-info { background-color: #17a2b8 !important; }
.bg-light { background-color: #f8f9fa !important; }
.bg-dark { background-color: #343a40 !important; }
.bg-white { background-color: #ffffff !important; }
.bg-transparent { background-color: transparent !important; }

/* Border utilities */
.border { border: 1px solid #dee2e6 !important; }
.border-top { border-top: 1px solid #dee2e6 !important; }
.border-right { border-right: 1px solid #dee2e6 !important; }
.border-bottom { border-bottom: 1px solid #dee2e6 !important; }
.border-left { border-left: 1px solid #dee2e6 !important; }

.border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; }

.rounded { border-radius: 6px !important; }
.rounded-top { border-top-left-radius: 6px !important; border-top-right-radius: 6px !important; }
.rounded-right { border-top-right-radius: 6px !important; border-bottom-right-radius: 6px !important; }
.rounded-bottom { border-bottom-right-radius: 6px !important; border-bottom-left-radius: 6px !important; }
.rounded-left { border-top-left-radius: 6px !important; border-bottom-left-radius: 6px !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-0 { border-radius: 0 !important; }

/* Shadow utilities */
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
.shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
.shadow-none { box-shadow: none !important; }

/* Position utilities */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

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

/* Width utilities */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

/* Height utilities */
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* ==========================================================================
   Animation Utilities
   ========================================================================== */

.animate-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); }
    40%, 43% { transform: translate3d(0, -30px, 0); }
    70% { transform: translate3d(0, -15px, 0); }
    90% { transform: translate3d(0, -4px, 0); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-slide-up {
    animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   Component Override Classes
   ========================================================================== */

/* Override specific brand page styles if needed */
.brand-page-override {
    /* Custom overrides for brand pages */
    position: relative;
}

/* Override specific photo page styles if needed */
.photo-page-override {
    /* Custom overrides for photo pages */
    position: relative;
}

/* Override specific article page styles if needed */
.article-page-override {
    /* Custom overrides for article pages */
    position: relative;
}