/* Custom styles for Admin Cockpit */

:root {
    --almaron-blue: #0196d6;
    --position-top3: #0196d6;  /* Almaron Blau für Top 3 Positionen */
    --position-top10: #28a745; /* Grün für Positionen 4-10 */
    --position-top20: #ffc107; /* Gelb für Positionen 11-20 */
    --position-other: #dc3545; /* Rot für Positionen >20 */
}

/* Keyword Position Badges */
.position .badge.position-top3 {
    background-color: var(--position-top3) !important;
}

.position .badge.position-top10 {
    background-color: var(--position-top10) !important;
}

.position .badge.position-top20 {
    background-color: var(--position-top20) !important;
}

.position .badge.position-other {
    background-color: var(--position-other) !important;
}

/* Keyword Status Text */
.kw-status .status-top3 {
    color: var(--position-top3) !important;
}

.kw-status .status-top10 {
    color: var(--position-top10) !important;
}

.kw-status .status-top20 {
    color: var(--position-top20) !important;
}

.kw-status .status-other {
    color: var(--position-other) !important;
}

/* Add shadow to cards on hover */
.card:hover {
    transition: box-shadow 0.3s ease;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

/* Make buttons more prominent on hover */
.btn:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

/* Custom button colors */
.btn-primary {
    background-color: var(--almaron-blue);
    border-color: var(--almaron-blue);
}

.btn-outline-primary {
    color: var(--almaron-blue);
    border-color: var(--almaron-blue);
}

.btn-outline-primary:hover {
    background-color: var(--almaron-blue);
    border-color: var(--almaron-blue);
}

/* Improve form styling */
.form-control:focus {
    border-color: var(--almaron-blue);
    box-shadow: 0 0 0 0.25rem rgba(1, 150, 214, 0.25);
}

/* Navbar styling */
.navbar-dark {
    background-color: #121212 !important;
}

.navbar-brand {
    font-weight: bold;
    letter-spacing: 0.5px;
}

.navbar-brand img {
    height: 30px;
    margin-right: 8px;
}

/* Card header styling */
.card-header {
    font-weight: bold;
}

.bg-primary {
    background-color: var(--almaron-blue) !important;
}

.text-primary {
    color: var(--almaron-blue) !important;
}

/* Make sure tables are not too wide on mobile */
.table-responsive {
    overflow-x: auto;
}

/* Fix for forms on small screens */
@media (max-width: 768px) {
    .btn-group-sm {
        display: flex;
        flex-direction: row;
    }
}

/* Service cards */
.opacity-50 {
    opacity: 0.5;
}

/* Styling für inaktive Karten */
.inactive-card {
    background-color: rgba(33, 37, 41, 0.8);
    opacity: 0.8;
}

/* Hover-Effekte für inaktive Karten */
.inactive-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
    box-shadow: 0 1rem 2rem rgba(1, 150, 214, 0.2)!important;
}

/* Customer Dashboard */
.card-footer {
    background-color: rgba(0, 0, 0, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Login page enhancements */
.card.shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}