/* ========================================
   CUSTOM BOOTSTRAP PHP SITE STYLESHEET
   ========================================
   
   TABLE OF CONTENTS:
   1. CSS Custom Properties (Variables)
   2. Global Base Styles
   3. Header Styles
   4. Navigation Styles (Public Site)
   5. Main Content Styles
   6. Card Components
   7. Button Components
   8. Footer Styles
   9. Admin Panel Styles
      9.1 Admin Header
      9.2 Admin Navigation
      9.3 Admin Navigation Dropdowns (NEW)
      9.4 Admin Cards & Statistics
   10. Autocomplete Search Components
   11. Utility Classes
   12. Responsive Design
   
======================================== */

/* ========================================
   1. CSS CUSTOM PROPERTIES (VARIABLES)
   Used throughout the site for consistent theming
======================================== */
:root {
    --primary-color: #d2232a;
    --primary-dark: #b01e24;
    --secondary-color: #3b82f6;
    --secondary-dark: #60a5fa;
    --accent-color: #2563eb;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #f59e0b;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --bg-main: #ffffff;
    --bg-secondary: #eff6ff;
    --text-primary: #374151;
    --text-secondary: #6b7280;
}

/* ========================================
   2. GLOBAL BASE STYLES
   Applied to the entire site
======================================== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: var(--bg-main);
    color: var(--text-primary);
}

/* ========================================
   3. HEADER STYLES
   Used for public site header sections
======================================== */
.custom-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 1.5rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.custom-header h1 {
    font-weight: 700;
    font-size: 2.5rem;
}

.custom-header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* ========================================
   4. NAVIGATION STYLES (PUBLIC SITE)
   Used for main public site navigation
======================================== */
.custom-nav {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0.75rem 0;
    background-color: var(--bg-secondary) !important;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary-color) !important;
}

.nav-link {
    font-weight: 500;
    color: var(--text-primary) !important;
}

.nav-link:hover {
    color: var(--secondary-color) !important;
}

.nav-link.active {
    color: var(--primary-color) !important;
    font-weight: 600;
}

/* ========================================
   5. MAIN CONTENT STYLES
   Used for primary content areas
======================================== */
.main-content {
    min-height: 60vh;
    padding: 3rem 0;
    background-color: var(--bg-main);
}

.display-4 {
    font-weight: 700;
    color: var(--text-primary);
}

