/**
 * Premium Theme - Configuration CSS
 * Version 5.0.4 - Border radius limité aux éléments spécifiés
 * TOUS les paramètres sont 100% appliqués avec !important pour surcharger les styles par défaut
 */

/* ==========================================================================
    Variables CSS dynamiques
    ========================================================================== */

:root {
    --font-size-multiplier: 1;
    --spacing-multiplier: 1;
    --notification-animation-duration: 2s;
    
    /* Fallbacks pour border-radius si Bootstrap n'est pas chargé */
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius: 0.375rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 1.25rem;
    --bs-border-radius-pill: 50rem;
    
    /* Variables de spacing calculées */
    --spacing-xs: calc(0.25rem * var(--spacing-multiplier));
    --spacing-sm: calc(0.5rem * var(--spacing-multiplier));
    --spacing-md: calc(1rem * var(--spacing-multiplier));
    --spacing-lg: calc(1.5rem * var(--spacing-multiplier));
    --spacing-xl: calc(2rem * var(--spacing-multiplier));
}

/* ==========================================================================
    Border radius - Limité aux éléments : .badge, .btn, .flatboard-tag, #back-to-top, #header-search-input
    ========================================================================== */

/* ========== 0.5x - Presque carré ========== */
body.border-radius-0-5x .badge,
body.border-radius-0-5x .btn,
body.border-radius-0-5x .flatboard-tag,
body.border-radius-0-5x #back-to-top,
body.border-radius-0-5x #header-search-input {
    border-radius: var(--bs-border-radius-sm) !important;
}

/* ========== 0.75x - Légèrement arrondi ========== */
body.border-radius-0-75x .badge,
body.border-radius-0-75x .btn,
body.border-radius-0-75x .flatboard-tag,
body.border-radius-0-75x #back-to-top,
body.border-radius-0-75x #header-search-input {
    border-radius: var(--bs-border-radius) !important;
}

/* ========== 1x - Standard ========== */
body.border-radius-1x .badge,
body.border-radius-1x .btn,
body.border-radius-1x .flatboard-tag,
body.border-radius-1x #back-to-top,
body.border-radius-1x #header-search-input {
    border-radius: var(--bs-border-radius-lg) !important;
}

/* ========== 1.25x - Bien arrondi ========== */
body.border-radius-1-25x .badge,
body.border-radius-1-25x .btn,
body.border-radius-1-25x .flatboard-tag,
body.border-radius-1-25x #back-to-top,
body.border-radius-1-25x #header-search-input {
    border-radius: 1rem !important;
}

/* ========== 1.5x - Très arrondi ========== */
body.border-radius-1-5x .badge,
body.border-radius-1-5x .btn,
body.border-radius-1-5x .flatboard-tag,
body.border-radius-1-5x #back-to-top,
body.border-radius-1-5x #header-search-input {
    border-radius: 1.25rem !important;
}

/* ========== 2x - Forme pilule ========== */
html body.border-radius-2x .badge,
html body.border-radius-2x .btn,
html body.border-radius-2x .flatboard-tag,
html body.border-radius-2x #back-to-top,
html body.border-radius-2x #header-search-input {
    border-radius: var(--bs-border-radius-pill) !important;
}

/* ==========================================================================
    Avatar Border Radius - Configurables via theme settings
    ========================================================================== */

/* Avatars carrés (square) - angles droits */
body.avatar-square .avatar,
body.avatar-square .avatar img,
body.avatar-square .avatar-small,
body.avatar-square .avatar-small img,
body.avatar-square .avatar-sm,
body.avatar-square .avatar-sm img,
body.avatar-square .avatar-dot img,
body.avatar-square .avatar-detailed img,
body.avatar-square .flatboard-discussion-avatar,
body.avatar-square .flatboard-discussion-avatar img,
body.avatar-square .user-avatar,
body.avatar-square .user-avatar img,
body.avatar-square img[class*="avatar"],
body.avatar-square .mention-suggestions-dropdown img {
    border-radius: 0 !important;
}

/* Avatars arrondis (rounded) - coins légèrement arrondis */
body.avatar-rounded .avatar,
body.avatar-rounded .avatar img,
body.avatar-rounded .avatar-small,
body.avatar-rounded .avatar-small img,
body.avatar-rounded .avatar-sm,
body.avatar-rounded .avatar-sm img,
body.avatar-rounded .avatar-dot img,
body.avatar-rounded .avatar-detailed img,
body.avatar-rounded .flatboard-discussion-avatar,
body.avatar-rounded .flatboard-discussion-avatar img,
body.avatar-rounded .user-avatar,
body.avatar-rounded .user-avatar img,
body.avatar-rounded img[class*="avatar"],
body.avatar-rounded .mention-suggestions-dropdown img {
    border-radius: var(--bs-border-radius-lg) !important;
}

