/* ═══════════════════════════════════════════════════════════ SISTEMA DE DESIGN — DARK MODE PADRÃO Baseado em AdminLTE v4 + Bootstrap 5 ═══════════════════════════════════════════════════════════ */ /* ── Variáveis de tema ─────────────────────────────────────── */ :root { --jp-body-bg: #0f172a; --jp-surface: #1e293b; --jp-surface-2: #263348; --jp-border: rgba(255, 255, 255, 0.07); --jp-text: #f1f5f9; --jp-text-muted: #64748b; --jp-primary: #3b82f6; --jp-primary-dark: #1d4ed8; --jp-danger: #ef4444; --jp-radius: 10px; --jp-radius-sm: 6px; --jp-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); --jp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --jp-sidebar-w: 250px; --jp-header-h: 57px; --jp-brand-h: 57px; } /* ── Fonte global ──────────────────────────────────────────── */ body, .app-content, .app-sidebar { font-family: 'Inter', 'Source Sans Pro', sans-serif !important; } /* ══════════════════════════════════════════════════════════════ DARK LAYOUT (classe .dark-layout no ) ══════════════════════════════════════════════════════════════ */ /* ── Fundo geral ───────────────────────────────────────────── */ body.dark-layout, body.dark-layout .app-wrapper { background-color: var(--jp-body-bg) !important; color: var(--jp-text) !important; } body.dark-layout .app-content { background-color: var(--jp-body-bg) !important; color: var(--jp-text) !important; padding: 1.5rem !important; } /* ── Navbar (app-header) ───────────────────────────────────── */ body.dark-layout .app-header { background-color: var(--jp-surface) !important; border-bottom: 1px solid var(--jp-border) !important; box-shadow: 0 1px 0 var(--jp-border) !important; } body.dark-layout .app-header .nav-link { color: var(--jp-text-muted) !important; transition: color 0.15s; } body.dark-layout .app-header .nav-link:hover { color: var(--jp-text) !important; } body.dark-layout .app-header .navbar-nav { align-items: center; } /* ── Sidebar container ─────────────────────────────────────── */ body.dark-layout .app-sidebar { background-color: var(--jp-surface) !important; border-right: 1px solid var(--jp-border) !important; box-shadow: none !important; } /* Wrapper interno scrollável — scroll apenas aqui, nunca na página */ body.dark-layout .sidebar-wrapper { height: calc(100vh - var(--jp-brand-h)) !important; overflow-y: auto !important; overflow-x: hidden !important; } body.dark-layout .sidebar-wrapper::-webkit-scrollbar { width: 3px; } body.dark-layout .sidebar-wrapper::-webkit-scrollbar-track { background: transparent; } body.dark-layout .sidebar-wrapper::-webkit-scrollbar-thumb { background: var(--jp-border); border-radius: 99px; } body.dark-layout .sidebar-wrapper::-webkit-scrollbar-thumb:hover { background: var(--jp-text-muted); } /* ── Brand ─────────────────────────────────────────────────── */ body.dark-layout .sidebar-brand { background-color: var(--jp-surface) !important; border-bottom: 1px solid var(--jp-border) !important; } body.dark-layout .sidebar-brand .brand-link { color: var(--jp-text) !important; font-size: 1.1rem; letter-spacing: -0.3px; } body.dark-layout .sidebar-brand .brand-link:hover { color: var(--jp-primary) !important; text-decoration: none !important; } /* ── User panel ────────────────────────────────────────────── */ body.dark-layout .user-panel { border-bottom: 1px solid var(--jp-border) !important; } body.dark-layout.sidebar-collapse .app-sidebar:not(:hover) .user-panel { justify-content: center !important; } body.dark-layout.sidebar-collapse .app-sidebar:not(:hover) .user-panel .info { display: none !important; } body.dark-layout .user-panel .info a { color: var(--jp-text) !important; font-size: 0.875rem; text-decoration: none !important; font-weight: 500; } body.dark-layout .user-panel .info a:hover { color: var(--jp-primary) !important; } /* ── Nav padding: afasta itens da borda direita ────────────── */ /* Sidebar expandida */ body.dark-layout:not(.sidebar-collapse) .app-sidebar .sidebar-wrapper nav { padding-right: 8px; } /* Sidebar colapsada + hover (expande de volta) */ body.dark-layout.sidebar-collapse .app-sidebar:hover .sidebar-wrapper nav { padding-right: 8px; } /* Sidebar colapsada + sem hover (somente ícones, 3.1rem de largura) */ body.dark-layout.sidebar-collapse .app-sidebar:not(:hover) .sidebar-wrapper nav { padding-right: 0; } /* No modo ícone, margem menor para caber dentro dos 3.1rem */ body.dark-layout.sidebar-collapse .app-sidebar:not(:hover) .sidebar-menu .nav-item .nav-link { margin: 2px 5px !important; } /* ── Menu itens ────────────────────────────────────────────── */ body.dark-layout .sidebar-menu .nav-item .nav-link { display: flex !important; align-items: center !important; color: var(--jp-text-muted) !important; border-radius: var(--jp-radius-sm) !important; margin: 2px 8px !important; padding: 0.5rem 0.75rem !important; transition: background-color 0.15s, color 0.15s !important; font-size: 0.875rem; } /* Ícone vindo do banco — largura fixa para alinhar com o texto */ body.dark-layout .sidebar-menu .nav-item .nav-link > i { min-width: 1.5rem; text-align: center; font-size: 0.95rem; flex-shrink: 0; } /*

ocupa o espaço restante, sem margens extras */ body.dark-layout .sidebar-menu .nav-item .nav-link > p { flex: 1 !important; margin: 0 !important; display: flex !important; align-items: center !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.dark-layout .sidebar-menu .nav-item .nav-link:hover { background-color: var(--jp-surface-2) !important; color: var(--jp-text) !important; } body.dark-layout .sidebar-menu .nav-item .nav-link.active { background-color: rgba(6, 182, 212, 0.12) !important; box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.28) !important; color: #67e8f9 !important; } body.dark-layout .sidebar-menu .nav-item .nav-link.active .nav-arrow { color: rgba(103, 232, 249, 0.6) !important; } /* Ícone de seta do treeview */ body.dark-layout .nav-arrow { color: var(--jp-text-muted) !important; font-size: 0.7rem !important; margin-left: auto !important; transition: transform 0.2s !important; flex-shrink: 0; } body.dark-layout .nav-item.menu-open > .nav-link > p > .nav-arrow { transform: rotate(90deg) !important; } /* Sub-itens */ body.dark-layout .nav-treeview { background-color: transparent !important; padding-left: 0.5rem !important; } body.dark-layout .nav-treeview .nav-link { font-size: 0.83rem !important; } /* ── Logout (nav-link dentro da sidebar) ───────────────────── */ body.dark-layout .sidebar-menu .nav-logout-item { margin-top: 0.5rem !important; border-top: 1px solid var(--jp-border) !important; padding-top: 0.5rem !important; } body.dark-layout .sidebar-menu .nav-link.nav-logout { color: #fca5a5 !important; } body.dark-layout .sidebar-menu .nav-link.nav-logout > i { color: #fca5a5 !important; } body.dark-layout .sidebar-menu .nav-link.nav-logout:hover { background-color: rgba(239, 68, 68, 0.10) !important; color: #fecaca !important; } body.dark-layout .sidebar-menu .nav-link.nav-logout:hover > i { color: #fecaca !important; } /* ── Cards ─────────────────────────────────────────────────── */ body.dark-layout .card { background-color: var(--jp-surface) !important; border: 1px solid var(--jp-border) !important; border-radius: var(--jp-radius) !important; box-shadow: var(--jp-shadow-sm) !important; color: var(--jp-text) !important; } body.dark-layout .card-header { background-color: transparent !important; border-bottom: 1px solid var(--jp-border) !important; color: var(--jp-text) !important; } body.dark-layout .card-footer { background-color: transparent !important; border-top: 1px solid var(--jp-border) !important; } /* ── Utilitários de tabela ─────────────────────────────────── */ th.col-acoes, td.col-acoes { width: 110px !important; } /* ── Tabelas ───────────────────────────────────────────────── */ body.dark-layout .table { --bs-table-color: var(--jp-text); --bs-table-bg: var(--jp-surface); --bs-table-striped-bg: var(--jp-surface-2); --bs-table-striped-color: var(--jp-text); --bs-table-hover-bg: rgba(6, 182, 212, 0.06); --bs-table-border-color: var(--jp-border); color: var(--jp-text) !important; border-color: var(--jp-border) !important; background-color: var(--jp-surface) !important; } body.dark-layout .table th { color: var(--jp-text-muted) !important; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-color: var(--jp-border) !important; background-color: var(--jp-surface-2) !important; white-space: nowrap; } body.dark-layout .table td { border-color: var(--jp-border) !important; font-size: 0.83rem !important; color: var(--jp-text) !important; background-color: var(--jp-surface) !important; vertical-align: middle; } body.dark-layout .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--jp-surface-2) !important; color: var(--jp-text) !important; } body.dark-layout .table-striped > tbody > tr:nth-of-type(even) > * { background-color: var(--jp-surface) !important; color: var(--jp-text) !important; } body.dark-layout .table tbody tr:hover > td { background-color: rgba(6, 182, 212, 0.06) !important; color: var(--jp-text) !important; } /* ── Formulários ───────────────────────────────────────────── */ body.dark-layout .form-control, body.dark-layout .form-select { background-color: var(--jp-body-bg) !important; border: 1px solid var(--jp-border) !important; color: var(--jp-text) !important; border-radius: var(--jp-radius-sm) !important; } body.dark-layout .form-control:focus, body.dark-layout .form-select:focus { border-color: var(--jp-primary) !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important; background-color: var(--jp-body-bg) !important; color: var(--jp-text) !important; } body.dark-layout .form-control::placeholder { color: var(--jp-text-muted) !important; } body.dark-layout .form-label, body.dark-layout label { color: var(--jp-text-muted) !important; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } body.dark-layout .input-group-text { background-color: var(--jp-surface-2) !important; border: 1px solid var(--jp-border) !important; color: var(--jp-text-muted) !important; } body.dark-layout .input-group > .form-control:not(:last-child), body.dark-layout .input-group > .form-select:not(:last-child), body.dark-layout .input-group > .btn:not(:last-child), body.dark-layout .input-group > .input-group-text:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } body.dark-layout .input-group > .form-control:not(:first-child), body.dark-layout .input-group > .form-select:not(:first-child), body.dark-layout .input-group > .btn:not(:first-child), body.dark-layout .input-group > .input-group-text:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* ── Botões — base ─────────────────────────────────────────── */ body.dark-layout .btn { border-radius: var(--jp-radius-sm) !important; font-weight: 500 !important; font-size: 0.875rem !important; letter-spacing: 0.2px; transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s !important; box-shadow: none !important; } body.dark-layout .btn:focus-visible { outline: 2px solid var(--jp-primary) !important; outline-offset: 2px !important; box-shadow: none !important; } /* ── Primary ───────────────────────────────────────────────── */ body.dark-layout .btn-primary, body.dark-layout .btn-outline-primary { background-color: rgba(59, 130, 246, 0.12) !important; border-color: rgba(59, 130, 246, 0.40) !important; color: #93c5fd !important; } body.dark-layout .btn-primary:hover, body.dark-layout .btn-outline-primary:hover { background-color: rgba(59, 130, 246, 0.22) !important; border-color: rgba(59, 130, 246, 0.65) !important; color: #bfdbfe !important; } /* ── Secondary ─────────────────────────────────────────────── */ body.dark-layout .btn-secondary, body.dark-layout .btn-outline-secondary { background-color: rgba(100, 116, 139, 0.12) !important; border-color: rgba(100, 116, 139, 0.35) !important; color: #94a3b8 !important; } body.dark-layout .btn-secondary:hover, body.dark-layout .btn-outline-secondary:hover { background-color: rgba(100, 116, 139, 0.22) !important; border-color: rgba(100, 116, 139, 0.55) !important; color: #cbd5e1 !important; } /* ── Success ───────────────────────────────────────────────── */ body.dark-layout .btn-success, body.dark-layout .btn-outline-success { background-color: rgba(34, 197, 94, 0.10) !important; border-color: rgba(34, 197, 94, 0.35) !important; color: #86efac !important; } body.dark-layout .btn-success:hover, body.dark-layout .btn-outline-success:hover { background-color: rgba(34, 197, 94, 0.20) !important; border-color: rgba(34, 197, 94, 0.60) !important; color: #bbf7d0 !important; } /* ── Danger ────────────────────────────────────────────────── */ body.dark-layout .btn-danger, body.dark-layout .btn-outline-danger { background-color: rgba(239, 68, 68, 0.10) !important; border-color: rgba(239, 68, 68, 0.35) !important; color: #fca5a5 !important; } body.dark-layout .btn-danger:hover, body.dark-layout .btn-outline-danger:hover { background-color: rgba(239, 68, 68, 0.20) !important; border-color: rgba(239, 68, 68, 0.60) !important; color: #fecaca !important; } /* ── Warning ───────────────────────────────────────────────── */ body.dark-layout .btn-warning, body.dark-layout .btn-outline-warning { background-color: rgba(245, 158, 11, 0.10) !important; border-color: rgba(245, 158, 11, 0.35) !important; color: #fcd34d !important; } body.dark-layout .btn-warning:hover, body.dark-layout .btn-outline-warning:hover { background-color: rgba(245, 158, 11, 0.20) !important; border-color: rgba(245, 158, 11, 0.60) !important; color: #fde68a !important; } /* ── Info ──────────────────────────────────────────────────── */ body.dark-layout .btn-info, body.dark-layout .btn-outline-info { background-color: rgba(6, 182, 212, 0.10) !important; border-color: rgba(6, 182, 212, 0.35) !important; color: #67e8f9 !important; } body.dark-layout .btn-info:hover, body.dark-layout .btn-outline-info:hover { background-color: rgba(6, 182, 212, 0.20) !important; border-color: rgba(6, 182, 212, 0.60) !important; color: #a5f3fc !important; } /* ── Light ─────────────────────────────────────────────────── */ body.dark-layout .btn-light, body.dark-layout .btn-outline-light { background-color: rgba(241, 245, 249, 0.06) !important; border-color: rgba(241, 245, 249, 0.18) !important; color: #cbd5e1 !important; } body.dark-layout .btn-light:hover, body.dark-layout .btn-outline-light:hover { background-color: rgba(241, 245, 249, 0.12) !important; border-color: rgba(241, 245, 249, 0.30) !important; color: #f1f5f9 !important; } /* ── Dark ──────────────────────────────────────────────────── */ body.dark-layout .btn-dark, body.dark-layout .btn-outline-dark { background-color: rgba(15, 23, 42, 0.50) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #94a3b8 !important; } body.dark-layout .btn-dark:hover, body.dark-layout .btn-outline-dark:hover { background-color: rgba(15, 23, 42, 0.70) !important; border-color: rgba(255, 255, 255, 0.20) !important; color: #cbd5e1 !important; } /* ── Link ──────────────────────────────────────────────────── */ body.dark-layout .btn-link { color: var(--jp-primary) !important; background: none !important; border-color: transparent !important; text-decoration: none !important; } body.dark-layout .btn-link:hover { color: #bfdbfe !important; text-decoration: underline !important; } /* ── Badges ────────────────────────────────────────────────── */ body.dark-layout .badge { font-size: 0.8rem !important; } body.dark-layout .badge.bg-secondary { background-color: var(--jp-surface-2) !important; color: var(--jp-text) !important; } /* ── Tooltips ──────────────────────────────────────────────── */ body.dark-layout .tooltip-inner { background-color: #0f172a; color: var(--jp-text); font-size: 0.78rem; padding: 4px 10px; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.5); border: 1px solid var(--jp-border); } body.dark-layout .tooltip .tooltip-arrow::before { border-top-color: #0f172a !important; border-bottom-color: #0f172a !important; border-left-color: #0f172a !important; border-right-color: #0f172a !important; } /* ── Alerts / Flash messages ───────────────────────────────── */ body.dark-layout .alert { border-radius: var(--jp-radius-sm) !important; border: none !important; } body.dark-layout .alert-danger { background-color: rgba(239, 68, 68, 0.12) !important; color: #fca5a5 !important; border-left: 3px solid #ef4444 !important; } body.dark-layout .alert-success { background-color: rgba(34, 197, 94, 0.12) !important; color: #86efac !important; border-left: 3px solid #22c55e !important; } body.dark-layout .alert-warning { background-color: rgba(245, 158, 11, 0.12) !important; color: #fcd34d !important; border-left: 3px solid #f59e0b !important; } body.dark-layout .alert-info { background-color: rgba(59, 130, 246, 0.12) !important; color: #93c5fd !important; border-left: 3px solid #3b82f6 !important; } /* ── Dropdowns ─────────────────────────────────────────────── */ body.dark-layout .dropdown-menu { background-color: var(--jp-surface) !important; border: 1px solid var(--jp-border) !important; box-shadow: var(--jp-shadow) !important; border-radius: var(--jp-radius-sm) !important; } body.dark-layout .dropdown-item { color: var(--jp-text-muted) !important; font-size: 0.875rem; } body.dark-layout .dropdown-item:hover { background-color: var(--jp-surface-2) !important; color: var(--jp-text) !important; } body.dark-layout .dropdown-divider { border-color: var(--jp-border) !important; } /* ── Modais ────────────────────────────────────────────────── */ body.dark-layout .modal-content { background-color: var(--jp-surface) !important; border: 1px solid var(--jp-border) !important; border-radius: var(--jp-radius) !important; color: var(--jp-text) !important; } body.dark-layout .modal-header { border-bottom: 1px solid var(--jp-border) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } body.dark-layout .modal-footer { border-top: 1px solid var(--jp-border) !important; } /* Botão fechar — Bootstrap 4 (.close) e Bootstrap 5 (.btn-close) */ body.dark-layout .modal .close, body.dark-layout .modal .btn-close { background: transparent !important; border: none !important; color: var(--jp-text-muted) !important; opacity: 0.6 !important; text-shadow: none !important; font-size: 1.4rem !important; line-height: 1 !important; cursor: pointer; padding: 4px 8px !important; border-radius: var(--jp-radius-sm) !important; transition: color 0.15s, opacity 0.15s, background 0.15s !important; filter: none !important; margin-left: auto !important; } body.dark-layout .modal .close:hover, body.dark-layout .modal .btn-close:hover { color: var(--jp-text) !important; opacity: 1 !important; background: rgba(255, 255, 255, 0.06) !important; } body.dark-layout .modal .close span { text-shadow: none !important; color: inherit !important; } /* ── Paginação ─────────────────────────────────────────────── */ body.dark-layout .page-link { background-color: transparent !important; border-color: var(--jp-border) !important; color: var(--jp-text-muted) !important; border-radius: var(--jp-radius-sm) !important; transition: background-color 0.15s, color 0.15s !important; } body.dark-layout .page-link:hover { background-color: var(--jp-surface-2) !important; color: var(--jp-text) !important; } body.dark-layout .page-item.active .page-link, body.dark-layout .page-item.current .page-link { background-color: rgba(6, 182, 212, 0.12) !important; border-color: rgba(6, 182, 212, 0.35) !important; color: #67e8f9 !important; } body.dark-layout .page-item.disabled .page-link { background-color: transparent !important; border-color: var(--jp-border) !important; color: rgba(100, 116, 139, 0.4) !important; } /* ── Select2 / Chosen (se usados) ─────────────────────────── */ body.dark-layout .select2-container--default .select2-selection--single { background-color: var(--jp-body-bg) !important; border-color: var(--jp-border) !important; color: var(--jp-text) !important; } /* ── Scrollbar personalizada ───────────────────────────────── */ body.dark-layout ::-webkit-scrollbar { width: 5px; height: 5px; } body.dark-layout ::-webkit-scrollbar-track { background: var(--jp-body-bg); } body.dark-layout ::-webkit-scrollbar-thumb { background: var(--jp-surface-2); border-radius: 99px; } body.dark-layout ::-webkit-scrollbar-thumb:hover { background: var(--jp-text-muted); } /* ── Texto utilitários ─────────────────────────────────────── */ body.dark-layout .text-muted { color: var(--jp-text-muted) !important; } body.dark-layout hr { border-color: var(--jp-border) !important; opacity: 1 !important; } /* ══════════════════════════════════════════════════════════════ TÍTULO DE PÁGINA — .page-title ══════════════════════════════════════════════════════════════ */ body.dark-layout .page-title { font-size: 1.2rem !important; font-weight: 600 !important; color: var(--jp-text) !important; margin: 0 !important; padding-left: 0.75rem !important; border-left: 3px solid rgba(6, 182, 212, 0.55) !important; line-height: 1.4 !important; } /* ══════════════════════════════════════════════════════════════ DATATABLES — Tema dark ══════════════════════════════════════════════════════════════ */ /* Wrapper geral */ body.dark-layout .dataTables_wrapper { color: var(--jp-text) !important; } /* Labels (Mostrar X entradas / Buscar) */ body.dark-layout .dataTables_wrapper .dataTables_length label, body.dark-layout .dataTables_wrapper .dataTables_filter label { color: var(--jp-text-muted) !important; font-size: 0.82rem !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; } /* Select de quantidade e input de busca */ body.dark-layout .dataTables_wrapper .dataTables_length select, body.dark-layout .dataTables_wrapper .dataTables_filter input { background-color: var(--jp-body-bg) !important; border: 1px solid var(--jp-border) !important; border-radius: var(--jp-radius-sm) !important; color: var(--jp-text) !important; padding: 0.3rem 0.6rem !important; font-size: 0.82rem !important; } body.dark-layout .dataTables_wrapper .dataTables_filter input:focus { border-color: rgba(6, 182, 212, 0.5) !important; box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.12) !important; outline: none !important; } /* Info "Mostrando X a Y de Z resultados" */ body.dark-layout .dataTables_wrapper .dataTables_info { color: var(--jp-text-muted) !important; font-size: 0.82rem !important; } /* Linhas da tabela — elimina o branco das listras */ body.dark-layout table.dataTable tbody tr, body.dark-layout table.dataTable tbody tr.even { background-color: var(--jp-surface) !important; } body.dark-layout table.dataTable.stripe tbody tr.odd, body.dark-layout table.dataTable.display tbody tr.odd, body.dark-layout table.dataTable tbody tr.odd { background-color: var(--jp-surface-2) !important; } body.dark-layout table.dataTable tbody tr:hover > * { background-color: rgba(6, 182, 212, 0.06) !important; color: var(--jp-text) !important; } body.dark-layout table.dataTable tbody td { border-color: var(--jp-border) !important; color: var(--jp-text) !important; font-size: 0.83rem !important; vertical-align: middle; } body.dark-layout table.dataTable tbody th { border-color: var(--jp-border) !important; color: var(--jp-text) !important; } /* Paginação DataTables Bootstrap 4 */ body.dark-layout .dataTables_wrapper .dataTables_paginate .paginate_button.page-item .page-link { background-color: transparent !important; border-color: var(--jp-border) !important; color: var(--jp-text-muted) !important; } body.dark-layout .dataTables_wrapper .dataTables_paginate .paginate_button.page-item:hover .page-link { background-color: var(--jp-surface-2) !important; border-color: var(--jp-border) !important; color: var(--jp-text) !important; } body.dark-layout .dataTables_wrapper .dataTables_paginate .paginate_button.page-item.active .page-link { background-color: rgba(6, 182, 212, 0.12) !important; border-color: rgba(6, 182, 212, 0.35) !important; color: #67e8f9 !important; box-shadow: none !important; } body.dark-layout .dataTables_wrapper .dataTables_paginate .paginate_button.page-item.disabled .page-link { background-color: transparent !important; border-color: var(--jp-border) !important; color: rgba(100, 116, 139, 0.35) !important; } /* Botões de exportação (CSV, etc.) */ body.dark-layout .dt-buttons .btn { font-size: 0.8rem !important; padding: 0.3rem 0.8rem !important; } /* ══════════════════════════════════════════════════════════════ DATEPICKER — jQuery UI ══════════════════════════════════════════════════════════════ */ /* ── Container principal ───────────────────────────────────── */ body.dark-layout .ui-datepicker { background-color: var(--jp-surface) !important; border: 1px solid var(--jp-border) !important; border-radius: var(--jp-radius) !important; box-shadow: var(--jp-shadow) !important; padding: 0 !important; font-family: 'Inter', sans-serif !important; font-size: 0.85rem !important; overflow: hidden; width: 270px !important; } /* ── Header (mês/ano + navegação) ──────────────────────────── */ body.dark-layout .ui-datepicker .ui-datepicker-header { background-color: var(--jp-surface-2) !important; border: none !important; border-bottom: 1px solid var(--jp-border) !important; border-radius: 0 !important; color: var(--jp-text) !important; padding: 0.6rem 0.5rem !important; display: flex; align-items: center; justify-content: space-between; } /* ── Título mês/ano ─────────────────────────────────────────── */ body.dark-layout .ui-datepicker .ui-datepicker-title { color: var(--jp-text) !important; font-weight: 600 !important; font-size: 0.875rem !important; line-height: 1.8rem !important; margin: 0 !important; } body.dark-layout .ui-datepicker .ui-datepicker-title select { background-color: var(--jp-body-bg) !important; border: 1px solid var(--jp-border) !important; border-radius: var(--jp-radius-sm) !important; color: var(--jp-text) !important; font-size: 0.8rem !important; padding: 0.15rem 0.4rem !important; } /* ── Botões prev/next ───────────────────────────────────────── */ body.dark-layout .ui-datepicker .ui-datepicker-prev, body.dark-layout .ui-datepicker .ui-datepicker-next { background: none !important; border: none !important; border-radius: var(--jp-radius-sm) !important; color: var(--jp-text-muted) !important; cursor: pointer; top: 50% !important; transform: translateY(-50%) !important; width: 1.8rem !important; height: 1.8rem !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background-color 0.15s, color 0.15s; } body.dark-layout .ui-datepicker .ui-datepicker-prev { left: 0.5rem !important; } body.dark-layout .ui-datepicker .ui-datepicker-next { right: 0.5rem !important; } body.dark-layout .ui-datepicker .ui-datepicker-prev-hover, body.dark-layout .ui-datepicker .ui-datepicker-next-hover { background-color: rgba(255, 255, 255, 0.07) !important; color: var(--jp-text) !important; top: 50% !important; transform: translateY(-50%) !important; } /* Ícone das setas (jQuery UI usa span.ui-icon) */ body.dark-layout .ui-datepicker .ui-icon { background-image: none !important; text-indent: 0 !important; overflow: visible !important; font-size: 0 !important; } body.dark-layout .ui-datepicker .ui-datepicker-prev .ui-icon::after { content: '‹'; font-size: 1.2rem; color: var(--jp-text-muted); line-height: 1; } body.dark-layout .ui-datepicker .ui-datepicker-next .ui-icon::after { content: '›'; font-size: 1.2rem; color: var(--jp-text-muted); line-height: 1; } body.dark-layout .ui-datepicker .ui-datepicker-prev-hover .ui-icon::after, body.dark-layout .ui-datepicker .ui-datepicker-next-hover .ui-icon::after { color: var(--jp-text); } /* ── Tabela de dias ─────────────────────────────────────────── */ body.dark-layout .ui-datepicker table { border-collapse: collapse !important; margin: 0.4rem 0.5rem 0.5rem !important; width: calc(100% - 1rem) !important; font-size: 0.82rem !important; } /* Cabeçalhos dos dias da semana */ body.dark-layout .ui-datepicker th { color: var(--jp-text-muted) !important; font-size: 0.7rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 0.3rem 0 !important; border: none !important; text-align: center !important; } /* Células dos dias */ body.dark-layout .ui-datepicker td { border: none !important; padding: 0.1rem !important; } body.dark-layout .ui-datepicker td span, body.dark-layout .ui-datepicker td a { background: none !important; border: none !important; border-radius: var(--jp-radius-sm) !important; color: var(--jp-text) !important; display: block !important; font-weight: 400 !important; padding: 0.3rem 0 !important; text-align: center !important; text-decoration: none !important; transition: background-color 0.12s, color 0.12s !important; line-height: 1.6 !important; } /* Hover nos dias */ body.dark-layout .ui-datepicker td a.ui-state-hover, body.dark-layout .ui-datepicker td a:hover { background-color: var(--jp-surface-2) !important; color: var(--jp-text) !important; border: none !important; } /* Dia de hoje */ body.dark-layout .ui-datepicker td .ui-state-highlight, body.dark-layout .ui-datepicker td .ui-state-highlight:hover { background-color: rgba(59, 130, 246, 0.12) !important; color: #93c5fd !important; font-weight: 600 !important; border: 1px solid rgba(59, 130, 246, 0.30) !important; } /* Dia selecionado */ body.dark-layout .ui-datepicker td .ui-state-active, body.dark-layout .ui-datepicker td .ui-state-active:hover { background-color: #4a4a4a !important; color: #ffffff !important; font-weight: 600 !important; border: none !important; } /* Dias fora do mês atual */ body.dark-layout .ui-datepicker td.ui-datepicker-other-month span, body.dark-layout .ui-datepicker td.ui-datepicker-other-month a { color: rgba(100, 116, 139, 0.45) !important; } /* Dias desabilitados */ body.dark-layout .ui-datepicker td.ui-state-disabled span, body.dark-layout .ui-datepicker td.ui-state-disabled a { color: rgba(100, 116, 139, 0.3) !important; cursor: not-allowed !important; } /* ── Barra de botões (Hoje / Fechar) ────────────────────────── */ body.dark-layout .ui-datepicker .ui-datepicker-buttonpane { background-color: var(--jp-surface-2) !important; border-top: 1px solid var(--jp-border) !important; margin: 0 !important; padding: 0.4rem 0.5rem !important; } body.dark-layout .ui-datepicker .ui-datepicker-buttonpane button { background-color: transparent !important; border: 1px solid var(--jp-border) !important; border-radius: var(--jp-radius-sm) !important; color: var(--jp-text-muted) !important; cursor: pointer; font-size: 0.78rem !important; font-weight: 500 !important; padding: 0.25rem 0.65rem !important; transition: background-color 0.15s, color 0.15s !important; } body.dark-layout .ui-datepicker .ui-datepicker-buttonpane button:hover { background-color: var(--jp-surface) !important; color: var(--jp-text) !important; } body.dark-layout .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { color: #93c5fd !important; border-color: rgba(59, 130, 246, 0.35) !important; } body.dark-layout .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:hover { background-color: rgba(59, 130, 246, 0.12) !important; } /* ══════════════════════════════════════════════════════════════ TOAST NOTIFICATIONS ══════════════════════════════════════════════════════════════ */ #toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 8px; width: 340px; pointer-events: none; } .jp-toast { pointer-events: all; display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: var(--jp-radius); backdrop-filter: blur(12px); box-shadow: var(--jp-shadow); transform: translateX(calc(100% + 1.5rem)); opacity: 0; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; } .jp-toast.jp-toast--in { transform: translateX(0); opacity: 1; } .jp-toast.jp-toast--out { transform: translateX(calc(100% + 1.5rem)); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; } .jp-toast--sucesso { background: rgba(134, 239, 172, 0.07); border: 1px solid rgba(134, 239, 172, 0.2); border-left: 3px solid #86efac; } .jp-toast--sucesso .jp-toast-icon { color: #86efac; } .jp-toast--aviso { background: rgba(103, 232, 249, 0.07); border: 1px solid rgba(103, 232, 249, 0.2); border-left: 3px solid #67e8f9; } .jp-toast--aviso .jp-toast-icon { color: #67e8f9; } .jp-toast--atencao { background: rgba(253, 224, 71, 0.07); border: 1px solid rgba(253, 224, 71, 0.2); border-left: 3px solid #fde047; } .jp-toast--atencao .jp-toast-icon { color: #fde047; } .jp-toast--erro { background: rgba(252, 165, 165, 0.07); border: 1px solid rgba(252, 165, 165, 0.2); border-left: 3px solid #fca5a5; } .jp-toast--erro .jp-toast-icon { color: #fca5a5; } .jp-toast-icon { font-size: 1rem; margin-top: 2px; flex-shrink: 0; } .jp-toast-text { flex: 1; color: var(--jp-text); font-size: 0.875rem; line-height: 1.45; } .jp-toast-close { background: none; border: none; color: var(--jp-text-muted); cursor: pointer; padding: 0; font-size: 1.15rem; line-height: 1; opacity: 0.5; transition: opacity 0.15s, color 0.15s; flex-shrink: 0; margin-top: 1px; } .jp-toast-close:hover { opacity: 1; color: var(--jp-text); } /* Barra de progresso no rodapé do toast */ .jp-toast-progress { position: absolute; bottom: 0; left: 0; height: 2px; border-radius: 0 0 var(--jp-radius) var(--jp-radius); width: 100%; transform-origin: left; animation: jp-toast-shrink linear forwards; } .jp-toast { position: relative; overflow: hidden; } .jp-toast--sucesso .jp-toast-progress { background: #86efac; } .jp-toast--aviso .jp-toast-progress { background: #67e8f9; } .jp-toast--atencao .jp-toast-progress { background: #fde047; } .jp-toast--erro .jp-toast-progress { background: #fca5a5; } @keyframes jp-toast-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* ══════════════════════════════════════════════════════════════ TOGGLE SWITCH — .jp-toggle ═══════════════════════════════════════════════════��══════════ */ .jp-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .jp-toggle input { display: none; } .jp-toggle-track { position: relative; width: 46px; height: 24px; background: rgba(252, 165, 165, 0.15); border: 1px solid rgba(252, 165, 165, 0.35); border-radius: 999px; transition: background 0.25s, border-color 0.25s; flex-shrink: 0; } .jp-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fca5a5; border-radius: 50%; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } .jp-toggle input:checked ~ .jp-toggle-track { background: rgba(134, 239, 172, 0.15); border-color: rgba(134, 239, 172, 0.35); } .jp-toggle input:checked ~ .jp-toggle-track .jp-toggle-thumb { transform: translateX(22px); background: #86efac; } .jp-toggle-label { color: var(--jp-text-muted); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } .jp-toggle-status { font-size: 0.78rem; font-weight: 600; min-width: 44px; } /* ═════════════════════════════════════════════════��════════════ FOTO UPLOAD — .foto-upload-area ═════════════════════════════════════════════��════════════════ */ .foto-upload-area { display: flex; flex-direction: column; align-items: center; gap: 10px; } .foto-upload-label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: var(--jp-radius-sm); border: 1px solid rgba(100, 116, 139, 0.4); background: rgba(255, 255, 255, 0.04); color: var(--jp-text-muted); font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .foto-upload-label:hover { background: rgba(6, 182, 212, 0.08); border-color: rgba(6, 182, 212, 0.4); color: #67e8f9; } .foto-nome-arquivo { font-size: 0.75rem; color: var(--jp-text-muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } /* ════════════════════════════════════════════════��═════════════ FLATPICKR — tema dark ═════════════════════════════════════════════��════════════════ */ .flatpickr-calendar { background: var(--jp-surface) !important; border: 1px solid var(--jp-border) !important; border-radius: var(--jp-radius) !important; box-shadow: var(--jp-shadow) !important; font-family: 'Inter', sans-serif !important; overflow: hidden; } .flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--jp-surface) !important; } .flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { border-top-color: var(--jp-surface) !important; } .flatpickr-months { background: var(--jp-surface-2) !important; border-bottom: 1px solid var(--jp-border) !important; padding: 4px 0 !important; } .flatpickr-months .flatpickr-month { background: transparent !important; color: var(--jp-text) !important; fill: var(--jp-text) !important; height: 38px !important; } .flatpickr-current-month { color: var(--jp-text) !important; font-size: 0.9rem !important; font-weight: 600 !important; } .flatpickr-current-month input.cur-year, .flatpickr-current-month .flatpickr-monthDropdownContainer select { background: transparent !important; color: var(--jp-text) !important; font-weight: 600 !important; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--jp-text-muted) !important; fill: var(--jp-text-muted) !important; padding: 8px 10px !important; } .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { color: var(--jp-text) !important; fill: var(--jp-text) !important; background: rgba(255, 255, 255, 0.06) !important; border-radius: var(--jp-radius-sm) !important; } .flatpickr-weekdays { background: transparent !important; } span.flatpickr-weekday { background: transparent !important; color: var(--jp-text-muted) !important; font-size: 0.72rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; } .flatpickr-day { background: transparent !important; border: none !important; border-radius: var(--jp-radius-sm) !important; color: var(--jp-text) !important; font-size: 0.83rem !important; height: 32px !important; line-height: 32px !important; max-width: none !important; transition: background-color 0.12s !important; } .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: var(--jp-surface-2) !important; border: none !important; color: var(--jp-text) !important; } .flatpickr-day.today { background: rgba(59, 130, 246, 0.12) !important; border: 1px solid rgba(59, 130, 246, 0.35) !important; color: #93c5fd !important; font-weight: 600 !important; } .flatpickr-day.today:hover { background: rgba(59, 130, 246, 0.22) !important; } .flatpickr-day.selected, .flatpickr-day.selected:hover { background: #4a4a4a !important; border: none !important; color: #ffffff !important; font-weight: 600 !important; } .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: rgba(100, 116, 139, 0.4) !important; } .flatpickr-day.disabled, .flatpickr-day.disabled:hover { color: rgba(100, 116, 139, 0.25) !important; cursor: not-allowed !important; } .flatpickr-time { background: var(--jp-surface-2) !important; border-top: 1px solid var(--jp-border) !important; } .flatpickr-time input, .flatpickr-time .flatpickr-am-pm { background: transparent !important; color: var(--jp-text) !important; font-size: 0.875rem !important; font-weight: 500 !important; } .flatpickr-time input:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:hover { background: rgba(255, 255, 255, 0.05) !important; border-radius: var(--jp-radius-sm) !important; } .flatpickr-time .numInputWrapper span.arrowUp, .flatpickr-time .numInputWrapper span.arrowDown { border-color: rgba(255, 255, 255, 0.15) !important; } .flatpickr-time .numInputWrapper span.arrowUp::after { border-bottom-color: var(--jp-text-muted) !important; } .flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: var(--jp-text-muted) !important; } .flatpickr-time-separator { color: var(--jp-text-muted) !important; } /* ══════════════════════════════════════════════════════════════ ICON PICKER — #icone-grid / .icone-item ══════════════════════════════════════════════════════════════ */ #icone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; max-height: 420px; overflow-y: auto; padding-right: 4px; } .icone-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; border-radius: var(--jp-radius-sm); border: 1px solid var(--jp-border); background: rgba(255, 255, 255, 0.02); cursor: pointer; transition: background 0.15s, border-color 0.15s; text-align: center; } .icone-item:hover { background: rgba(6, 182, 212, 0.08); border-color: rgba(6, 182, 212, 0.4); } .icone-item i { font-size: 1.25rem; color: var(--jp-text); } .icone-item span { font-size: 0.62rem; color: var(--jp-text-muted); word-break: break-all; line-height: 1.2; } #icone-grid::-webkit-scrollbar { width: 4px; } #icone-grid::-webkit-scrollbar-track { background: transparent; } #icone-grid::-webkit-scrollbar-thumb { background: var(--jp-border); border-radius: 4px; } /* ══════════════════════════════════════════════════════════════ PERMISSION BADGE — .perm-badge ══════════════════════════════════════════════════════════════ */ .perm-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 99px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.3px; cursor: pointer; user-select: none; border: 1px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s; } .perm-badge:hover { transform: scale(1.05); } .perm-badge:active { transform: scale(0.97); } .perm-badge.liberado { background: rgba(34, 197, 94, 0.12); color: #4ade80; border-color: rgba(34, 197, 94, 0.28); } .perm-badge.liberado:hover { background: rgba(34, 197, 94, 0.22); } .perm-badge.bloqueado { background: rgba(239, 68, 68, 0.12); color: #f87171; border-color: rgba(239, 68, 68, 0.28); } .perm-badge.bloqueado:hover { background: rgba(239, 68, 68, 0.22); } /* ══════════════════════════════════════════════════════════════ CLIENTES — formulário inline + badges ══════════════════════════════════════════════════════════════ */ .clientes-form-card { margin-bottom: 16px !important; } .clientes-form-card .card-body { padding: 14px 20px; } .clientes-form-fields { display: flex; gap: 10px; align-items: center; justify-content: center; } .clientes-form-fields .form-control { background: var(--jp-surface-2); border: 1px solid var(--jp-border); color: var(--jp-text); border-radius: 8px; font-size: 0.85rem; height: 38px; } .clientes-form-fields .form-control::placeholder { color: var(--jp-text-muted); } .clientes-form-fields .form-control:focus { border-color: rgba(124, 58, 237, 0.6); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12); background: var(--jp-surface-2); color: var(--jp-text); outline: none; } .btn-registrar-cliente { background: linear-gradient(135deg, #5b21b6, #7c3aed); color: #fff; border: none; padding: 0 20px; height: 38px; border-radius: 8px; font-size: 0.84rem; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: opacity 0.2s; flex-shrink: 0; } .btn-registrar-cliente:hover { opacity: 0.86; color: #fff; } /* Ponto focal — badge ciano */ .badge-focal { display: inline-flex; align-items: center; gap: 4px; background: rgba(6, 182, 212, 0.1); color: #67e8f9; border: 1px solid rgba(6, 182, 212, 0.28); padding: 2px 9px; border-radius: 99px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2px; } /* Status usuário */ .badge-status-ativo { display: inline-flex; align-items: center; gap: 5px; background: rgba(34, 197, 94, 0.1); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.28); padding: 3px 10px; border-radius: 99px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.3px; cursor: pointer; user-select: none; transition: background 0.15s, border-color 0.15s; } .badge-status-ativo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; flex-shrink: 0; } .badge-status-ativo:hover { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.5); } .badge-status-inativo { display: inline-flex; align-items: center; gap: 5px; background: rgba(100, 116, 139, 0.1); color: #94a3b8; border: 1px solid rgba(100, 116, 139, 0.28); padding: 3px 10px; border-radius: 99px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.3px; cursor: pointer; user-select: none; transition: background 0.15s, border-color 0.15s; } .badge-status-inativo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; flex-shrink: 0; } .badge-status-inativo:hover { background: rgba(100, 116, 139, 0.18); border-color: rgba(100, 116, 139, 0.5); } /* Arquivado — badge âmbar */ .badge-arquivado { display: inline-flex; align-items: center; gap: 4px; background: rgba(245, 158, 11, 0.1); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.28); padding: 2px 9px; border-radius: 99px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2px; } /* Botão editar cliente */ .btn-edit-cliente { background: rgba(100, 116, 139, 0.12); color: var(--jp-text-muted); border: 1px solid var(--jp-border); border-radius: 6px; font-size: 0.75rem; font-weight: 600; transition: background 0.15s, color 0.15s, border-color 0.15s; } .btn-edit-cliente:hover { background: rgba(124, 58, 237, 0.15); color: #c4b5fd; border-color: rgba(124, 58, 237, 0.4); } /* Botão portal cliente */ .btn-portal-cliente { background: rgba(124, 58, 237, 0.1); color: #a78bfa; border: 1px solid rgba(124, 58, 237, 0.28); border-radius: 6px; font-size: 0.75rem; font-weight: 600; transition: background 0.15s, color 0.15s, border-color 0.15s; } .btn-portal-cliente:hover { background: rgba(124, 58, 237, 0.22); color: #c4b5fd; border-color: rgba(124, 58, 237, 0.55); } /* ── Modais dark — base genérica ────────────────────────────── */ .modal-content { background: var(--jp-surface) !important; border: 1px solid var(--jp-border) !important; border-radius: var(--jp-radius) !important; color: var(--jp-text) !important; } .modal-body { padding: 20px; } /* Header roxo (editar / registrar) */ .modal-header-purple { background: linear-gradient(135deg, #3b1a8a 0%, #7c3aed 100%); border-bottom: none; border-radius: var(--jp-radius) var(--jp-radius) 0 0; padding: 14px 20px; } /* Header vermelho (excluir / ação destrutiva) */ .modal-header-danger { background: linear-gradient(135deg, #7f1d1d 0%, #ef4444 100%); border-bottom: none; border-radius: var(--jp-radius) var(--jp-radius) 0 0; padding: 14px 20px; } /* Título e botão fechar — compartilhado entre os dois headers */ .modal-header-purple .modal-title, .modal-header-danger .modal-title { color: #fff; font-size: 0.93rem; font-weight: 600; } .modal-header-purple .close, .modal-header-danger .close { color: rgba(255,255,255,0.75); text-shadow: none; opacity: 1; background: transparent; border: none; font-size: 1.3rem; line-height: 1; margin-left: auto; } .modal-header-purple .close:hover, .modal-header-danger .close:hover { color: #fff; } .edit-label { font-size: 0.75rem; font-weight: 600; color: var(--jp-text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; display: block; } .edit-input { background: var(--jp-surface-2) !important; border: 1px solid var(--jp-border) !important; color: var(--jp-text) !important; border-radius: 8px !important; font-size: 0.85rem !important; } .edit-input:focus { border-color: rgba(124, 58, 237, 0.6) !important; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important; outline: none !important; } .edit-input option { background: var(--jp-surface-2); color: var(--jp-text); } /* Botão excluir cliente */ .btn-excluir-cliente { background: rgba(239, 68, 68, 0.1); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.28); border-radius: 6px; font-size: 0.75rem; font-weight: 600; transition: background 0.15s, color 0.15s, border-color 0.15s; } .btn-excluir-cliente:hover { background: rgba(239, 68, 68, 0.22); color: #fca5a5; border-color: rgba(239, 68, 68, 0.5); } /* (regras de modal movidas para a seção genérica acima) */ .btn-excluir-confirmar { background: linear-gradient(135deg, #7f1d1d, #ef4444); color: #fff; border: none; padding: 7px 18px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: opacity 0.2s; } .btn-excluir-confirmar:hover { opacity: 0.86; } /* Header laranja (arquivar) */ .modal-header-warning { background: linear-gradient(135deg, #78350f 0%, #f59e0b 100%); border-bottom: none; border-radius: var(--jp-radius) var(--jp-radius) 0 0; padding: 14px 20px; } .modal-header-warning .modal-title { color: #fff; font-size: 0.93rem; font-weight: 600; } .modal-header-warning .close { color: rgba(255,255,255,0.75); text-shadow: none; opacity: 1; background: transparent; border: none; font-size: 1.3rem; line-height: 1; margin-left: auto; } .modal-header-warning .close:hover { color: #fff; } /* Botão arquivar no modal de edição */ .btn-arquivar-modal { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 8px; font-size: 0.82rem; font-weight: 600; padding: 7px 14px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .btn-arquivar-modal:hover { background: rgba(245, 158, 11, 0.22); color: #fcd34d; border-color: rgba(245, 158, 11, 0.5); } /* Botão confirmar arquivar */ .btn-arquivar-confirmar { background: linear-gradient(135deg, #78350f, #f59e0b); color: #fff; border: none; padding: 7px 18px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: opacity 0.2s; } .btn-arquivar-confirmar:hover { opacity: 0.86; } /* Contador de tarefas */ .badge-tarefas { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; font-size: 0.68rem; font-weight: 700; margin-left: 5px; } .badge-tarefas.tem-tarefas { background: rgba(124, 58, 237, 0.2); color: #c4b5fd; border: 1px solid rgba(124, 58, 237, 0.35); } .badge-tarefas.sem-tarefas { background: rgba(100, 116, 139, 0.12); color: var(--jp-text-muted); border: 1px solid var(--jp-border); } /* ══════════════════════════════════════════════════════════════ ACESSOS CLIENTE ══════════════════════════════════════════════════════════════ */ /* Título com destaque do nome */ .page-title-highlight { color: #c4b5fd; font-weight: 700; } /* Botão voltar */ .btn-voltar { display: inline-flex; align-items: center; gap: 6px; background: rgba(100, 116, 139, 0.12); color: var(--jp-text-muted); border: 1px solid var(--jp-border); padding: 7px 16px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } .btn-voltar:hover { background: rgba(124, 58, 237, 0.12); color: #c4b5fd; border-color: rgba(124, 58, 237, 0.4); text-decoration: none; } /* Grid 2 colunas do formulário */ .acesso-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; } .acesso-form-field { display: flex; flex-direction: column; } /* Célula com botão copiar */ .cell-content { display: flex; align-items: center; gap: 8px; } /* Botão copiar */ .btn-copy { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(124, 58, 237, 0.08); color: #9f6ef5; border: 1px solid rgba(124, 58, 237, 0.25); border-radius: 6px; font-size: 0.72rem; cursor: pointer; flex-shrink: 0; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s; } .btn-copy:hover { background: rgba(124, 58, 237, 0.2); color: #c4b5fd; border-color: rgba(124, 58, 237, 0.5); transform: scale(1.08); } .btn-copy.copied { background: rgba(34, 197, 94, 0.15); color: #4ade80; border-color: rgba(34, 197, 94, 0.35); } /* Link externo na célula */ .acesso-link-cell { display: flex; align-items: center; gap: 6px; } .acesso-link-text { font-size: 0.82rem; color: var(--jp-text); } .btn-acesso-link { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: rgba(6, 182, 212, 0.08); color: #67e8f9; border: 1px solid rgba(6, 182, 212, 0.25); border-radius: 5px; font-size: 0.65rem; flex-shrink: 0; text-decoration: none; transition: background 0.15s, color 0.15s; } .btn-acesso-link:hover { background: rgba(6, 182, 212, 0.2); color: #a5f3fc; text-decoration: none; } /* ══════════════════════════════════════════════════════════════ TAREFAS CLIENTE ══════════════════════════════════════════════════════════════ */ /* Header verde (ações positivas — finalizar, confirmar) */ .modal-header-success { background: linear-gradient(135deg, #14532d 0%, #22c55e 100%); border-bottom: none; border-radius: var(--jp-radius) var(--jp-radius) 0 0; padding: 14px 20px; } .modal-header-success .modal-title { color: #fff; font-size: 0.93rem; font-weight: 600; } .modal-header-success .close { color: rgba(255,255,255,0.75); text-shadow: none; opacity: 1; background: transparent; border: none; font-size: 1.3rem; line-height: 1; margin-left: auto; } .modal-header-success .close:hover { color: #fff; } .btn-finalizar-confirmar { background: linear-gradient(135deg, #14532d, #22c55e); color: #fff; border: none; padding: 7px 18px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: opacity 0.2s; } .btn-finalizar-confirmar:hover { opacity: 0.86; } /* Grid do formulário de tarefas — nome+prazo / descrição */ .tarefas-form-grid { display: grid; grid-template-columns: 1fr 200px; gap: 12px 20px; } .tarefas-form-desc { grid-column: 1 / -1; } /* Input de data — Flatpickr trigger estilizado */ .jp-datepicker { background: var(--jp-surface-2) !important; border: 1px solid var(--jp-border) !important; color: var(--jp-text) !important; border-radius: 8px !important; font-size: 0.85rem !important; height: 38px !important; padding-right: 32px !important; cursor: pointer !important; width: 100%; } .jp-datepicker:focus { border-color: rgba(124, 58, 237, 0.6) !important; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important; outline: none !important; } .jp-datepicker-wrap { position: relative; } .jp-datepicker-wrap .jp-datepicker-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--jp-text-muted); font-size: 0.75rem; pointer-events: none; } /* Badge prazo na tabela */ .badge-prazo { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--jp-text-muted); } .badge-prazo.vencido { color: #f87171; } .badge-prazo.hoje { color: #fbbf24; } .badge-prazo.ok { color: #4ade80; } /* ══════════════════════════════════════════════════════════════ ANOTAÇÕES CLIENTE ══════════════════════════════════════════════════════════════ */ /* Header azul (visualizar / info) */ .modal-header-info { background: linear-gradient(135deg, #1e3a5f 0%, #3b82f6 100%); border-bottom: none; padding: 14px 20px; } .modal-header-info .modal-title { color: #fff; font-size: 0.93rem; font-weight: 600; } .modal-header-info .close { color: rgba(255,255,255,0.75); text-shadow: none; opacity: 1; font-size: 1.2rem; line-height: 1; padding: 0; margin-left: auto; } .modal-header-info .close:hover { color: #fff; } /* View modal — corpo da anotação */ .anotacao-view-data { font-size: 0.75rem; color: var(--jp-text-muted); margin-bottom: 10px; } .anotacao-view-body { background: var(--jp-surface-2); border: 1px solid var(--jp-border); border-radius: 8px; padding: 14px 16px; color: var(--jp-text); font-size: 0.88rem; line-height: 1.7; min-height: 60px; overflow-wrap: break-word; word-break: break-word; overflow: hidden; } .anotacao-view-body p { margin-bottom: 6px; } .anotacao-view-body img { max-width: 100%; height: auto; } .anotacao-view-body pre { white-space: pre-wrap; overflow-x: auto; } /* Quill editor — dark mode .ql-jp wraps the Quill target div; Quill inserts the toolbar as a sibling of the container, so both end up inside .ql-jp */ .ql-jp .ql-toolbar.ql-snow { background: var(--jp-surface-2); border: 1px solid rgba(255,255,255,0.09) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; border-radius: 8px 8px 0 0; padding: 5px 8px; } .ql-jp .ql-container.ql-snow { background: var(--jp-surface); border: 1px solid rgba(255,255,255,0.09) !important; border-top: none !important; border-radius: 0 0 8px 8px; font-size: 0.88rem; min-height: 120px; } .ql-jp .ql-editor { color: var(--jp-text); min-height: 120px; } .ql-jp .ql-editor.ql-blank::before { color: var(--jp-text-muted); font-style: normal; } /* SVG icons — 65% white at rest, full white on hover/active */ .ql-jp .ql-toolbar.ql-snow .ql-stroke { stroke: rgba(255,255,255,0.65) !important; } .ql-jp .ql-toolbar.ql-snow .ql-fill, .ql-jp .ql-toolbar.ql-snow .ql-stroke.ql-fill { fill: rgba(255,255,255,0.65) !important; } .ql-jp .ql-toolbar.ql-snow button:hover .ql-stroke, .ql-jp .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: rgba(255,255,255,0.95) !important; } .ql-jp .ql-toolbar.ql-snow button:hover .ql-fill, .ql-jp .ql-toolbar.ql-snow button.ql-active .ql-fill { fill: rgba(255,255,255,0.95) !important; } /* Button hover background */ .ql-jp .ql-toolbar.ql-snow button:hover, .ql-jp .ql-toolbar.ql-snow button.ql-active { background: rgba(255,255,255,0.07); border-radius: 4px; } /* Separator between button groups */ .ql-jp .ql-toolbar.ql-snow .ql-formats { margin-right: 10px; } /* Picker (e.g. header dropdown) */ .ql-jp .ql-toolbar.ql-snow .ql-picker-label { color: rgba(255,255,255,0.65); } .ql-jp .ql-toolbar.ql-snow .ql-picker-options { background: var(--jp-surface-2); border: 1px solid rgba(255,255,255,0.09) !important; border-radius: 6px; } .ql-jp .ql-toolbar.ql-snow .ql-picker-item { color: rgba(255,255,255,0.65); } .ql-jp .ql-toolbar.ql-snow .ql-picker-item:hover { color: #fff; } /* ══════════════════════════════════════════════════════════════ TAREFAS — KANBAN ══════════════════════════════════════════════════════════════ */ /* Board */ .kanban-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; } .kanban-board::-webkit-scrollbar { height: 6px; } .kanban-board::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; } /* Column */ .kanban-col { flex: 0 0 260px; min-width: 260px; background: var(--jp-surface); border: 1px solid var(--jp-border); border-radius: 12px; overflow: hidden; } .kanban-col-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--jp-surface-2); } .kanban-col-nome { font-size: 0.8rem; font-weight: 600; color: var(--jp-text); letter-spacing: 0.02em; text-transform: uppercase; } .kanban-col-count { font-size: 0.72rem; font-weight: 700; color: var(--jp-text-muted); background: rgba(255,255,255,0.07); border-radius: 10px; padding: 1px 7px; } .kanban-col-body { padding: 8px; min-height: 80px; max-height: 72vh; overflow-y: auto; } .kanban-col-body::-webkit-scrollbar { width: 4px; } .kanban-col-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; } /* Card */ .kanban-card { background: var(--jp-surface-2); border: 1px solid var(--jp-border); border-radius: 8px; padding: 11px 13px; margin-bottom: 8px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .kanban-card:last-child { margin-bottom: 0; } .kanban-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.35); border-color: rgba(124,58,237,0.35); } .kanban-card-nome { font-size: 0.85rem; font-weight: 600; color: var(--jp-text); line-height: 1.3; margin-bottom: 5px; } .kanban-card-cliente { font-size: 0.72rem; color: var(--jp-text-muted); background: rgba(255,255,255,0.05); border-radius: 4px; padding: 2px 7px; display: inline-block; } /* Responsible avatars (overlapping) */ .resp-avatars { display: flex; align-items: center; } .resp-avatar-sm { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid var(--jp-surface-2); margin-left: -7px; } .resp-avatars .resp-avatar-sm:first-child { margin-left: 0; } .resp-avatar-more { font-size: 0.65rem; font-weight: 700; color: var(--jp-text-muted); background: rgba(255,255,255,0.08); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--jp-surface-2); margin-left: -7px; } /* Chip selector (form) */ .resp-chip-selector { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .resp-chip { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 20px; border: 1px solid var(--jp-border); cursor: pointer; transition: all 0.15s; user-select: none; } .resp-chip.active, .resp-chip:has(input:checked) { background: rgba(124,58,237,0.18); border-color: #7c3aed; } .resp-chip.active .resp-chip-nome, .resp-chip:has(input:checked) .resp-chip-nome { color: #c4b5fd; } .resp-chip-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .resp-chip-nome { font-size: 0.78rem; color: var(--jp-text-muted); transition: color 0.15s; } /* Modal detalhe — meta linha */ .tarefa-detalhe-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.78rem; color: var(--jp-text-muted); margin-bottom: 12px; } .tarefa-detalhe-descricao { background: var(--jp-surface-2); border: 1px solid var(--jp-border); border-radius: 8px; padding: 10px 14px; font-size: 0.85rem; color: var(--jp-text); min-height: 40px; white-space: pre-wrap; } .resp-modal-item { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--jp-text); margin-bottom: 6px; } .resp-modal-item .resp-avatar-sm { border-color: var(--jp-surface); } /* Form grid 2+2 */ .tarefas-kanban-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .tarefas-kanban-form-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════ TAREFAS — Seções por status (tabela) ══════════════════════════════════════════════════════════════ */ .tarefa-status-section { margin-bottom: 20px; } .tarefa-section-card { margin-bottom: 0 !important; border-radius: 8px; overflow: hidden; } .tarefa-section-header { display: flex; align-items: center; padding: 10px 16px; background: var(--jp-surface-2); border-bottom: 1px solid var(--jp-border); } .tarefa-section-nome { font-size: 0.88rem; font-weight: 600; color: var(--jp-text); } .tarefa-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; background: rgba(255,255,255,0.06); border: 1px solid var(--jp-border); border-radius: 10px; font-size: 0.72rem; font-weight: 600; color: var(--jp-text-muted); } .td-resp-avatars { white-space: nowrap; } .td-acoes { white-space: nowrap; width: 60px; } /* ── Botão Favorito ─────────────────────────────────────────── */ .btn-favorito { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: none; padding: 0; color: var(--jp-text-muted); font-size: 1rem; border-radius: 6px; cursor: pointer; transition: color .15s, transform .15s; flex-shrink: 0; } .btn-favorito:hover { color: #fbbf24; transform: scale(1.2); } .btn-favorito.favoritado { color: #fbbf24; } .btn-favorito.favoritado:hover { color: #f59e0b; transform: scale(1.1); } .btn-favorito:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* ── Log de Acessos ─────────────────────────────────────────── */ .la-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 8px; } @media (max-width: 900px) { .la-kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .la-kpi-grid { grid-template-columns: 1fr 1fr; } } .la-kpi { background: var(--jp-surface); border: 1px solid var(--jp-border); border-radius: var(--jp-radius); padding: 16px 18px; display: flex; align-items: center; gap: 12px; transition: border-color .2s, transform .15s; } .la-kpi:hover { border-color: rgba(255,255,255,.13); transform: translateY(-1px); } .la-kpi-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .la-kpi-val { font-size: 1.7rem; font-weight: 700; line-height: 1; margin-bottom: 3px; } .la-kpi-lbl { font-size: .68rem; color: var(--jp-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; } .la-card { background: var(--jp-surface); border: 1px solid var(--jp-border); border-radius: var(--jp-radius); padding: 20px; margin-bottom: 20px; } .la-card-title { font-size: .72rem; font-weight: 700; color: var(--jp-text-muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .la-card-title i { font-size: .85rem; } .la-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--jp-border); margin-bottom: 24px; } .la-tab-btn { padding: 8px 18px; border: none; background: none; outline: none; color: var(--jp-text-muted); font-size: .85rem; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .15s, border-color .15s; display: flex; align-items: center; gap: 7px; } .la-tab-btn:hover { color: var(--jp-text); } .la-tab-btn.active { color: var(--jp-primary); border-bottom-color: var(--jp-primary); } .la-tab-pane { display: none; } .la-tab-pane.active { display: block; } .badge-ip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; font-size: .72rem; font-weight: 600; background: rgba(6,182,212,.1); color: #67e8f9; border: 1px solid rgba(6,182,212,.3); text-decoration: none; transition: background .15s, border-color .15s; } .badge-ip:hover { background: rgba(6,182,212,.2); border-color: rgba(6,182,212,.5); color: #a5f3fc; text-decoration: none; } .badge-ativo { display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:.7rem;font-weight:600;background:rgba(34,197,94,.1);color:#86efac;border:1px solid rgba(34,197,94,.3); } .badge-inativo { display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:.7rem;font-weight:600;background:rgba(100,116,139,.12);color:#94a3b8;border:1px solid rgba(100,116,139,.3); } .la-rank { width:24px;height:24px;border-radius:6px;font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center; } .la-rank-1 { background:rgba(251,191,36,.15);color:#fcd34d; } .la-rank-2 { background:rgba(148,163,184,.12);color:#cbd5e1; } .la-rank-3 { background:rgba(249,115,22,.12);color:#fdba74; } .la-rank-n { background:rgba(100,116,139,.1);color:#64748b; } .la-bar-wrap { flex:1; height:4px; background:rgba(255,255,255,.06); border-radius:99px; overflow:hidden; min-width: 40px; } .la-bar-fill { height:100%; border-radius:99px; } .la-section-label { font-size: .68rem; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--jp-text-muted); margin: 20px 0 10px; display: flex; align-items: center; gap: 8px; } /* ══════════════════════════════════════════════════════════════ LINKS FAVORITOS ══════════════════════════════════════════════════════════════ */ .lk-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; } .lk-title-wrap { display:flex; align-items:center; gap:10px; } .lk-stats { display:flex; gap:24px; } .lk-stat { text-align:center; } .lk-stat-val { font-size:1.5rem; font-weight:700; color:var(--jp-text); line-height:1; } .lk-stat-lbl { font-size:0.67rem; color:var(--jp-text-muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; margin-top:2px; } .lk-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; } .lk-search-wrap { position:relative; flex:1; min-width:200px; max-width:420px; } .lk-search { width:100%; background:var(--jp-surface); border:1px solid var(--jp-border); color:var(--jp-text); border-radius:8px; padding:9px 14px 9px 38px; font-size:0.85rem; outline:none; transition:border-color 0.2s; } .lk-search:focus { border-color:rgba(99,102,241,0.5); box-shadow:0 0 0 3px rgba(99,102,241,0.1); } .lk-search::placeholder { color:var(--jp-text-muted); } .lk-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--jp-text-muted); font-size:0.8rem; pointer-events:none; } .lk-search-kbd { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:var(--jp-surface-2); border:1px solid var(--jp-border); border-radius:4px; padding:1px 6px; font-size:0.62rem; color:var(--jp-text-muted); pointer-events:none; } .lk-btn-add { display:flex; align-items:center; gap:6px; padding:9px 16px; background:rgba(99,102,241,0.15); color:#a5b4fc; border:1px solid rgba(99,102,241,0.3); border-radius:8px; font-size:0.83rem; font-weight:600; cursor:pointer; transition:all 0.15s; white-space:nowrap; } .lk-btn-add:hover { background:rgba(99,102,241,0.25); color:#c4b5fd; border-color:rgba(99,102,241,0.5); } .lk-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; } .lk-tab { padding:5px 14px; border-radius:99px; font-size:0.75rem; font-weight:600; cursor:pointer; border:1px solid var(--jp-border); background:transparent; color:var(--jp-text-muted); transition:all 0.15s; white-space:nowrap; } .lk-tab:hover { border-color:rgba(255,255,255,0.15); color:var(--jp-text); } .lk-tab.active { background:rgba(99,102,241,0.15); border-color:rgba(99,102,241,0.4); color:#a5b4fc; } .lk-tab-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px; font-size:0.65rem; font-weight:700; background:rgba(255,255,255,0.07); color:var(--jp-text-muted); margin-left:5px; } .lk-tab.active .lk-tab-count { background:rgba(99,102,241,0.25); color:#a5b4fc; } .lk-section { font-size:0.68rem; font-weight:700; color:var(--jp-text-muted); text-transform:uppercase; letter-spacing:0.7px; margin:0 0 12px; display:flex; align-items:center; gap:8px; } .lk-section::after{ content:''; flex:1; height:1px; background:var(--jp-border); } .lk-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; margin-bottom:28px; } .lk-card { background:var(--jp-surface); border:1px solid var(--jp-border); border-radius:var(--jp-radius); padding:14px; cursor:pointer; transition:border-color 0.18s, transform 0.15s, box-shadow 0.18s; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:8px; } .lk-card:hover { border-color:rgba(99,102,241,0.35); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.35); } .lk-card.hidden { display:none !important; } .lk-card-top { display:flex; align-items:center; gap:10px; } .lk-favicon { width:28px; height:28px; border-radius:6px; object-fit:contain; background:var(--jp-surface-2); flex-shrink:0; padding:2px; } .lk-card-name { font-size:0.85rem; font-weight:600; color:var(--jp-text); line-height:1.3; flex:1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .lk-card-url { font-size:0.71rem; color:var(--jp-text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lk-card-cat { display:inline-flex; align-items:center; font-size:0.66rem; font-weight:600; color:var(--jp-text-muted); background:var(--jp-surface-2); padding:2px 8px; border-radius:99px; align-self:flex-start; } .lk-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:2px; } .lk-access-badge { display:flex; align-items:center; gap:4px; font-size:0.67rem; color:var(--jp-text-muted); } .lk-access-badge i{ font-size:0.6rem; } .lk-card-actions { display:flex; gap:4px; opacity:0; transition:opacity 0.15s; } .lk-card:hover .lk-card-actions { opacity:1; } .lk-action-btn { width:26px; height:26px; border-radius:6px; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.7rem; transition:all 0.12s; } .lk-btn-copy { background:rgba(99,102,241,0.12); color:#a5b4fc; } .lk-btn-copy:hover{ background:rgba(99,102,241,0.25); } .lk-btn-edit { background:rgba(245,158,11,0.12); color:#fcd34d; } .lk-btn-edit:hover{ background:rgba(245,158,11,0.25); } .lk-btn-del { background:rgba(239,68,68,0.1); color:#fca5a5; } .lk-btn-del:hover { background:rgba(239,68,68,0.22); } .lk-empty { text-align:center; padding:60px 20px; color:var(--jp-text-muted); } .lk-empty i { font-size:2.5rem; display:block; margin-bottom:14px; opacity:0.25; } .lk-empty p { font-size:0.87rem; margin:0 0 16px; } .lk-modal .modal-content { background:var(--jp-surface); border:1px solid var(--jp-border); border-radius:14px; } .lk-modal .modal-header { border-bottom:1px solid var(--jp-border); padding:16px 20px; } .lk-modal .modal-title { font-size:0.95rem; font-weight:700; color:var(--jp-text); } .lk-modal .modal-body { padding:20px; } .lk-modal .modal-footer { border-top:1px solid var(--jp-border); padding:14px 20px; } .lk-modal .close { color:var(--jp-text-muted); opacity:0.7; text-shadow:none; font-size:1.3rem; } .lk-modal .close:hover { color:var(--jp-text); opacity:1; } .lk-form-label { font-size:0.73rem; font-weight:600; color:var(--jp-text-muted); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:5px; display:block; } .lk-form-input { width:100%; background:var(--jp-surface-2); border:1px solid var(--jp-border); color:var(--jp-text); border-radius:8px; padding:9px 12px; font-size:0.84rem; outline:none; transition:border-color 0.2s; } .lk-form-input:focus { border-color:rgba(99,102,241,0.5); box-shadow:0 0 0 3px rgba(99,102,241,0.1); } .lk-form-input::placeholder { color:var(--jp-text-muted); } .lk-form-group { margin-bottom:14px; } .lk-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .lk-btn-save { background:rgba(99,102,241,0.2); color:#a5b4fc; border:1px solid rgba(99,102,241,0.4); border-radius:8px; padding:9px 20px; font-size:0.83rem; font-weight:600; cursor:pointer; transition:all 0.15s; } .lk-btn-save:hover{ background:rgba(99,102,241,0.35); } .lk-btn-cancel { background:transparent; color:var(--jp-text-muted); border:1px solid var(--jp-border); border-radius:8px; padding:9px 16px; font-size:0.83rem; font-weight:600; cursor:pointer; transition:all 0.15s; } .lk-btn-cancel:hover { color:var(--jp-text); border-color:rgba(255,255,255,0.15); } .lk-btn-danger { background:rgba(239,68,68,0.12); color:#fca5a5; border:1px solid rgba(239,68,68,0.3); border-radius:8px; padding:9px 16px; font-size:0.83rem; font-weight:600; cursor:pointer; transition:all 0.15s; margin-right:auto; } .lk-btn-danger:hover { background:rgba(239,68,68,0.25); } .lk-detail-field { background:var(--jp-surface-2); border:1px solid var(--jp-border); border-radius:8px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; } .lk-detail-label { font-size:0.67rem; color:var(--jp-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.4px; display:block; margin-bottom:3px; } .lk-detail-val { font-size:0.84rem; color:var(--jp-text); font-weight:500; word-break:break-all; } .lk-copy-btn { flex-shrink:0; width:28px; height:28px; border-radius:6px; border:none; background:rgba(99,102,241,0.1); color:#a5b4fc; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.75rem; transition:background 0.15s; } .lk-copy-btn:hover{ background:rgba(99,102,241,0.25); } .lk-cat-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .lk-cat-pill { padding:3px 11px; border-radius:99px; border:1px solid var(--jp-border); background:transparent; color:var(--jp-text-muted); font-size:0.72rem; font-weight:600; cursor:pointer; transition:all 0.14s; white-space:nowrap; } .lk-cat-pill:hover{ border-color:rgba(99,102,241,0.4); color:#a5b4fc; background:rgba(99,102,241,0.08); } .lk-cat-pill.active { border-color:rgba(99,102,241,0.55); color:#a5b4fc; background:rgba(99,102,241,0.15); } #lk-no-results { display:none; text-align:center; padding:40px; color:var(--jp-text-muted); font-size:0.84rem; } @media (max-width:600px) { .lk-grid { grid-template-columns: 1fr 1fr; } .lk-stats { gap:16px; } .lk-form-row { grid-template-columns: 1fr; } } @media (max-width:420px) { .lk-grid { grid-template-columns: 1fr; } } .la-section-label::after { content:''; flex:1; height:1px; background:var(--jp-border); } /* ═══════════════════════════════════════════════════════ TAREFAS — kanban ═══════════════════════════════════════════════════════ */ /* ── Drag handle ─────────────────────────────────────── */ .drag-handle { cursor: grab; color: var(--jp-text-muted); opacity: 0.3; font-size: 0.8rem; transition: opacity 0.15s; padding: 0 2px; user-select: none; } .drag-handle:active { cursor: grabbing; } tr:hover .drag-handle { opacity: 0.7; } .th-drag, .td-drag { width: 30px !important; padding: 0 6px !important; text-align: center !important; } /* ── Estados de drag ─────────────────────────────────── */ .sortable-ghost { opacity: 0.3 !important; background: rgba(59,130,246,0.08) !important; } .sortable-chosen { background: rgba(59,130,246,0.04) !important; } .drop-zone-active { outline: 2px dashed rgba(59,130,246,0.35); outline-offset: -2px; border-radius: var(--jp-radius-sm); } .drag-disabled .drag-handle { cursor: not-allowed !important; opacity: 0.12 !important; } /* ── Toggle subtarefas ───────────────────────────────── */ .th-toggle, .td-toggle { width: 28px !important; padding: 0 4px !important; text-align: center !important; } .subtarefa-toggle { position: relative; border: none; background: none; color: var(--jp-text-muted); cursor: pointer; padding: 2px 4px; font-size: 0.72rem; line-height: 1; } .subtarefa-toggle i { transition: transform 0.18s var(--ease, ease); } .subtarefa-toggle.open i { transform: rotate(90deg); } .subtarefa-toggle:hover { color: var(--jp-text); } .subtarefa-toggle .sub-count { position: absolute; top: -4px; right: -6px; min-width: 14px; height: 14px; padding: 0 3px; background: #7c3aed; color: #fff; border-radius: 8px; font-size: 0.6rem; font-weight: 700; line-height: 14px; } /* ── Subtarefas ──────────────────────────────────────── */ .subtarefa-row { display: none; } .subtarefa-row.open { display: table-row; } .subtarefa-cell { background: rgba(0,0,0,0.14) !important; padding: 8px 14px 8px 46px !important; border-top: none !important; } .subtarefa-wrap { display: flex; flex-direction: column; gap: 4px; } .subtarefa-list { display: flex; flex-direction: column; gap: 2px; } .subtarefa-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; background: var(--jp-surface-2); border: 1px solid var(--jp-border); } .subtarefa-item.concluida .subtarefa-nome { text-decoration: line-through; color: var(--jp-text-muted); } .subtarefa-drag { cursor: grab; color: var(--jp-text-muted); opacity: 0.35; font-size: 0.72rem; } .subtarefa-drag:active { cursor: grabbing; } .subtarefa-item:hover .subtarefa-drag { opacity: 0.7; } .subtarefa-check { cursor: pointer; accent-color: #7c3aed; flex-shrink: 0; } .subtarefa-nome { flex: 1; min-width: 80px; font-size: 0.82rem; color: var(--jp-text); } .subtarefa-prazo { flex-shrink: 0; } .subtarefa-resp { flex-shrink: 0; display: inline-flex; align-items: center; } .subtarefa-edit, .subtarefa-del { border: none; background: none; color: var(--jp-text-muted); cursor: pointer; opacity: 0; font-size: 0.76rem; padding: 2px 4px; flex-shrink: 0; transition: opacity 0.15s, color 0.15s; } .subtarefa-item:hover .subtarefa-edit, .subtarefa-item:hover .subtarefa-del { opacity: 0.55; } .subtarefa-edit:hover { color: #c4b5fd; opacity: 1; } .subtarefa-del:hover { color: #f87171; opacity: 1; } /* ── Adicionar subtarefa ─────────────────────────────── */ .subtarefa-add-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 4px 2px; } .subtarefa-add-line .sub-f-nome { flex: 1 1 200px; min-width: 150px; height: 32px; } .subtarefa-add-line .sub-f-prazo-wrap { flex: 0 0 130px; position: relative; } .subtarefa-add-line .sub-f-prazo { height: 32px; } .sub-f-resp { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; } .subtarefa-add-btn { border: none; background: rgba(124,58,237,0.18); color: #c4b5fd; border-radius: 6px; padding: 6px 14px; font-size: 0.78rem; font-weight: 600; cursor: pointer; height: 32px; } .subtarefa-add-btn:hover { background: rgba(124,58,237,0.3); } /* ── Adicionar tarefa inline ─────────────────────────── */ .add-tarefa-trigger-row td, .add-tarefa-form-row td { background: var(--jp-surface-2) !important; padding: 8px 14px !important; } .add-tarefa-trigger { width: 100%; text-align: left; border: none; background: none; color: var(--jp-text-muted); cursor: pointer; font-size: 0.82rem; padding: 4px 6px; border-radius: 6px; transition: background 0.15s, color 0.15s; } .add-tarefa-trigger:hover { background: rgba(124,58,237,0.12); color: #c4b5fd; } .add-tarefa-form-row { display: none; } .add-tarefa-form-row.open { display: table-row; } .add-tarefa-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .add-tarefa-form .add-f-nome { flex: 1 1 200px; min-width: 160px; height: 34px; } .add-tarefa-form .add-f-cliente { flex: 0 1 180px; height: 34px; } .add-tarefa-form .add-f-prazo-wrap { flex: 0 0 140px; position: relative; } .add-tarefa-form .add-f-prazo { height: 34px; } .add-f-resp { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; } .resp-toggle { border: 1px solid transparent; background: none; padding: 0; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; opacity: 0.45; transition: opacity 0.15s, border-color 0.15s; } .resp-toggle img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .resp-toggle:hover { opacity: 0.8; } .resp-toggle.active { opacity: 1; border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,0.35); } .add-tarefa-salvar { height: 34px; padding: 0 12px; } /* ── Gravação de entrega ─────────────────────────────── */ .grav-box { background: rgba(255,255,255,0.03); border: 1px solid var(--jp-border); border-radius: 10px; padding: 14px 16px; margin-top: 10px; } .grav-btn-rec { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; background: rgba(239,68,68,0.12); color: #fca5a5; border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all .15s; } .grav-btn-rec:hover { background: rgba(239,68,68,0.22); border-color: rgba(239,68,68,0.5); } .grav-btn-stop { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: rgba(245,158,11,0.12); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); border-radius: 8px; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all .15s; } .grav-btn-stop:hover { background: rgba(245,158,11,0.22); } .grav-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: grav-pulse 1s ease-in-out infinite; flex-shrink: 0; } @keyframes grav-pulse { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:.4; transform:scale(.85) } } .grav-badge-ok { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.22); border-radius: 8px; } .grav-regravar { font-size: 0.73rem; color: var(--jp-text-muted); background: transparent; border: 1px solid var(--jp-border); border-radius: 6px; padding: 3px 10px; cursor: pointer; white-space: nowrap; transition: all .15s; } .grav-regravar:hover { color: var(--jp-text); border-color: rgba(255,255,255,.2); } /* ── Seletor de espaço (custom dropdown) ─────────────── */ .kb-select-wrapper { position: relative; display: inline-flex; align-items: center; } .kb-select-left-icon { position: absolute; left: 10px; font-size: 0.72rem; color: rgba(167,139,250,0.55); pointer-events: none; transition: color 0.2s; z-index: 1; } .kb-select-wrapper:hover .kb-select-left-icon { color: rgba(167,139,250,0.9); } .kb-dropdown-trigger { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, rgba(124,58,237,0.10) 0%, rgba(79,70,229,0.06) 100%); border: 1px solid rgba(124,58,237,0.28); color: var(--jp-text); border-radius: 10px; padding: 6px 12px 6px 30px; font-size: 0.82rem; font-weight: 500; cursor: pointer; outline: none; min-width: 150px; letter-spacing: 0.01em; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .kb-dropdown-trigger:hover { border-color: rgba(124,58,237,0.55); background: linear-gradient(135deg, rgba(124,58,237,0.16) 0%, rgba(79,70,229,0.10) 100%); box-shadow: 0 0 0 3px rgba(124,58,237,0.10), 0 2px 8px rgba(0,0,0,0.18); } .kb-select-wrapper.open .kb-dropdown-trigger { border-color: rgba(124,58,237,0.72); box-shadow: 0 0 0 3px rgba(124,58,237,0.18), 0 2px 10px rgba(0,0,0,0.22); background: linear-gradient(135deg, rgba(124,58,237,0.20) 0%, rgba(79,70,229,0.13) 100%); } .kb-dropdown-label { flex: 1; text-align: left; } .kb-dropdown-arrow { font-size: 0.56rem; color: rgba(167,139,250,0.55); transition: transform 0.2s, color 0.2s; flex-shrink: 0; } .kb-select-wrapper.open .kb-dropdown-arrow, .kb-select-wrapper:hover .kb-dropdown-arrow { color: rgba(167,139,250,0.9); } .kb-select-wrapper.open .kb-dropdown-arrow { transform: rotate(180deg); } .kb-dropdown-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; background: #1a1828; border: 1px solid rgba(124,58,237,0.32); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(124,58,237,0.08); z-index: 9999; overflow: hidden; padding: 4px; animation: kb-drop-in 0.14s ease; } @keyframes kb-drop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .kb-select-wrapper.open .kb-dropdown-menu { display: block; } .kb-dropdown-option { padding: 8px 12px; font-size: 0.82rem; color: #c4b5fd; cursor: pointer; border-radius: 7px; transition: background 0.13s, color 0.13s; white-space: nowrap; } .kb-dropdown-option:hover { background: rgba(124,58,237,0.18); color: #ede9fe; } .kb-dropdown-option.active { background: rgba(124,58,237,0.26); color: #ede9fe; font-weight: 600; } /* ── Botão gerenciar quadros ─────────────────────────── */ .btn-gerenciar-kb { background: var(--jp-surface-2); border: 1px solid var(--jp-border); color: var(--jp-text-muted); border-radius: 7px; padding: 6px 14px; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; display: inline-flex; align-items: center; gap: 6px; } .btn-gerenciar-kb:hover { background: rgba(124,58,237,0.12); color: #c4b5fd; border-color: rgba(124,58,237,0.4); } /* ── Modal gerenciar quadros ─────────────────────────── */ .kb-manage-item { display: flex; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--jp-border); gap: 8px; } .kb-manage-item:last-child { border-bottom: none; } .kb-manage-item-normal { display: flex; align-items: center; gap: 8px; flex: 1; } .kb-manage-item-edit { display: none; flex: 1; align-items: center; gap: 6px; } .kb-manage-nome { font-size: 0.84rem; color: var(--jp-text); flex: 1; } .kb-manage-btns { display: flex; gap: 4px; margin-left: auto; } .kb-btn-edit, .kb-btn-del, .kb-btn-save, .kb-btn-cancel { border: none; background: transparent; color: var(--jp-text-muted); border-radius: 5px; padding: 3px 7px; font-size: 0.75rem; cursor: pointer; transition: background .15s, color .15s; } .kb-btn-edit:hover { background: rgba(124,58,237,.15); color: #c4b5fd; } .kb-btn-del:hover { background: rgba(239,68,68,.12); color: #fca5a5; } .kb-btn-save:hover { background: rgba(16,185,129,.15); color: #6ee7b7; } .kb-btn-cancel:hover { background: rgba(100,116,139,.15); } .kb-edit-input { flex: 1; background: var(--jp-input, #1e1e2e); border: 1px solid var(--jp-border); color: var(--jp-text); border-radius: 6px; padding: 4px 8px; font-size: 0.82rem; } .kb-edit-input:focus { outline: none; border-color: rgba(124,58,237,.6); }