/* style.css - Jumia-inspired colors */
:root {
    --primary: #F55203;       /* Jumia orange - main buttons, accents */
    --primary-dark: #d94500;  /* hover */
    --secondary: #FF8C00;     /* highlights, revenue */
    --dark: #212529;          /* text */
    --light: #f8f9fa;         /* body bg */
    --navbar-bg: #343a40;     /* dark navbar */
    --success: #198754;
    --danger: #dc3545;
}

body {
    background-color: var(--light);
    color: var(--dark);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.navbar {
    background-color: var(--navbar-bg) !important;
}

.navbar-brand, .nav-link {
    color: white !important;
}

.card, .accordion-item {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
}

.card:hover, .accordion-item:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
}

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

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}

.btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
}

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

.accordion-button:not(.collapsed) {
    background-color: var(--primary);
    color: white;
    font-weight: 600;
}

.accordion-button {
    font-weight: 500;
}

.table thead {
    background-color: var(--primary);
    color: white;
}

.hero {
    background: linear-gradient(rgba(245,82,3,0.85), rgba(246,139,31,0.65)),
                url('https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') center/cover;
    color: white;
    padding: 120px 0;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

.hero h1 {
    font-size: 3.2rem;
    font-weight: 700;
}

/* Ensure high contrast text everywhere */
h1, h2, h3, h4, h5, h6, .card-title, strong {
    color: var(--dark);
}

p, td, th, label, small {
    color: #495057;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c2c7;
    color: #842029;
}
/* Debug – make sure tabs are visible */
.nav-tabs .nav-link {
    color: #495057 !important;
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important;
    border-bottom: none !important;
}

.nav-tabs .nav-link.active {
    color: #F55203 !important;
    background-color: #fff !important;
    border-color: #dee2e6 #dee2e6 #fff !important;
    font-weight: bold;
}

.tab-content {
    background: white;
    padding: 1.5rem;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
}