1155 lines
26 KiB
CSS
1155 lines
26 KiB
CSS
/* Anti-flash: aplicado antes do JS (via script inline no <head>) */
|
|
html.dark body { background: #1a1a2e; color: #e0e0e0; }
|
|
|
|
/* Override de variáveis CSS para dark mode */
|
|
body.dark-mode {
|
|
--surface: #16213e;
|
|
--surface-2: #1a1a2e;
|
|
--surface-3: #0f0f23;
|
|
--border: #0f3460;
|
|
--text-primary: #e0e0e0;
|
|
--text-secondary: #d1d5db;
|
|
--text-muted: #9ca3af;
|
|
--text-faint: #6b7280;
|
|
--primary: #818cf8;
|
|
--primary-dark: #667eea;
|
|
}
|
|
|
|
/* ===== DARK MODE - Estilos completos ===== */
|
|
body.dark-mode {
|
|
background: #1a1a2e;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/* ===== LAYOUT GERAL ===== */
|
|
body.dark-mode .container,
|
|
body.dark-mode .main-content,
|
|
body.dark-mode .page-wrapper,
|
|
body.dark-mode .login-container,
|
|
body.dark-mode .dashboard-container,
|
|
body.dark-mode .client-list-container,
|
|
body.dark-mode .client-detail-container,
|
|
body.dark-mode .chat-container,
|
|
body.dark-mode .settings-container,
|
|
body.dark-mode .admin-conv-container,
|
|
body.dark-mode .routes-container,
|
|
body.dark-mode .main {
|
|
background: #1a1a2e;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/* ===== SIDEBAR ===== */
|
|
body.dark-mode .sidebar {
|
|
background: #16213e;
|
|
border-right: 1px solid #0f3460;
|
|
}
|
|
body.dark-mode .sidebar .nav-link,
|
|
body.dark-mode .sidebar-nav a {
|
|
color: #b0b0b0;
|
|
}
|
|
body.dark-mode .sidebar .nav-link:hover,
|
|
body.dark-mode .sidebar-nav a:hover,
|
|
body.dark-mode .sidebar .nav-link.active,
|
|
body.dark-mode .sidebar-nav a.active {
|
|
background: #0f3460;
|
|
color: #fff;
|
|
}
|
|
body.dark-mode .sidebar .empresa-nome,
|
|
body.dark-mode .sidebar-brand h2,
|
|
body.dark-mode .sidebar-brand span {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .sidebar-brand {
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
body.dark-mode .sidebar-footer {
|
|
border-top: 1px solid #0f3460;
|
|
}
|
|
body.dark-mode .sidebar-footer a {
|
|
color: rgba(255,255,255,0.6);
|
|
}
|
|
body.dark-mode .sidebar-footer a:hover {
|
|
background: rgba(255,255,255,0.1);
|
|
color: #fca5a5;
|
|
}
|
|
body.dark-mode .nav-label {
|
|
color: #888;
|
|
}
|
|
|
|
/* ===== TOPBAR ===== */
|
|
body.dark-mode .topbar,
|
|
body.dark-mode .header {
|
|
background: #16213e;
|
|
border-bottom: 1px solid #0f3460;
|
|
}
|
|
body.dark-mode .topbar .topbar-title,
|
|
body.dark-mode .topbar-title {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .topbar .user-info {
|
|
color: #c0c0c0;
|
|
}
|
|
|
|
/* ===== CARDS ===== */
|
|
body.dark-mode .card {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
color: #e0e0e0;
|
|
box-shadow: none;
|
|
}
|
|
body.dark-mode .card h3,
|
|
body.dark-mode .card h2,
|
|
body.dark-mode .card h1 {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .card p {
|
|
color: #c0c0c0;
|
|
}
|
|
|
|
/* ===== TABLES ===== */
|
|
body.dark-mode table {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode table thead th,
|
|
body.dark-mode table th {
|
|
background: #0f3460;
|
|
color: #fff;
|
|
border-color: #1a1a2e;
|
|
}
|
|
body.dark-mode table tbody td,
|
|
body.dark-mode table td {
|
|
background: #16213e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode table tbody tr:hover td {
|
|
background: #1a2744;
|
|
}
|
|
body.dark-mode table tr:nth-child(even) td {
|
|
background: #1a1a2e;
|
|
}
|
|
|
|
/* ===== FORMS ===== */
|
|
body.dark-mode input,
|
|
body.dark-mode textarea,
|
|
body.dark-mode select,
|
|
body.dark-mode .form-control,
|
|
body.dark-mode input[type="text"],
|
|
body.dark-mode input[type="password"],
|
|
body.dark-mode input[type="email"],
|
|
body.dark-mode input[type="number"],
|
|
body.dark-mode input[type="search"],
|
|
body.dark-mode textarea.form-control {
|
|
background: #1a1a2e;
|
|
border: 1px solid #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode input:focus,
|
|
body.dark-mode textarea:focus,
|
|
body.dark-mode select:focus,
|
|
body.dark-mode .form-control:focus {
|
|
background: #1a2744;
|
|
border-color: #533483;
|
|
color: #fff;
|
|
box-shadow: 0 0 0 0.2rem rgba(83, 52, 131, 0.25);
|
|
}
|
|
body.dark-mode label {
|
|
color: #c0c0c0;
|
|
}
|
|
body.dark-mode ::placeholder {
|
|
color: #666;
|
|
}
|
|
|
|
/* ===== BUTTONS ===== */
|
|
body.dark-mode .btn-primary {
|
|
background: #667eea;
|
|
border-color: #667eea;
|
|
color: #fff;
|
|
}
|
|
body.dark-mode .btn-primary:hover {
|
|
background: #5a67d8;
|
|
border-color: #5a67d8;
|
|
}
|
|
body.dark-mode .btn-secondary {
|
|
background: #0f3460;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .btn-secondary:hover {
|
|
background: #1a4a7a;
|
|
}
|
|
body.dark-mode .btn-copy,
|
|
body.dark-mode .btn {
|
|
background: #0f3460;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .btn-copy:hover,
|
|
body.dark-mode .btn:hover {
|
|
background: #1a4a7a;
|
|
}
|
|
body.dark-mode .btn-danger {
|
|
background: #8b0000;
|
|
border-color: #8b0000;
|
|
}
|
|
body.dark-mode .btn-success {
|
|
background: #006400;
|
|
border-color: #006400;
|
|
}
|
|
body.dark-mode .btn-warning {
|
|
background: #8b6914;
|
|
border-color: #8b6914;
|
|
color: #fff;
|
|
}
|
|
body.dark-mode .btn-info {
|
|
background: #0f3460;
|
|
border-color: #0f3460;
|
|
color: #fff;
|
|
}
|
|
body.dark-mode .btn-outline-secondary {
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .btn-outline-secondary:hover {
|
|
background: #0f3460;
|
|
color: #fff;
|
|
}
|
|
|
|
/* ===== LINKS ===== */
|
|
body.dark-mode a {
|
|
color: #7b68ee;
|
|
}
|
|
body.dark-mode a:hover {
|
|
color: #9b8fff;
|
|
}
|
|
|
|
/* ===== BADGES ===== */
|
|
body.dark-mode .badge {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .badge-secondary,
|
|
body.dark-mode .badge-light {
|
|
background: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .badge-success {
|
|
background: #006400;
|
|
}
|
|
body.dark-mode .badge-warning {
|
|
background: #8b6914;
|
|
}
|
|
body.dark-mode .badge-danger {
|
|
background: #8b0000;
|
|
}
|
|
body.dark-mode .badge-info {
|
|
background: #0f3460;
|
|
}
|
|
body.dark-mode .badge-primary {
|
|
background: #533483;
|
|
}
|
|
|
|
/* ===== MODAL ===== */
|
|
body.dark-mode .modal,
|
|
body.dark-mode .modal-box,
|
|
body.dark-mode .modal-content,
|
|
body.dark-mode .modal-overlay > div {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .modal-header {
|
|
background: #0f3460;
|
|
border-bottom: 1px solid #1a1a2e;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .modal-footer {
|
|
background: #16213e;
|
|
border-top: 1px solid #0f3460;
|
|
}
|
|
body.dark-mode .close,
|
|
body.dark-mode .modal-header .close {
|
|
color: #e0e0e0;
|
|
text-shadow: none;
|
|
opacity: 0.8;
|
|
}
|
|
body.dark-mode .modal-overlay {
|
|
background: rgba(0,0,0,0.7);
|
|
}
|
|
body.dark-mode .modal-body {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/* ===== DROPDOWN ===== */
|
|
body.dark-mode .dropdown-menu {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
}
|
|
body.dark-mode .dropdown-item {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .dropdown-item:hover {
|
|
background: #0f3460;
|
|
color: #fff;
|
|
}
|
|
|
|
/* ===== LIST GROUP ===== */
|
|
body.dark-mode .list-group-item {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .list-group-item:hover {
|
|
background: #1a2744;
|
|
}
|
|
body.dark-mode .list-group-item.active {
|
|
background: #533483;
|
|
border-color: #533483;
|
|
}
|
|
|
|
/* ===== SCROLLBAR ===== */
|
|
body.dark-mode ::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
body.dark-mode ::-webkit-scrollbar-track {
|
|
background: #1a1a2e;
|
|
}
|
|
body.dark-mode ::-webkit-scrollbar-thumb {
|
|
background: #0f3460;
|
|
border-radius: 4px;
|
|
}
|
|
body.dark-mode ::-webkit-scrollbar-thumb:hover {
|
|
background: #533483;
|
|
}
|
|
|
|
/* ===== CHAT ESPECÍFICO ===== */
|
|
body.dark-mode .sidebar-left {
|
|
background: #16213e;
|
|
border-right: 1px solid #0f3460;
|
|
}
|
|
body.dark-mode .sidebar-left .nav-tabs a {
|
|
color: #888;
|
|
}
|
|
body.dark-mode .sidebar-left .nav-tabs a:hover {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .sidebar-left .nav-tabs a.active {
|
|
color: #7b68ee;
|
|
border-bottom-color: #7b68ee;
|
|
}
|
|
body.dark-mode .sidebar-left .search-box input {
|
|
background: #1a1a2e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .conv-item {
|
|
border-bottom: 1px solid #0f3460;
|
|
}
|
|
body.dark-mode .conv-item:hover {
|
|
background: #1a2744;
|
|
}
|
|
body.dark-mode .conv-item .conv-nome {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .conv-item .conv-ultima {
|
|
color: #888;
|
|
}
|
|
body.dark-mode .conv-item .conv-status {
|
|
color: #666;
|
|
}
|
|
|
|
/* Chat center */
|
|
body.dark-mode .chat-center {
|
|
background: #1a1a2e;
|
|
}
|
|
body.dark-mode .chat-header {
|
|
background: #16213e;
|
|
border-bottom: 1px solid #0f3460;
|
|
}
|
|
body.dark-mode .chat-header .info h3 {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .chat-header .info span {
|
|
color: #888;
|
|
}
|
|
body.dark-mode .chat-header .actions button {
|
|
background: #0f3460;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .chat-header .actions button:hover {
|
|
background: #1a4a7a;
|
|
}
|
|
body.dark-mode .chat-header .actions .btn-finalizar {
|
|
background: #8b0000;
|
|
border-color: #8b0000;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Messages area */
|
|
body.dark-mode .messages-area {
|
|
background: #1a1a2e;
|
|
}
|
|
body.dark-mode .msg.cliente {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .msg.usuario {
|
|
background: #533483;
|
|
color: #fff;
|
|
}
|
|
body.dark-mode .msg.sistema {
|
|
background: #0f3460;
|
|
color: #b0c4de;
|
|
}
|
|
body.dark-mode .msg.privada {
|
|
background: #3a2e0a;
|
|
color: #ffd700;
|
|
}
|
|
body.dark-mode .msg .msg-time {
|
|
color: #888;
|
|
}
|
|
body.dark-mode .msg .msg-user {
|
|
color: #7b68ee;
|
|
}
|
|
|
|
/* Chat input */
|
|
body.dark-mode .chat-input {
|
|
background: #16213e;
|
|
border-top: 1px solid #0f3460;
|
|
}
|
|
body.dark-mode .chat-input textarea {
|
|
background: #1a1a2e;
|
|
border: 1px solid #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .chat-input .btn-enviar {
|
|
background: #533483;
|
|
color: #fff;
|
|
}
|
|
body.dark-mode .chat-input .btn-midia {
|
|
background: #0f3460;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .chat-input .btn-midia:hover {
|
|
background: #1a4a7a;
|
|
}
|
|
body.dark-mode .chat-input .privada-toggle {
|
|
background: #0f3460;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .chat-input .privada-toggle.ativa {
|
|
background: #3a2e0a;
|
|
border-color: #f59e0b;
|
|
color: #ffd700;
|
|
}
|
|
body.dark-mode .chat-input .btn-audio {
|
|
background: #0f3460;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .chat-input .btn-audio:hover {
|
|
background: #1a4a7a;
|
|
}
|
|
body.dark-mode .chat-input .btn-audio.recording {
|
|
background: #4a0a0a;
|
|
border-color: #ef4444;
|
|
color: #ef4444;
|
|
}
|
|
|
|
/* Chat right panel */
|
|
body.dark-mode .sidebar-right .acoes button {
|
|
background: #0f3460;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .sidebar-right .acoes button:hover {
|
|
background: #1a4a7a;
|
|
}
|
|
body.dark-mode .sidebar-right .labels-section .label-tag {
|
|
color: #fff;
|
|
}
|
|
body.dark-mode .sidebar-right select {
|
|
background: #1a1a2e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .sidebar-right {
|
|
background: #16213e;
|
|
border-left: 1px solid #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .sidebar-right .header {
|
|
border-bottom: 1px solid #0f3460;
|
|
}
|
|
body.dark-mode .sidebar-right .header h3 {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .sidebar-right .cliente-foto {
|
|
background: #0f3460;
|
|
color: #888;
|
|
}
|
|
body.dark-mode .sidebar-right .info-section {
|
|
border-bottom: 1px solid #0f3460;
|
|
}
|
|
body.dark-mode .sidebar-right .info-section .label {
|
|
color: #888;
|
|
}
|
|
body.dark-mode .sidebar-right .info-section .value {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .sidebar-right .info-section .inadimplente {
|
|
color: #ff6b6b;
|
|
}
|
|
body.dark-mode .sidebar-right .info-section .adimplente {
|
|
color: #4ade80;
|
|
}
|
|
body.dark-mode .right-panel {
|
|
background: #16213e;
|
|
border-left: 1px solid #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .right-panel-section {
|
|
border-bottom: 1px solid #0f3460;
|
|
}
|
|
|
|
/* ===== CLIENT DETAIL ===== */
|
|
body.dark-mode .client-header {
|
|
background: #16213e;
|
|
border-bottom: 1px solid #0f3460;
|
|
}
|
|
body.dark-mode .client-header .client-header-info h1 {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .client-header .client-header-info span {
|
|
color: #888;
|
|
}
|
|
body.dark-mode .tab-btn {
|
|
background: #1a1a2e;
|
|
border: 1px solid #0f3460;
|
|
border-bottom: none;
|
|
color: #888;
|
|
}
|
|
body.dark-mode .tab-btn:hover {
|
|
background: #16213e;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .tab-btn.active {
|
|
background: #16213e;
|
|
color: #7b68ee;
|
|
border-bottom: 2px solid #7b68ee;
|
|
}
|
|
body.dark-mode .tab-content {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .info-grid .info-item {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .info-grid .info-item .label {
|
|
color: #888;
|
|
}
|
|
body.dark-mode .info-grid .info-item .value {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .carnes-filters {
|
|
background: #16213e;
|
|
}
|
|
body.dark-mode .carnes-filters button {
|
|
background: #0f3460;
|
|
color: #e0e0e0;
|
|
border-color: #0f3460;
|
|
}
|
|
body.dark-mode .carnes-filters button.active {
|
|
background: #533483;
|
|
border-color: #533483;
|
|
}
|
|
|
|
/* ===== SETTINGS ===== */
|
|
body.dark-mode .tabs-container {
|
|
background: #16213e;
|
|
}
|
|
body.dark-mode .tabs-container .tab {
|
|
background: #1a1a2e;
|
|
border: 1px solid #0f3460;
|
|
color: #888;
|
|
}
|
|
body.dark-mode .tabs-container .tab:hover {
|
|
background: #16213e;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .tabs-container .tab.active {
|
|
background: #16213e;
|
|
color: #7b68ee;
|
|
border-bottom: 2px solid #7b68ee;
|
|
}
|
|
body.dark-mode .tab-panel {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/* ===== NAV TABS (Bootstrap) ===== */
|
|
body.dark-mode .nav-tabs {
|
|
border-bottom-color: #0f3460;
|
|
}
|
|
body.dark-mode .nav-tabs .nav-link {
|
|
color: #888;
|
|
border-color: transparent;
|
|
}
|
|
body.dark-mode .nav-tabs .nav-link:hover {
|
|
background: #16213e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .nav-tabs .nav-link.active {
|
|
background: #16213e;
|
|
color: #7b68ee;
|
|
border-color: #0f3460;
|
|
border-bottom-color: #16213e;
|
|
}
|
|
body.dark-mode .tab-content {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
border-top: none;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/* ===== LOGIN ===== */
|
|
body.dark-mode .login-container {
|
|
background: #1a1a2e;
|
|
}
|
|
body.dark-mode .login-header {
|
|
background: transparent;
|
|
}
|
|
body.dark-mode .login-header h1 {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .login-header p {
|
|
color: #888;
|
|
}
|
|
body.dark-mode .login-box,
|
|
body.dark-mode .login-card {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.5);
|
|
}
|
|
body.dark-mode .login-box h2,
|
|
body.dark-mode .login-card h2 {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/* ===== PAGINATION ===== */
|
|
body.dark-mode .page-link {
|
|
background: #16213e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .page-item.active .page-link {
|
|
background: #533483;
|
|
border-color: #533483;
|
|
}
|
|
body.dark-mode .page-item.disabled .page-link {
|
|
background: #1a1a2e;
|
|
color: #666;
|
|
}
|
|
|
|
/* ===== ALERTS ===== */
|
|
body.dark-mode .alert {
|
|
background: #16213e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .alert-success {
|
|
background: #0a2e0a;
|
|
border-color: #006400;
|
|
color: #90ee90;
|
|
}
|
|
body.dark-mode .alert-danger {
|
|
background: #2e0a0a;
|
|
border-color: #8b0000;
|
|
color: #ff9090;
|
|
}
|
|
body.dark-mode .alert-warning {
|
|
background: #2e2a0a;
|
|
border-color: #8b6914;
|
|
color: #ffd700;
|
|
}
|
|
body.dark-mode .alert-info {
|
|
background: #0a1a2e;
|
|
border-color: #0f3460;
|
|
color: #87ceeb;
|
|
}
|
|
|
|
/* ===== MISC ===== */
|
|
body.dark-mode .text-muted {
|
|
color: #888;
|
|
}
|
|
body.dark-mode hr {
|
|
border-color: #0f3460;
|
|
}
|
|
body.dark-mode pre,
|
|
body.dark-mode code {
|
|
background: #1a1a2e;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .page-title,
|
|
body.dark-mode .section-title {
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .back-btn {
|
|
color: #7b68ee;
|
|
}
|
|
body.dark-mode .back-btn:hover {
|
|
color: #9b8fff;
|
|
}
|
|
body.dark-mode .client-link {
|
|
color: #7b68ee;
|
|
}
|
|
body.dark-mode .loading {
|
|
color: #888;
|
|
}
|
|
body.dark-mode .spinner {
|
|
border-top-color: #7b68ee;
|
|
}
|
|
body.dark-mode .empty-state {
|
|
color: #888;
|
|
}
|
|
body.dark-mode .empty-state h3 {
|
|
color: #c0c0c0;
|
|
}
|
|
body.dark-mode .empresa-tag {
|
|
background: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/* Token box */
|
|
body.dark-mode .token-box {
|
|
background: #1a1a2e;
|
|
border: 1px solid #0f3460;
|
|
color: #e0e0e0;
|
|
font-family: monospace;
|
|
}
|
|
|
|
/* Status badges */
|
|
body.dark-mode .status-badge {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/* ===== TOGGLE SWITCH DARK MODE ===== */
|
|
.dark-mode-toggle {
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
border: 1px solid #ccc;
|
|
font-size: 13px;
|
|
color: #555;
|
|
transition: all 0.3s;
|
|
}
|
|
.dark-mode-toggle:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
body.dark-mode .dark-mode-toggle {
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
background: transparent;
|
|
}
|
|
body.dark-mode .dark-mode-toggle:hover {
|
|
background: #0f3460;
|
|
}
|
|
|
|
/* ===== NOVOS ELEMENTOS - main.css ===== */
|
|
|
|
/* Topbar */
|
|
body.dark-mode .topbar {
|
|
background: #16213e;
|
|
border-bottom: 1px solid #0f3460;
|
|
box-shadow: none;
|
|
}
|
|
body.dark-mode .topbar-title { color: #e0e0e0; }
|
|
body.dark-mode .user-name { color: #c0c0c0; }
|
|
body.dark-mode .status-badge.online { background: #0a2e0a; color: #4ade80; }
|
|
|
|
/* Cards - main.css */
|
|
body.dark-mode .card {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
box-shadow: none;
|
|
}
|
|
body.dark-mode .card h3 { color: #c0c0c0; }
|
|
|
|
/* Info items */
|
|
body.dark-mode .info-item {
|
|
background: #1a1a2e;
|
|
border: 1px solid #0f3460;
|
|
}
|
|
body.dark-mode .info-item .label { color: #666; }
|
|
body.dark-mode .info-item .value { color: #e0e0e0; }
|
|
|
|
/* Empresa tag */
|
|
body.dark-mode .empresa-tag {
|
|
background: #1a1a3e;
|
|
color: #a78bfa;
|
|
}
|
|
|
|
/* Table wrapper */
|
|
body.dark-mode .table-wrapper {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
}
|
|
|
|
/* Badges */
|
|
body.dark-mode .situacao-badge.ativo { background: #0a2e0a; color: #4ade80; }
|
|
body.dark-mode .situacao-badge.inativo { background: #2e0a0a; color: #ff6b6b; }
|
|
|
|
/* Buttons */
|
|
body.dark-mode .btn-secondary {
|
|
background: #1a1a2e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .btn-copy {
|
|
background: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .btn-copy:hover { background: #1a4a7a; }
|
|
|
|
/* Search bar */
|
|
body.dark-mode .search-bar input,
|
|
body.dark-mode .search-bar select {
|
|
background: #16213e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .search-bar button {
|
|
background: #533483;
|
|
}
|
|
body.dark-mode .search-bar button:hover { background: #6a4c9c; }
|
|
body.dark-mode .search-bar .total-info { color: #888; }
|
|
|
|
/* Pagination */
|
|
body.dark-mode .pagination button {
|
|
background: #16213e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .pagination button.active {
|
|
background: #533483;
|
|
border-color: #533483;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
body.dark-mode ::-webkit-scrollbar-thumb { background: #0f3460; }
|
|
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #533483; }
|
|
|
|
/* Client detail */
|
|
body.dark-mode .client-header {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
}
|
|
body.dark-mode .client-header-info h1 { color: #e0e0e0; }
|
|
body.dark-mode .client-header-info .matricula { color: #888; }
|
|
body.dark-mode .field .label { color: #666; }
|
|
body.dark-mode .field .value { color: #e0e0e0; }
|
|
body.dark-mode .back-btn {
|
|
background: #1a1a2e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .carnes-filters label {
|
|
background: #1a1a2e;
|
|
border-color: #0f3460;
|
|
color: #c0c0c0;
|
|
}
|
|
body.dark-mode .carnes-filters label.filtro-ativo {
|
|
border-color: #533483;
|
|
background: #1a1a3e;
|
|
color: #a78bfa;
|
|
}
|
|
|
|
/* Settings tabs */
|
|
body.dark-mode .tabs {
|
|
background: #16213e;
|
|
border-color: #0f3460;
|
|
}
|
|
body.dark-mode .tabs button {
|
|
background: #16213e;
|
|
color: #888;
|
|
border-bottom-color: transparent;
|
|
}
|
|
body.dark-mode .tabs button:hover { background: #1a2744; color: #e0e0e0; }
|
|
body.dark-mode .tabs button.active {
|
|
background: #1a2744;
|
|
color: #a78bfa;
|
|
border-bottom-color: #a78bfa;
|
|
}
|
|
|
|
/* Admin conversations */
|
|
body.dark-mode .filters select,
|
|
body.dark-mode .filters input {
|
|
background: #16213e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .filters button { background: #533483; }
|
|
body.dark-mode .status-E { background: #3a2e0a; color: #ffd700; }
|
|
body.dark-mode .status-A { background: #0a2e0a; color: #4ade80; }
|
|
body.dark-mode .status-F { background: #1a1a2e; color: #888; }
|
|
body.dark-mode .atender-btn { background: #533483; }
|
|
|
|
/* Routes */
|
|
body.dark-mode .search-box input,
|
|
body.dark-mode .search-box select {
|
|
background: #16213e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .copy-btn {
|
|
background: #0f3460;
|
|
color: #c0c0c0;
|
|
}
|
|
body.dark-mode .copy-btn:hover { background: #1a4a7a; }
|
|
body.dark-mode .route-path { color: #c0c0c0; }
|
|
body.dark-mode .card h3 .count {
|
|
background: #0f3460;
|
|
color: #888;
|
|
}
|
|
|
|
/* ===== CHAT - NOVOS ELEMENTOS ===== */
|
|
|
|
/* A sidebar-left no chat já é escura - no dark mode fica mais escura */
|
|
body.dark-mode .sidebar-left {
|
|
background: linear-gradient(180deg, #12102e 0%, #1e1b4b 100%);
|
|
}
|
|
body.dark-mode .sidebar-left .search-box input[type="text"] {
|
|
background: rgba(255,255,255,0.06);
|
|
border-color: rgba(255,255,255,0.12);
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .conv-item:hover { background: rgba(255,255,255,0.06); }
|
|
body.dark-mode .conv-item.active { background: rgba(255,255,255,0.12); }
|
|
|
|
/* Área de mensagens no dark mode */
|
|
body.dark-mode .messages-area {
|
|
background-color: #1a1f2e;
|
|
background-image: none;
|
|
}
|
|
body.dark-mode .msg.cliente {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .msg.usuario {
|
|
background: #1a3a2e;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .msg.sistema {
|
|
background: rgba(15,52,96,0.6);
|
|
color: #b0c4de;
|
|
}
|
|
body.dark-mode .msg.privada {
|
|
background: #3a2e0a;
|
|
color: #ffd700;
|
|
border-color: #5a4a0a;
|
|
}
|
|
|
|
/* Chat input no dark mode */
|
|
body.dark-mode .chat-input {
|
|
background: #12102e;
|
|
border-top-color: #0f3460;
|
|
}
|
|
body.dark-mode .chat-input textarea {
|
|
background: #16213e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .chat-input textarea::placeholder { color: #555; }
|
|
body.dark-mode .chat-input .btn-midia,
|
|
body.dark-mode .chat-input .btn-audio,
|
|
body.dark-mode .chat-input .privada-toggle {
|
|
color: #888;
|
|
}
|
|
body.dark-mode .chat-input .btn-midia:hover,
|
|
body.dark-mode .chat-input .btn-audio:hover {
|
|
background: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/* Login no dark mode */
|
|
body.dark-mode .login-container {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
}
|
|
body.dark-mode .login-header h1 { color: #e0e0e0; }
|
|
body.dark-mode .login-header p { color: #888; }
|
|
body.dark-mode .form-group input {
|
|
background: #1a1a2e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .form-group input:focus {
|
|
background: #1a2744;
|
|
border-color: #533483;
|
|
}
|
|
body.dark-mode .login-dark-toggle button {
|
|
background: rgba(15,52,96,0.6);
|
|
border-color: rgba(255,255,255,0.2);
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/* Modal no dark mode */
|
|
body.dark-mode .modal,
|
|
body.dark-mode .modal-box {
|
|
background: #16213e;
|
|
border: 1px solid #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .modal h3,
|
|
body.dark-mode .modal-box h3 { color: #e0e0e0; }
|
|
body.dark-mode .modal input,
|
|
body.dark-mode .modal-box input,
|
|
body.dark-mode .modal select,
|
|
body.dark-mode .modal-box select,
|
|
body.dark-mode .modal textarea,
|
|
body.dark-mode .modal-box textarea {
|
|
background: #1a1a2e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .modal .btn-group button,
|
|
body.dark-mode .modal-box .btn-group button {
|
|
background: #1a1a2e;
|
|
border-color: #0f3460;
|
|
color: #c0c0c0;
|
|
}
|
|
/* Settings: tabs no dark mode */
|
|
body.dark-mode .tabs { background: #16213e; border-color: #0f3460; }
|
|
body.dark-mode .tabs button { background: #16213e; color: #9ca3af; }
|
|
body.dark-mode .tabs button:hover { background: #1a1a2e; color: #c0c0c0; }
|
|
body.dark-mode .tabs button.active { background: #1a2744; color: #818cf8; border-bottom-color: #818cf8; }
|
|
/* Bottom tab bar no dark mode */
|
|
body.dark-mode .tabbar {
|
|
background: #16213e;
|
|
border-color: #0f3460;
|
|
box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
|
|
}
|
|
/* Botoes do painel direito no dark mode */
|
|
body.dark-mode [style*="background:#eef2ff"] {
|
|
background: #1e1b4b !important;
|
|
border-color: #4c1d95 !important;
|
|
color: #a78bfa !important;
|
|
}
|
|
body.dark-mode [style*="border:1px solid #c7d2fe"] {
|
|
border-color: #4c1d95 !important;
|
|
}
|
|
/* Confirm modal input no dark mode */
|
|
body.dark-mode #confirmarInput { background: #1a1a2e !important; border-color: #0f3460 !important; color: #e0e0e0 !important; }
|
|
body.dark-mode #confirmarInput:focus { border-color: #818cf8 !important; background: #1a1a2e !important; box-shadow: 0 0 0 3px rgba(129,140,248,0.15) !important; }
|
|
/* Tables no dark mode */
|
|
body.dark-mode table { color: #e0e0e0; }
|
|
body.dark-mode thead { background: #0f3460; }
|
|
body.dark-mode th { color: #9ca3af; border-color: #1a1a2e; }
|
|
body.dark-mode td { border-color: #1a1a2e; color: #d1d5db; }
|
|
body.dark-mode tr:hover td { background: #1a1a2e; }
|
|
|
|
/* Tags no dark mode */
|
|
body.dark-mode .tag {
|
|
display: inline-block; padding: 1px 8px;
|
|
border-radius: 10px; font-size: 11px; font-weight: 600;
|
|
color: #fff !important;
|
|
}
|
|
|
|
/* Flow cards e headers de seção no dark mode */
|
|
body.dark-mode [style*="background:var(--surface-2)"] {
|
|
background: #1a1a2e !important;
|
|
}
|
|
body.dark-mode [style*="background:#e0e7ff"] {
|
|
background: #312e81 !important;
|
|
color: #c4b5fd !important;
|
|
}
|
|
|
|
/* btn-secondary no dark mode */
|
|
body.dark-mode .btn-secondary {
|
|
background: #1a1a2e !important;
|
|
border-color: #0f3460 !important;
|
|
color: #d1d5db !important;
|
|
}
|
|
body.dark-mode .btn-secondary:hover {
|
|
background: #0f3460 !important;
|
|
}
|
|
|
|
/* Input focus no dark mode */
|
|
body.dark-mode input:focus,
|
|
body.dark-mode select:focus,
|
|
body.dark-mode textarea:focus {
|
|
background: #1a1a2e !important;
|
|
box-shadow: 0 0 0 3px rgba(129,140,248,0.15) !important;
|
|
}
|
|
body.dark-mode .modal .btn-group .btn-primary,
|
|
body.dark-mode .modal-box .btn-primary {
|
|
background: #667eea;
|
|
border-color: #667eea;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Right sidebar no dark mode */
|
|
body.dark-mode .sidebar-right {
|
|
background: #16213e;
|
|
border-left-color: #0f3460;
|
|
}
|
|
body.dark-mode .sidebar-right .header {
|
|
background: #12102e;
|
|
border-bottom-color: #0f3460;
|
|
}
|
|
body.dark-mode .sidebar-right .header h3 { color: #888; }
|
|
body.dark-mode .sidebar-right .info-section {
|
|
border-bottom-color: #0f3460;
|
|
}
|
|
body.dark-mode .sidebar-right .info-section .label { color: #666; }
|
|
body.dark-mode .sidebar-right .info-section .value { color: #e0e0e0; }
|
|
body.dark-mode .sidebar-right .info-section select {
|
|
background: #1a1a2e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .sidebar-right .acoes button {
|
|
background: #1a1a2e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .sidebar-right .acoes button:hover { background: #1a2744; }
|
|
|
|
/* Form settings no dark mode */
|
|
body.dark-mode .form-group input,
|
|
body.dark-mode .form-group select,
|
|
body.dark-mode .form-group textarea {
|
|
background: #1a1a2e;
|
|
border-color: #0f3460;
|
|
color: #e0e0e0;
|
|
}
|
|
body.dark-mode .form-group label { color: #c0c0c0; }
|
|
body.dark-mode .btn-sm { background: #0f3460; color: #e0e0e0; }
|
|
|
|
/* Badge no dark mode (settings) */
|
|
body.dark-mode .badge-success { background: #0a2e0a; color: #4ade80; }
|
|
body.dark-mode .badge-danger { background: #2e0a0a; color: #ff6b6b; }
|
|
|
|
/* Client detail - novas classes */
|
|
body.dark-mode .aba-btn.inativo { background: #1a1a2e; color: #888; }
|
|
body.dark-mode .aba-btn.inativo:hover { background: #0f3460; }
|
|
body.dark-mode .subaba-btn.inativo { background: #1a1a2e; color: #888; }
|
|
body.dark-mode .conv-card { border-color: #0f3460; background: #16213e; }
|
|
body.dark-mode .conv-badge.ativo { background: #0a1a2e; color: #87ceeb; }
|
|
body.dark-mode .btn-acao-topbar { background: #533483; }
|
|
body.dark-mode .btn-acao-topbar:hover { background: #6a4c9c; }
|
|
body.dark-mode .feedback-msg.sucesso { background: #0a2e0a; color: #4ade80; }
|
|
body.dark-mode .feedback-msg.erro { background: #2e0a0a; color: #ff6b6b; }
|