/* -----------------------------------------------------------
   Thème AS Pagny Handball — jaune et noir
   Fichier partagé à inclure APRES bootstrap.min.css et
   AVANT les styles spécifiques de chaque page.
   ----------------------------------------------------------- */

:root {
    --club-black: #111111;
    --club-dark: #1a1a1a;
    --club-gray: #2d2d2d;
    --club-yellow: #FFD700;
    --club-yellow-light: #FFF0A0;
    --club-yellow-dark: #E6B800;
    --club-yellow-rgb: 255, 215, 0;
    --club-text-on-yellow: var(--club-black);
    --club-body-color: var(--club-black);
}

/* Force le texte par défaut en noir pour les pages thématisées */
body {
    color: var(--club-body-color);
}

/* ---------- Topbar partagée ---------- */
.topbar {
    background: linear-gradient(120deg, var(--club-black), var(--club-gray));
    border-bottom: 3px solid var(--club-yellow);
}

.topbar .navbar-brand,
.topbar .nav-link,
.topbar .dropdown-toggle,
.topbar .dropdown-item,
.topbar-watermark,
.topbar-watermark a {
    color: rgba(255, 255, 255, 0.9) !important;
}

.topbar .nav-link:hover,
.topbar .nav-link:focus,
.topbar .nav-link.active,
.topbar .dropdown-toggle:hover,
.topbar .dropdown-toggle:focus {
    color: var(--club-black) !important;
    background-color: var(--club-yellow) !important;
}

.topbar-watermark:hover,
.topbar-watermark:focus {
    color: var(--club-black) !important;
    background-color: var(--club-yellow) !important;
    border-color: var(--club-yellow) !important;
}

.topbar .navbar-toggler {
    border-color: rgba(255, 215, 0, 0.5) !important;
}

.topbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 215, 0, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Bouton utilisateur de la topbar : contour jaune au repos */
.topbar .btn-outline-light {
    color: var(--club-yellow) !important;
    border-color: var(--club-yellow) !important;
    background-color: transparent !important;
}

.topbar .btn-outline-light:hover,
.topbar .btn-outline-light:focus,
.topbar .btn-outline-light:active,
.topbar .btn-outline-light.active,
.topbar .btn-outline-light.show {
    color: var(--club-black) !important;
    background-color: var(--club-yellow) !important;
    border-color: var(--club-yellow) !important;
}

/* Dropdown utilisateur */
.dropdown-menu {
    border-color: var(--club-yellow);
}

.topbar .dropdown-item:hover,
.topbar .dropdown-item:focus,
.topbar .dropdown-item.active {
    color: var(--club-black) !important;
    background-color: var(--club-yellow-light) !important;
}

/* ---------- Boutons ---------- */
.btn-primary {
    background: linear-gradient(120deg, var(--club-yellow-dark), var(--club-yellow)) !important;
    border-color: var(--club-yellow-dark) !important;
    color: var(--club-black) !important;
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background: linear-gradient(120deg, var(--club-yellow), var(--club-yellow-light)) !important;
    border-color: var(--club-yellow) !important;
    color: var(--club-black) !important;
}

.btn-outline-primary {
    color: var(--club-black) !important;
    border-color: var(--club-yellow-dark) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary {
    color: var(--club-black) !important;
    background-color: var(--club-yellow) !important;
    border-color: var(--club-yellow) !important;
}

.btn-dark,
.btn-secondary {
    background-color: var(--club-black) !important;
    border-color: var(--club-black) !important;
    color: var(--club-yellow) !important;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--club-gray) !important;
    border-color: var(--club-gray) !important;
    color: var(--club-yellow) !important;
}

/* ---------- Badges / Alertes ---------- */
.badge-club,
.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--club-yellow) !important;
    color: var(--club-black) !important;
}

.badge.bg-danger {
    background-color: #dc3545 !important;
}

.alert-primary {
    background-color: var(--club-yellow-light);
    border-color: var(--club-yellow);
    color: var(--club-black);
}

.alert-warning {
    background-color: #fff8db;
    border-color: var(--club-yellow);
    color: var(--club-black);
}

/* ---------- Texte ---------- */
.text-primary {
    color: var(--club-yellow-dark) !important;
}

.quick-link,
a.link-primary {
    color: var(--club-black) !important;
    text-decoration: underline;
    text-decoration-color: var(--club-yellow);
    text-underline-offset: 0.15em;
}

.quick-link:hover,
a.link-primary:hover {
    color: var(--club-yellow-dark) !important;
    text-decoration-color: var(--club-yellow-dark);
}

/* ---------- Fond de page partagé ---------- */
body {
    color: var(--club-black);
}

/* Force le fond général des pages racine qui utilisent background-main.jpg */
body:has(.topbar) {
    background: radial-gradient(circle at top, rgba(255, 255, 255, .84), rgba(255, 248, 220, .92)), url('file-manager/public/background-main.jpg') center/cover fixed no-repeat !important;
}

body::before {
    background: rgba(17, 17, 17, .15) !important;
}

/* ---------- Cartes ---------- */
.hero-card,
.app-card,
.card-spotlight,
.login-card,
.feed-card,
.convocation-card,
.trombi-card,
.sheet-card,
.share-card,
.password-card {
    background-color: rgba(255, 255, 255, .96) !important;
    border-color: var(--club-yellow) !important;
}

