/* Styles personnalisés pour l'espace client */

/* Variables CSS pour les thèmes */
:root {
    /* Palette Pressetil */
    --press-black: #1A1A1A;
    --press-white: #FFFFFF;
    --press-yellow: #FFD300;
    --press-magenta: #E6007E;
    --press-cyan: #009FE3;
    --press-gray-100: #F4F4F4;
    --press-gray-600: #777777;

    /* Couleurs thème dérivées */
    --primary-color: var(--press-yellow);
    --secondary-color: var(--press-cyan);
    --success-color: #198754;
    --info-color: var(--press-cyan);
    --warning-color: var(--press-yellow);
    --danger-color: var(--press-magenta);

    /* Overrides Bootstrap variables pour appliquer la charte Pressetil */
    --bs-body-bg: var(--press-white);
    --bs-body-color: var(--press-black);
    --bs-border-color: #E6E6E6;

    --bs-primary: var(--press-yellow);
    --bs-secondary: var(--press-cyan);
    --bs-info: var(--press-cyan);
    --bs-warning: var(--press-yellow);
    --bs-danger: var(--press-magenta);

    --bs-link-color: var(--press-cyan);
    --bs-link-hover-color: var(--press-magenta);
}

.navbar-pressetil {
    background-color: var(--press-black);
    padding-top: .35rem;
    padding-bottom: .35rem;
}
/* Forcer le fond noir de la barre (évite qu'une règle globale ne le remplace) */
.navbar.navbar-pressetil { background-color: var(--press-black) !important; }
.navbar-pressetil .navbar-brand,
.navbar-pressetil .nav-link {
    color: rgba(255,255,255,.85) !important;
}
.navbar-pressetil .nav-link.active,
.navbar-pressetil .nav-link:hover {
    color: var(--press-cyan) !important;
    font-weight: 600;
}
.navbar-pressetil .navbar-brand span {
    color: var(--press-yellow);
    font-weight: 800;
}

/* Toggler visible sur fond foncé */
.navbar-pressetil .navbar-toggler {
    border-color: rgba(255,255,255,.25);
}

/* (dropdown styling moved to the bottom with higher specificity) */

/* Thème clair */
[data-theme="light"] {
    --bg-color: var(--press-white);
    --bg-secondary: var(--press-gray-100);
    --text-color: var(--press-black);
    --text-muted: var(--press-gray-600);
    --border-color: #E6E6E6;
    --card-bg: var(--press-white);
    --navbar-bg: var(--press-white);
    --navbar-brand-color: var(--press-magenta);
}

/* Thème foncé */
[data-theme="dark"] {
    --bg-color: var(--press-black);
    --bg-secondary: #2A2A2A;
    --text-color: var(--press-white);
    --text-muted: #B5B5B5;
    --border-color: #3A3A3A;
    --card-bg: #222222;
    --navbar-bg: var(--press-black);
    --navbar-brand-color: var(--press-white);
}

/* Application des variables */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar {
    /*background-color: var(--navbar-bg) !important;*/
    border-bottom: 1px solid var(--border-color);
}

.navbar:not(.navbar-pressetil) .navbar-brand,
.navbar:not(.navbar-pressetil) .nav-link {
    color: var(--navbar-brand-color) !important;
}

.card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

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

.border {
    border-color: var(--border-color) !important;
}

/* Boutons alignés à la charte Pressetil */
.btn-primary {
    color: var(--press-black);
    background-color: var(--press-yellow);
    border-color: var(--press-yellow);
}
.btn-primary:hover, .btn-primary:focus {
    color: var(--press-white);
    background-color: var(--press-magenta);
    border-color: var(--press-magenta);
}

.btn-secondary {
    color: var(--press-white);
    background-color: var(--press-cyan);
    border-color: var(--press-cyan);
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: #018ac2;
    border-color: #018ac2;
}

.btn-outline-danger {
    color: var(--press-magenta);
    background-color: var(--press-gray-100);
    border-color: var(--press-magenta);
}

.btn-outline-danger:hover, .btn-outline-danger:focus {
    background-color:var(--press-magenta);
    border-color: var(--press-magenta);
}
/* Utilitaires de couleur Pressetil */
.bg-press-black { background-color: var(--press-black) !important; }
.bg-press-yellow { background-color: var(--press-yellow) !important; }
.bg-press-cyan { background-color: var(--press-cyan) !important; }
.text-press-yellow { color: var(--press-yellow) !important; }
.text-press-magenta { color: var(--press-magenta) !important; }
.text-press-cyan { color: var(--press-cyan) !important; }

/* Sections alternées */
.section-alt { background-color: var(--press-gray-100); }

/* Cartes */
.card {
    border-radius: .8rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Badges */
.badge.bg-primary { color: var(--press-black); }
.badge.bg-secondary { color: var(--press-white); }

/* Footer */
.footer-pressetil {
    background: var(--press-black);
    color: var(--press-white);
}
.footer-pressetil a { color: var(--press-cyan); }
.footer-pressetil a:hover { color: var(--press-magenta); }

/* Styles spécifiques */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--info-color));
}

.login-card {
    max-width: 400px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 15px;
}

.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dashboard-stats .card {
    transition: transform 0.2s ease;
}

.dashboard-stats .card:hover {
    transform: translateY(-5px);
}

.order-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-pending {
    background-color: rgba(255, 211, 0, 0.15);
    color: #7a6a00;
}

.status-processing {
    background-color: rgba(0, 159, 227, 0.15);
    color: #0b5c7a;
}

.status-completed {
    background-color: #d4edda;
    color: #155724;
}

.status-cancelled {
    background-color: rgba(230, 0, 126, 0.12);
    color: #7a0040;
}

/* Animation pour le changement de thème */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Styles pour les tables en mode sombre */
[data-theme="dark"] .table {
    --bs-table-bg: var(--card-bg);
    --bs-table-color: var(--text-color);
    color: var(--text-color);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(255, 211, 0, 0.1);
    color: var(--text-color);
}

[data-theme="dark"] .table-dark {
    --bs-table-bg: #495057;
    --bs-table-color: #ffffff;
}

[data-theme="dark"] .table-responsive {
    background-color: var(--card-bg);
}

/* Correction pour les alertes en mode sombre */
[data-theme="dark"] .alert {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
    color: #f5c6cb;
}

/* Correction pour les spinners en mode sombre */
[data-theme="dark"] .spinner-border {
    color: var(--warning-color);
}

/* Responsive */
@media (max-width: 768px) {
    .theme-toggle {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }
    
    .login-card {
        margin: 1rem;
    }
}

/* Force uniquement le dropdown du header en gris pâle (sans toucher la barre) */
nav.navbar.navbar-pressetil .dropdown-menu {
    background-color: #E6E6E6 !important;
    border-color: #E6E6E6 !important;
}
nav.navbar.navbar-pressetil .dropdown-item { color: var(--press-black) !important; }
nav.navbar.navbar-pressetil .dropdown-item:hover,
nav.navbar.navbar-pressetil .dropdown-item:focus {
    background-color: rgba(0,0,0,.06) !important;
    color: var(--press-black) !important;
}
nav.navbar.navbar-pressetil .dropdown-divider { border-top-color: rgba(0,0,0,.1) !important; }

/* Couleur du libellé du menu utilisateur (titre du dropdown) */
nav.navbar.navbar-pressetil .user-toggle {
    color: #E6E6E6 !important;
}
nav.navbar.navbar-pressetil .user-toggle:hover,
nav.navbar.navbar-pressetil .user-toggle:focus {
    color: var(--press-cyan) !important;
}