/* Avatars ronds (round) - cercle parfait */
body.avatar-round .avatar,
body.avatar-round .avatar img,
body.avatar-round .avatar-small,
body.avatar-round .avatar-small img,
body.avatar-round .avatar-sm,
body.avatar-round .avatar-sm img,
body.avatar-round .avatar-dot img,
body.avatar-round .avatar-detailed img,
body.avatar-round .flatboard-discussion-avatar,
body.avatar-round .flatboard-discussion-avatar img,
body.avatar-round .status-dot,
body.avatar-round .avatar-status,
body.avatar-round .user-avatar,
body.avatar-round .user-avatar img,
body.avatar-round img[class*="avatar"],
body.avatar-round .mention-suggestions-dropdown img {
    border-radius: 50% !important;
}

/* ==========================================================================
    Sidebar Position
    ========================================================================== */

/* Sidebar à gauche */
body.sidebar-left .flatboard-sidebar {
    order: -1;
}

body.sidebar-left .flatboard-main-content {
    order: 1;
}

/* Sidebar à droite (par défaut) */
body.sidebar-right .flatboard-sidebar {
    order: 1;
}

body.sidebar-right .flatboard-main-content {
    order: -1;
}

/* ==========================================================================
    Footer Position
    ========================================================================== */

footer.footer-centered {
    text-align: center;
}

footer.footer-centered .row > div {
    text-align: center !important;
}

/* ==========================================================================
    Font Size - Appliqué au body
    ========================================================================== */

body.font-size-0-8x {
    font-size: calc(0.8rem * var(--font-size-multiplier)) !important;
}

body.font-size-0-9x {
    font-size: calc(0.9rem * var(--font-size-multiplier)) !important;
}

body.font-size-1x {
    font-size: calc(1rem * var(--font-size-multiplier)) !important;
}

body.font-size-1-1x {
    font-size: calc(1.1rem * var(--font-size-multiplier)) !important;
}

body.font-size-1-2x {
    font-size: calc(1.2rem * var(--font-size-multiplier)) !important;
}

body.font-size-1-5x {
    font-size: calc(1.5rem * var(--font-size-multiplier)) !important;
}

/* ==========================================================================
    Spacing - Variables CSS dynamiques
    ========================================================================== */

body.spacing-0-8x {
    --spacing-multiplier: 0.8;
}

body.spacing-0-9x {
    --spacing-multiplier: 0.9;
}

body.spacing-1x {
    --spacing-multiplier: 1;
}

body.spacing-1-1x {
    --spacing-multiplier: 1.1;
}

body.spacing-1-2x {
    --spacing-multiplier: 1.2;
}

body.spacing-1-5x {
    --spacing-multiplier: 1.5;
}

/* ==========================================================================
    Layout - Largeur du container
    ========================================================================== */

body.layout-wide .container {
    max-width: 1400px !important;
}

body.layout-default .container {
    max-width: 1140px !important;
}

body.layout-compact .container {
    max-width: 960px !important;
}