.hero-card,
.app-card,
.card-spotlight,
.login-card,
.feed-card {
    box-shadow: 0 14px 36px rgba(17, 17, 17, .12) !important;
}

.app-card:hover,
.hero-card:hover,
.login-card:hover {
    box-shadow: 0 20px 48px rgba(17, 17, 17, .18) !important;
}

/* ---------- En-tête de connexion ---------- */
.login-card-header {
    background: linear-gradient(135deg, var(--club-black) 0%, var(--club-gray) 55%, var(--club-dark) 100%) !important;
    border-bottom: 2px solid var(--club-yellow) !important;
}

.login-card .btn-primary {
    background: linear-gradient(120deg, var(--club-yellow-dark), var(--club-yellow)) !important;
    color: var(--club-black) !important;
}

.login-card .btn-primary:hover,
.login-card .btn-primary:focus {
    background: linear-gradient(120deg, var(--club-yellow), var(--club-yellow-light)) !important;
    box-shadow: 0 6px 18px rgba(255, 215, 0, .35) !important;
}

.login-card .form-control:focus {
    border-color: var(--club-yellow-dark);
    box-shadow: 0 0 0 .25rem rgba(var(--club-yellow-rgb), .35);
}

/* ---------- Page de login non connectée (index.php, feed.php) ---------- */
.card .btn-primary,
.container-fluid .btn-primary {
    background: linear-gradient(120deg, var(--club-yellow-dark), var(--club-yellow)) !important;
    color: var(--club-black) !important;
}

/* ---------- Formulaires / focus ---------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--club-yellow-dark);
    box-shadow: 0 0 0 .25rem rgba(var(--club-yellow-rgb), .35);
}

.form-check-input:checked {
    background-color: var(--club-yellow-dark);
    border-color: var(--club-yellow-dark);
}

/* ---------- Pagination ---------- */
.page-item.active .page-link,
.pagination .active > .page-link {
    background-color: var(--club-yellow) !important;
    border-color: var(--club-yellow) !important;
    color: var(--club-black) !important;
}

.page-link {
    color: var(--club-black) !important;
}

.page-link:hover {
    background-color: var(--club-yellow-light) !important;
    border-color: var(--club-yellow) !important;
    color: var(--club-black) !important;
}

/* ---------- Onglets ---------- */
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
    background-color: var(--club-yellow) !important;
    color: var(--club-black) !important;
    border-color: var(--club-yellow) !important;
}

.nav-pills .nav-link,
.nav-tabs .nav-link {
    color: var(--club-black) !important;
}

.nav-pills .nav-link:hover,
.nav-tabs .nav-link:hover {
    background-color: var(--club-yellow-light) !important;
}

/* ---------- File manager ---------- */
.file-manager .topbar,
.share-topbar {
    background: linear-gradient(120deg, var(--club-black), var(--club-gray)) !important;
    border-bottom: 3px solid var(--club-yellow) !important;
}

.folder-tree-item.active > a,
.folder-tree-item.active > summary,
.destination-tree-item.active > .destination-select,
.destination-tree .destination-select.active,
.share-link.active,
.filters-col .list-group-item.active,
.convocation-card.active {
    background-color: var(--club-yellow) !important;
    border-color: var(--club-yellow) !important;
    color: var(--club-black) !important;
}

.folder-tree-item.active > a i,
.folder-tree-item.active > summary i {
    color: var(--club-black) !important;
}

/* ---------- Feed / trombi ---------- */
.avatar-initial {
    background: linear-gradient(135deg, var(--club-yellow), var(--club-yellow-dark)) !important;
    color: var(--club-black) !important;
}

.poll-option-fill {
    background: linear-gradient(90deg, var(--club-yellow), var(--club-yellow-dark)) !important;
}

.attachment-chip i {
    color: var(--club-yellow-dark) !important;
}

.reaction-pill.active {
    background: var(--club-yellow-light) !important;
    border-color: var(--club-yellow) !important;
}

.browser-entry.selected {
    background: var(--club-yellow-light) !important;
    border-color: var(--club-yellow) !important;
}

/* ---------- Modal d'export PDF du trombinoscope ---------- */
#exportPdfModal .btn-check:checked + .btn-outline-secondary {
    background-color: var(--club-yellow) !important;
    border-color: var(--club-yellow) !important;
    color: var(--club-black) !important;
}

#exportPdfModal .btn-outline-secondary {
    border-color: var(--club-yellow-light) !important;
    color: var(--club-black) !important;
}

#exportPdfModal .btn-outline-secondary:hover {
    background-color: var(--club-yellow-light) !important;
    border-color: var(--club-yellow) !important;
    color: var(--club-black) !important;
}

/* ---------- Tableaux ---------- */
.table-primary {
    --bs-table-bg: var(--club-yellow-light);
    --bs-table-color: var(--club-black);
    --bs-table-border-color: var(--club-yellow);
}

/* ---------- Admin / logs ---------- */
.bg-light {
    background-color: #f8f9fa !important;
}

.admin-actions .btn-primary,
.admin-actions .btn-outline-primary {
    margin-bottom: .25rem;
}