.lead {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

/* ========================================
   6. CARD COMPONENTS
   Reusable card styles throughout the site
======================================== */
.card {
    border: 2px solid var(--secondary-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
    border-color: var(--primary-color);
}

.card-title {
    color: var(--primary-color);
    font-weight: 600;
}

/* ========================================
   7. BUTTON COMPONENTS
   Custom button styles for consistent UI
======================================== */
.btn {
    font-weight: 500;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border: none;
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    transform: translateY(-2px);
    color: white;
}

.btn-outline-secondary {
    border-color: var(--secondary-color) !important;
    color: var(--secondary-color) !important;
    background: transparent !important;
}

.btn-outline-secondary:hover {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: white !important;
}

/* Verbesserte Lesbarkeit für outline buttons auf farbigen Card-Headern */
.card-header .btn-outline-light,
.card-header .btn-light {
    background-color: white;
    border-width: 2px;
    border-color: var(--dark-color);
    color: var(--dark-color);
    font-weight: 500;
}

.card-header .btn-outline-light:hover,
.card-header .btn-light:hover {
    background-color: var(--dark-color);
    border-color: var(--dark-color);
    color: white;
}

.card-header .btn-outline-success,
.card-header .btn-outline-warning {
    background-color: white;
    border-width: 2px;
    font-weight: 500;
}

.card-header .btn-outline-success {
    color: var(--success-color);
    border-color: var(--success-color);
}

.card-header .btn-outline-warning {
    color: var(--warning-color);
    border-color: var(--warning-color);
}

.card-header .btn-outline-success:hover {
    background-color: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.card-header .btn-outline-warning:hover {
    background-color: var(--warning-color);
    color: white;
    border-color: var(--warning-color);
}

/* Wishlist Button - eigene Klasse */
.btn-wishlist {
    background-color: white;
    border-width: 2px;
    border-color: var(--dark-color);
    color: var(--dark-color);
    font-weight: 500;
}

.btn-wishlist:hover {
    background-color: var(--dark-color);
    border-color: var(--dark-color);
    color: white;
}

/* Gleiche Breite für Buttons in der Card-Header Button-Gruppe */
.card-header .btn-group .btn {
    flex: 1;
    min-width: 140px;
}

/* ========================================
   8. FOOTER STYLES
   Used for site footer sections
======================================== */
.custom-footer {
    background-color: var(--bg-secondary);
    border-top: 3px solid var(--secondary-color);
    margin-top: 3rem;
}

.custom-footer h5,
.custom-footer h6 {
    color: var(--primary-color);
    font-weight: 600;
}

.custom-footer a {
    color: var(--secondary-color);
    transition: color 0.3s ease;
}

.custom-footer a:hover {
    color: var(--primary-color);
}

/* ========================================
   9. ADMIN PANEL STYLES
   Dedicated styles for the admin control panel
======================================== */

/* 9.1 Admin Header */
.admin-header {
    background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%);
    color: white;
    padding: 1.5rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 9.2 Admin Navigation Base */
.admin-nav {
    background-color: #212529 !important;
}

.admin-nav .navbar-nav .nav-link {
    color: #fff !important;
    font-weight: 500;
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 4px;
    margin: 0 2px;
    padding: 8px 12px !important;
}

.admin-nav .navbar-nav .nav-link:hover {
    color: #dc3545 !important;
    background-color: rgba(255, 255, 255, 0.1);
}

.admin-nav .navbar-nav .nav-link.active {
    color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.1);
    font-weight: 600;
}

.admin-nav .navbar-brand {
    color: #dc3545 !important;
    font-weight: 700;
}

/* 9.3 Admin Navigation Dropdowns */
/* Used for organized admin navigation with grouped menu items */
.admin-nav .dropdown-menu {
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    background-color: #343a40;
    border-radius: 6px;
    padding: 0.5rem 0;
}

.admin-nav .dropdown-item {
    padding: 0.5rem 1rem;
    transition: background-color 0.15s ease-in-out;
    color: #fff;
    border: none;
}

.admin-nav .dropdown-item:hover {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.admin-nav .dropdown-item.active {
    background-color: #dc3545;
    color: white;
}

.admin-nav .dropdown-item:focus {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* Enhanced active state for dropdown toggles */
.admin-nav .dropdown .nav-link.active {
    background-color: rgba(220, 53, 69, 0.1);
    border-radius: 4px;
}

/* Dropdown toggle arrow styling */
.admin-nav .dropdown-toggle::after {
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

.admin-nav .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* 9.4 Admin Cards & Statistics */
.admin-card {
    border-left: 4px solid var(--primary-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.admin-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.stat-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.stat-card .card-body {
    padding: 1.5rem;
}

.stat-card h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* ========================================
   10. AUTOCOMPLETE SEARCH COMPONENTS
   Used for search functionality with dropdown suggestions
======================================== */
.autocomplete-dropdown {
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
}

.autocomplete-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.autocomplete-item:hover, 
.autocomplete-item.active {
    background-color: #f8f9fa;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item .item-title {
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
}

.autocomplete-item .item-subtitle {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 2px;
}

.autocomplete-item .item-type {
    font-size: 0.75em;
    color: #999;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 4px;
}

/* ========================================
   11. UTILITY CLASSES
   Reusable utility classes for common styling needs
======================================== */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-custom {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* ========================================
   12. RESPONSIVE DESIGN
   Mobile and tablet optimizations
======================================== */

/* Standard mobile breakpoint */
@media (max-width: 768px) {
    .custom-header h1 {
        font-size: 2rem;
    }
    
    .display-4 {
        font-size: 2rem;
    }
    
    .btn {
        padding: 0.5rem 1.5rem;
        font-size: 0.9rem;
    }
    
    /* Admin navigation mobile styles */
    .admin-nav .navbar-nav .nav-link {
        margin: 2px 0;
        text-align: center;
    }
    
    .admin-nav .dropdown-menu {
        background-color: #212529;
        border: 1px solid #495057;
    }
}

/* Large mobile/small tablet breakpoint */
@media (max-width: 992px) {
    .admin-nav .navbar-collapse {
        margin-top: 1rem;
        border-top: 1px solid #495057;
        padding-top: 1rem;
    }
}

/* ========================================
   END OF STYLESHEET
======================================== */