/* =========================================
   BOUTONS
   ========================================= */
.btn-primary {
    background-color: var(--color-primary); color: white; padding: 10px 15px;
    border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background-color 0.2s;
}
.btn-primary:hover { background-color: #0099cc; }

.btn-secondary {
    background-color: #6c757d; color: white; padding: 10px 15px;
    border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background-color 0.2s; margin-left: 10px;
}
.btn-secondary:hover { background-color: #5a6268; }

.btn-outline {
    background-color: white; color: var(--color-primary); border: 1px solid var(--color-primary);
    padding: 10px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; transition: all 0.2s;
}
.btn-outline:hover { background-color: #f0faff; border-color: #0099cc; color: #0099cc; }

.btn-new { 
    background-color: var(--color-primary); color: white; border: none; padding: 8px 15px; 
    border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 14px; display: flex; align-items: center; gap: 5px; transition: background-color 0.2s; 
}
.btn-new:hover { background-color: #0099cc; }

/* =========================================
   INPUTS & FORMULAIRES
   ========================================= */
.form-group { display: flex; flex-direction: column; margin-bottom: 10px; }
.form-group label { font-size: 13px; font-weight: 600; margin-bottom: 5px; color: #444; }
.form-group input[type="text"], .form-group input[type="tel"], .form-group input[type="email"], 
.form-group input[type="date"], .form-group input[type="number"], .form-group select, .form-group textarea {
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px;
}
.form-group input[readonly] { background-color: #eee; }
.form-group textarea { resize: vertical; }

/* Groupe Téléphone (+33) */
.phone-input-group { display: flex; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; }
.country-select { border: none; background-color: #f4f6f8; padding: 0 10px; font-size: 14px; border-right: 1px solid #ccc; outline: none; width: auto;}
.phone-input-group input { border: none !important; flex-grow: 1; box-shadow: none !important; }

/* Switch Toggle (Client Pro) */
.switch-label { position: relative; display: inline-flex; align-items: center; cursor: pointer; gap: 10px; }
.switch-label input { opacity: 0; width: 0; height: 0; }
.slider { position: relative; display: inline-block; width: 40px; height: 20px; background-color: #ccc; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--color-primary); }
input:checked + .slider:before { transform: translateX(20px); }
.label-text { font-size: 13px; font-weight: 600; color: #333; }

/* Checkbox & Divers */
.checkbox-group { flex-direction: row; align-items: center; gap: 10px; }
.checkbox-group input { width: auto; }
.input-with-button { display: flex; gap: 5px; }
.input-with-button input { flex-grow: 1; }
.btn-icon { flex-shrink: 0; width: 38px; height: 38px; background-color: var(--color-light-bg); border: 1px solid #ccc; color: #333; border-radius: 4px; cursor: pointer; }
.btn-icon:hover { background-color: #e0e0e0; }

/* =========================================
   DROPDOWNS & NOTIFICATIONS
   ========================================= */
.dropdown-container { position: relative; display: inline-block; }
.btn-dropdown { background-color: white; border: 1px solid #ccc; padding: 8px 15px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #333; }
.dropdown-menu { 
    position: absolute; top: 100%; right: 0; background-color: white; border: 1px solid #ccc; border-radius: 4px; 
    list-style: none; padding: 5px 0; min-width: 150px; z-index: 1000; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin-top: 5px; display: none;
}
.dropdown-container.open .dropdown-menu { display: block; }
.dropdown-menu li a { display: block; padding: 8px 15px; text-decoration: none; color: #333; font-size: 14px; }
.dropdown-menu li a:hover { background-color: var(--color-light-bg); }

.notification-container .btn-notification { background: none !important; border: none !important; font-size: 24px; padding: 0; display: flex; align-items: center; justify-content: center; width: 30px; margin-right: 5px; color: #333; }
.notification-container .btn-notification:hover { color: var(--color-primary); }
.notification-badge { position: absolute; top: -5px; right: -10px; background-color: var(--color-danger); color: white; border-radius: 50%; padding: 2px 5px; font-size: 10px; border: 2px solid white; z-index: 1100; }
.notification-container .dropdown-menu.notification-dropdown { right: auto; left: -180px; min-width: 300px; }
.notification-header, .notification-tabs { display: flex; align-items: center; padding: 10px 15px; border-bottom: 1px solid #eee; }
.notification-header { justify-content: space-between; }
.notification-list { list-style: none; padding: 0; }
.notification-list li { padding: 10px 15px; border-bottom: 1px solid #eee; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }

/* =========================================
   BARRE DE FILTRES & AUTOCOMPLETE
   ========================================= */
.filter-stats-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 0 10px 0; width: 100%; flex-wrap: wrap; }
.filter-area, .menu-area { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-bottom: 10px; }
.input-client-name { padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 120px; font-size: 14px; }
.btn-filter, .btn-sort { background-color: white; border: 1px solid #ccc; color: #666; padding: 8px 12px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 14px; }
.btn-filter:hover, .btn-sort:hover { background-color: #eee; }

.autocomplete-list { border: 1px solid #ccc; border-top: none; border-radius: 0 0 4px 4px; background: white; max-height: 200px; overflow-y: auto; position: relative; z-index: 2010; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.autocomplete-item { padding: 10px; font-size: 14px; cursor: pointer; }
.autocomplete-item:hover { background-color: var(--color-light-bg); }
.autocomplete-item strong { color: var(--color-primary); }