body.layout-centered .container {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
    Navbar Style
    ========================================================================== */

/* Navbar Glass Effect */
body.navbar-glass .navbar {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

body.navbar-glass[data-bs-theme="dark"] .navbar {
    background: rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navbar Solid */
body.navbar-solid .navbar {
    background: var(--bs-primary) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Navbar Transparent */
body.navbar-transparent .navbar {
    background: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
    Card Style
    ========================================================================== */

/* Card Bordered */
body.card-bordered .card {
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: none !important;
}

body.card-bordered .card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Card Elevated */
body.card-elevated .card {
    border: none !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

body.card-elevated .card:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Card Minimal */
body.card-minimal .card {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* ==========================================================================
    Shadows - Désactivation complète des ombres
    ========================================================================== */

html body.no-shadows .card,
html body.no-shadows .btn,
html body.no-shadows .flatboard-discussion-item,
html body.no-shadows .post-item,
html body.no-shadows .navbar,
html body.no-shadows .modal-content,
html body.no-shadows .dropdown-menu,
html body.no-shadows .alert,
html body.no-shadows .nav-tabs .nav-link,
html body.no-shadows .pagination .page-link,
html body.no-shadows .flatboard-user-tooltip,
html body.no-shadows .PostQuote,
html body.no-shadows .flatboard-tag,
html body.no-shadows #back-to-top,
html body.no-shadows .badge,
html body.no-shadows .toast,
html body.no-shadows .popover,
html body.no-shadows .table,
html body.no-shadows .progress,
html body.no-shadows .reaction-btn,
html body.no-shadows .list-group-item,
html body.no-shadows #header-search-input,
html body.no-shadows #search-results-dropdown,
html body.no-shadows #notification-dropdown-menu,
html body.no-shadows .flatboard-actions-card,
html body.no-shadows .post-navigation-flatboard,
html body.no-shadows .posts-list-flatboard,
html body.no-shadows .discussion-header-flatboard,
html body.no-shadows .discussion-actions,
html body.no-shadows .reply-form-flatboard,
html body.no-shadows .post,
html body.no-shadows .form-control,
html body.no-shadows .form-select,
html body.no-shadows .reaction-users-tooltip,
html body.no-shadows .mention-suggestions-dropdown,
html body.no-shadows .flatboard-tag-banner,
html body.no-shadows .tag-btn,
html body.no-shadows .new-discussion-btn,
html body.no-shadows .btn-new-discussion,
html body.no-shadows .theme-toggle,
html body.no-shadows .btn-theme,
html body.no-shadows [data-bs-theme],
html body.no-shadows .navbar .btn,
html body.no-shadows .navbar .nav-link,
html body.no-shadows .theme-switch-wrapper,
html body.no-shadows .theme-switch-input {
    box-shadow: none !important;
}

html body.no-shadows .card:hover,
html body.no-shadows .btn:hover,
html body.no-shadows .category-card:hover,
html body.no-shadows .flatboard-start-discussion:hover,
html body.no-shadows .reaction-btn:hover,
html body.no-shadows .flatboard-discussion-item:hover,
html body.no-shadows .list-group-item:hover,
html body.no-shadows .nav-tabs .nav-link:hover,
html body.no-shadows .pagination .page-link:hover,
html body.no-shadows .dropdown-item:hover,
html body.no-shadows .form-control:focus,
html body.no-shadows .form-select:focus,
html body.no-shadows #back-to-top:hover,
html body.no-shadows .flatboard-tag:hover,
html body.no-shadows .tag-btn:hover,
html body.no-shadows .new-discussion-btn:hover,
html body.no-shadows .btn-new-discussion:hover,
html body.no-shadows .theme-toggle:hover,
html body.no-shadows .btn-theme:hover,
html body.no-shadows .theme-switch-wrapper:hover,
html body.no-shadows .navbar .btn:hover,
html body.no-shadows .navbar .nav-link:hover,
html body.no-shadows .post-actions-members .btn:hover,
html body.no-shadows .post-actions-moderation .btn:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* ==========================================================================
    Bouton Back to Top - STYLES COMPLETS
    ========================================================================== */

#back-to-top {
    position: fixed !important;
    bottom: 2rem !important;
    right: 2rem !important;
    width: 56px !important;
    height: 56px !important;
    background: linear-gradient(135deg, var(--bs-primary) 0%, var(--primary-color-dark) 100%) !important;
    color: var(--bs-white) !important;
    border: none !important;
    cursor: pointer !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease-in-out !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: calc(1.25rem * var(--font-size-multiplier)) !important;
    padding: 0 !important;
}

#back-to-top.show {
    opacity: 1 !important;
    visibility: visible !important;
}

#back-to-top:hover {
    transform: translateY(-4px) !important;
    background: linear-gradient(135deg, var(--primary-color-dark) 0%, var(--primary-color-darker) 100%) !important;
}

html body.no-shadows #back-to-top,
html body.no-shadows #back-to-top:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* ==========================================================================
    Gestion des animations selon animation_level
    ========================================================================== */

/* animation_level = none - Désactive toutes les animations */
html body.animation-none,
html body.animation-none * {
    animation: none !important;
    transition: none !important;
}

html body.animation-none #notification-count {
    animation: none !important;
}

/* animation_level = subtle - Animations réduites */
html body.animation-subtle {
    --bs-transition: all 0.15s ease-in-out;
    --transition-fast: 0.1s ease-in-out;
    --transition-base: 0.15s ease-in-out;
    --transition-slow: 0.3s ease-in-out;
    --notification-animation-duration: 3s;
}

/* animation_level = normal - Animations normales (par défaut) */
html body.animation-normal {
    --bs-transition: all 0.3s ease-in-out;
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
    --notification-animation-duration: 2s;
}

/* animation_level = high - Animations rapides et prononcées */
html body.animation-high {
    --bs-transition: all 0.5s ease-in-out;
    --transition-fast: 0.3s ease-in-out;
    --transition-base: 0.5s ease-in-out;
    --transition-slow: 0.8s ease-in-out;
    --notification-animation-duration: 1.2s;
}

/* ==========================================================================
    Animations de notification
    ========================================================================== */

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Classes d'animation pour les notifications */
.notification-animation-bounce {
    animation: bounce 1s ease-in-out infinite;
}

.notification-animation-shake {
    animation: shake 0.8s ease-in-out infinite;
}

.notification-animation-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.notification-animation-none {
    animation: none !important;
}

/* ==========================================================================
    Responsive
    ========================================================================== */

@media (max-width: 991px) {
    body.layout-wide .container,
    body.layout-default .container {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    body {
        font-size: calc(0.9rem * var(--font-size-multiplier)) !important;
    }
    
    :root {
        --spacing-xs: calc(0.2rem * var(--spacing-multiplier));
        --spacing-sm: calc(0.4rem * var(--spacing-multiplier));
        --spacing-md: calc(0.8rem * var(--spacing-multiplier));
        --spacing-lg: calc(1.2rem * var(--spacing-multiplier));
        --spacing-xl: calc(1.6rem * var(--spacing-multiplier));
    }
}