/* =====================================================
   AUDIT PLATFORM YOUTELL — CSS Principal
   Chemin production : d:\audit\sources\assets\css\app.css
   ===================================================== */

:root {
    --primary-dark: #1a1a2e;
    --accent: #e94560;
    --sidebar-width: 250px;
}

/* === Layout === */
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #f4f5f7; }
.sidebar { width: var(--sidebar-width); min-height: 100vh; position: fixed; left: 0; top: 0; z-index: 1000; overflow-y: auto; transition: transform 0.3s; }
.sidebar .nav-link { padding: 8px 16px; border-radius: 6px; margin: 2px 8px; font-size: 14px; transition: background 0.2s; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background: rgba(233, 69, 96, 0.2); color: #e94560 !important; }
.sidebar .nav-link i { width: 20px; text-align: center; margin-right: 8px; }
.main-content { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 100; }

/* === Cards === */
.card { border: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-radius: 8px; transition: box-shadow 0.2s; }
.card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.hover-shadow:hover { box-shadow: 0 4px 12px rgba(0,0,0,.15) !important; transform: translateY(-1px); }
.cursor-pointer { cursor: pointer; }

/* === Tables === */
.table th { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.table td { vertical-align: middle; font-size: 14px; }
.table-hover tbody tr:hover { background-color: rgba(233, 69, 96, 0.04); }

/* === Badges === */
.badge { font-weight: 500; letter-spacing: 0.3px; }

/* === Chatbot widget flottant === */
.chatbot-fab { position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 56px; height: 56px; box-shadow: 0 4px 12px rgba(233,69,96,.4); }
.chatbot-widget { position: fixed; bottom: 90px; right: 24px; width: 380px; height: 500px; z-index: 9999; background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.2); display: flex; flex-direction: column; overflow: hidden; }
.chatbot-header { border-radius: 12px 12px 0 0; cursor: move; }
.chatbot-body { flex: 1; overflow-y: auto; padding: 12px; background: #f8f9fa; }
.chatbot-input { background: #fff; }
.chat-bubble { word-wrap: break-word; font-size: 14px; line-height: 1.5; }

/* === Responsive === */
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; width: 100%; }
    .chatbot-widget { width: calc(100% - 32px); right: 16px; bottom: 80px; }
}

/* === Auth pages === */
.bg-dark .form-control.bg-secondary { border-radius: 6px; }
.bg-dark .form-control.bg-secondary:focus { box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.25); border-color: var(--accent); }

/* === Progress bars === */
.progress-bar { transition: width 0.6s ease; }

/* === Score display === */
.score-display { font-size: 48px; font-weight: 700; }

/* === DataTables overrides === */
.dataTables_wrapper .dataTables_filter input { border-radius: 6px; border: 1px solid #dee2e6; padding: 4px 8px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* === Print === */
@media print {
    .sidebar, .topbar, .chatbot-fab, .chatbot-widget, footer { display: none !important; }
    .main-content { margin-left: 0 !important; width: 100% !important; }
}

/* === Animations === */
.fade-in { animation: fadeIn 0.3s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* === Form validation === */
.form-control:invalid:not(:placeholder-shown) { border-color: #e74c3c; }
.form-control:valid:not(:placeholder-shown) { border-color: #27ae60; }