/* Custom CSS for Stores Health Check - Ooredoo Theme */

:root {
    /* These values are only fallbacks and will be overridden by dynamic values */
    /* from the system settings via the inline styles in base.html */
    --ooredoo-blue: var(--bs-primary, #0066B3);
    --ooredoo-dark-blue: #004e8a;
    --ooredoo-light-blue: #0088e8;
    --ooredoo-orange: #F58426;
    --ooredoo-dark-orange: #d16c14;
    --ooredoo-light-orange: #ff9c49;
    --ooredoo-grey: #444444;
    --ooredoo-light-grey: #f5f5f5;
    --ooredoo-dark: #222222;
}

/* Bootstrap overrides for Ooredoo theme */
.bg-primary, .btn-primary {
    background-color: var(--ooredoo-blue) !important;
    border-color: var(--ooredoo-blue) !important;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--ooredoo-dark-blue) !important;
    border-color: var(--ooredoo-dark-blue) !important;
}

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

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

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

.navbar-dark {
    background-color: var(--ooredoo-blue) !important;
}

.card-header.bg-primary {
    background-color: var(--ooredoo-blue) !important;
    color: white !important;
}

.nav-link.active {
    color: var(--ooredoo-orange) !important;
    font-weight: bold;
}

/* Card styling enhancements */
.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-color: #ddd;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Form element styling enhancements */
.form-control:focus, .form-select:focus {
    border-color: var(--ooredoo-blue);
    box-shadow: 0 0 0 0.25rem rgba(0, 102, 179, 0.25);
}

/* Footer styling */
footer {
    background-color: var(--ooredoo-dark-blue);
    color: white;
}

/* Table styling enhancements */
.table-hover tbody tr:hover {
    background-color: rgba(0, 102, 179, 0.05);
}

.badge.bg-success {
    background-color: #28a745 !important;
}

.badge.bg-danger {
    background-color: var(--ooredoo-orange) !important;
}

/* Custom utility classes */
.cursor-pointer {
    cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .display-4 {
        font-size: 2.5rem;
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
}