/**
 * KEITATA Custom Theme - Orange Primary Color (#FF5D1B)
 * Overrides Metronic 8 default blue theme
 */

:root {
    /* Primary Colors */
    --kt-primary: #FF5D1B;
    --kt-primary-active: #E54E0F;
    --kt-primary-light: #FFF5F1;
    --kt-primary-inverse: #FFFFFF;
    --kt-primary-clarity: rgba(255, 93, 27, 0.1);

    /* RGB Values */
    --kt-primary-rgb: 255, 93, 27;

    /* Gradients */
    --kt-gradient-primary: linear-gradient(135deg, #FF5D1B 0%, #E54E0F 100%);
    --kt-gradient-primary-hover: linear-gradient(135deg, #E54E0F 0%, #D4440A 100%);

    /* Shadows */
    --kt-shadow-primary: 0 4px 20px rgba(255, 93, 27, 0.3);
    --kt-shadow-primary-hover: 0 8px 30px rgba(255, 93, 27, 0.4);
}

/* ============================================
   BUTTONS - Primary Color
   ============================================ */

/* Primary Button */
.btn-primary,
.btn.btn-primary {
    background-color: #FF5D1B !important;
    border-color: #FF5D1B !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 10px rgba(255, 93, 27, 0.2);
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background-color: #E54E0F !important;
    border-color: #E54E0F !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(255, 93, 27, 0.4);
    transform: translateY(-2px);
}

/* Outline Primary Button */
.btn-outline-primary,
.btn.btn-outline-primary {
    color: #FF5D1B !important;
    border-color: #FF5D1B !important;
    background-color: transparent !important;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active {
    background-color: #FF5D1B !important;
    border-color: #FF5D1B !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(255, 93, 27, 0.3);
    transform: translateY(-2px);
}

/* Light Primary Button */
.btn-light-primary,
.btn.btn-light-primary {
    background-color: #FFF5F1 !important;
    border-color: #FFF5F1 !important;
    color: #FF5D1B !important;
    transition: all 0.3s ease;
}

.btn-light-primary:hover,
.btn-light-primary:focus,
.btn-light-primary:active,
.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus,
.btn.btn-light-primary:active {
    background-color: #FFE8DF !important;
    border-color: #FFE8DF !important;
    color: #E54E0F !important;
    transform: translateY(-1px);
}

/* Active Primary Button */
.btn-active-primary:hover,
.btn-active-primary:focus,
.btn-active-primary:active,
.btn.btn-active-primary:hover,
.btn.btn-active-primary:focus,
.btn.btn-active-primary:active {
    background-color: #FF5D1B !important;
    border-color: #FF5D1B !important;
    color: #FFFFFF !important;
}

/* Button Icon Colors */
.btn-primary .ki-duotone,
.btn-primary .ki-outline,
.btn-primary .ki-solid,
.btn-primary i {
    color: #FFFFFF !important;
}

/* ============================================
   TEXT COLORS
   ============================================ */

.text-primary,
a.text-primary {
    color: #FF5D1B !important;
}

.text-primary:hover,
a.text-primary:hover {
    color: #E54E0F !important;
}

.text-hover-primary:hover {
    color: #FF5D1B !important;
}

/* ============================================
   BACKGROUNDS
   ============================================ */

.bg-primary {
    background-color: #FF5D1B !important;
}

.bg-light-primary {
    background-color: #FFF5F1 !important;
}

.bg-hover-primary:hover {
    background-color: #FF5D1B !important;
}

.bg-hover-light-primary:hover {
    background-color: #FFF5F1 !important;
}

/* ============================================
   BORDERS
   ============================================ */

.border-primary {
    border-color: #FF5D1B !important;
}

.border-hover-primary:hover {
    border-color: #FF5D1B !important;
}

/* ============================================
   BADGES
   ============================================ */

.badge-primary,
.badge.badge-primary {
    background-color: #FF5D1B !important;
    color: #FFFFFF !important;
}

.badge-light-primary,
.badge.badge-light-primary {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

/* ============================================
   LINKS
   ============================================ */

a {
    transition: all 0.3s ease;
}

a.text-primary:hover,
a.text-hover-primary:hover {
    color: #E54E0F !important;
    text-decoration: none;
}

/* ============================================
   FORMS
   ============================================ */

/* Form Check Input */
.form-check-input:checked {
    background-color: #FF5D1B !important;
    border-color: #FF5D1B !important;
}

.form-check-input:focus {
    border-color: #FF5D1B !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 93, 27, 0.25) !important;
}

/* Form Control Focus */
.form-control:focus,
.form-select:focus {
    border-color: #FF5D1B !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 93, 27, 0.15) !important;
}

/* Form Range */
.form-range::-webkit-slider-thumb {
    background-color: #FF5D1B !important;
}

.form-range::-moz-range-thumb {
    background-color: #FF5D1B !important;
}

/* ============================================
   NAVIGATION
   ============================================ */

/* Nav Links */
.nav-link.active {
    color: #FF5D1B !important;
}

.nav-link:hover {
    color: #FF5D1B !important;
}

/* Menu Items */
.menu-link.active {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

.menu-link:hover {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
    transition: all 0.3s ease;
}

/* ============================================
   PAGINATION
   ============================================ */

.page-link {
    color: #FF5D1B !important;
    transition: all 0.3s ease;
}

.page-link:hover {
    background-color: #FFF5F1 !important;
    border-color: #FF5D1B !important;
    color: #E54E0F !important;
}

.page-link.active,
.active > .page-link,
.page-item.active .page-link {
    background-color: #FF5D1B !important;
    border-color: #FF5D1B !important;
    color: #FFFFFF !important;
}

/* ============================================
   CARDS
   ============================================ */

.card-primary {
    border-color: #FF5D1B !important;
}

.card-primary .card-header {
    background-color: #FF5D1B !important;
    color: #FFFFFF !important;
}

/* Card Hover Effects */
.card-hover:hover {
    box-shadow: 0 8px 30px rgba(255, 93, 27, 0.2);
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

/* ============================================
   ALERTS
   ============================================ */

.alert-primary {
    background-color: #FFF5F1 !important;
    border-color: #FF5D1B !important;
    color: #E54E0F !important;
}

/* ============================================
   PROGRESS BARS
   ============================================ */

.progress-bar {
    background-color: #FF5D1B !important;
}

.progress-bar-primary {
    background-color: #FF5D1B !important;
}

/* ============================================
   TABS
   ============================================ */

.nav-tabs .nav-link.active {
    color: #FF5D1B !important;
    border-bottom-color: #FF5D1B !important;
}

.nav-pills .nav-link.active {
    background-color: #FF5D1B !important;
    color: #FFFFFF !important;
}

/* ============================================
   DROPDOWNS
   ============================================ */

.dropdown-item.active,
.dropdown-item:active {
    background-color: #FF5D1B !important;
    color: #FFFFFF !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

/* ============================================
   TOOLTIPS & POPOVERS
   ============================================ */

.tooltip-primary .tooltip-inner {
    background-color: #FF5D1B !important;
}

.popover-primary .popover-header {
    background-color: #FF5D1B !important;
    color: #FFFFFF !important;
}

/* ============================================
   SYMBOLS & ICONS
   ============================================ */

.symbol-primary {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

.symbol-label.bg-primary {
    background-color: #FF5D1B !important;
}

.symbol-label.bg-light-primary {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

/* Icon Colors */
.text-primary i,
.text-primary .ki-duotone,
.text-primary .ki-outline,
.text-primary .ki-solid {
    color: #FF5D1B !important;
}

/* ============================================
   TABLES
   ============================================ */

.table-primary {
    background-color: #FFF5F1 !important;
}

.table-hover tbody tr:hover {
    background-color: #FFF5F1 !important;
}

/* ============================================
   SPINNERS & LOADERS
   ============================================ */

.spinner-border-primary {
    color: #FF5D1B !important;
}

.spinner-grow-primary {
    background-color: #FF5D1B !important;
}

/* ============================================
   CUSTOM COMPONENTS
   ============================================ */

/* Gradient Backgrounds */
.bg-gradient-primary {
    background: linear-gradient(135deg, #FF5D1B 0%, #E54E0F 100%) !important;
}

/* Hover Effects for Cards */
.card-hover-primary:hover {
    border-color: #FF5D1B !important;
    box-shadow: 0 8px 30px rgba(255, 93, 27, 0.25) !important;
    transform: translateY(-5px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animated Buttons */
.btn-animated {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-animated::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-animated:hover::before {
    width: 300px;
    height: 300px;
}

/* ============================================
   METRONIC SPECIFIC OVERRIDES
   ============================================ */

/* Header */
.app-header {
    transition: all 0.3s ease;
}

/* Sidebar */
.app-sidebar .menu-link.active {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
    background-color: #FF5D1B !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #E54E0F !important;
}

/* ============================================
   FRONTEND SPECIFIC STYLES
   ============================================ */

/* Hero Sections */
.hero-section .btn-primary {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(255, 93, 27, 0.3);
}

.hero-section .btn-primary:hover {
    box-shadow: 0 15px 40px rgba(255, 93, 27, 0.4);
    transform: translateY(-3px);
}

/* Service Cards */
.service-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
    box-shadow: 0 20px 50px rgba(255, 93, 27, 0.2);
    transform: translateY(-10px);
}

.service-card:hover .service-icon {
    color: #FF5D1B !important;
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* CTA Sections */
.cta-section {
    background: linear-gradient(135deg, #FF5D1B 0%, #E54E0F 100%);
}

/* Feature Icons */
.feature-icon {
    color: #FF5D1B !important;
    transition: all 0.3s ease;
}

.feature-icon:hover {
    color: #E54E0F !important;
    transform: scale(1.2) rotate(5deg);
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes pulse-primary {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 93, 27, 0.7);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(255, 93, 27, 0);
    }
}

.pulse-primary {
    animation: pulse-primary 2s infinite;
}

/* Glow Effect */
.glow-primary {
    box-shadow: 0 0 20px rgba(255, 93, 27, 0.6);
}

.glow-primary:hover {
    box-shadow: 0 0 30px rgba(255, 93, 27, 0.8);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 991.98px) {
    .btn-primary,
    .btn-outline-primary {
        padding: 0.75rem 1.5rem;
    }

    .hero-section .btn-primary {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .btn-primary,
    .btn-outline-primary {
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.shadow-primary {
    box-shadow: 0 4px 20px rgba(255, 93, 27, 0.3) !important;
}

.shadow-primary-hover:hover {
    box-shadow: 0 8px 30px rgba(255, 93, 27, 0.4) !important;
}

.opacity-hover {
    transition: opacity 0.3s ease;
}

.opacity-hover:hover {
    opacity: 0.8;
}

/* ============================================
   HOVER COLOR CLASSES
   ============================================ */

/* Primary Hover */
.hover-primary {
    transition: all 0.3s ease;
}

.hover-primary:hover {
    color: #FF5D1B !important;
    transform: translateY(-2px);
}

.hover-primary:hover i,
.hover-primary:hover .ki-duotone {
    color: #FF5D1B !important;
}

/* Info Hover */
.hover-info {
    transition: all 0.3s ease;
}

.hover-info:hover {
    color: #0dcaf0 !important;
    transform: translateY(-2px);
}

.hover-info:hover i,
.hover-info:hover .ki-duotone {
    color: #0dcaf0 !important;
}

/* Success Hover */
.hover-success {
    transition: all 0.3s ease;
}

.hover-success:hover {
    color: #50cd89 !important;
    transform: translateY(-2px);
}

.hover-success:hover i,
.hover-success:hover .ki-duotone {
    color: #50cd89 !important;
}

/* Warning Hover */
.hover-warning {
    transition: all 0.3s ease;
}

.hover-warning:hover {
    color: #ffc700 !important;
    transform: translateY(-2px);
}

.hover-warning:hover i,
.hover-warning:hover .ki-duotone {
    color: #ffc700 !important;
}

/* Danger Hover */
.hover-danger {
    transition: all 0.3s ease;
}

.hover-danger:hover {
    color: #f1416c !important;
    transform: translateY(-2px);
}

.hover-danger:hover i,
.hover-danger:hover .ki-duotone {
    color: #f1416c !important;
}

/* ============================================
   APP ENGAGE BUTTONS (Floating Action Buttons)
   ============================================ */

.app-engage-btn {
    transition: all 0.3s ease !important;
}

.app-engage-btn:hover {
    transform: translateX(-5px) scale(1.05) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.app-engage-btn.hover-primary:hover {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
    border-left-color: #FF5D1B !important;
}

.app-engage-btn.hover-info:hover {
    background-color: #f1faff !important;
    color: #0dcaf0 !important;
    border-left-color: #0dcaf0 !important;
}

.app-engage-btn.hover-success:hover {
    background-color: #e8fff3 !important;
    color: #50cd89 !important;
    border-left-color: #50cd89 !important;
}

/* ============================================
   CARD & ELEMENT HOVER EFFECTS
   ============================================ */

/* Elevate on Hover */
.hover-elevate-up {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-elevate-up:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

/* Card with Primary Accent on Hover */
.card.hover-elevate-up:hover {
    border-color: #FF5D1B !important;
    box-shadow: 0 10px 30px rgba(255, 93, 27, 0.2) !important;
}

/* Scale on Hover */
.hover-scale {
    transition: all 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Glow on Hover */
.hover-glow-primary:hover {
    box-shadow: 0 0 25px rgba(255, 93, 27, 0.5) !important;
}

/* ============================================
   LINK STYLES
   ============================================ */

/* Menu Links with Orange Hover */
.menu .menu-link {
    transition: all 0.3s ease;
}

.menu .menu-link:hover:not(.active) {
    background-color: rgba(255, 93, 27, 0.08) !important;
    color: #FF5D1B !important;
}

.menu .menu-link.active {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

/* Footer Links */
.footer a:hover {
    color: #FF5D1B !important;
}

/* Header Links */
.header-menu .menu-link:hover {
    color: #FF5D1B !important;
}

/* ============================================
   SELECT2 CUSTOMIZATION
   ============================================ */

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #FF5D1B !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    border-color: #FF5D1B !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(255, 93, 27, 0.15) !important;
}

.select2-container--default .select2-results__option--selected {
    background-color: #FFF5F1 !important;
    color: #FF5D1B !important;
}

/* ============================================
   SCROLLBAR STYLES
   ============================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    background-color: #FF5D1B !important;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #E54E0F !important;
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #FF5D1B #f5f5f5;
}

/* ============================================
   AVATAR UTILISATEUR (<x-user.avatar> — img.user-avatar)
   - Hors cadre dimensionné : ne dépasse pas le flux (max-width).
   - Dans .symbol, .user-avatar-slot, .agent-table-avatar, .profile-avatar : remplit le cadre (cover).
   ============================================ */

img.user-avatar {
    box-sizing: border-box !important;
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    flex-shrink: 0 !important;
    vertical-align: middle;
}

/* Cadres à taille fixe : l’image occupe tout l’espace */
.symbol > img.user-avatar,
.symbol.symbol-label > img.user-avatar,
.symbol .symbol-label > img.user-avatar,
.agent-table-avatar > img.user-avatar,
.profile-avatar > img.user-avatar,
.user-avatar-slot > img.user-avatar {
    width: 100% !important;
    height: 100% !important;
}

/* Cercle Metronic : coins de l’image alignés sur le masque */
.symbol.symbol-circle img.user-avatar {
    border-radius: 50% !important;
}

/* Conteneur explicite (ex. miniature 80×80 hors .symbol) */
.user-avatar-slot {
    display: block;
    overflow: hidden;
    line-height: 0;
    flex-shrink: 0;
}

/* Cadre Metronic : clip + flex pour que la hauteur % fonctionne */
.symbol:has(> img.user-avatar) {
    overflow: hidden !important;
}

.symbol.symbol-label:has(> img.user-avatar) {
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
}

.symbol > img.user-avatar:first-child,
.symbol.symbol-label > img.user-avatar:first-child,
.symbol .symbol-label > img.user-avatar:first-child {
    flex: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
}

/*
 * Menu utilisateur (#kt_header_user_menu_toggle) : sous #kt_app_header ou #kt_app_top_header,
 * la barre flex ne doit pas étirer l’avatar.
 */
#kt_header_user_menu_toggle .symbol:has(> img.user-avatar) {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    align-self: center !important;
    overflow: hidden !important;
}

/* share/header : symbol dans le bloc [data-kt-menu-trigger].d-flex — 35px strict */
#kt_header_user_menu_toggle [data-kt-menu-trigger].d-flex .symbol:has(> img.user-avatar) {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    max-width: 35px !important;
    max-height: 35px !important;
}

/* top-header / dashboard user : le .symbol est le déclencheur — 35px strict */
#kt_header_user_menu_toggle > .symbol.symbol-35px:has(> img.user-avatar) {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    max-width: 35px !important;
    max-height: 35px !important;
}

/* Dashboard user : symbol-md-45px au-dessus de md */
@media (min-width: 768px) {
    #kt_header_user_menu_toggle .symbol.symbol-md-45px:has(> img.user-avatar) {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
        max-width: 45px !important;
        max-height: 45px !important;
    }

}

/* Menu déroulant compte (sous #kt_header_user_menu_toggle) : avatar 50px */
#kt_header_user_menu_toggle .menu .symbol.symbol-50px:has(> img.user-avatar) {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
}

/* ---------- Profil (pages contenu) ---------- */

/* Metronic image-input : photo recadrée dans le cadre 125px */
.image-input .image-input-wrapper {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
}

/*
 * Hero profil Metronic (.symbol-100px.symbol-lg-160px.symbol-fixed) :
 * imposer la taille sur le .symbol pour éviter que l’image (intrinsic width)
 * n’étire le flex et ne crée un énorme vide avant le texte.
 */
#kt_app_content .symbol.symbol-100px.symbol-lg-160px.symbol-fixed {
    flex-shrink: 0 !important;
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
}

@media (min-width: 992px) {
    #kt_app_content .symbol.symbol-100px.symbol-lg-160px.symbol-fixed {
        width: 160px !important;
        height: 160px !important;
        min-width: 160px !important;
        min-height: 160px !important;
        max-width: 160px !important;
        max-height: 160px !important;
    }
}

#kt_app_content .symbol.symbol-100px:has(> img.user-avatar):not(.symbol-circle) {
    flex-shrink: 0 !important;
    align-self: flex-start !important;
}

/*
 * Dashboard : tailles Metronic (.symbol-35px, .symbol-45px, .symbol-50px, etc.)
 * Sans dimensions explicites, l’image (large intrinsic width) étire la grille flex.
 */
#kt_app_content .symbol.symbol-35px:has(> img.user-avatar),
#kt_app_content .symbol.symbol-45px:has(> img.user-avatar),
#kt_app_content .symbol.symbol-50px:has(> img.user-avatar) {
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#kt_app_content .symbol.symbol-35px:has(> img.user-avatar) {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
    max-width: 35px !important;
    max-height: 35px !important;
}

#kt_app_content .symbol.symbol-45px:has(> img.user-avatar) {
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
}

#kt_app_content .symbol.symbol-50px:has(> img.user-avatar) {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
}

/* ============================================
   SCROLLABLE MODALS
   ============================================

   Bootstrap fait de `.modal-body` le conteneur défilant de
   `.modal-dialog-scrollable` — mais uniquement s'il est un *flex item* de
   `.modal-content`. Or la plupart de nos formulaires enveloppent header, body
   et footer dans un <form>, qui devient alors l'unique enfant flex : le
   `.modal-body` redevient un bloc ordinary, `flex: 1 1 auto` et
   `overflow-y: auto` n'ont plus d'effet, et le contenu plus haut que la
   fenêtre est *rogné* par le `overflow: hidden` du `.modal-content` sans
   aucun moyen d'y accéder.

   On rétablit la chaîne de défilement en faisant du <form> un conteneur
   flex colonne qui peut rétrécir. `min-height: 0` est indispensable : sans
   lui la taille automatique minimale d'un flex item le empêche de descendre
   sous la hauteur de son contenu, et le défilement ne se produit toujours
   pas. */

.modal-dialog-scrollable > .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.modal-dialog-scrollable > .modal-content > form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Sur petit écran, un modal de saisie à onglets ne laisse rien voir du
   formulaire : on lui donne toute la hauteur disponible. */
@media (max-width: 767.98px) {
    .modal-dialog-scrollable > .modal-content > form > .modal-header,
    .modal-dialog-scrollable > .modal-content > form > .modal-footer {
        position: sticky;
        z-index: 3;
        background-color: var(--kt-modal-bg, #fff);
    }

    .modal-dialog-scrollable > .modal-content > form > .modal-header {
        top: 0;
    }

    .modal-dialog-scrollable > .modal-content > form > .modal-footer {
        bottom: 0;
    }
}

/* ============================================
   STICKY HEADERS INSIDE A SCROLLING MODAL BODY
   ============================================

   Bandeau récapitulatif + navigation par onglets du modal de facture
   fournisseur. Ils vivent dans `.modal-body`, donc ils défilent avec le
   formulaire ; sans `position: sticky` l'utilisateur ne voit plus ses totaux
   ni ses onglets dès la deuxième ligne saisie.

   Les marges négatives annulent le padding du `.modal-body` (2rem sur les
   côtés, 1.5rem en haut via `.px-lg-8 .py-lg-6`) pour que la barre affleure
   le bord du modal, et le background doit être opaque : `.bg-gray-50` n'existe
   pas dans le bundle Metronic, le corps du modal est donc transparent et le
   contenu défilerait « au travers » de la barre. */

/* `.px-lg-8` / `.py-lg-6` s'appliquent sans media query dans le bundle
   Metronic (2rem / 1.5rem) : les marges ci-dessus valent donc partout. */
.sif-sticky-head {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: -1.5rem -2rem 1.5rem;
    padding: 1.5rem 2rem 0.75rem;
    background-color: var(--bs-modal-bg, #fff);
    box-shadow: 0 6px 8px -8px rgba(0, 0, 0, 0.15);
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .btn-primary {
        background-color: #FF5D1B !important;
        color: #FFFFFF !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}