/* Global styles for dark-themed pages */ body { background-color: #212529; color: #fff; } /* Admin page */ .admin-box { max-width: 700px; margin: 5% auto; padding: 2rem; background: #343a40; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); text-align: center; } .admin-box img { max-height: 50px; margin-bottom: 1rem; } /* Tables and buttons */ table td, table th { vertical-align: middle; } .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; } /* Dashboard specific styles */ /* Apply this only when */ body.dashboard { background: #f8f9fa; color: #212529; } .header-metrics .card { min-height: 100px; } /* Chat widget */ #chat-widget { border: 1px solid #dee2e6; padding: 1rem; position: relative; margin-bottom: 2rem; background: #fff; } #chat-widget img { position: absolute; top: 1rem; right: 1rem; } #chat-messages { max-height: 250px; overflow-y: auto; margin-bottom: 1rem; } .msg { padding: 0.5rem; border-radius: 0.5rem; margin-bottom: 0.5rem; max-width: 70%; } .msg.user { background: #0d6efd; color: #fff; margin-left: auto; } .msg.bot { background: #e9ecef; color: #000; margin-right: auto; } /* Login and Register pages */ .login-box, .register-box { max-width: 400px; margin: 10% auto; padding: 2rem; background: #343a40; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); text-align: center; } .login-box img, .register-box img { max-height: 50px; margin-bottom: 1rem; } .kpi-card { transition: box-shadow 0.2s, background 0.2s; } .kpi-card:hover { box-shadow: 0 0 0 2px #f48120, 0 2px 16px rgba(244,129,32,0.13); background: linear-gradient(0deg, #fff6ed 0 60%, #fff 100%); border-color: #f48120 !important; cursor: pointer; } .chat-card { /* change left border to #f48120 */ border-left: 4px solid #f48120; } .chat-card .card-header { /* change header background to a light orange */ background-color: #fff2e6; } /* Override chat-card header with AI Insights orange and white text */ .chat-card .card-header { background-color: #f48120 !important; color: #fff !important; } /* Tab hover and active color matching hover orange */ .nav-tabs .nav-link { transition: color 0.2s, border-color 0.2s; } .nav-tabs .nav-link:hover { color: #f48120 !important; border-color: #f48120 !important; } .nav-tabs .nav-link.active { color: #f48120 !important; border-color: #f48120 !important; background-color: #fff; } /* Chat thread bubbles */ #ai-chat-thread { display: flex; flex-direction: column; gap: 0.5rem; } /* Base bubble styling */ .message { max-width: 75%; padding: 0.75rem 1rem; border-radius: 0.75rem; line-height: 1.4; word-wrap: break-word; } /* User bubbles aligned right */ .message.user { align-self: flex-end; background-color: #0d6efd; /* Bootstrap primary */ color: #fff; } /* Bot bubbles aligned left */ .message.bot { align-self: flex-start; background-color: #f1f3f5; /* Light grey */ color: #212529; /* Base text color */ } /* Highlight bold within bot messages */ .message.bot strong { color: #0d6efd; } /* Style the card header to match AI Insights tab */ .chat-card .card-header { background-color: #f48120 !important; color: #fff !important; }