/* bikes detail styles moved from template */
.bike-specs-section h3 {
    color: #ecf0f1;
    font-family: "Bebas Neue", serif;
    margin-bottom: 1.5rem;
}

.spec-group h5 {
    color: #4a7ef0;
    font-family: "Bebas Neue", serif;
    margin-bottom: 1rem;
}

.spec-list {
    list-style: none;
    padding: 0;
}

.spec-list li {
    color: #ecf0f1;
    padding: 8px 0;
    border-bottom: 1px solid #34495e;
}

.spec-list li:last-child {
    border-bottom: none;
}

.bike-description h3 {
    color: #ecf0f1;
    font-family: "Bebas Neue", serif;
}

.description-content {
    color: #bdc3c7;
    line-height: 1.6;
    background-color: #34495e;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #4a7ef0;
}

.favorite-btn.favorited {
    background-color: #e74c3c;
    color: white;
    border-color: #e74c3c;
}

.sidebar .card {
    background-color: #34495e;
    border: 1px solid #4a7ef0;
}

.sidebar .card-header {
    background: linear-gradient(135deg, #326dee, #4a7ef0);
    color: white;
    border-bottom: 1px solid #4a7ef0;
}

.sidebar .card-body {
    color: #ecf0f1;
}

.sidebar a {
    color: lime;
}

.sidebar a:hover {
    color: lavender;
}

.quick-info-item {
    padding: 8px 0;
    border-bottom: 1px solid #2c3e50;
}

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

.component-item {
    padding: 8px 0;
    border-bottom: 1px solid #2c3e50;
}

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

.related-bike {
    padding-bottom: 1rem;
    border-bottom: 1px solid #2c3e50;
}

.related-bike:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.staff-actions {
    background-color: rgba(52, 152, 219, 0.1) !important;
    border: 1px solid #3498db;
}
/* Bikes app specific styles extracted from inline template styles */

/* Scope all text color changes inside the container to avoid navbar conflicts */
.container, .container * { color: #ffffff !important; }

/* Inputs, textareas, selects styling for bikes */
.container input, .container textarea, .container select { background-color: #2c3e50; color: #ffffff !important; border-color: #ffffff3b; }
.container input::placeholder, .container textarea::placeholder { color: #cccccc; }
.container .btn { color: #ffffff !important; }
.container .text-muted { color: #cccccc !important; }
.container a { color: #ffffff; }
.container a:hover { color: #dddddd; }
.container .badge { color: #ffffff; }
.container .card { background-color: #1c1c1c; border-color: #ffffff3b; }

/* Bike detail visuals */
.bike-title { font-family: "Bebas Neue", serif; color: #ecf0f1; font-size: 2.5rem; margin-bottom: 1rem; }

.badge-brand { background: linear-gradient(135deg, #326dee, #4a7ef0); color: white; padding: 8px 16px; border-radius: 20px; font-size: 1rem; }

.bike-meta { color: #bdc3c7; font-size: 0.9rem; }

.main-bike-image { width: 100%; height: auto; max-height: 680px; object-fit: contain; object-position: center center; border: 2px solid #4a7ef0; transition: opacity 240ms ease-in-out; opacity: 1; background-color: #233342; }
.main-bike-image.fading { opacity: 0; }

.bike-specs-section h3 { color: #ecf0f1; font-family: "Bebas Neue", serif; margin-bottom: 1.5rem; }
.spec-group h5 { color: #4a7ef0; font-family: "Bebas Neue", serif; margin-bottom: 1rem; }
.spec-list { list-style: none; padding: 0; }
.spec-list li { color: #ecf0f1; padding: 8px 0; border-bottom: 1px solid #34495e; }
.spec-list li:last-child { border-bottom: none; }

.bike-description h3 { color: #ecf0f1; font-family: "Bebas Neue", serif; }
.description-content { color: #bdc3c7; line-height: 1.6; background-color: #34495e; padding: 20px; border-radius: 8px; border-left: 4px solid #4a7ef0; }

.favorite-btn.favorited { background-color: #e74c3c; color: white; border-color: #e74c3c; }

.sidebar .card { background-color: #34495e; border: 1px solid #4a7ef0; }
.sidebar .card-header { background: linear-gradient(135deg, #326dee, #4a7ef0); color: white; border-bottom: 1px solid #4a7ef0; }
.sidebar .card-body { color: #ecf0f1; }
.sidebar a { color: lime; }
.sidebar a:hover { color: lavender; }

.quick-info-item, .component-item { padding: 8px 0; border-bottom: 1px solid #2c3e50; }
.quick-info-item:last-child, .component-item:last-child { border-bottom: none; }

.related-bike { padding-bottom: 1rem; border-bottom: 1px solid #2c3e50; }
.related-bike:last-child { border-bottom: none; padding-bottom: 0; }

.staff-actions { background-color: rgba(52, 152, 219, 0.1) !important; border: 1px solid #3498db; }

/* Edit/Create form card styling for bikes */
.card { background-color: #34495e; border: 1px solid #f39c12; }
.card-header { background: linear-gradient(135deg, #f39c12, #e67e22); color: white; }
.card-header h2 { font-family: "Bebas Neue", serif; margin: 0; color: white; }

.form-label { color: #ecf0f1; font-family: "Lemon", serif; font-weight: bold; }

.form-control, .form-select { background-color: #2c3e50; border: 1px solid #f39c12; color: #ecf0f1; border-radius: 8px; }

.form-control:focus, .form-select:focus { background-color: #34495e; border-color: #e67e22; color: #ecf0f1; box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.25); }

/* Modal styles used in create page */
#createChainModal .modal-content { background-color: #34495e !important; color: #ecf0f1 !important; border-radius: 12px !important; border: 1px solid #1ac888 !important; }
#createChainModal .modal-header { background: linear-gradient(135deg, #1ac888, #45a049) !important; color: white !important; }
#createChainModal .modal-title { font-family: "Bebas Neue", sans-serif !important; }
#createChainModal .btn-close { filter: invert(1); }
#createChainModal .form-label { font-family: "Lemon", serif !important; color: #ecf0f1 !important; }
#createChainModal .form-control, #createChainModal .form-select { background-color: #2c3e50 !important; color: #ecf0f1 !important; border: 1px solid #1ac888 !important; }
#createChainModal .form-control:focus, #createChainModal .form-select:focus { background-color: #34495e !important; border-color: lime !important; box-shadow: 0 0 0 0.2rem rgba(26,200,136,0.25) !important; color: #ecf0f1 !important; }
#createChainModal .modal-footer { background-color: #2c3e50 !important; }
#createChainModal .btn-success { background-color: #1ac888 !important; border-color: #1ac888 !important; color: #fff !important; }
#createChainModal .btn-secondary { background-color: #2c3e50 !important; border-color: #1ac888 !important; color: #ecf0f1 !important; }
#createChainModal .btn-secondary:hover { background-color: #1ac888 !important; color: #fff !important; }