:root { /* Dark (default) */ --admin-bg: #07110d; --admin-surface: #111b16; --admin-surface-2: #16241d; --admin-card: #16241d; --admin-border: #24352d; --admin-border-subtle: rgba(255,255,255,0.06); --admin-text: #edf3ee; --admin-muted: #9fb2a7; --admin-text-muted: #9fb2a7; --admin-primary: #93cd07; --admin-primary-strong: #acd943; --admin-accent: #93cd07; --admin-danger: #ef5b5b; --admin-warning: #f0b64d; --admin-success: #45c47a; --admin-info: #3498db; --admin-radius-sm: 8px; --admin-radius-md: 12px; --admin-radius-lg: 18px; --admin-shadow-sm: 0 16px 38px rgba(0, 0, 0, 0.18); --admin-shadow-md: 0 22px 50px rgba(0, 0, 0, 0.22); --admin-space-1: 8px; --admin-space-2: 12px; --admin-space-3: 16px; --admin-space-4: 24px; --admin-space-5: 32px; --admin-space-6: 40px; /* Alias semânticos usados nas novas views (sobrescritos no light) */ --admin-overlay-weak: rgba(255,255,255,0.02); --admin-overlay-soft: rgba(255,255,255,0.04); --admin-overlay-mid: rgba(255,255,255,0.06); --admin-overlay-strong: rgba(255,255,255,0.10); --admin-text-on-primary: #0a1005; } /* ── Light mode — ativado via ── */ html[data-theme="light"] { --admin-bg: #f3f5f2; --admin-surface: #ffffff; --admin-surface-2: #f7faf5; --admin-card: #ffffff; --admin-border: #d5dfd7; --admin-border-subtle: rgba(10,22,12,0.08); --admin-text: #14241a; --admin-muted: #5a6e62; --admin-text-muted: #5a6e62; --admin-primary: #6ea205; --admin-primary-strong: #7cb807; --admin-accent: #6ea205; --admin-danger: #d63a3a; --admin-warning: #b47100; --admin-success: #2e8f4f; --admin-info: #1f78b4; --admin-shadow-sm: 0 10px 24px rgba(14, 30, 20, 0.08); --admin-shadow-md: 0 16px 40px rgba(14, 30, 20, 0.10); --admin-overlay-weak: rgba(14,30,20,0.025); --admin-overlay-soft: rgba(14,30,20,0.04); --admin-overlay-mid: rgba(14,30,20,0.06); --admin-overlay-strong: rgba(14,30,20,0.10); --admin-text-on-primary: #ffffff; color-scheme: light; } html[data-theme="light"] body.admin-body { background: linear-gradient(180deg, #f7faf5 0%, #eef2ea 100%) !important; color: var(--admin-text); } html[data-theme="light"] .admin-panel, html[data-theme="light"] .admin-sidebar, html[data-theme="light"] .admin-topbar, html[data-theme="light"] .admin-card, html[data-theme="light"] .admin-kpi-card { background: var(--admin-card); color: var(--admin-text); border-color: var(--admin-border); } html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: #ffffff; color: var(--admin-text); border-color: var(--admin-border); } html[data-theme="light"] .admin-btn-ghost { color: var(--admin-text); } html[data-theme="light"] .admin-btn-ghost:hover { background: var(--admin-overlay-soft); } html[data-theme="light"] .admin-table thead th { background: var(--admin-overlay-soft); color: var(--admin-muted); } html[data-theme="light"] .admin-table tbody tr:nth-child(even) { background: var(--admin-overlay-weak); } /* Light mode — overrides para cores inline hardcoded nas views */ html[data-theme="light"] [style*="color:#93cd07"] { color: #5d8b04 !important; } html[data-theme="light"] [style*="color:#9fb2a7"] { color: #5a6e62 !important; } html[data-theme="light"] [style*="color:#ef5b5b"] { color: #c52626 !important; } html[data-theme="light"] [style*="color:#e74c3c"] { color: #c52626 !important; } html[data-theme="light"] [style*="color:#f59e0b"] { color: #9a6100 !important; } html[data-theme="light"] [style*="color:#f0b64d"] { color: #9a6100 !important; } html[data-theme="light"] [style*="color:#4facfe"] { color: #1e6fa3 !important; } html[data-theme="light"] [style*="color:#c6d4cb"] { color: #2a3b32 !important; } html[data-theme="light"] [style*="color:#556b61"] { color: #7a8c82 !important; } html[data-theme="light"] [style*="color:#0c0c0c"] { color: #ffffff !important; } html[data-theme="light"] [style*="background:#0c0c0c"] { background: #f0f4ed !important; } html[data-theme="light"] [style*="background:#050505"] { background: #eaeeea !important; } html[data-theme="light"] [style*="background:rgba(255,255,255,"] { background: rgba(14,30,20,0.04) !important; } html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,"] { border-color: rgba(14,30,20,0.12) !important; } html[data-theme="light"] [style*="border:1px dashed rgba(255,255,255,"] { border-color: rgba(14,30,20,0.16) !important; } html[data-theme="light"] [style*="border-top:1px solid rgba(255,255,255,"] { border-top-color: rgba(14,30,20,0.08) !important; } html[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255,"] { border-bottom-color: rgba(14,30,20,0.08) !important; } html[data-theme="light"] .admin-kpi-icon-blue { background: #4facfe !important; color: #fff !important; } html[data-theme="light"] .admin-kpi-icon-green { background: #6fa905 !important; color: #fff !important; } html[data-theme="light"] .admin-kpi-icon-yellow { background: #e58705 !important; color: #fff !important; } html[data-theme="light"] .admin-kpi-icon-purple { background: #9333ea !important; color: #fff !important; } html[data-theme="light"] .admin-kpi-icon-red { background: #dc2626 !important; color: #fff !important; } html[data-theme="light"] .admin-badge.is-success { background: rgba(46,143,79,0.15); color: #206b39; border-color: rgba(46,143,79,0.3); } html[data-theme="light"] .admin-badge.is-warning { background: rgba(180,113,0,0.15); color: #8a5700; border-color: rgba(180,113,0,0.3); } html[data-theme="light"] .admin-badge.is-info { background: rgba(31,120,180,0.15); color: #185b8a; border-color: rgba(31,120,180,0.3); } html[data-theme="light"] .admin-badge.is-muted { background: rgba(14,30,20,0.08); color: #5a6e62; border-color: rgba(14,30,20,0.14); } html[data-theme="light"] .admin-badge.is-primary { background: rgba(110,162,5,0.14); color: #4d7200; border-color: rgba(110,162,5,0.3); } html[data-theme="light"] .admin-badge.is-danger { background: rgba(214,58,58,0.14); color: #a02a2a; border-color: rgba(214,58,58,0.3); } html[data-theme="light"] .admin-toast.is-success { background: #eaf7ef; color: #205537; border-color: rgba(46,143,79,0.3); } html[data-theme="light"] .admin-toast.is-danger { background: #fdeaea; color: #7a1e1e; border-color: rgba(214,58,58,0.3); } html[data-theme="light"] .admin-dialog-backdrop { background: rgba(14, 30, 20, .45); } html[data-theme="light"] .bi-heatmap td[style*="rgba(147,205,7"] { color: #1a2b04; } html[data-theme="light"] .bi-heatmap .hm-val, html[data-theme="light"] .cohort-table .ch-pct { color: #14241a; } html[data-theme="light"] .kb-card { background: var(--admin-card); } html[data-theme="light"] .kb-col { background: var(--admin-overlay-soft); } html[data-theme="light"] .admin-sidebar-nova-venda { color: #0a1005; } html[data-theme="light"] .admin-nav-group-items a { color: var(--admin-text); } html[data-theme="light"] .admin-nav-group-toggle { color: var(--admin-text); } /* Toggle de tema no shell */ .admin-theme-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--admin-overlay-soft); border: 1px solid var(--admin-border); border-radius: 999px; padding: 4px 4px; cursor: pointer; color: var(--admin-muted); transition: background 120ms; } .admin-theme-toggle:hover { background: var(--admin-overlay-mid); } .admin-theme-toggle .admin-theme-opt { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; transition: background 120ms, color 120ms; } .admin-theme-toggle .admin-theme-opt.is-active { background: var(--admin-primary); color: var(--admin-text-on-primary); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } a, button, input, select, textarea, label, summary, [onclick] { touch-action: manipulation; } html, body { min-height: 100%; overscroll-behavior: none; } body.admin-body { margin: 0; font-family: "Montserrat", "Segoe UI", Arial, sans-serif; font-size: 0.875rem; color: var(--admin-text); background: radial-gradient(900px 420px at 10% -10%, rgba(147, 205, 7, 0.08), transparent 62%), radial-gradient(780px 340px at 100% 0%, rgba(69, 196, 122, 0.06), transparent 58%), var(--admin-bg); overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button, input, textarea, select { font: inherit; } .admin-shell { min-height: 100vh; overflow-x: hidden; } .admin-main { margin-left: 250px; } .admin-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 29; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .admin-sidebar-overlay.is-open { opacity: 1; pointer-events: auto; } .admin-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 250px; padding: 18px 12px; background: rgba(6, 12, 9, 0.96); border-right: 1px solid var(--admin-border); display: flex; flex-direction: column; gap: 14px; backdrop-filter: blur(16px); overflow-y: auto; z-index: 10; } .admin-sidebar h2, .admin-topbar h1, .admin-panel h2, .admin-auth-card h2 { margin: 0; } .admin-sidebar-brand { padding-bottom: 4px; } /* Botao fechar do drawer mobile — escondido no desktop, exibido em <=980px */ .admin-sidebar-mob-close { display: none; } .admin-brand-logo { width: 130px; max-width: 100%; height: auto; margin-bottom: 8px; } /* Troca de logo por tema: no tema claro, usa a variante clara se existir; caso contrário mantém o logo padrão (escuro). !important defende de inline style residual em views antigas. */ .admin-brand-logo-dark { display: block !important; } .admin-brand-logo-light { display: none !important; } html[data-theme="light"] .admin-brand-logo-light { display: block !important; } html[data-theme="light"] .admin-sidebar-brand:has(.admin-brand-logo-light) .admin-brand-logo-dark, html[data-theme="light"] .admin-login-brand-inner:has(.admin-brand-logo-light) .admin-brand-logo-dark { display: none !important; } /* Sem logo do tema claro cadastrado, aplica fundo escuro arredondado para manter o logo do tema escuro legível sobre a sidebar branca. */ html[data-theme="light"] .admin-sidebar-brand:not(:has(.admin-brand-logo-light)) { background: #000; border-radius: 10px; } /* Area principal branca no tema claro. */ html[data-theme="light"] main.admin-main { background: #fff; } /* Links da navegacao da sidebar em preto no tema claro (exceto Nova Venda). */ html[data-theme="light"] .admin-sidebar-nav a:not(.admin-sidebar-nova-venda) { color: #000000; } /* Colunas da semana (dashboard) com fundo branco no tema claro. */ html[data-theme="light"] .dash-week-col { background: #fff; } .admin-brand-logo-auth { width: 210px; margin-bottom: 18px; } .admin-kicker { margin: 0 0 4px; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--admin-primary); } .admin-sidebar-copy, .admin-topbar p, .admin-auth-card p, .admin-panel p, .admin-empty-state p, .admin-kpi-card p, .admin-action-card span, .admin-media-card span, .admin-toolbar-meta, .admin-field small { color: var(--admin-muted); } .admin-sidebar-nav { display: grid; gap: 8px; } .admin-sidebar-nova-venda { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; margin-bottom: 4px; border-radius: var(--admin-radius-sm); background: var(--admin-primary, #93cd07); color: #000 !important; font-weight: 700; font-size: .85rem; letter-spacing: .3px; text-decoration: none; transition: background .15s, transform .1s; } .admin-sidebar-nova-venda:hover { background: #a5e00a; transform: scale(1.02); } .admin-sidebar-nova-venda svg { stroke: #000; } /* Por padrão (desktop) mostra label completo, esconde curto */ .admin-sidebar-nova-venda .snova-text-short { display: none; } .admin-sidebar-nav a:not(.admin-sidebar-nova-venda) { min-height: 38px; padding: 0 12px; border-radius: var(--admin-radius-sm); display: flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 600; color: #a8bdb2; border: 1px solid transparent; border-left: 2px solid transparent; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; } @media (min-width: 981px) { .admin-sidebar-nav a:not(.admin-sidebar-nova-venda) { font-size: 0.78rem; } .admin-nav-group-toggle { font-size: 0.78rem; } .admin-nav-group-items a { font-size: 0.74rem; } .admin-sidebar-logout .admin-btn-label { display: none; } .admin-sidebar-logout { justify-content: center; } } .admin-nav-ico { display: flex; align-items: center; flex-shrink: 0; opacity: 0.55; transition: opacity 150ms; } .admin-sidebar-nav a:not(.admin-sidebar-nova-venda):hover, .admin-sidebar-nav a:not(.admin-sidebar-nova-venda):focus-visible { background: rgba(147, 205, 7, 0.06); color: var(--admin-text); } .admin-sidebar-nav a:not(.admin-sidebar-nova-venda):hover .admin-nav-ico { opacity: 0.85; } .admin-sidebar-nav a.is-active { background: linear-gradient(90deg, rgba(147, 205, 7, 0.13), rgba(147, 205, 7, 0.04)); border-color: transparent; border-left-color: var(--admin-primary); color: var(--admin-text); } .admin-sidebar-nav a.is-active .admin-nav-ico { opacity: 1; color: var(--admin-primary); } /* ── Nav Groups (collapsible) ── */ .admin-nav-group-toggle { width: 100%; min-height: 38px; padding: 0 12px; border-radius: var(--admin-radius-sm); display: flex; align-items: center; gap: 10px; background: none; border: 1px solid transparent; color: #a8bdb2; font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; } .admin-nav-group-toggle:hover, .admin-nav-group-toggle:focus-visible { background: rgba(147, 205, 7, 0.06); color: var(--admin-text); } .admin-nav-group-toggle .admin-nav-ico { opacity: 0.55; transition: opacity 150ms; } .admin-nav-group-toggle:hover .admin-nav-ico { opacity: 0.85; } .admin-nav-group.is-open > .admin-nav-group-toggle { color: var(--admin-text); } .admin-nav-group.is-open > .admin-nav-group-toggle .admin-nav-ico { opacity: 1; color: var(--admin-primary); } .admin-nav-chevron { margin-left: auto; flex-shrink: 0; opacity: 0.4; transition: transform 200ms ease; } .admin-nav-group.is-open > .admin-nav-group-toggle .admin-nav-chevron { transform: rotate(180deg); opacity: 0.7; } .admin-nav-group-items { display: grid; gap: 2px; max-height: 0; overflow: hidden; transition: max-height 250ms ease, padding 200ms ease; padding-left: 16px; } .admin-nav-group.is-open > .admin-nav-group-items { max-height: 400px; padding-top: 4px; padding-bottom: 4px; } .admin-nav-group-items a { font-size: 0.78rem; min-height: 34px; padding: 0 10px; } .admin-sidebar-foot { margin-top: auto; display: grid; gap: 12px; } .admin-sidebar-foot-actions { display: flex; flex-direction: column; gap: 8px; } .admin-sidebar-foot-actions .admin-btn-ghost { min-height: 34px; font-size: .78rem; } .admin-sidebar-foot-row { display: flex; align-items: center; gap: 8px; } .admin-sidebar-foot-row .admin-theme-toggle { flex: 0 0 auto; } .admin-sidebar-foot-row .admin-sidebar-toggle-values { flex: 1; min-width: 0; justify-content: center; padding: 0 8px; } @media (min-width: 981px) { .admin-sidebar-foot-row .admin-sidebar-toggle-values .sidebar-toggle-label { display: none; } } .admin-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--admin-border); border-radius: var(--admin-radius-sm); } .admin-user-avatar { width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(135deg, #1e3a0f, #3a6014); color: #c8e46a; font-size: 0.78rem; font-weight: 700; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; text-align: center; line-height: 1; } .admin-sidebar-user > div strong { font-size: 0.8rem; } .admin-sidebar-user > div span { font-size: 0.72rem; color: var(--admin-muted); display: block; margin-top: 1px; } .admin-sidebar-foot strong, .admin-gallery-headline strong, .admin-media-card strong, .admin-kpi-card strong { display: block; } .admin-sidebar-foot span:not(.admin-user-avatar), .admin-table td span:not(.admin-badge) { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--admin-muted); } .admin-main { padding: 22px 24px; min-width: 0; max-width: 100%; } .admin-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .admin-topbar h1 { font-size: 1.15rem; } .admin-topbar p { font-size: 0.8rem; } .admin-topbar-main { display: flex; align-items: center; gap: 16px; } .admin-nav-toggle { display: none; min-height: 36px; min-width: 36px; padding: 0 10px; border-radius: var(--admin-radius-sm); border: 1px solid var(--admin-border); background: rgba(255, 255, 255, 0.02); color: var(--admin-text); align-items: center; justify-content: center; gap: 8px; } .admin-sidebar-collapse-btn { display: inline-flex; min-height: 36px; min-width: 36px; padding: 0 10px; border-radius: var(--admin-radius-sm); border: 1px solid var(--admin-border); background: rgba(255, 255, 255, 0.02); color: var(--admin-text); align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; } .admin-sidebar-collapse-btn:hover { transform: translateY(-1px); border-color: var(--admin-primary); } .admin-sidebar-collapse-btn:focus-visible { outline: 2px solid var(--admin-primary); outline-offset: 2px; } html.admin-sidebar-collapsed .admin-sidebar { transform: translateX(-100%); pointer-events: none; } html.admin-sidebar-collapsed .admin-main { margin-left: 0; } .admin-sidebar { transition: transform 200ms ease; } .admin-main { transition: margin-left 200ms ease; } @media (max-width: 980px) { .admin-sidebar-collapse-btn { display: none; } html.admin-sidebar-collapsed .admin-sidebar { transform: translateX(-100%); } } .admin-topbar-actions, .admin-inline-actions, .admin-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; } .admin-content { display: grid; gap: 18px; } @media (max-width: 640px) { .admin-content { gap: 10px; } } .admin-alert { padding: 10px 14px; border-radius: var(--admin-radius-sm); border: 1px solid transparent; font-size: 0.82rem; } .admin-alert p { margin: 0; } .admin-alert p + p { margin-top: 8px; } .admin-alert-success { background: rgba(69, 196, 122, 0.12); border-color: rgba(69, 196, 122, 0.24); } .admin-alert-danger { background: rgba(239, 91, 91, 0.12); border-color: rgba(239, 91, 91, 0.24); } .admin-panel, .admin-auth-card, .admin-kpi-card, .admin-action-card, .admin-media-card, .admin-gallery-card, .admin-subcard, .admin-section-card { background: linear-gradient(180deg, rgba(21, 33, 27, 0.96), rgba(13, 21, 17, 0.96)); border: 1px solid var(--admin-border); border-radius: var(--admin-radius-md); box-shadow: var(--admin-shadow-sm); } .admin-panel, .admin-auth-card { padding: 18px; } .admin-panel h2 { font-size: 1rem; } .admin-panel > .admin-form { margin-top: 4px; } .admin-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .admin-kpi-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Em mobile (<=640px): zera fundo/borda/padding do admin-panel raiz da pagina pra liberar espaco horizontal. Aplica automaticamente em
(wrapper da pagina). Cards aninhados
preservam seu visual. .admin-panel-flush-mobile mantida pra opt-in explicito (ex: div.admin-panel raiz). */ @media (max-width: 640px) { section.admin-panel, .admin-panel-flush-mobile { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Sem sombra em qualquer admin-panel no mobile (inclui cards aninhados) */ .admin-panel { box-shadow: none !important; } } /* ── Toggle de visualizacao Lista | Kanban (header de /admin/vehicle-services e /admin/patio) ── */ .vs-view-toggle { display: inline-flex; padding: 3px; background: var(--admin-surface-2, #141414); border: 1px solid var(--admin-border-strong, #2a2a2a); border-radius: 10px; flex-shrink: 0; } .vs-view-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 7px; color: var(--admin-muted, #8a8a8a); font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; } .vs-view-opt:hover { color: var(--admin-text, #ececec); background: rgba(255,255,255,.04); } .vs-view-opt.is-active { background: var(--admin-surface-3, #1a1a1a); color: var(--admin-text, #ececec); box-shadow: inset 0 0 0 1px var(--admin-border-stronger, #3a3a3a); } .admin-body.is-brilho .vs-view-opt.is-active { box-shadow: inset 0 0 0 1px #d6d6d6; } .vs-view-opt svg { flex-shrink: 0; } @media (max-width: 640px) { /* No mobile, sempre cards/lista — toggle Lista|Kanban e Lista|Grid sao redundantes */ .vs-view-toggle, .adm-view-toggle { display: none !important; } /* Toggle filtros: aparece em mobile e colapsa o form da listagem */ .adm-filter-toggle { display: flex !important; width: 100%; min-height: 44px; justify-content: center; margin-bottom: 12px; } .adm-filter-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .adm-filter-toggle svg { transition: transform .2s; } /* Form colapsado por padrao no mobile (se tem id e usa data-filter-toggle apontando pra ele) */ form#leadFilterForm, form#quoteFilterForm, form#vsFilterForm { display: none; } form#leadFilterForm.is-open, form#quoteFilterForm.is-open, form#vsFilterForm.is-open { display: grid; gap: 10px; padding: 12px; background: var(--admin-surface-2, #141414); border: 1px solid var(--admin-border, #2a2a2a); border-radius: 12px; margin-bottom: 12px; } } /* ── Toggle Grid/Lista inline (header de /admin/leads, /admin/quotes, /admin/clients) ── */ .adm-view-toggle { display: inline-flex; padding: 3px; background: var(--admin-surface-2, #141414); border: 1px solid var(--admin-border-strong, #2a2a2a); border-radius: 10px; flex-shrink: 0; } .adm-view-toggle [data-avc-toggle] { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 7px; border: 0; background: transparent; color: var(--admin-muted, #8a8a8a); font: inherit; font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; } .adm-view-toggle [data-avc-toggle]:hover { color: var(--admin-text, #ececec); background: rgba(255,255,255,.04); } .adm-view-toggle [data-avc-toggle].is-active { background: var(--admin-surface-3, #1a1a1a); color: var(--admin-text, #ececec); box-shadow: inset 0 0 0 1px var(--admin-border-stronger, #3a3a3a); } .admin-body.is-brilho .adm-view-toggle [data-avc-toggle].is-active { box-shadow: inset 0 0 0 1px #d6d6d6; } @media (max-width: 640px) { .adm-view-toggle { width: 100%; } .adm-view-toggle [data-avc-toggle] { flex: 1; justify-content: center; min-height: 40px; } } /* ── Filtro de periodo (Tudo/Hoje/Semana/Mensal) — header de /admin/vehicle-services ── */ .vs-period-bar { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--admin-surface-2, #141414); border: 1px solid var(--admin-border-strong, #2a2a2a); border-radius: 10px; } .vs-period-opt { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 7px; color: var(--admin-muted, #8a8a8a); font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; } .vs-period-opt:hover { color: var(--admin-text, #ececec); background: rgba(255,255,255,.04); } .vs-period-opt.is-active { background: var(--admin-surface-3, #1a1a1a); color: var(--admin-text, #ececec); box-shadow: inset 0 0 0 1px var(--admin-border-stronger, #3a3a3a); } .admin-body.is-brilho .vs-period-opt.is-active { box-shadow: inset 0 0 0 1px #d6d6d6; } @media (max-width: 640px) { .vs-period-bar { display: flex; width: 100%; } .vs-period-opt { flex: 1; justify-content: center; min-height: 40px; padding: 8px; } } .admin-kpi-card { padding: 14px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; min-width: 0; } .admin-kpi-card > .admin-kpi-icon { grid-column: 1; grid-row: 1 / span 4; align-self: center; margin-bottom: 0; } .admin-kpi-card > span:not(.kpi-delta) { grid-column: 2; grid-row: 1; min-width: 0; } .admin-kpi-card > strong { grid-column: 2; grid-row: 2; min-width: 0; overflow-wrap: anywhere; } .admin-kpi-card > p { grid-column: 2; grid-row: 3; margin: 0; } .admin-kpi-card > .kpi-delta { grid-column: 2; grid-row: 4; justify-self: start; margin-top: 4px; } .admin-kpi-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 0; flex-shrink: 0; } .admin-kpi-icon svg { width: 22px; height: 22px; stroke-width: 2.2; flex-shrink: 0; } /* Fundo sólido + ícone branco — contraste AAA, independente do tema */ .admin-kpi-icon[class*="admin-kpi-icon-"] svg, .admin-kpi-icon[class*="admin-kpi-icon-"] svg * { stroke: #fff !important; color: #fff !important; } .admin-kpi-icon-blue { background: #4facfe !important; color: #fff !important; } .admin-kpi-icon-green { background: #6fa905 !important; color: #fff !important; } .admin-kpi-icon-yellow{ background: #f59e0b !important; color: #fff !important; } .admin-kpi-card span { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--admin-muted); } .admin-kpi-card strong { font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1; color: var(--admin-text); } .admin-kpi-card p { font-size: 0.72rem; margin: 0; } .admin-action-grid, .admin-panel-grid { display: grid; gap: 16px; align-items: start; } .admin-action-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .admin-panel-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-action-card { padding: 14px 16px; display: grid; gap: 4px; transition: border-color 150ms, background 150ms; } .admin-action-card:hover { border-color: rgba(147, 205, 7, 0.3); background: linear-gradient(180deg, rgba(21, 33, 27, 1), rgba(17, 27, 22, 1)); } .admin-action-ico { width: 32px; height: 32px; border-radius: 8px; background: rgba(147, 205, 7, 0.1); color: var(--admin-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 2px; } .admin-action-ico svg { width: 15px; height: 15px; } .admin-action-card strong { font-size: 0.85rem; } .admin-action-card span { font-size: 0.75rem; } .admin-btn { min-height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: transform 160ms ease, filter 160ms ease, border-color 160ms ease, background 160ms ease; } .admin-btn svg { flex-shrink: 0; } .admin-btn:hover, .admin-nav-toggle:hover { transform: translateY(-1px); } .admin-btn:focus-visible, .admin-nav-toggle:focus-visible { transform: translateY(-1px); outline: 2px solid var(--admin-primary); outline-offset: 2px; } .admin-btn-primary { background: var(--admin-primary); color: #102009; } .admin-btn-secondary { background: rgba(255, 255, 255, 0.04); border-color: var(--admin-border); color: var(--admin-text); } .admin-btn-secondary:hover { background: rgba(255, 255, 255, 0.08); } .admin-btn-ghost { background: transparent; border-color: var(--admin-border); color: var(--admin-muted); } .admin-btn-ghost:hover { background: rgba(255, 255, 255, 0.04); color: var(--admin-text); } .admin-btn-danger { background: rgba(239, 91, 91, 0.14); border-color: rgba(239, 91, 91, 0.28); color: #ffd7d7; } .admin-btn-danger:hover { background: rgba(239, 91, 91, 0.22); border-color: rgba(239, 91, 91, 0.4); } .admin-btn-block { width: 100%; } .admin-filter-bar, .admin-form-grid, .admin-subsection-grid, .admin-preview-row, .admin-media-grid, .admin-gallery-grid, .admin-stack-list { display: grid; gap: 16px; } .admin-form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; } .admin-filter-bar .admin-field { flex: 1; min-width: 140px; } .admin-filter-bar .admin-field-search { flex: 2; min-width: 180px; } .admin-filter-actions { flex-shrink: 0; } .admin-subsection-grid, .admin-preview-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .admin-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-form { display: grid; gap: 16px; } .admin-field, .admin-field label { display: grid; gap: 6px; } .admin-field label { font-size: 0.8rem; font-weight: 600; color: #dbe6df; } .admin-field small { font-size: 0.72rem; } input.admin-input, select.admin-input, textarea.admin-input { border-radius: 8px; border: 1px solid var(--admin-border); background: rgba(255, 255, 255, 0.03); color: var(--admin-text); padding: 10px 12px; font-size: 0.84rem; outline: none; font-family: inherit; height: 40px; } input.admin-input:focus, select.admin-input:focus, textarea.admin-input:focus { border-color: rgba(147, 205, 7, 0.5); box-shadow: 0 0 0 3px rgba(147, 205, 7, 0.1); } .admin-field input, .admin-field textarea, .admin-field select { width: 100%; border-radius: 8px; border: 1px solid var(--admin-border); background: rgba(255, 255, 255, 0.03); color: var(--admin-text); padding: 10px 12px; font-size: 0.84rem; outline: none; } .admin-field textarea { resize: vertical; min-height: 90px; } .admin-field input:focus, .admin-field textarea:focus, .admin-field select:focus { border-color: rgba(147, 205, 7, 0.5); box-shadow: 0 0 0 3px rgba(147, 205, 7, 0.1); } /* ── Fallback global: aplica estilo aos inputs/select/textarea em qualquer .admin-panel mesmo se estiverem soltos (fora de .admin-field/.st-field). Usa :where() pra ter low-specificity — qualquer regra mais especifica ganha. Exclui checkboxes, radios e toggles customizados (que precisam ficar nativos). */ .admin-panel :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], input:not([type]), select, textarea) { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--admin-border, #2a2a2a); border-radius: 8px; padding: 10px 12px; color: var(--admin-text, #ececec); font: inherit; font-size: 0.86rem; outline: 0; transition: border-color 0.15s, box-shadow 0.15s; } .admin-panel :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], input:not([type]), select, textarea):focus { border-color: rgba(147, 205, 7, 0.5); box-shadow: 0 0 0 3px rgba(147, 205, 7, 0.1); } .admin-panel :where(textarea) { resize: vertical; min-height: 80px; line-height: 1.45; } /* File picker: estilo do botao nativo + container */ .admin-panel :where(input[type="file"]) { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--admin-border, #2a2a2a); border-radius: 8px; padding: 8px 10px; color: var(--admin-muted, #8a8a8a); font-size: 0.82rem; cursor: pointer; } .admin-panel :where(input[type="file"])::file-selector-button { background: var(--admin-surface-3, #1a1a1a); color: var(--admin-text, #ececec); border: 1px solid var(--admin-border-stronger, #3a3a3a); border-radius: 6px; padding: 6px 10px; margin-right: 10px; cursor: pointer; font-weight: 600; font: inherit; font-size: 0.82rem; } .admin-field-full { grid-column: 1 / -1; } .admin-field-toggle { align-self: end; } .admin-field-toggle label { display: inline-flex; align-items: center; gap: 10px; } .admin-field-toggle input { width: auto; margin: 0; } .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; min-width: 720px; } .admin-table th, .admin-table td { padding: 8px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); vertical-align: top; text-align: left; font-size: 0.76rem; } .admin-thumb { width: 86px; height: 62px; border-radius: 10px; border: 1px solid var(--admin-border); object-fit: cover; background: rgba(255, 255, 255, 0.03); } .admin-table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--admin-muted); font-weight: 600; } .admin-badge { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; line-height: 1; white-space: nowrap; } /* Centraliza badge na célula vertical e horizontalmente */ .admin-table td:has(> .admin-badge) { vertical-align: middle; text-align: center; } .admin-badge.is-success { background: rgba(69, 196, 122, 0.14); color: #bff2d2; } .admin-badge.is-muted { background: rgba(255, 255, 255, 0.06); color: var(--admin-muted); } .admin-badge.is-danger { background: rgba(239, 91, 91, 0.14); color: #ffd7d7; } .admin-badge.is-warning { background: rgba(240, 182, 77, 0.14); color: #ffe0a8; } .admin-toolbar-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.8rem; margin: 14px 0; } .admin-inline-actions-tight { gap: 6px; } /* Botões de ação em linhas de tabela: somente ícone */ .admin-inline-actions-tight .admin-btn { font-size: 0 !important; padding: 0 !important; width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; line-height: 0 !important; flex-shrink: 0; } .admin-inline-actions-tight .admin-btn > * { margin: 0 !important; } .admin-inline-actions-tight form { display: inline-flex; align-items: center; margin: 0; } .admin-inline-actions-tight .admin-btn svg { display: block; flex-shrink: 0; } .admin-empty-state { padding: 24px 20px; border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: var(--admin-radius-md); text-align: center; font-size: 0.82rem; } .admin-empty-ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: rgba(255,255,255,.04); color: var(--admin-muted); } .admin-gallery-card { overflow: hidden; } .admin-gallery-card > img, .admin-gallery-card > video, .admin-media-card img { width: 100%; aspect-ratio: 1.1 / 0.8; object-fit: cover; } .admin-image-preview img, .admin-image-preview video { width: 100%; max-height: 200px; object-fit: contain; } .admin-gallery-body, .admin-media-card { padding: 16px; } .admin-gallery-body { display: grid; gap: 12px; } .admin-gallery-headline { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .admin-meta-list { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.82rem; color: var(--admin-muted); } .admin-image-preview { max-width: 480px; overflow: hidden; border-radius: var(--admin-radius-md); border: 1px solid var(--admin-border); margin-top: 6px; } .admin-image-preview-small { max-width: 260px; } .admin-pagination { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; } .admin-pagination a { min-width: 34px; min-height: 34px; padding: 0 10px; font-size: 0.8rem; border-radius: 999px; border: 1px solid var(--admin-border); display: inline-flex; align-items: center; justify-content: center; color: var(--admin-muted); transition: background 160ms ease, color 160ms ease; } .admin-pagination a:hover { background: rgba(255,255,255,0.04); color: var(--admin-text); } .admin-lead-phone { color: var(--admin-success); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .admin-lead-phone:hover { color: #7fe8ac; } .admin-pagination a.is-active { background: var(--admin-primary); color: #112109; border-color: transparent; } .admin-section-card { padding: 0; overflow: hidden; } .admin-section-card summary { cursor: pointer; list-style: none; padding: 12px 16px; font-weight: 700; font-size: 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: space-between; gap: 12px; user-select: none; transition: color 0.13s; } .admin-section-card summary:hover { color: var(--admin-primary); } .admin-section-card summary::-webkit-details-marker { display: none; } .admin-section-chevron { flex-shrink: 0; transition: transform 0.2s; color: var(--admin-muted); } details[open] .admin-section-chevron { transform: rotate(180deg); } .admin-section-card > .admin-form-grid, .admin-section-card > .admin-preview-row, .admin-section-card > .admin-subsection-grid { padding: 0 16px 16px; } .admin-section-card > .admin-form-grid:first-of-type, .admin-section-card > .admin-preview-row:first-of-type, .admin-section-card > .admin-subsection-grid:first-of-type { padding-top: 16px; } .admin-subcard { padding: 16px; } .admin-subcard h3 { margin: 0 0 10px; font-size: 0.88rem; } /* ── Login — split layout ── */ .admin-login-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 400px; } /* Form na esquerda, brand panel na direita (desktop) */ .admin-login-form-side { order: 1; } .admin-login-brand { order: 2; } /* No mobile a ordem natural volta: brand primeiro, form depois */ @media (max-width: 860px) { .admin-login-shell { grid-template-columns: 1fr; } .admin-login-form-side { order: 2; } .admin-login-brand { order: 1; } } .admin-login-brand { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 40px; background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(147,205,7,0.14), transparent 70%), radial-gradient(ellipse 80% 50% at 20% 100%, rgba(69,196,122,0.08), transparent 60%), linear-gradient(160deg, #0c1c10 0%, #071108 100%); border-left: 1px solid var(--admin-border); } .admin-login-brand-glow { position: absolute; border-radius: 50%; pointer-events: none; } .admin-login-brand-glow-1 { width: 320px; height: 320px; top: -80px; left: -80px; background: radial-gradient(circle, rgba(147,205,7,0.10), transparent 70%); } .admin-login-brand-glow-2 { width: 260px; height: 260px; bottom: -60px; right: -60px; background: radial-gradient(circle, rgba(69,196,122,0.08), transparent 70%); } .admin-login-brand-inner { position: relative; z-index: 1; text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .admin-login-logo { max-width: 160px; max-height: 72px; object-fit: contain; margin: 0 auto 28px; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4)); } .admin-login-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--admin-primary); margin: 0 0 10px; } .admin-login-brand-title { font-size: 1.6rem; font-weight: 800; line-height: 1.2; color: var(--admin-text); margin: 0 0 14px; } .admin-login-brand-desc { font-size: 0.85rem; line-height: 1.65; color: var(--admin-muted); max-width: 260px; margin: 0 auto 32px; } .admin-login-brand-dots { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; max-width: 160px; margin: 0 auto; } .admin-login-brand-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(147,205,7,0.25); } .admin-login-brand-dots span:nth-child(3n) { background: rgba(147,205,7,0.12); } .admin-login-brand-dots span:nth-child(5n) { background: rgba(69,196,122,0.20); } .admin-login-brand-footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: rgba(159,178,167,0.5); margin: 0; } /* Formulário */ .admin-login-form-side { display: flex; align-items: center; justify-content: center; padding: 48px 32px; min-height: 100vh; background: var(--admin-bg); } .admin-login-form-inner { width: 100%; max-width: 380px; } .admin-login-form-head { margin-bottom: 28px; } .admin-login-form-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--admin-primary); margin: 0 0 8px; display: block; } .admin-login-form-head h2 { font-size: 1.5rem; font-weight: 800; color: var(--admin-text); margin: 0 0 6px; } .admin-login-form-head p { font-size: 0.83rem; color: var(--admin-muted); margin: 0; } .admin-login-form { display: grid; gap: 14px; } .admin-login-forgot { text-align: right; margin-top: -6px; } .admin-login-forgot a { font-size: 0.78rem; color: var(--admin-muted); text-decoration: none; transition: color 150ms; } .admin-login-forgot a:hover { color: var(--admin-text); } .admin-login-submit { width: 100%; justify-content: center; padding: 0 20px; min-height: 42px; font-size: 0.88rem; margin-top: 4px; } .admin-login-site-link { margin-top: 20px; text-align: center; } .admin-login-site-link a { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--admin-muted); text-decoration: none; transition: color 150ms; } .admin-login-site-link a:hover { color: var(--admin-text); } /* Mobile — stacked */ @media (max-width: 860px) { .admin-login-shell { grid-template-columns: 1fr; min-height: 100vh; min-height: 100dvh; } .admin-login-brand { position: static; height: auto; min-height: 0; padding: 24px 24px 16px; } .admin-login-brand-inner { gap: 0; } .admin-login-logo { max-width: 160px; max-height: 64px; margin-bottom: 8px; } .admin-login-brand-title { font-size: 1.2rem; margin-bottom: 0; } .admin-login-brand-desc { display: none; } .admin-login-brand-dots { display: none; } .admin-login-brand-footer { display: none; } .admin-login-form-side { min-height: 0; padding: 24px 22px 32px; align-items: flex-start; } .admin-login-form-head { margin-bottom: 18px; } .admin-login-form-head h2 { font-size: 1.25rem; } .admin-login-form-head p { font-size: 0.82rem; } .admin-login-form { gap: 14px; } .admin-login-form .admin-field input { font-size: 16px; min-height: 48px; padding: 10px 14px 10px 42px; } .admin-login-form .input-with-icon svg { left: 14px; } .admin-login-submit { min-height: 50px; font-size: 1rem; font-weight: 700; margin-top: 6px; } .admin-login-forgot a { font-size: 0.82rem; } .admin-login-signup-link, .admin-login-site-link { text-align: center; font-size: 0.85rem; } } @media (max-width: 420px) { .admin-login-brand { padding: 20px 18px 12px; } .admin-login-logo { max-width: 130px; max-height: 52px; } .admin-login-brand-title { font-size: 1.05rem; } .admin-login-form-side { padding: 18px 18px 28px; } .admin-login-form-head { margin-bottom: 14px; } .admin-login-form-head h2 { font-size: 1.15rem; } } /* Preserva estilos antigos para forgot/reset pages que usam admin-auth-single */ .admin-auth-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 18px 0; position: relative; overflow: hidden; } .admin-auth-backdrop { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(540px 240px at 50% 0%, rgba(147, 205, 7, 0.12), transparent 68%); } .admin-auth-single { position: relative; z-index: 1; width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 20px; } .admin-auth-single .admin-brand-logo-auth { max-height: 90px; object-fit: contain; } .admin-auth-card { width: 100%; padding: 32px; display: grid; gap: 14px; } .admin-auth-card > *:first-child { margin-top: 0; } .auth-icon-circle { width: 56px; height: 56px; border-radius: 50%; background: rgba(147, 205, 7, 0.12); border: 1px solid rgba(147, 205, 7, 0.25); display: flex; align-items: center; justify-content: center; color: var(--admin-accent); } .input-with-icon { position: relative; display: flex; align-items: center; } .input-with-icon svg { position: absolute; left: 12px; color: var(--admin-muted); pointer-events: none; } .input-with-icon input { padding-left: 38px !important; } .auth-btn-full { width: 100%; justify-content: center; padding: 12px 20px !important; font-size: 0.92rem; } .auth-actions { margin-top: 6px; } /* Integrações */ .admin-integrations-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--admin-border); padding-bottom: 0; } .admin-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 0.83rem; font-weight: 500; color: var(--admin-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; } .admin-tab:hover { color: var(--admin-text); } .admin-tab.is-active { color: var(--admin-primary); border-bottom-color: var(--admin-primary); } .admin-integration-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .admin-integration-head h3 { font-size: 1rem; font-weight: 700; margin: 2px 0 0; } .admin-integration-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0; color: var(--admin-muted); font-size: 0.82rem; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08); } .auth-forgot { text-align: center; margin: 2px 0 6px; } .auth-forgot a { color: var(--admin-muted); font-size: 0.83rem; text-decoration: none; } .auth-forgot a:hover { color: var(--admin-text); } .admin-stack-list { margin: 18px 0; } .admin-stack-list div { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.04); } .admin-stack-list span { display: block; margin-top: 4px; color: var(--admin-muted); } /* ── Line items responsive grid ── */ .admin-line-items-row { display: grid; grid-template-columns: 1fr 70px 130px 40px; align-items: end; gap: 8px; } input[name="item_description[]"], .vs-ac-dropdown span { text-transform: uppercase; } @media (max-width: 1180px) { .admin-kpi-grid, .admin-action-grid, .admin-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-panel-grid-2 { grid-template-columns: 1fr; } } @media (max-width: 980px) { .admin-shell { grid-template-columns: 1fr; } /* ── Sidebar mobile: drawer full screen (cobre tudo, inclusive modais). z-index alto pra ficar por cima de bottomnav (z 28), modais (z 9999), drawers de alerta etc. So o X fecha. ── */ .admin-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; transform: translateX(-100%); transition: transform 180ms ease; z-index: 99999; overflow: hidden; padding: 0; gap: 0; } .admin-sidebar.is-open { transform: translateX(0); } /* Overlay nao tem mais funcao em full width — sem area "fora" pra clicar */ .admin-sidebar-overlay { display: none !important; } /* Quando a sidebar esta aberta, esconde tudo que possa aparecer "vazado" embaixo: bottomnav, drawer de alertas, modais que ja estavam abertos. */ body.is-sidebar-open .admin-bottomnav, body.is-sidebar-open .admin-alerts-drawer, body.is-sidebar-open .admin-alerts-overlay, body.is-sidebar-open .admin-modal.is-open { display: none !important; } /* Brand — compacto, com botao fechar a direita */ .admin-sidebar-brand { flex-shrink: 0; padding: 10px 12px !important; position: relative; } .admin-sidebar-mob-close { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--admin-border); background: rgba(255, 255, 255, 0.04); color: var(--admin-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 150ms, background 150ms; } .admin-sidebar-mob-close:hover { border-color: var(--admin-primary); background: rgba(255, 255, 255, 0.08); } .admin-sidebar-mob-close:focus-visible { outline: 2px solid var(--admin-primary); outline-offset: 2px; } /* Nav mobile — aproveita o espaco da tela inteira: - Atalhos (Nova OS / Novo Orcamento) em grid 2-col grande - Item single (Visao geral) full-width - Grupos sempre abertos com header de secao + sub-itens em grid 2-col com cards */ .admin-sidebar-nav { display: grid !important; grid-template-columns: repeat(2, 1fr); flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; gap: 10px !important; padding: 14px 14px 24px; align-content: flex-start; } /* Atalhos top lado a lado (OS + Orçamento) */ .admin-sidebar-nav > .admin-sidebar-nova-venda { grid-column: span 1; margin: 0 !important; min-height: 48px; font-size: 0.88rem; padding: 10px 12px !important; border-radius: 12px; justify-content: center; gap: 6px; } /* Mobile usa labels curtos ("OS" e "Orçamento") */ .admin-sidebar-nav > .admin-sidebar-nova-venda .snova-text-full { display: none; } .admin-sidebar-nav > .admin-sidebar-nova-venda .snova-text-short { display: inline; } /* Item single (sem children) — card full-width */ .admin-sidebar-nav > a:not(.admin-sidebar-nova-venda) { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 16px !important; font-size: 0.92rem !important; font-weight: 700; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--admin-border, #2a2a2a); border-radius: 12px; border-left-width: 1px; color: var(--admin-text, #ececec); } .admin-sidebar-nav > a:not(.admin-sidebar-nova-venda):hover, .admin-sidebar-nav > a:not(.admin-sidebar-nova-venda).is-active { border-color: var(--admin-primary, #93cd07); background: rgba(147, 205, 7, 0.08); } .admin-sidebar-nav > a:not(.admin-sidebar-nova-venda) .admin-nav-ico { width: 32px; height: 32px; border-radius: 8px; background: rgba(147, 205, 7, 0.1); display: inline-flex; align-items: center; justify-content: center; color: var(--admin-primary, #93cd07); flex-shrink: 0; } .admin-sidebar-nav > a:not(.admin-sidebar-nova-venda) .admin-nav-ico svg { width: 18px; height: 18px; } /* Grupos — header de secao + sub-itens em grid 2-col, sempre abertos */ .admin-sidebar-nav > .admin-nav-group { grid-column: 1 / -1; display: block; margin: 0; } .admin-nav-group-toggle { /* No mobile vira um titulo de secao, nao um botao clicavel */ display: flex; width: 100%; align-items: center; gap: 10px; min-height: 36px; padding: 4px 4px !important; font-size: 0.7rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--admin-muted, #8a8a8a) !important; background: transparent !important; border: 0; border-bottom: 1px solid var(--admin-border, #2a2a2a); border-radius: 0; cursor: default; pointer-events: none; margin-bottom: 8px; } .admin-nav-group-toggle .admin-nav-ico { color: var(--admin-muted, #8a8a8a); width: 16px; height: 16px; } .admin-nav-group-toggle .admin-nav-chevron { display: none; } /* Sub-itens: grid 2-col com cards horizontais (icone esquerda, texto direita) */ .admin-nav-group .admin-nav-group-items { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 !important; max-height: none !important; overflow: visible !important; } .admin-nav-group .admin-nav-group-items a { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; min-height: 48px; padding: 8px 10px !important; font-size: 0.78rem !important; font-weight: 600; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--admin-border, #2a2a2a); border-radius: 10px; border-left-width: 1px !important; color: var(--admin-text, #ececec); line-height: 1.2; transition: border-color 0.15s, background 0.15s; min-width: 0; } .admin-nav-group .admin-nav-group-items a > span:not(.admin-nav-ico) { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .admin-nav-group .admin-nav-group-items a:hover, .admin-nav-group .admin-nav-group-items a.is-active { border-color: var(--admin-primary, #93cd07); background: rgba(147, 205, 7, 0.08); } .admin-nav-group .admin-nav-group-items a .admin-nav-ico { width: 28px; height: 28px; border-radius: 7px; background: rgba(147, 205, 7, 0.1); display: inline-flex; align-items: center; justify-content: center; color: var(--admin-primary, #93cd07); flex-shrink: 0; } .admin-nav-group .admin-nav-group-items a .admin-nav-ico svg { width: 16px; height: 16px; } /* Esconde sub-itens com target="_blank" no mobile (Monitor TV nao faz sentido em celular) */ .admin-nav-group .admin-nav-group-items a[target="_blank"] { display: none !important; } /* Esconde "Visao geral" (Dashboard) — ja acessivel via bottomnav "Inicio" */ .admin-sidebar-nav > a[href$="/admin/dashboard"]:not(.admin-sidebar-nova-venda) { display: none !important; } /* Em telas muito pequenas (<=380px) volta pra 1 coluna nos sub-itens */ @media (max-width: 380px) { .admin-sidebar-nav > .admin-sidebar-nova-venda { grid-column: 1 / -1 !important; } .admin-nav-group .admin-nav-group-items { grid-template-columns: 1fr; } } /* Footer — fixo no fundo */ .admin-sidebar-foot { flex-shrink: 0; margin-top: 0; background: rgba(6, 12, 9, 0.98); padding: 10px 10px; border-top: 1px solid var(--admin-border); gap: 8px; display: grid; } .admin-sidebar-user { padding: 8px 10px; gap: 10px; } .admin-sidebar-foot .admin-btn { display: flex; } .admin-sidebar-foot-actions { display: flex; gap: 6px; } .admin-sidebar-foot-actions .admin-btn { flex: 1; justify-content: center; min-height: 40px; font-size: 0.8rem; } .admin-sidebar-toggle-values { display: flex !important; } /* ── Restante do layout mobile ── */ .admin-nav-toggle { display: inline-flex; min-height: 48px; min-width: 48px; padding: 0 12px; } .admin-main { margin-left: 0; padding: 16px 14px 24px; } .admin-filter-bar, .admin-form-grid-2, .admin-subsection-grid, .admin-preview-row, .admin-action-grid, .admin-gallery-grid, .admin-kpi-grid, .admin-media-grid { grid-template-columns: 1fr; } .admin-topbar { flex-wrap: wrap; align-items: flex-start; } .admin-topbar-main { flex: 1 1 auto; min-width: 0; } .admin-topbar-actions { flex: 0 0 auto; } } /* ── Admin View Config: modo Cards forçado via classe (global, qualquer viewport) ── */ [data-avc-container].avc-mode-cards .admin-table-wrap { overflow-x: visible; } [data-avc-container].avc-mode-cards .admin-table, [data-avc-container].avc-mode-cards .admin-table thead, [data-avc-container].avc-mode-cards .admin-table tbody, [data-avc-container].avc-mode-cards .admin-table tr, [data-avc-container].avc-mode-cards .admin-table th, [data-avc-container].avc-mode-cards .admin-table td { display: block; min-width: 0; max-width: 100%; } [data-avc-container].avc-mode-cards .admin-table thead { display: none; } [data-avc-container].avc-mode-cards .admin-table tbody { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } [data-avc-container].avc-mode-cards .admin-table tbody tr { background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: var(--admin-radius); overflow: hidden; margin: 0; } @media (max-width: 640px) { [data-avc-container].avc-mode-cards .admin-table tbody tr { border-radius: 10px; } } [data-avc-container].avc-mode-cards .admin-table td { padding: 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, .04); font-size: .84rem; line-height: 1.45; word-break: break-word; } [data-avc-container].avc-mode-cards .admin-table td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--admin-muted); margin-bottom: 3px; line-height: 1.2; } [data-avc-container].avc-mode-cards .admin-table td:last-child { border-bottom: none; background: rgba(0, 0, 0, .15); padding: 10px 14px; } [data-avc-container].avc-mode-cards .admin-table td:last-child::before { display: none; } [data-avc-container].avc-mode-cards .admin-table td:last-child .admin-inline-actions, [data-avc-container].avc-mode-cards .admin-table td:last-child .admin-inline-actions-tight { flex-wrap: wrap; gap: 6px; width: 100%; } /* Rótulos ocultos */ [data-avc-container].avc-no-labels .admin-table thead { display: none !important; } [data-avc-container].avc-mode-cards.avc-no-labels .admin-table td[data-label]::before { display: none !important; } /* Colunas ocultas por índice (até 12) */ [data-avc-container].avc-hide-col-1 .admin-table th:nth-child(1), [data-avc-container].avc-hide-col-1 .admin-table td:nth-child(1), [data-avc-container].avc-hide-col-2 .admin-table th:nth-child(2), [data-avc-container].avc-hide-col-2 .admin-table td:nth-child(2), [data-avc-container].avc-hide-col-3 .admin-table th:nth-child(3), [data-avc-container].avc-hide-col-3 .admin-table td:nth-child(3), [data-avc-container].avc-hide-col-4 .admin-table th:nth-child(4), [data-avc-container].avc-hide-col-4 .admin-table td:nth-child(4), [data-avc-container].avc-hide-col-5 .admin-table th:nth-child(5), [data-avc-container].avc-hide-col-5 .admin-table td:nth-child(5), [data-avc-container].avc-hide-col-6 .admin-table th:nth-child(6), [data-avc-container].avc-hide-col-6 .admin-table td:nth-child(6), [data-avc-container].avc-hide-col-7 .admin-table th:nth-child(7), [data-avc-container].avc-hide-col-7 .admin-table td:nth-child(7), [data-avc-container].avc-hide-col-8 .admin-table th:nth-child(8), [data-avc-container].avc-hide-col-8 .admin-table td:nth-child(8), [data-avc-container].avc-hide-col-9 .admin-table th:nth-child(9), [data-avc-container].avc-hide-col-9 .admin-table td:nth-child(9), [data-avc-container].avc-hide-col-10 .admin-table th:nth-child(10), [data-avc-container].avc-hide-col-10 .admin-table td:nth-child(10), [data-avc-container].avc-hide-col-11 .admin-table th:nth-child(11), [data-avc-container].avc-hide-col-11 .admin-table td:nth-child(11), [data-avc-container].avc-hide-col-12 .admin-table th:nth-child(12), [data-avc-container].avc-hide-col-12 .admin-table td:nth-child(12) { display: none !important; } /* ── Analytics page — filter bar, KPI grid, deltas ── */ .analytics-filter-bar { display: flex; flex-direction: column; gap: 10px; background: rgba(255, 255, 255, .02); border: 1px solid var(--admin-border); border-radius: 12px; padding: 12px; margin-bottom: 18px; } .analytics-week-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.06); } .analytics-week-nav > .admin-btn { min-width: 36px; min-height: 36px; padding: 0 10px; } .analytics-week-label { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 140px; text-align: center; } .analytics-week-label strong { font-size: .92rem; color: var(--admin-text); margin-top: 2px; } .analytics-presets, .analytics-grouping { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .analytics-range-label { font-size: .72rem; color: var(--admin-muted); } .admin-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; text-decoration: none; border: 1px solid var(--admin-border); background: rgba(255, 255, 255, .02); color: var(--admin-muted); cursor: pointer; } .admin-chip:hover { border-color: rgba(147, 205, 7, .4); color: var(--admin-text); } .admin-chip.is-active { background: var(--admin-primary, #93cd07); color: #102009; border-color: var(--admin-primary, #93cd07); } .analytics-mini-select { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--admin-border); background: rgba(255, 255, 255, .03); color: var(--admin-text); font-size: .74rem; outline: none; } .analytics-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } @media (max-width: 1180px) { .analytics-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 820px) { .analytics-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .analytics-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .analytics-kpi-grid .admin-kpi-card { padding: 10px 12px; } .analytics-kpi-grid .admin-kpi-card > strong { font-size: .95rem; } } .kpi-delta { display: inline-block; margin-top: 4px; font-size: .66rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; } .kpi-delta-up { background: rgba(147, 205, 7, .14); color: #93cd07; } .kpi-delta-down { background: rgba(239, 91, 91, .14); color: #ef5b5b; } .kpi-delta-neutral { background: rgba(159, 178, 167, .12); color: var(--admin-muted); } /* ── Modal do view config ── */ .avc-tab { background: transparent; border: none; color: #9fb2a7; font: inherit; font-size: .82rem; font-weight: 600; padding: 10px 14px; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; } .avc-tab.is-active { color: var(--admin-primary, #93cd07); border-bottom-color: var(--admin-primary, #93cd07); } .avc-section { margin-bottom: 18px; } .avc-section > label.avc-title { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9fb2a7; margin-bottom: 8px; } .avc-radio-group, .avc-check-group { display: flex; flex-wrap: wrap; gap: 8px; } .avc-radio-group label, .avc-check-group label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--admin-border); border-radius: 8px; font-size: .8rem; cursor: pointer; background: rgba(255, 255, 255, .02); transition: border-color 120ms, background 120ms; user-select: none; } .avc-radio-group label:hover, .avc-check-group label:hover { border-color: rgba(147, 205, 7, .4); } .avc-radio-group label:has(input:checked), .avc-check-group label:has(input:checked) { border-color: var(--admin-primary, #93cd07); background: rgba(147, 205, 7, .12); color: var(--admin-text); } .avc-radio-group input, .avc-check-group input { accent-color: var(--admin-primary, #93cd07); margin: 0; width: 14px; height: 14px; } /* Inputs/selects do modal — caso seja estendido futuramente */ #avc-modal select, #avc-modal input[type="text"], #avc-modal input[type="search"] { width: 100%; border-radius: 8px; border: 1px solid var(--admin-border); background: rgba(255, 255, 255, .03); color: var(--admin-text); padding: 10px 12px; font-size: .84rem; outline: none; font-family: inherit; } #avc-modal select:focus, #avc-modal input[type="text"]:focus, #avc-modal input[type="search"]:focus { border-color: rgba(147, 205, 7, .5); box-shadow: 0 0 0 3px rgba(147, 205, 7, .1); } @media (max-width: 640px) { /* Oculta topbar inteira no mobile — sidebar acessível via bottom nav */ .admin-topbar { display: none !important; } /* Classe utilitária para ocultar qualquer elemento no mobile */ .hide-on-mobile { display: none !important; } .admin-auth-shell { justify-content: flex-start; padding-top: 48px; } .admin-field input, .admin-field textarea, .admin-field select { font-size: 16px; min-width: 0; max-width: 100%; } .admin-field { min-width: 0; overflow: hidden; } .admin-line-items-row .admin-field { overflow: visible; } .admin-panel, .admin-auth-card, .admin-kpi-card { padding: 14px; } /* Esconde "Ver site" em mobile — não essencial */ .admin-topbar-actions .admin-btn-secondary { display: none; } .admin-topbar-actions .admin-btn-primary { padding: 0 10px; font-size: 0.78rem; white-space: nowrap; } .admin-inline-actions { width: 100%; } .admin-filter-actions { width: 100%; display: flex; gap: 8px; } .admin-filter-actions .admin-btn { flex: 1; min-height: 44px; } .admin-inline-actions-tight .admin-btn { width: auto; min-height: 36px; } .admin-inline-actions-tight { flex-wrap: wrap; } .admin-line-items-row { grid-template-columns: 1fr 1fr 40px; grid-template-rows: auto auto; } .admin-line-items-row > :first-child { grid-column: 1 / -1; } input[type="date"] { max-width: 100%; width: 100% !important; min-width: 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; } .admin-kpi-grid, .admin-kpi-grid-3, .admin-kpi-grid-5 { grid-template-columns: 1fr; } .admin-toast-container { right: 12px; left: 12px; bottom: 16px; } .admin-toast { min-width: 0; width: 100%; } } /* ── 3-column KPI grid variant ── */ .admin-kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 980px) { .admin-kpi-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .admin-kpi-grid-3 { grid-template-columns: 1fr; } } /* ── 5-column KPI grid variant ── */ .admin-kpi-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1180px) { .admin-kpi-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 980px) { .admin-kpi-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .admin-kpi-grid-5 { grid-template-columns: 1fr; } } /* ── 4-column compact KPI grid ── */ .admin-kpi-grid-4-sm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 980px) { .admin-kpi-grid-4-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .admin-kpi-grid-4-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── Quill editor dark theme overrides ── */ .ql-toolbar.ql-snow { background: var(--admin-surface-2); border-color: var(--admin-border) !important; border-radius: 8px 8px 0 0; } .ql-container.ql-snow { border-color: var(--admin-border) !important; border-radius: 0 0 8px 8px; font-family: inherit; font-size: .9rem; } .ql-editor { min-height: 120px; color: var(--admin-text); background: var(--admin-surface); } .ql-editor.ql-blank::before { color: var(--admin-text-muted) !important; font-style: normal !important; } .ql-snow .ql-stroke { stroke: var(--admin-text-muted) !important; } .ql-snow .ql-fill { fill: var(--admin-text-muted) !important; } .ql-snow .ql-picker-label { color: var(--admin-text-muted) !important; } .ql-snow .ql-picker-options { background: var(--admin-surface-2) !important; border-color: var(--admin-border) !important; } .ql-snow .ql-picker-item { color: var(--admin-text) !important; } .ql-snow .ql-picker-item:hover { color: var(--admin-accent) !important; } .ql-snow .ql-active .ql-stroke { stroke: var(--admin-accent) !important; } .ql-snow .ql-active .ql-fill { fill: var(--admin-accent) !important; } .ql-snow .ql-active { color: var(--admin-accent) !important; } .ql-snow button:hover .ql-stroke { stroke: var(--admin-accent) !important; } .ql-snow button:hover .ql-fill { fill: var(--admin-accent) !important; } .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { border-color: var(--admin-border) !important; } .ql-editor a { color: var(--admin-accent); } .ql-tooltip { background: var(--admin-surface-2) !important; border-color: var(--admin-border) !important; color: var(--admin-text) !important; box-shadow: 0 4px 16px rgba(0,0,0,.4) !important; } .ql-tooltip input[type="text"] { background: var(--admin-surface) !important; border-color: var(--admin-border) !important; color: var(--admin-text) !important; } /* ── KPI cards clicáveis ── */ a.admin-kpi-card { text-decoration: none; color: inherit; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } a.admin-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--admin-shadow-md); border-color: rgba(147, 205, 7, 0.2); } /* Badge de destaque no KPI icon */ .admin-kpi-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--admin-warning); color: #1a0f00; font-size: 0.65rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* ── Tabela — hover mais visível ── */ .admin-table tbody tr { transition: background 150ms ease; } .admin-table tbody tr:hover { background: rgba(147, 205, 7, 0.035); } /* ── Botão primário — glow no hover ── */ .admin-btn-primary:hover { box-shadow: 0 4px 16px rgba(147, 205, 7, 0.28); filter: brightness(1.06); } .admin-btn:active { transform: translateY(0) !important; filter: brightness(0.95) !important; box-shadow: none !important; } /* ── Sidebar — scrollbar fina ── */ .admin-sidebar::-webkit-scrollbar { width: 4px; } .admin-sidebar::-webkit-scrollbar-track { background: transparent; } .admin-sidebar::-webkit-scrollbar-thumb { background: rgba(147, 205, 7, 0.18); border-radius: 4px; } .admin-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(147, 205, 7, 0.35); } /* ── Toast de notificações ── */ .admin-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; pointer-events: none; } .admin-toast { display: flex; align-items: center; gap: 10px; min-width: 280px; max-width: 420px; padding: 12px 14px; border-radius: var(--admin-radius-md); border: 1px solid transparent; font-size: 0.84rem; font-weight: 500; pointer-events: auto; opacity: 0; transform: translateX(110%); transition: opacity 320ms ease, transform 320ms ease; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } .admin-toast.is-visible { opacity: 1; transform: translateX(0); } .admin-toast.is-hiding { opacity: 0; transform: translateX(110%); } .admin-toast.is-success { background: linear-gradient(135deg, rgba(22,38,29,0.98), rgba(14,25,19,0.98)); border-color: rgba(69, 196, 122, 0.3); color: #c4f0d6; } .admin-toast.is-danger { background: linear-gradient(135deg, rgba(38,18,18,0.98), rgba(28,12,12,0.98)); border-color: rgba(239, 91, 91, 0.3); color: #ffd7d7; } .admin-toast-ico { flex-shrink: 0; display: flex; align-items: center; } .admin-toast.is-success .admin-toast-ico { color: var(--admin-success); } .admin-toast.is-danger .admin-toast-ico { color: var(--admin-danger); } .admin-toast-msg { flex: 1; line-height: 1.4; } .admin-toast-close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; background: transparent; color: inherit; opacity: 0.55; cursor: pointer; border-radius: 4px; padding: 0; transition: opacity 150ms; } .admin-toast-close:hover { opacity: 1; } /* ── Action cards — hover com lift ── */ .admin-action-card { transition: transform 200ms ease, box-shadow 200ms ease, border-color 160ms ease, background 160ms ease; } .admin-action-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); border-color: rgba(147, 205, 7, 0.3); background: linear-gradient(180deg, rgba(22, 35, 28, 1), rgba(17, 27, 22, 1)); } /* ── Ocultar valores financeiros ── */ .admin-money-val { transition: filter 250ms ease; } body.values-hidden .admin-money-val { filter: blur(7px); user-select: none; pointer-events: none; } /* ── Status badges extras ── */ .admin-badge.is-info { background: rgba(52,152,219,.15); color: #3498db; } .admin-badge.is-purple { background: rgba(155,89,182,.15); color: #9b59b6; } /* ── Gallery: desktop lista / mobile cards ── */ .gallery-mobile-only { display: none; } .admin-gallery-mobile-card { display: flex; gap: 0; background: linear-gradient(180deg, rgba(21, 33, 27, 0.96), rgba(13, 21, 17, 0.96)); border: 1px solid var(--admin-border); border-radius: var(--admin-radius-md); overflow: hidden; margin-bottom: 12px; } .admin-gallery-mobile-media { flex-shrink: 0; width: 110px; } .admin-gallery-mobile-media img, .admin-gallery-mobile-media video { width: 100%; height: 100%; object-fit: cover; } .admin-gallery-mobile-body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } @media (max-width: 640px) { .gallery-desktop-only { display: none; } .gallery-mobile-only { display: block; } } /* ── Form sections (produtos) ── */ .admin-form-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.06); } .admin-form-section-title { font-size: .95rem; font-weight: 700; margin-bottom: 4px; } /* ── Modal responsivo ── */ .admin-modal { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.55); align-items: center; justify-content: center; padding: 16px; } .admin-modal.is-open { display: flex; } .admin-modal-dialog { background: linear-gradient(180deg, rgba(20,20,20,0.98), rgba(8,8,8,0.98)); border: 1px solid var(--admin-border); border-radius: var(--admin-radius-md); padding: 24px; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.3); } .admin-modal-dialog-sm { max-width: 420px; } .admin-modal-dialog-lg { max-width: 640px; } .admin-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .admin-modal-head h3 { margin: 0; font-size: 1rem; } .admin-modal-body { display: grid; gap: 12px; } .admin-modal-actions { display: flex; gap: 8px; margin-top: 18px; justify-content: flex-end; } @media (max-width: 480px) { .admin-modal { padding: 8px; } .admin-modal-dialog { padding: 18px; max-height: calc(100vh - 16px); } .admin-modal-actions { flex-direction: column; } .admin-modal-actions .admin-btn { width: 100%; } } /* ── Utility: flex helpers ── */ .admin-flex { display: flex; align-items: center; gap: 8px; } .admin-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .admin-flex-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .admin-flex-wrap { flex-wrap: wrap; } .admin-flex-col { flex-direction: column; align-items: stretch; } /* ── Utility: gap overrides ── */ .admin-gap-sm { gap: 6px; } .admin-gap-md { gap: 12px; } .admin-gap-lg { gap: 16px; } /* ── Utility: text alignment ── */ .admin-text-center { text-align: center; } .admin-text-right { text-align: right; } .admin-text-success { color: var(--admin-success); } .admin-text-danger { color: var(--admin-danger); } .admin-text-primary { color: var(--admin-primary); } .admin-text-muted { color: var(--admin-muted); } /* ── Utility: spacing ── */ .admin-mb-0 { margin-bottom: 0; } .admin-mb-1 { margin-bottom: 8px; } .admin-mb-2 { margin-bottom: 12px; } .admin-mb-3 { margin-bottom: 16px; } .admin-mb-4 { margin-bottom: 24px; } .admin-mt-3 { margin-top: 16px; } /* ── Utility: full-width grid span ── */ .admin-col-full { grid-column: 1 / -1; } /* ── 6-column KPI grid variant (analytics) ── */ .admin-kpi-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 1180px) { .admin-kpi-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .admin-kpi-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── Thumbnail utility ── */ .admin-thumb-sm { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; border: 1px solid var(--admin-border); background: rgba(255,255,255,.03); } .admin-thumb-placeholder { width: 40px; height: 40px; border-radius: 6px; background: rgba(255,255,255,.04); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--admin-muted); font-size: 0.7rem; } /* ── Image preview in forms ── */ .admin-img-preview { max-width: 160px; max-height: 120px; border-radius: var(--admin-radius-sm); object-fit: cover; border: 1px solid rgba(255,255,255,.08); } /* ── Select dark theme ── */ .admin-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239fb2a7' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .admin-field select option { background: var(--admin-surface-2); color: var(--admin-text); } /* ── Badge select (leads status) ── */ .admin-badge-select { appearance: none; -webkit-appearance: none; border: none; border-radius: 999px; padding: 4px 22px 4px 10px; font-size: 0.75rem; font-weight: 700; cursor: pointer; text-align: center; background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; } .admin-badge-select.is-info { background-color: rgba(99,179,237,.15); color: #63b3ed; } .admin-badge-select.is-warning { background-color: rgba(246,173,85,.15); color: #f6ad55; } .admin-badge-select.is-success { background-color: rgba(69,196,122,.15); color: #45c47a; } .admin-badge-select.is-muted { background-color: rgba(159,178,167,.12); color: #9fb2a7; } .admin-badge-select.is-danger { background-color: rgba(239,91,91,.14); color: #ffd7d7; } .admin-badge-select.is-purple { background-color: rgba(155,89,182,.15); color: #9b59b6; } /* ── Lead detail expandable ── */ .admin-lead-detail td { padding: 0 !important; border-bottom: 1px solid rgba(255,255,255,.05); } .admin-lead-detail-inner { padding: 16px 20px; background: rgba(255,255,255,.02); } .admin-lead-detail-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; margin-bottom: 12px; } .admin-lead-detail-grid strong { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--admin-muted); margin-bottom: 4px; } .admin-lead-detail-grid p { font-size: .85rem; line-height: 1.5; margin: 0; } .admin-lead-notes-wrap { border-top: 1px solid rgba(255,255,255,.06); padding-top: 12px; } .admin-lead-notes-wrap strong { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--admin-muted); margin-bottom: 6px; } .admin-lead-notes { width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #e0e0e0; padding: 8px 12px; font-size: .85rem; resize: vertical; font-family: inherit; } .admin-lead-notes:focus { outline: none; border-color: var(--admin-accent); } @media (max-width: 768px) { .admin-lead-detail-grid { grid-template-columns: 1fr; } } /* ── KPI icon variants ── */ .admin-kpi-icon-red { background: #ef5b5b !important; color: #fff !important; } .admin-kpi-icon-purple { background: #a855f7 !important; color: #fff !important; } /* ── Dashboard chart wrapper ── */ .admin-chart-wrap { position: relative; padding: 16px; } .admin-chart-wrap canvas, .admin-panel > canvas { width: 100% !important; max-width: 100%; max-height: 280px; } /* ── Chart legend ── */ .admin-chart-legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 16px 20px; } .admin-chart-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--admin-muted); } .admin-chart-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* ── Toolbar padronizado ── */ .admin-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ── Permission info grid ── */ .admin-permission-grid { display: grid; gap: 10px; font-size: 0.85rem; color: var(--admin-muted); } /* ── Folha summary grid ── */ .admin-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; padding: 16px; background: var(--admin-surface); border-radius: var(--admin-radius-sm); } /* ── File upload area ── */ .admin-file-upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .admin-file-upload input[type="file"] { max-width: 100%; } /* ── Plate input flex row ── */ .admin-plate-row { display: flex; gap: 8px; align-items: start; } .admin-plate-row > input { flex: 1; text-transform: uppercase; } .admin-plate-row > .admin-btn { white-space: nowrap; min-height: 44px; } @media (max-width: 480px) { .admin-plate-row { flex-direction: column; } .admin-plate-row > input { width: 100%; } .admin-plate-row > .admin-btn { width: 100%; } } /* ── Spinner inline ── */ .admin-spinner-inline { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: adminSpinInline .6s linear infinite; vertical-align: middle; margin-right: 4px; } @keyframes adminSpinInline { to { transform: rotate(360deg); } } /* ── Melhorias mobile adicionais ── */ @media (max-width: 640px) { .admin-topbar h1 { font-size: 1rem; } .admin-kpi-card strong { font-size: 1.2rem; } .admin-action-grid { grid-template-columns: 1fr; } .admin-modal-actions { flex-direction: column; } .admin-modal-actions .admin-btn { width: 100%; } .admin-chart-legend { gap: 8px; padding: 12px; } .admin-chart-legend-item { font-size: 0.75rem; } .admin-toolbar { gap: 6px; } .admin-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; } } /* ── Table → cards on mobile ── */ @media (max-width: 640px) { .admin-table-wrap { overflow-x: visible; } .admin-table, .admin-table thead, .admin-table tbody, .admin-table tr, .admin-table th, .admin-table td { display: block; min-width: 0; max-width: 100%; } .admin-table thead { display: none; } /* Card wrapper */ .admin-table tbody tr { background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: var(--admin-radius); margin-bottom: 10px; overflow: hidden; transition: border-color 150ms; } .admin-table tbody tr:hover { border-color: rgba(147, 205, 7, 0.25); } .admin-table tbody tr:last-child { margin-bottom: 0; } /* Each cell: label ABOVE, value below */ .admin-table td { padding: 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.84rem; line-height: 1.45; overflow: hidden; word-break: break-word; overflow-wrap: break-word; } /* Label shown as small text above the value */ .admin-table td[data-label]::before { content: attr(data-label); display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--admin-muted); margin-bottom: 3px; line-height: 1.2; } /* Last cell = actions row: darker bg, no label */ .admin-table td:last-child { border-bottom: none; background: rgba(0, 0, 0, 0.15); padding: 10px 14px; } .admin-table td:last-child::before { display: none; } /* Thumbnail cell: row layout with image beside label */ .admin-table td:has(.admin-thumb) { display: flex; align-items: center; gap: 10px; background: rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .admin-table td:has(.admin-thumb)::before { display: none; } .admin-table .admin-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } /* Action buttons: side by side, full width */ .admin-table td:last-child .admin-inline-actions, .admin-table td:last-child .admin-inline-actions-tight { flex-wrap: wrap; gap: 6px; width: 100%; } .admin-table td:last-child .admin-btn { flex: 1 1 auto; justify-content: center; min-height: 40px; font-size: 0.8rem; padding: 0 10px; } /* Top KPIs do dashboard: ocultos no mobile */ .dash-kpi-top { display: none !important; } /* Remove o margin-top das tabs (estava separando dos KPIs agora ocultos) */ .dash-tabs { margin-top: 0 !important; } /* Reduz padding-top do conteúdo principal no mobile */ .admin-main { padding-top: 10px !important; } } @media (max-width: 480px) { .admin-kpi-card { padding: 12px; } .admin-kpi-card strong { font-size: 1.1rem; } .admin-panel { padding: 12px; } .admin-filter-bar { gap: 10px; } .admin-filter-bar .admin-field { min-width: 100%; } } @media (max-width: 640px) { .vs-kpi-bar { grid-template-columns: repeat(2, 1fr) !important; } } .admin-form-section-desc { font-size: .8rem; color: #9fb2a7; } /* ── Form actions (submit/cancel row) ── */ .admin-form-actions { display: flex; gap: 10px; align-items: center; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06); } /* ── Notice (alias for alert) ── */ .admin-notice { padding: 10px 14px; border-radius: var(--admin-radius-sm); border: 1px solid transparent; font-size: 0.82rem; } .admin-notice-danger { background: rgba(239,91,91,0.12); border-color: rgba(239,91,91,0.24); } /* ── Icon-only button ── */ .admin-btn-icon { min-width: 38px; min-height: 38px; padding: 0 10px; } /* ── Hide on mobile ── */ @media (max-width: 980px) { .admin-hide-mobile { display: none !important; } .admin-sidebar-overlay { display: block; } } /* ── Field row (select+button inline) ── */ .admin-field-row { display: flex; gap: 6px; align-items: end; } @media (max-width: 480px) { .admin-field-row { flex-direction: column; align-items: stretch; } .admin-form-actions { flex-wrap: wrap; } .admin-form-actions .admin-btn { width: 100%; } } /* ═══ Mobile bottom navigation bar ═══ */ .admin-bottomnav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 28; background: #000; border-top: 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6), 0 -2px 6px rgba(0, 0, 0, 0.5); padding: 0; padding-bottom: env(safe-area-inset-bottom, 0); /* Força GPU layer próprio para evitar "deriva" durante overscroll/rubber-band no iOS */ transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; } .admin-bottomnav-inner { display: flex; justify-content: space-around; align-items: stretch; height: 56px; } .admin-bottomnav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; padding: 6px 0; color: #7a8e84; text-decoration: none; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.02em; border: none; background: none; cursor: pointer; transition: color 0.15s; position: relative; -webkit-tap-highlight-color: transparent; } .admin-bottomnav-item svg { width: 22px; height: 22px; stroke-width: 1.8; transition: stroke 0.15s; } .admin-bottomnav-item.is-active { color: var(--admin-primary, #93cd07); } .admin-bottomnav-item.is-active svg { stroke: var(--admin-primary, #93cd07); } .admin-bottomnav-item:hover { color: #c5d6cc; } .admin-bottomnav-item.is-active:hover { color: var(--admin-primary, #93cd07); } /* Nova Venda destaque no bottom nav */ .admin-bottomnav-item.is-cta { color: #000; } .admin-bottomnav-item.is-cta .admin-bottomnav-cta-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--admin-primary, #93cd07); display: flex; align-items: center; justify-content: center; margin-top: -14px; box-shadow: 0 2px 12px rgba(147, 205, 7, 0.35); transition: transform 0.15s, box-shadow 0.15s; } .admin-bottomnav-item.is-cta:hover .admin-bottomnav-cta-ico { transform: scale(1.08); box-shadow: 0 4px 16px rgba(147, 205, 7, 0.45); } .admin-bottomnav-item.is-cta svg { stroke: #000; width: 20px; height: 20px; stroke-width: 2.5; } .admin-bottomnav-item.is-cta span { color: var(--admin-primary, #93cd07); font-weight: 700; margin-top: 1px; } /* Badge no bottom nav */ .admin-bottomnav-badge { position: absolute; top: 4px; right: calc(50% - 18px); min-width: 16px; height: 16px; background: #ef4444; border-radius: 999px; color: #fff; font-size: 0.58rem; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; } @media (max-width: 980px) { .admin-bottomnav { display: block; } /* Espaço para o bottom nav não sobrepor conteúdo */ .admin-main { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0) + 16px) !important; } /* Esconder hamburger do topbar quando tem bottom nav */ .admin-nav-toggle { display: none !important; } } /* ════════════════════════════════════════════════════════════ POLIMENTO — Fundação (Wave 1) ════════════════════════════════════════════════════════════ */ /* ── Larguras padrão de formulário ── */ .admin-form-standard { max-width: 860px; } .admin-form-wide { max-width: 1100px; } .admin-form-full { max-width: 1280px; } /* ── Spacing consistente após filter-bar ── */ .admin-filter-bar + .admin-kpi-grid, .admin-filter-bar + .admin-table-wrap, .admin-filter-bar + .admin-toolbar-meta, .admin-filter-bar + .admin-panel, .admin-filter-bar + section, .admin-filter-bar + div:not(.admin-filter-actions):not(.admin-field):not([class^="admin-alert"]) { margin-top: 16px; } /* Espaço adicional antes do primeiro título h3 após panel-head */ .admin-panel-head + .admin-kpi-grid { margin-top: 8px; } .admin-panel-head + .admin-filter-bar { margin-top: 12px; } /* ── Grid 2-col que vira 1-col em mobile ── */ .admin-grid-2-stack { display: grid; grid-template-columns: 1fr 1fr; gap: var(--admin-space-3, 16px); align-items: start; } @media (max-width: 768px) { .admin-grid-2-stack { grid-template-columns: 1fr; } } /* ── Asterisco automático em campos required ── */ .admin-field:has(input[required]) > label, .admin-field:has(select[required]) > label, .admin-field:has(textarea[required]) > label { display: inline-flex; align-items: baseline; gap: 4px; width: max-content; max-width: 100%; } .admin-field:has(input[required]) > label::after, .admin-field:has(select[required]) > label::after, .admin-field:has(textarea[required]) > label::after { content: "*"; color: var(--admin-danger); font-weight: 700; } /* ── Indicador sutil de scroll em .admin-table-wrap ── */ .admin-table-wrap { position: relative; } .admin-table-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none; background: linear-gradient(to right, rgba(7,17,13,0), rgba(7,17,13,0.9)); opacity: 0; transition: opacity 200ms; } .admin-table-wrap.has-overflow::after { opacity: 1; } /* ════════════════════════════════════════════════════════════ POLIMENTO — Mobile (Wave 2) ════════════════════════════════════════════════════════════ */ /* Heatmaps (margem + cohort) legíveis em mobile */ @media (max-width: 640px) { .bi-heatmap, .cohort-table { font-size: .65rem; border-spacing: 2px; } .bi-heatmap th, .bi-heatmap td, .cohort-table th, .cohort-table td { padding: 4px 2px; min-width: 32px; height: 36px; } .bi-heatmap .hm-val, .cohort-table .ch-pct { font-size: .62rem; } .cohort-table .ch-count { font-size: .56rem; } } /* Kanban sem altura fixa em mobile (colunas vazias não empurram layout) */ @media (max-width: 640px) { .kb-col { min-height: auto !important; } .kb-col-body { min-height: 120px; } } /* Botão "bater ponto" mais compacto em mobile */ @media (max-width: 640px) { .punch-btn { padding: 16px 12px !important; font-size: .95rem !important; gap: 6px !important; } .punch-btn svg { width: 22px !important; height: 22px !important; } } /* Canvas de assinatura responsivo */ #ck-sig-canvas { width: 100% !important; max-width: 700px !important; aspect-ratio: 3 / 1; height: auto !important; max-height: 220px; } /* ════════════════════════════════════════════════════════════ AdminUI — Dialog (Wave 2) ════════════════════════════════════════════════════════════ */ .admin-dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 9500; opacity: 0; transition: opacity 180ms ease; } .admin-dialog-backdrop.is-open { display: flex; opacity: 1; } .admin-dialog { background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: var(--admin-radius-lg); width: 100%; max-width: 440px; box-shadow: 0 24px 60px rgba(0,0,0,.55); transform: scale(.96); transition: transform 180ms ease; overflow: hidden; display: flex; flex-direction: column; } .admin-dialog-backdrop.is-open .admin-dialog { transform: scale(1); } .admin-dialog-head { padding: 16px 20px 10px; border-bottom: 1px solid var(--admin-border-subtle); } .admin-dialog-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--admin-text); } .admin-dialog-message { margin: 6px 0 0; font-size: .85rem; line-height: 1.5; color: var(--admin-muted); } .admin-dialog-body { padding: 14px 20px; display: flex; flex-direction: column; gap: 10px; } .admin-dialog-body input, .admin-dialog-body textarea, .admin-dialog-body select { width: 100%; background: var(--admin-surface-2); border: 1px solid var(--admin-border); color: var(--admin-text); border-radius: 8px; padding: 10px 12px; font-size: .88rem; font-family: inherit; } .admin-dialog-body label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--admin-muted); } .admin-dialog-foot { padding: 12px 20px 16px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--admin-border-subtle); } /* Loading state em botões AJAX */ .admin-btn.is-loading { position: relative; pointer-events: none; opacity: .7; } .admin-btn.is-loading::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: adminSpin 600ms linear infinite; vertical-align: -2px; } @keyframes adminSpin { to { transform: rotate(360deg); } } /* ═══ Dashboard — filtro de personalização ═══ */ [data-dash-block][hidden] { display: none !important; } .dash-prefs-modal { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; padding: 16px; } .dash-prefs-modal .admin-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); } .dash-prefs-modal .admin-modal-panel { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.45); overflow: hidden; } .dash-prefs-modal .admin-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--admin-border); } .dash-prefs-modal .admin-modal-head h3 { margin: 0; font-size: 1rem; } .dash-prefs-modal .admin-modal-close { background: none; border: none; color: var(--admin-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 4px 8px; } .dash-prefs-modal .admin-modal-close:hover { color: var(--admin-text); } .dash-prefs-modal .admin-modal-body { padding: 14px 16px; overflow: auto; flex: 1; } .dash-prefs-modal .admin-modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--admin-border); } .dash-prefs-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--admin-border); } .dash-prefs-tab { background: none; border: none; padding: 8px 12px; font: inherit; font-size: .82rem; font-weight: 600; color: var(--admin-muted); cursor: pointer; border-bottom: 2px solid transparent; } .dash-prefs-tab.is-active { color: var(--admin-text); border-bottom-color: var(--admin-primary, #93cd07); } .dash-prefs-group { margin-bottom: 12px; } .dash-prefs-group h4 { margin: 0 0 6px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--admin-muted); } .dash-prefs-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .dash-prefs-list label { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: .85rem; cursor: pointer; } .dash-prefs-list label:hover { background: rgba(147,205,7,.06); border-radius: 4px; } .dash-customize-bar .admin-btn-sm { font-size: .75rem; padding: 6px 10px; } /* ───────────────────────────────────────────────────────────── Login com identidade Brilho — quando body tem .is-brilho (acesso via brilho.app vs. tenant) ───────────────────────────────────────────────────────────── */ .admin-body.is-brilho .admin-login-shell { grid-template-columns: 1.05fr 0.95fr; background: #050505; } /* Painel esquerdo: foto do estudio com overlay */ .admin-body.is-brilho .admin-login-brand { position: relative; background: #050505; border-left: 1px solid rgba(255,255,255,.06); padding: 56px 48px; overflow: hidden; isolation: isolate; } .admin-body.is-brilho .admin-login-brand-bg { position: absolute; inset: 0; z-index: -2; background: url('../img/brilho/background.png') center center / cover no-repeat, #050505; } .admin-body.is-brilho .admin-login-brand-overlay { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,.35) 35%, rgba(5,5,5,.55) 70%, rgba(5,5,5,.95) 100%), radial-gradient(ellipse 60% 50% at 30% 50%, rgba(255,255,255,.04), transparent 70%); } .admin-body.is-brilho .admin-login-brand-inner { position: relative; z-index: 1; text-align: left; align-items: flex-start; justify-content: center; max-width: 460px; margin: 0 auto; } .admin-body.is-brilho .admin-login-logo { max-width: 380px; max-height: 180px; width: 100%; margin: 0 0 36px; filter: drop-shadow(0 8px 28px rgba(0,0,0,.6)); } .admin-body.is-brilho .admin-login-brand-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 900; line-height: 1.08; letter-spacing: -.02em; color: #fff; margin: 0 0 18px; text-shadow: 0 2px 20px rgba(0,0,0,.4); } .admin-body.is-brilho .admin-login-shiny { background: linear-gradient(180deg, #ffffff 0%, #d8d8d8 50%, #9c9c9c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .admin-body.is-brilho .admin-login-brand-desc { font-size: .98rem; line-height: 1.65; color: rgba(255,255,255,.78); max-width: 420px; margin: 0 0 28px; } .admin-body.is-brilho .admin-login-brand-list { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 12px; } .admin-body.is-brilho .admin-login-brand-list li { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: rgba(255,255,255,.86); font-weight: 500; } .admin-body.is-brilho .admin-login-brand-list svg { flex-shrink: 0; color: #e0e0e0; filter: drop-shadow(0 0 6px rgba(220,220,220,.35)); } .admin-body.is-brilho .admin-login-brand-footer { position: absolute; z-index: 1; bottom: 24px; left: 48px; font-size: .72rem; color: rgba(255,255,255,.45); margin: 0; letter-spacing: .04em; } /* Painel direito: form em fundo dark consistente */ .admin-body.is-brilho .admin-login-form-side { background: radial-gradient(700px 400px at 100% 50%, rgba(255,255,255,.03), transparent 60%), #070707; padding: 56px 40px; } .admin-body.is-brilho .admin-login-form-inner { max-width: 420px; } .admin-body.is-brilho .admin-login-form-head h2 { font-size: 1.7rem; color: #fff; font-weight: 800; letter-spacing: -.01em; } .admin-body.is-brilho .admin-login-form-eyebrow { color: #d6d6d6; } .admin-body.is-brilho .admin-login-form-head p { color: rgba(255,255,255,.6); font-size: .9rem; } .admin-body.is-brilho .admin-field label { color: rgba(255,255,255,.78); font-weight: 600; font-size: .82rem; } .admin-body.is-brilho .input-with-icon svg { color: rgba(255,255,255,.42); } .admin-body.is-brilho .admin-field input, .admin-body.is-brilho .admin-field textarea, .admin-body.is-brilho .admin-field select { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); color: #fff; border-radius: 10px; padding: 12px 14px; font-size: .9rem; transition: border-color .2s, background .2s, box-shadow .2s; } .admin-body.is-brilho .input-with-icon input { padding-left: 40px !important; } .admin-body.is-brilho .admin-field input::placeholder { color: rgba(255,255,255,.32); } .admin-body.is-brilho .admin-field input:focus, .admin-body.is-brilho .admin-field textarea:focus, .admin-body.is-brilho .admin-field select:focus { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(255,255,255,.06); } .admin-body.is-brilho .admin-login-forgot a { color: rgba(255,255,255,.6); } .admin-body.is-brilho .admin-login-forgot a:hover { color: #fff; } .admin-body.is-brilho .admin-login-submit { background: linear-gradient(180deg, #f0f0f0 0%, #b0b0b0 100%); color: #050505; border: 1px solid rgba(255,255,255,.18); font-weight: 700; box-shadow: 0 6px 22px rgba(220,220,220,.14), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .15s, box-shadow .2s; } .admin-body.is-brilho .admin-login-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(220,220,220,.22), inset 0 1px 0 rgba(255,255,255,.4); } .admin-body.is-brilho .admin-login-submit svg { color: #050505; } .admin-body.is-brilho .admin-login-site-link a { color: rgba(255,255,255,.55); } .admin-body.is-brilho .admin-login-site-link a:hover { color: #fff; } .admin-body.is-brilho .admin-login-signup-link { margin-top: 22px; padding: 14px 16px; text-align: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; font-size: .88rem; color: rgba(255,255,255,.72); } .admin-body.is-brilho .admin-login-signup-link a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px; transition: border-color .15s; } .admin-body.is-brilho .admin-login-signup-link a:hover { border-color: #fff; } .admin-body.is-brilho .admin-alert { border-radius: 10px; } /* Mobile: empilhado, brand vira topo compacto */ @media (max-width: 860px) { .admin-body.is-brilho .admin-login-shell { grid-template-columns: 1fr; min-height: 100vh; min-height: 100dvh; } .admin-body.is-brilho .admin-login-brand { min-height: 0; padding: 22px 22px 18px; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.08); /* MANTÉM position: relative + isolation: isolate do desktop, senão os filhos absolute (-bg, -overlay) escapam pro body e cobrem o form */ } .admin-body.is-brilho .admin-login-brand-bg, .admin-body.is-brilho .admin-login-brand-overlay { pointer-events: none; } .admin-body.is-brilho .admin-login-brand-overlay { background: linear-gradient(180deg, rgba(5,5,5,.6) 0%, rgba(5,5,5,.5) 50%, rgba(5,5,5,.92) 100%); } .admin-body.is-brilho .admin-login-brand-inner { text-align: center; align-items: center; margin: 0 auto; max-width: 100%; } .admin-body.is-brilho .admin-login-logo { max-width: 100%; max-height: 200px; margin-bottom: 16px; } .admin-body.is-brilho .admin-login-brand-title { font-size: 1.05rem; margin-bottom: 0; line-height: 1.25; } .admin-body.is-brilho .admin-login-brand-desc { display: none; } .admin-body.is-brilho .admin-login-brand-list { display: none; } .admin-body.is-brilho .admin-login-brand-footer { display: none; } .admin-body.is-brilho .admin-login-form-side { padding: 24px 22px 32px; padding-bottom: calc(32px + env(safe-area-inset-bottom)); align-items: flex-start; } .admin-body.is-brilho .admin-login-form-head h2 { font-size: 1.35rem; } .admin-body.is-brilho .admin-login-form-head p { font-size: .82rem; } .admin-body.is-brilho .admin-login-form .admin-field input { font-size: 16px; min-height: 48px; } .admin-body.is-brilho .admin-login-submit { min-height: 50px; font-size: 1rem; } .admin-body.is-brilho .admin-login-signup-link, .admin-body.is-brilho .admin-login-site-link { text-align: center; font-size: .85rem; } } @media (max-width: 420px) { .admin-body.is-brilho .admin-login-brand { padding: 18px 16px 14px; } .admin-body.is-brilho .admin-login-logo { max-width: 100%; max-height: 200px; margin-bottom: 10px; } .admin-body.is-brilho .admin-login-brand-title { font-size: .95rem; } .admin-body.is-brilho .admin-login-form-side { padding: 18px 16px 28px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); } .admin-body.is-brilho .admin-login-form-head { margin-bottom: 14px; } .admin-body.is-brilho .admin-login-form-head h2 { font-size: 1.2rem; } } /* ───────────────────────────────────────────────────────────── Painel admin com identidade Brilho (acesso via brilho.app) Substitui o verde primario por prata. Aplica nos tokens --admin-primary*, --admin-accent e gradients que usam. ───────────────────────────────────────────────────────────── */ .admin-body.is-brilho { /* Acentos prata em vez de verde */ --admin-primary: #d6d6d6; --admin-primary-strong: #ffffff; --admin-accent: #d6d6d6; --admin-text-on-primary: #050505; /* Fundo preto sólido (identidade Brilho) — override dos tokens dark */ --admin-bg: #000000; --admin-surface: #0a0a0a; --admin-surface-2: #141414; --admin-card: #141414; --admin-border: #1f1f1f; --admin-border-subtle: rgba(255,255,255,0.05); } /* body e main também recebem fundo preto sólido (alguns seletores usam color direto em vez de var). */ .admin-body.is-brilho, .admin-body.is-brilho .admin-shell, .admin-body.is-brilho main.admin-main { background: #000 !important; } .admin-body.is-brilho .admin-sidebar { background: #000; border-right: 1px solid #1f1f1f; } .admin-body.is-brilho .admin-topbar { background: rgba(0,0,0,.85); border-bottom: 0; } /* Light theme: não força preto — preserva o admin-bg branco padrão */ html[data-theme="light"] .admin-body.is-brilho { --admin-bg: #ffffff; --admin-surface: #fafafa; --admin-surface-2: #f1f1f1; --admin-card: #ffffff; --admin-border: #e5e5e5; } html[data-theme="light"] .admin-body.is-brilho, html[data-theme="light"] .admin-body.is-brilho .admin-shell, html[data-theme="light"] .admin-body.is-brilho main.admin-main { background: #ffffff !important; } html[data-theme="light"] .admin-body.is-brilho .admin-sidebar { background: #ffffff; border-right: 1px solid #e5e5e5; } /* Boxes/containers com acabamento preto + prata metálico. O gradient default do admin era verde-escuro hardcoded — aqui trocamos por preto com borda prata translúcida e shadow sutil. */ .admin-body.is-brilho .admin-panel, .admin-body.is-brilho .admin-auth-card, .admin-body.is-brilho .admin-kpi-card, .admin-body.is-brilho .admin-action-card, .admin-body.is-brilho .admin-media-card, .admin-body.is-brilho .admin-gallery-card, .admin-body.is-brilho .admin-subcard, .admin-body.is-brilho .admin-section-card { background: linear-gradient(180deg, rgba(22,22,22,0.96), rgba(10,10,10,0.96)); border: 1px solid rgba(220,220,220,0.10); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px rgba(0,0,0,0.5); position: unset; } /* Linha prata sutil no topo do card (efeito metálico cinematográfico) */ .admin-body.is-brilho .admin-panel::before, .admin-body.is-brilho .admin-kpi-card::before, .admin-body.is-brilho .admin-action-card::before, .admin-body.is-brilho .admin-subcard::before, .admin-body.is-brilho .admin-section-card::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); pointer-events: none; border-radius: inherit; } /* Hover mais "metálico" em cards interativos */ .admin-body.is-brilho .admin-action-card:hover, .admin-body.is-brilho .admin-kpi-card:hover { border-color: rgba(220,220,220,0.22); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 40px rgba(0,0,0,0.6); } /* Tabelas */ .admin-body.is-brilho .admin-table-wrap { background: linear-gradient(180deg, rgba(22,22,22,0.96), rgba(10,10,10,0.96)); border: 1px solid rgba(220,220,220,0.10); border-radius: var(--admin-radius-md); } @media (max-width: 640px) { .admin-body.is-brilho .admin-table-wrap { background: none; } } .admin-body.is-brilho .admin-table thead { background: rgba(255,255,255,0.03); } .admin-body.is-brilho .admin-table th { color: rgba(255,255,255,0.68); border-bottom-color: rgba(220,220,220,0.10); } .admin-body.is-brilho .admin-table td { border-color: rgba(255,255,255,0.05); } .admin-body.is-brilho .admin-table tbody tr:hover { background: rgba(255,255,255,0.03); } /* Modais */ .admin-body.is-brilho .admin-modal, .admin-body.is-brilho .admin-modal-content { background: linear-gradient(180deg, rgba(22,22,22,0.98), rgba(10,10,10,0.98)); border: 1px solid rgba(220,220,220,0.14); box-shadow: 0 30px 80px rgba(0,0,0,0.7); } /* Light theme dos boxes no brilho: branco + borda cinza escuro, sem forçar gradient que fica estranho em fundo claro. */ html[data-theme="light"] .admin-body.is-brilho .admin-panel, html[data-theme="light"] .admin-body.is-brilho .admin-auth-card, html[data-theme="light"] .admin-body.is-brilho .admin-kpi-card, html[data-theme="light"] .admin-body.is-brilho .admin-action-card, html[data-theme="light"] .admin-body.is-brilho .admin-media-card, html[data-theme="light"] .admin-body.is-brilho .admin-gallery-card, html[data-theme="light"] .admin-body.is-brilho .admin-subcard, html[data-theme="light"] .admin-body.is-brilho .admin-section-card, html[data-theme="light"] .admin-body.is-brilho .admin-table-wrap { background: #ffffff; border: 1px solid #e5e5e5; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 10px 30px rgba(0,0,0,0.04); } html[data-theme="light"] .admin-body.is-brilho .admin-panel::before, html[data-theme="light"] .admin-body.is-brilho .admin-kpi-card::before, html[data-theme="light"] .admin-body.is-brilho .admin-action-card::before, html[data-theme="light"] .admin-body.is-brilho .admin-subcard::before, html[data-theme="light"] .admin-body.is-brilho .admin-section-card::before { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent); } /* Sidebar brand: logo Brilho fica maior pra dar protagonismo */ .admin-body.is-brilho .admin-sidebar-brand img.admin-brand-logo { max-height: 56px !important; filter: drop-shadow(0 2px 12px rgba(0,0,0,.4)); } /* Botao "Nova venda" (CTA primario na sidebar) — prata gradient se usa background verde solido por padrao */ .admin-body.is-brilho .admin-sidebar-nova-venda { background: linear-gradient(180deg, #f0f0f0, #b0b0b0); color: #050505; border-color: rgba(255,255,255,.18); box-shadow: 0 4px 18px rgba(220,220,220,.18), inset 0 1px 0 rgba(255,255,255,.35); font-weight: 700; } .admin-body.is-brilho .admin-sidebar-nova-venda:hover { background: linear-gradient(180deg, #ffffff, #c0c0c0); box-shadow: 0 8px 24px rgba(220,220,220,.26), inset 0 1px 0 rgba(255,255,255,.4); } /* Item ativo da sidebar nav: barra lateral prata em vez de verde */ .admin-body.is-brilho .admin-sidebar-nav a.is-active::before, .admin-body.is-brilho .admin-sidebar-nav a[aria-current="page"]::before { background: linear-gradient(180deg, #ffffff, #b8b8b8); } /* Botoes primary do admin viram prata */ .admin-body.is-brilho .admin-btn-primary { background: linear-gradient(180deg, #f0f0f0, #b0b0b0) !important; color: #050505 !important; border-color: rgba(255,255,255,.18) !important; box-shadow: 0 4px 18px rgba(220,220,220,.16), inset 0 1px 0 rgba(255,255,255,.32) !important; } .admin-body.is-brilho .admin-btn-primary:hover { background: linear-gradient(180deg, #ffffff, #c0c0c0) !important; box-shadow: 0 8px 26px rgba(220,220,220,.24), inset 0 1px 0 rgba(255,255,255,.4) !important; } /* Light mode: tokens precisam ser cinza escuro pra contrastar com fundo claro */ html[data-theme="light"] .admin-body.is-brilho, .admin-body.is-brilho[data-theme="light"] { --admin-primary: #2a2a2a; --admin-primary-strong: #050505; --admin-accent: #2a2a2a; --admin-text-on-primary: #ffffff; } html[data-theme="light"] .admin-body.is-brilho .admin-sidebar-nova-venda, html[data-theme="light"] .admin-body.is-brilho .admin-btn-primary { background: linear-gradient(180deg, #2a2a2a, #555555) !important; color: #ffffff !important; box-shadow: 0 4px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08) !important; } html[data-theme="light"] .admin-body.is-brilho .admin-sidebar-nova-venda:hover, html[data-theme="light"] .admin-body.is-brilho .admin-btn-primary:hover { background: linear-gradient(180deg, #1a1a1a, #444444) !important; } /* ─ Substituição de verde hardcoded por prata quando is-brilho ─ Os rgba(147,205,7,*) hardcoded foram espalhados em muitos componentes (chips, tabs, focus ring, badges, kpis, eyebrows). Este bloco força a palette prata nesses pontos específicos. Seletores com `!important` ou especificidade alta para vencer o hardcoded. */ .admin-body.is-brilho .admin-chip:hover { border-color: rgba(220,220,220,.4); } .admin-body.is-brilho .admin-chip.is-active { background: var(--admin-primary); color: #050505; border-color: var(--admin-primary); } .admin-body.is-brilho .kpi-delta-up { background: rgba(220,220,220,.14); color: var(--admin-primary); } .admin-body.is-brilho .avc-tab.is-active { color: var(--admin-primary); border-bottom-color: var(--admin-primary); } .admin-body.is-brilho .avc-radio-group label:hover, .admin-body.is-brilho .avc-check-group label:hover { border-color: rgba(220,220,220,.4); } .admin-body.is-brilho .avc-radio-group label:has(input:checked), .admin-body.is-brilho .avc-check-group label:has(input:checked) { border-color: var(--admin-primary); background: rgba(220,220,220,.12); color: var(--admin-text); } .admin-body.is-brilho .avc-radio-group input, .admin-body.is-brilho .avc-check-group input { accent-color: var(--admin-primary); } /* Focus ring dos inputs (era verde) → prata translúcido */ .admin-body.is-brilho .admin-field input:focus, .admin-body.is-brilho .admin-field textarea:focus, .admin-body.is-brilho .admin-field select:focus, .admin-body.is-brilho input.admin-input:focus, .admin-body.is-brilho select.admin-input:focus, .admin-body.is-brilho textarea.admin-input:focus { border-color: rgba(220,220,220,.5) !important; box-shadow: 0 0 0 3px rgba(220,220,220,.1) !important; } /* Backgrounds translúcidos verdes diversos (cards highlight, eyebrows) */ .admin-body.is-brilho [style*="rgba(147"], .admin-body.is-brilho [style*="#93cd07"] { /* Não dá pra sobrescrever inline style via CSS — mas os casos restantes são marginais e o visual geral já vira prata pelos tokens + overrides acima. Observação: se aparecer algum verde residual, trocar o inline style pelo var(--admin-primary) no PHP. */ } /* Hover states com verde translúcido */ .admin-body.is-brilho *[class*="admin-"]:hover { /* Sem override global — evita efeito colateral em vários componentes. Casos específicos tratados acima. */ } /* Mensagens de sucesso/info/danger permanecem com cores semânticas próprias (não afeta is-brilho). */ /* Light theme: usar tokens escuros */ html[data-theme="light"] .admin-body.is-brilho .admin-chip.is-active { background: var(--admin-primary); color: #ffffff; border-color: var(--admin-primary); } html[data-theme="light"] .admin-body.is-brilho .kpi-delta-up { background: rgba(60,60,60,.12); color: var(--admin-primary); } html[data-theme="light"] .admin-body.is-brilho .admin-field input:focus, html[data-theme="light"] .admin-body.is-brilho .admin-field textarea:focus, html[data-theme="light"] .admin-body.is-brilho .admin-field select:focus, html[data-theme="light"] .admin-body.is-brilho input.admin-input:focus, html[data-theme="light"] .admin-body.is-brilho select.admin-input:focus, html[data-theme="light"] .admin-body.is-brilho textarea.admin-input:focus { border-color: rgba(60,60,60,.5) !important; box-shadow: 0 0 0 3px rgba(60,60,60,.08) !important; } /* ─── Alertas: botão com badge + drawer lateral direito ─── */ .admin-alerts-btn { position: relative; } .admin-alerts-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; background: #ef4444; color: #fff; font-size: .66rem; font-weight: 800; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--admin-surface-1, #0c0c0c); line-height: 1; } .admin-alerts-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 100; } .admin-alerts-overlay.is-open { opacity: 1; pointer-events: auto; } .admin-alerts-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--admin-surface-1, #0c0c0c); border-left: 1px solid var(--admin-border, #2a2a2a); transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 110; display: flex; flex-direction: column; overflow: hidden; box-shadow: -20px 0 60px rgba(0,0,0,.55); } .admin-alerts-drawer.is-open { transform: translateX(0); } .admin-alerts-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 22px 24px; border-bottom: 1px solid var(--admin-border, #1f1f1f); } .admin-alerts-head h3 { margin: 4px 0 0; font-size: 1.1rem; font-weight: 800; color: var(--admin-text, #ececec); } .admin-alerts-kicker { margin: 0; font-size: .7rem; color: var(--admin-muted, #8a8a8a); letter-spacing: .14em; text-transform: uppercase; font-weight: 800; } .admin-alerts-close { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--admin-border-strong, #2a2a2a); background: transparent; color: var(--admin-text, #ececec); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s; } .admin-alerts-close:hover { border-color: var(--admin-text, #ececec); } .admin-alerts-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .admin-alert-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--admin-surface-2, #141414); border: 1px solid var(--admin-border, #1f1f1f); color: var(--admin-text, #ececec); text-decoration: none; transition: border-color .15s, background .15s, transform .12s; position: relative; } a.admin-alert-item { cursor: pointer; } a.admin-alert-item:hover { border-color: var(--admin-border-stronger, #3a3a3a); background: var(--admin-surface-3, #1a1a1a); transform: translateY(-1px); } .admin-alert-item.is-danger { border-left: 3px solid #ef4444; } .admin-alert-item.is-warning { border-left: 3px solid #fbbf24; } .admin-alert-item.is-info { border-left: 3px solid #93cd07; } .admin-body.is-brilho .admin-alert-item.is-info { border-left-color: #d6d6d6; } .admin-alert-ico { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(180deg, var(--admin-surface-3, #1a1a1a), var(--admin-surface-2, #141414)); border: 1px solid var(--admin-border-strong, #2a2a2a); display: inline-flex; align-items: center; justify-content: center; color: var(--admin-text, #ececec); } .admin-alert-item.is-danger .admin-alert-ico { color: #ef4444; } .admin-alert-item.is-warning .admin-alert-ico { color: #fbbf24; } .admin-alert-item.is-info .admin-alert-ico { color: #93cd07; } .admin-body.is-brilho .admin-alert-item.is-info .admin-alert-ico { color: #d6d6d6; } .admin-alert-ico svg { width: 16px; height: 16px; } .admin-alert-text { flex: 1; min-width: 0; } .admin-alert-text strong { display: block; font-size: .92rem; font-weight: 700; color: var(--admin-text, #ececec); margin-bottom: 3px; line-height: 1.35; } .admin-alert-text p { margin: 0; font-size: .82rem; color: var(--admin-muted, #8a8a8a); line-height: 1.55; } .admin-alert-arrow { color: var(--admin-muted, #8a8a8a); flex-shrink: 0; align-self: center; } a.admin-alert-item:hover .admin-alert-arrow { color: var(--admin-text, #ececec); transform: translateX(2px); transition: transform .15s; } .admin-alerts-empty { margin: auto; padding: 40px 20px; text-align: center; color: var(--admin-muted, #8a8a8a); } .admin-alerts-empty-ico { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 20px; background: linear-gradient(180deg, var(--admin-surface-2, #141414), var(--admin-surface-1, #0c0c0c)); border: 1px solid var(--admin-border-strong, #2a2a2a); display: inline-flex; align-items: center; justify-content: center; color: #93cd07; } .admin-body.is-brilho .admin-alerts-empty-ico { color: #d6d6d6; } .admin-alerts-empty strong { display: block; color: var(--admin-text, #ececec); font-size: 1rem; font-weight: 800; margin-bottom: 8px; } .admin-alerts-empty p { margin: 0; font-size: .86rem; line-height: 1.65; } /* ─── Forgot/reset password com identidade Brilho (padrão saas dark + prata) ─── */ .admin-body.is-brilho .admin-auth-shell { min-height: 100vh; min-height: 100dvh; padding: 32px 20px; background: radial-gradient(900px 480px at 10% -10%, rgba(220,220,220,.06), transparent 60%), radial-gradient(700px 400px at 100% 100%, rgba(220,220,220,.04), transparent 60%), #050505; } .admin-body.is-brilho .admin-auth-backdrop { background: radial-gradient(620px 280px at 50% 0%, rgba(220,220,220,.1), transparent 68%); } .admin-body.is-brilho .admin-auth-single { gap: 24px; width: min(460px, 100%); } .admin-body.is-brilho .admin-auth-single .admin-brand-logo-auth { max-width: 100%; max-height: 160px; filter: drop-shadow(0 6px 24px rgba(0,0,0,.6)); } .admin-body.is-brilho .admin-auth-card { background: linear-gradient(180deg, #0c0c0c 0%, #080808 100%); border: 1px solid #2a2a2a; border-radius: 22px; padding: 36px 32px; box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); position: relative; overflow: hidden; } .admin-body.is-brilho .admin-auth-card::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); } .admin-body.is-brilho .admin-auth-card h2 { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 8px; letter-spacing: -.01em; } .admin-body.is-brilho .admin-auth-card p { color: rgba(255,255,255,.68); font-size: .92rem; line-height: 1.6; margin: 0 0 10px; } .admin-body.is-brilho .admin-auth-card .admin-field input { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); color: #fff; font-size: 16px; min-height: 48px; border-radius: 10px; padding: 0 14px 0 42px; } .admin-body.is-brilho .admin-auth-card .admin-field input:focus { border-color: rgba(220,220,220,.55); box-shadow: 0 0 0 3px rgba(220,220,220,.08); } .admin-body.is-brilho .admin-auth-card .input-with-icon svg { color: rgba(255,255,255,.5); } .admin-body.is-brilho .admin-auth-card .admin-btn-primary { width: 100%; min-height: 50px; font-size: 1rem; font-weight: 800; background: linear-gradient(180deg, #f0f0f0 0%, #b0b0b0 100%); color: #050505; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 6px 24px rgba(220,220,220,.16), inset 0 1px 0 rgba(255,255,255,.35); border-radius: 12px; } .admin-body.is-brilho .admin-auth-card .admin-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 32px rgba(220,220,220,.22), inset 0 1px 0 rgba(255,255,255,.4); } .admin-body.is-brilho .auth-forgot a { color: rgba(255,255,255,.62); font-size: .88rem; transition: color .15s; } .admin-body.is-brilho .auth-forgot a:hover { color: #fff; } .admin-body.is-brilho .admin-alert { border-radius: 10px; } .admin-body.is-brilho .admin-alert-success { background: rgba(220,220,220,.05); border: 1px solid rgba(220,220,220,.18); color: rgba(255,255,255,.88); } @media (max-width: 480px) { .admin-body.is-brilho .admin-auth-shell { padding: 24px 16px; } .admin-body.is-brilho .admin-auth-single { gap: 18px; } .admin-body.is-brilho .admin-auth-single .admin-brand-logo-auth { max-height: 120px; } .admin-body.is-brilho .admin-auth-card { padding: 28px 22px; border-radius: 18px; } .admin-body.is-brilho .admin-auth-card h2 { font-size: 1.3rem; } } /* ─── Menu mobile lateral do admin: visual refinado (mantem so brand + footer pra nao conflitar com o redesign full-screen em grid logo acima) ─── */ @media (max-width: 980px) { .admin-sidebar { background: #000000 !important; border-right: 0; } /* Brand com divisor mais visível */ .admin-sidebar-brand { padding: 14px 16px !important; border-bottom: 1px solid rgba(255,255,255,.06); } .admin-sidebar-brand .admin-brand-logo-dark, .admin-sidebar-brand .admin-brand-logo-light { max-height: 38px !important; } /* Footer: user card + actions com respiração maior */ .admin-sidebar-foot { background: #000 !important; border-top: 1px solid rgba(255,255,255,.08) !important; padding: 12px !important; gap: 10px !important; } .admin-sidebar-user { padding: 10px 12px !important; background: rgba(255,255,255,.03); border-radius: 12px; border: 1px solid rgba(255,255,255,.06); } .admin-user-avatar { width: 36px !important; height: 36px !important; font-size: .95rem !important; } .admin-sidebar-foot-actions { gap: 8px !important; } .admin-sidebar-foot-actions .admin-btn { min-height: 42px !important; border-radius: 10px; } .admin-sidebar-logout { min-height: 44px !important; border-radius: 10px; } } /* ─── iOS: evita zoom-on-focus em inputs (font-size precisa ser >= 16px) ─── */ @media (max-width: 720px) { .admin-body input[type="text"], .admin-body input[type="email"], .admin-body input[type="tel"], .admin-body input[type="url"], .admin-body input[type="number"], .admin-body input[type="password"], .admin-body input[type="search"], .admin-body input[type="date"], .admin-body input[type="time"], .admin-body input[type="datetime-local"], .admin-body input:not([type]), .admin-body select, .admin-body textarea, .admin-body .admin-input { font-size: 16px !important; } } /* ─── Vehicle service view — ajustes mobile ─── */ @media (max-width: 720px) { /* Header da página: stack vertical (titulo em cima, ações embaixo) */ .admin-panel > .admin-panel-head { flex-direction: column; align-items: stretch; gap: 12px; } .admin-panel > .admin-panel-head > div:first-child h2 { font-size: 1.15rem; } .admin-panel > .admin-panel-head .admin-inline-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; justify-content: flex-start; } .admin-panel > .admin-panel-head .admin-inline-actions .admin-btn { flex: 1 1 calc(50% - 3px); min-height: 40px; justify-content: center; font-size: .8rem; padding: 0 10px; } /* Grid principal de 2 colunas — vira 1 coluna */ .admin-panel-grid.admin-panel-grid-2 { grid-template-columns: 1fr !important; gap: 12px; } /* Status bar / cards de info: ajusta padding e wrap */ .admin-panel > div[style*="display:flex"][style*="margin-bottom:20px"] { padding: 12px !important; flex-wrap: wrap; gap: 8px !important; } /* Subseções em painéis menores no mobile */ .admin-panel { padding: 14px 12px; } .admin-panel section.admin-panel { padding: 14px 12px; } /* Ticket modal: ocupa quase a tela inteira */ #ticket-modal > div { max-width: 96vw !important; max-height: 96vh !important; } } /* ═══ Chat assistant flutuante (IA) ═══ */ .ai-chat-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 64; display: none; animation: aiChatBackdropIn .18s ease; } .ai-chat-backdrop.is-open { display: block; } @keyframes aiChatBackdropIn { from { opacity: 0; } to { opacity: 1; } } .ai-chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--admin-primary, #93cd07), var(--admin-primary-strong, #acd943)); color: var(--admin-on-primary, #0a1005); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 4px 10px rgba(147,205,7,.32); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .2s ease; } .ai-chat-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.55), 0 6px 14px rgba(147,205,7,.4); } .ai-chat-fab:active { transform: translateY(0); } .ai-chat-fab.is-hidden { opacity: 0; pointer-events: none; transform: scale(.8); } .ai-chat-fab svg { width: 26px; height: 26px; } .ai-chat-fab-badge { position: absolute; top: -2px; right: -2px; background: #ef5b5b; color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; display: none; align-items: center; justify-content: center; padding: 0 5px; box-shadow: 0 0 0 2px var(--admin-bg, #07110d); } .ai-chat-fab-badge.is-on { display: flex; } .ai-chat-panel { position: fixed; right: 22px; bottom: 22px; z-index: 65; width: 380px; max-width: calc(100vw - 24px); height: 560px; max-height: calc(100vh - 100px); background: var(--admin-surface, #111b16); border: 1px solid var(--admin-border, #24352d); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.6); display: none; flex-direction: column; overflow: hidden; transform-origin: bottom right; animation: aiChatIn .22s ease; } .ai-chat-panel.is-open { display: flex; } @keyframes aiChatIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .ai-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(180deg, rgba(147,205,7,.08), transparent); border-bottom: 1px solid var(--admin-border, #24352d); } .ai-chat-head-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--admin-primary, #93cd07); color: var(--admin-on-primary, #0a1005); display: flex; align-items: center; justify-content: center; flex: 0 0 34px; } .ai-chat-head-ico svg { width: 18px; height: 18px; } .ai-chat-head-text { flex: 1; min-width: 0; } .ai-chat-head-text strong { display: block; font-size: .92rem; color: var(--admin-on-surface, #edf3ee); line-height: 1.1; } .ai-chat-head-text span { font-size: .72rem; color: var(--admin-muted, #9fb2a7); } .ai-chat-head-actions { display: flex; gap: 4px; } .ai-chat-head-btn { background: transparent; border: none; color: var(--admin-muted, #9fb2a7); cursor: pointer; padding: 6px; border-radius: 6px; display: flex; } .ai-chat-head-btn:hover { background: rgba(255,255,255,.06); color: var(--admin-on-surface, #edf3ee); } .ai-chat-head-btn svg { width: 16px; height: 16px; } .ai-chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; } .ai-chat-empty { margin: auto 0; text-align: center; color: var(--admin-muted, #9fb2a7); font-size: .85rem; line-height: 1.55; padding: 12px; } .ai-chat-empty .ai-chat-empty-title { color: var(--admin-on-surface, #edf3ee); font-weight: 600; margin-bottom: 6px; font-size: .95rem; } .ai-chat-empty .ai-chat-empty-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .ai-chat-empty .ai-chat-empty-suggestions button { background: rgba(147,205,7,.08); border: 1px solid rgba(147,205,7,.25); color: var(--admin-on-surface, #edf3ee); padding: 8px 12px; border-radius: 10px; font-size: .8rem; text-align: left; cursor: pointer; font-family: inherit; transition: background .15s ease, border-color .15s ease; } .ai-chat-empty .ai-chat-empty-suggestions button:hover { background: rgba(147,205,7,.16); border-color: var(--admin-primary, #93cd07); } .ai-chat-msg { display: flex; flex-direction: column; max-width: 85%; word-wrap: break-word; } .ai-chat-msg.is-user { align-self: flex-end; } .ai-chat-msg.is-assistant { align-self: flex-start; } .ai-chat-bubble { padding: 11px 14px; border-radius: 14px; font-size: .88rem; line-height: 1.55; word-break: break-word; } .ai-chat-msg.is-user .ai-chat-bubble { background: var(--admin-primary, #93cd07); color: var(--admin-on-primary, #0a1005); border-bottom-right-radius: 4px; white-space: pre-wrap; } .ai-chat-msg.is-assistant .ai-chat-bubble { background: rgba(255,255,255,.06); color: var(--admin-on-surface, #edf3ee); border-bottom-left-radius: 4px; border: 1px solid var(--admin-border, #24352d); } .ai-chat-msg.is-error .ai-chat-bubble { background: rgba(239,91,91,.12); color: #ffb6b6; border: 1px solid rgba(239,91,91,.35); } .ai-chat-bubble code { background: rgba(0,0,0,.28); padding: 1px 6px; border-radius: 4px; font-size: .82em; font-family: 'SF Mono', Menlo, Consolas, monospace; } .ai-chat-msg.is-user .ai-chat-bubble code { background: rgba(0,0,0,.18); color: inherit; } .ai-chat-bubble strong { font-weight: 700; color: var(--admin-on-surface, #edf3ee); } .ai-chat-msg.is-user .ai-chat-bubble strong { color: inherit; } .ai-chat-bubble em { font-style: italic; opacity: .85; } /* Block-level layout pro renderer (dá hierarquia visual real) */ .ai-chat-bubble .ai-chat-h { font-weight: 800; font-size: .92rem; color: var(--admin-primary-strong, #acd943); margin: 14px 0 6px; letter-spacing: .005em; border-bottom: 1px solid rgba(147,205,7,.18); padding-bottom: 4px; } .ai-chat-bubble .ai-chat-h:first-child { margin-top: 0; } .ai-chat-msg.is-user .ai-chat-bubble .ai-chat-h { color: inherit; border-bottom-color: rgba(0,0,0,.15); } .ai-chat-bubble .ai-chat-p { margin: 4px 0; } .ai-chat-bubble .ai-chat-gap { height: 8px; } .ai-chat-bubble .ai-chat-bul { display: flex; gap: 6px; align-items: baseline; margin: 3px 0; } .ai-chat-bubble .ai-chat-dot { flex: 0 0 auto; color: var(--admin-primary, #93cd07); font-size: 1em; line-height: 1; } .ai-chat-msg.is-user .ai-chat-bubble .ai-chat-dot { color: inherit; opacity: .7; } .ai-chat-bubble .ai-chat-txt { flex: 1; min-width: 0; } .ai-chat-bubble .ai-chat-sub { margin: 1px 0 1px 22px; font-size: .85em; color: var(--admin-muted, #9fb2a7); line-height: 1.45; } .ai-chat-msg.is-user .ai-chat-bubble .ai-chat-sub { color: inherit; opacity: .85; } /* Quando um bullet vem logo após sub-itens (caso típico do Histórico de OS: cada OS termina em line items + obs, e a próxima OS começa um novo bullet), adiciona respiração visual extra. Bullet após bullet "puro" também ganha um leve espaço. */ .ai-chat-bubble .ai-chat-sub + .ai-chat-bul { margin-top: 14px; } .ai-chat-bubble .ai-chat-bul + .ai-chat-bul { margin-top: 8px; } .ai-chat-bubble .ai-chat-tag { display: inline-block; padding: 0 7px; background: rgba(255,255,255,.05); border: 1px solid var(--admin-border, #24352d); border-radius: 999px; font-size: .72em; color: var(--admin-muted, #9fb2a7); margin: 0 2px; white-space: nowrap; text-transform: lowercase; vertical-align: 1px; line-height: 1.5; } .ai-chat-msg.is-user .ai-chat-bubble .ai-chat-tag { background: rgba(0,0,0,.12); border-color: rgba(0,0,0,.18); color: inherit; opacity: .85; } .ai-chat-tools { margin-top: 4px; font-size: .68rem; color: var(--admin-muted, #9fb2a7); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; line-height: 1.3; } .ai-chat-tools svg { width: 11px; height: 11px; opacity: .7; flex: 0 0 11px; } .ai-chat-tools code { background: rgba(147,205,7,.12); color: var(--admin-primary-strong, #acd943); padding: 1px 5px; border-radius: 4px; font-size: .92em; font-family: 'SF Mono', Menlo, Consolas, monospace; } .ai-chat-typing { display: flex; gap: 4px; padding: 12px 14px; background: rgba(255,255,255,.06); border: 1px solid var(--admin-border, #24352d); border-radius: 14px; border-bottom-left-radius: 4px; width: fit-content; align-self: flex-start; } .ai-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--admin-muted, #9fb2a7); animation: aiChatBlink 1.2s infinite ease-in-out; } .ai-chat-typing span:nth-child(2) { animation-delay: .15s; } .ai-chat-typing span:nth-child(3) { animation-delay: .3s; } @keyframes aiChatBlink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .ai-chat-foot { padding: 10px 12px 12px; border-top: 1px solid var(--admin-border, #24352d); background: var(--admin-surface, #111b16); } .ai-chat-form { display: flex; gap: 8px; align-items: flex-end; } .ai-chat-form textarea { flex: 1; background: rgba(0,0,0,.28); border: 1px solid var(--admin-border, #24352d); color: var(--admin-on-surface, #edf3ee); border-radius: 10px; padding: 9px 12px; font-family: inherit; font-size: .87rem; resize: none; min-height: 40px; max-height: 120px; line-height: 1.4; } .ai-chat-form textarea:focus { outline: none; border-color: var(--admin-primary, #93cd07); } .ai-chat-form button { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; border: none; background: var(--admin-primary, #93cd07); color: var(--admin-on-primary, #0a1005); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .15s ease, transform .1s ease; } .ai-chat-form button:hover:not(:disabled) { transform: translateY(-1px); } .ai-chat-form button:disabled { opacity: .4; cursor: not-allowed; } .ai-chat-form button svg { width: 18px; height: 18px; } /* ── Card de confirmação de OS gerado pela IA (create_os_draft) ── */ .ai-os-draft { /* Em flex column do .ai-chat-body, força stretch pra ocupar toda largura e nao deixa o flex shrink comprimir a altura. */ align-self: stretch; flex-shrink: 0; width: 100%; max-width: 100%; margin: 6px 0; background: linear-gradient(180deg, rgba(147,205,7,.06), rgba(147,205,7,.02)); border: 1px solid rgba(147,205,7,.32); border-radius: 14px; overflow: hidden; box-sizing: border-box; animation: ai-osd-in .3s ease-out; } @keyframes ai-osd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .ai-os-draft * { box-sizing: border-box; } .ai-os-draft.is-success { border-color: rgba(147,205,7,.6); background: linear-gradient(180deg, rgba(147,205,7,.12), rgba(147,205,7,.04)); } .ai-os-draft.is-cancelled { opacity: .55; border-color: var(--admin-border, #24352d); background: rgba(255,255,255,.02); } .ai-osd-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(147,205,7,.08); border-bottom: 1px solid rgba(147,205,7,.18); color: var(--admin-primary-strong, #acd943); font-size: .82rem; } .ai-osd-head svg { flex-shrink: 0; } .ai-osd-head strong { color: var(--admin-on-surface, #edf3ee); font-weight: 800; } .ai-osd-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; } .ai-osd-section { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ai-osd-section > label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--admin-muted, #9fb2a7); } .ai-osd-section .plate-input, .ai-osd-section select.plate-input { width: 100%; max-width: 100%; min-width: 0; font-size: .9rem; /* Força quebra do texto comprido (nomes longos no select) */ text-overflow: ellipsis; } .ai-osd-info { font-size: .85rem; color: var(--admin-on-surface, #edf3ee); background: rgba(255,255,255,.03); border: 1px solid var(--admin-border, #24352d); border-radius: 8px; padding: 8px 12px; word-break: break-word; line-height: 1.4; } .ai-osd-info.ai-osd-match { border-color: rgba(147,205,7,.3); background: rgba(147,205,7,.06); } .ai-osd-tag { display: inline-block; margin-left: 6px; font-size: .65rem; padding: 2px 8px; border-radius: 999px; background: rgba(147,205,7,.18); color: var(--admin-primary, #93cd07); font-weight: 700; letter-spacing: .04em; vertical-align: middle; white-space: nowrap; } .ai-osd-newclient { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .ai-osd-newvehicle { display: flex; flex-direction: column; gap: 6px; } .ai-osd-price-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .85rem; color: var(--admin-muted, #9fb2a7); } .ai-osd-price-row > span { flex-shrink: 0; } .ai-osd-price-row input { flex: 1; min-width: 0; } .ai-osd-foot { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid rgba(147,205,7,.15); background: rgba(0,0,0,.18); } .ai-osd-foot .admin-btn { flex: 1; justify-content: center; padding: 10px 14px; font-size: .85rem; min-height: 42px; white-space: nowrap; } .ai-osd-status { padding: 0 14px 12px; font-size: .82rem; color: var(--admin-on-surface, #edf3ee); word-break: break-word; } @media (max-width: 640px) { .ai-osd-body { padding: 12px; gap: 12px; } .ai-osd-foot { flex-direction: column-reverse; padding: 10px 12px; } .ai-osd-foot .admin-btn { width: 100%; min-height: 46px; } .ai-osd-section .plate-input, .ai-osd-section select.plate-input { font-size: 16px; min-height: 44px; } } /* Botao de microfone (Web Speech API) */ .ai-chat-mic { background: rgba(255,255,255,.06) !important; color: var(--admin-on-surface, #edf3ee) !important; border: 1px solid var(--admin-border, #24352d) !important; } .ai-chat-mic:hover:not(:disabled) { background: rgba(255,255,255,.10) !important; border-color: var(--admin-primary, #93cd07) !important; } .ai-chat-mic.is-recording { background: rgba(239,91,91,.18) !important; color: #ff7a7a !important; border-color: rgba(239,91,91,.6) !important; animation: ai-mic-pulse 1.4s ease-in-out infinite; } @keyframes ai-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,91,91,.4); } 50% { box-shadow: 0 0 0 8px rgba(239,91,91,0); } } .ai-chat-foot-hint { font-size: .68rem; color: var(--admin-muted, #9fb2a7); margin-top: 6px; text-align: center; } @media (max-width: 640px) { /* FAB: sobe acima do admin-bottomnav (56px + safe-area iOS). */ .ai-chat-fab { right: 14px; bottom: calc(72px + env(safe-area-inset-bottom, 0)); width: 52px; height: 52px; } .ai-chat-fab svg { width: 22px; height: 22px; } /* Painel mobile: full-screen com safe-areas. Usa 100dvh (dynamic viewport) com fallback p/ 100vh — evita corte pela barra de URL do iOS Safari quando o teclado abre. */ .ai-chat-panel { right: 0; left: 0; top: 0; bottom: 0; width: 100%; max-width: 100%; max-height: 100vh; max-height: 100dvh; height: 100vh; height: 100dvh; border-radius: 0; border: none; transform-origin: bottom right; /* Backdrop só aparece no mobile (display:none por padrão acima). */ } .ai-chat-head { padding-top: calc(12px + env(safe-area-inset-top, 0)); } .ai-chat-head-btn { /* Tap targets ≥44px conforme HIG iOS. */ width: 40px; height: 40px; align-items: center; justify-content: center; } .ai-chat-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)); } /* Quando o chat está aberto, esconde o admin-bottomnav pra não conflitar com o input do chat (especialmente com teclado aberto). */ body.ai-chat-open .admin-bottomnav { display: none !important; } } /* Backdrop só faz sentido em mobile (no desktop o painel já é "ancorado" e o usuário pode clicar fora normalmente). */ @media (min-width: 641px) { .ai-chat-backdrop { display: none !important; } } /* ═══ FAB de consulta por placa (acima do FAB da IA) ═══ */ .plate-fab { position: fixed; right: 22px; /* Empilha 12px acima do FAB da IA (58px + 22px bottom + 12px gap = 92px). */ bottom: 92px; z-index: 60; width: 50px; height: 50px; border-radius: 50%; border: none; background: var(--admin-surface, #111b16); color: var(--admin-primary, #93cd07); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 0 1px var(--admin-border, #24352d); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .2s ease; } .plate-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.5), 0 0 0 1px var(--admin-primary, #93cd07); } .plate-fab.is-hidden { opacity: 0; pointer-events: none; transform: scale(.8); } .plate-fab svg { width: 22px; height: 22px; } .plate-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 70; display: none; align-items: center; justify-content: center; padding: 24px; animation: aiChatBackdropIn .2s ease; } .plate-backdrop.is-open { display: flex; } .plate-modal { background: var(--admin-surface, #111b16); border: 1px solid var(--admin-border, #24352d); border-radius: 16px; width: 100%; max-width: 480px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: aiChatIn .22s ease; } .plate-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--admin-border, #24352d); background: linear-gradient(180deg, rgba(147,205,7,.08), transparent); } .plate-modal-head-ico { width: 36px; height: 36px; border-radius: 50%; background: var(--admin-primary, #93cd07); color: var(--admin-on-primary, #0a1005); display: flex; align-items: center; justify-content: center; flex: 0 0 36px; } .plate-modal-head-ico svg { width: 20px; height: 20px; } .plate-modal-head-text { flex: 1; min-width: 0; } .plate-modal-head-text strong { display: block; font-size: 1rem; color: var(--admin-on-surface, #edf3ee); line-height: 1.1; } .plate-modal-head-text span { font-size: .75rem; color: var(--admin-muted, #9fb2a7); } .plate-modal-close { background: transparent; border: none; color: var(--admin-muted, #9fb2a7); cursor: pointer; padding: 8px; border-radius: 8px; display: flex; } .plate-modal-close:hover { background: rgba(255,255,255,.06); color: var(--admin-on-surface, #edf3ee); } .plate-modal-close svg { width: 18px; height: 18px; } .plate-modal-body { padding: 16px; overflow-y: auto; flex: 1; } .plate-search-form { display: flex; gap: 8px; margin-bottom: 14px; } .plate-search-form input { flex: 1; background: rgba(0,0,0,.28); border: 2px solid var(--admin-border, #24352d); color: var(--admin-on-surface, #edf3ee); border-radius: 10px; padding: 12px 14px; font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-align: center; } .plate-search-form input:focus { outline: none; border-color: var(--admin-primary, #93cd07); } .plate-search-form input::placeholder { font-weight: 400; letter-spacing: .04em; opacity: .55; } .plate-search-form button { flex: 0 0 auto; padding: 0 16px; border-radius: 10px; border: none; background: var(--admin-primary, #93cd07); color: var(--admin-on-primary, #0a1005); font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; } .plate-search-form button:disabled { opacity: .4; cursor: not-allowed; } .plate-search-form button svg { width: 16px; height: 16px; } .plate-empty { text-align: center; color: var(--admin-muted, #9fb2a7); font-size: .85rem; padding: 18px 0; } .plate-empty strong { color: var(--admin-on-surface, #edf3ee); display: block; margin-bottom: 4px; } .plate-result-card { background: rgba(147,205,7,.05); border: 1px solid rgba(147,205,7,.25); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; } .plate-result-card .pr-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; } .plate-result-card .pr-plate { font-weight: 800; font-size: 1.1rem; letter-spacing: .1em; color: var(--admin-primary-strong, #acd943); } .plate-result-card .pr-vehicle { color: var(--admin-on-surface, #edf3ee); font-weight: 600; } .plate-result-card .pr-meta { color: var(--admin-muted, #9fb2a7); font-size: .8rem; } .plate-result-card .pr-client { font-size: .9rem; color: var(--admin-on-surface, #edf3ee); margin-top: 6px; } .plate-result-card .pr-stats { display: flex; gap: 14px; font-size: .8rem; color: var(--admin-muted, #9fb2a7); margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(147,205,7,.18); } .plate-result-card .pr-stats strong { color: var(--admin-on-surface, #edf3ee); } .plate-result-actions { display: flex; gap: 8px; margin-bottom: 14px; } .plate-result-actions .admin-btn { flex: 1; justify-content: center; } .plate-services-title { font-size: .8rem; color: var(--admin-muted, #9fb2a7); text-transform: uppercase; letter-spacing: .08em; margin: 14px 0 8px; font-weight: 700; } .plate-service-item { background: rgba(255,255,255,.03); border: 1px solid var(--admin-border, #24352d); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; color: var(--admin-on-surface, #edf3ee); text-decoration: none; transition: border-color .15s ease, background .15s ease; } .plate-service-item:hover { border-color: var(--admin-primary, #93cd07); background: rgba(147,205,7,.05); } .plate-service-item .psi-main { flex: 1; min-width: 0; } .plate-service-item .psi-title { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plate-service-item .psi-meta { font-size: .72rem; color: var(--admin-muted, #9fb2a7); margin-top: 2px; } .plate-service-item .psi-price { font-weight: 700; color: var(--admin-primary-strong, #acd943); white-space: nowrap; } .plate-service-item .psi-status { font-size: .65rem; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--admin-muted, #9fb2a7); text-transform: uppercase; font-weight: 700; letter-spacing: .04em; } .plate-service-item .psi-status.s-concluido, .plate-service-item .psi-status.s-entregue { background: rgba(69,196,122,.15); color: #45c47a; } .plate-service-item .psi-status.s-em_andamento { background: rgba(240,182,77,.15); color: #f0b64d; } .plate-multi-list { display: flex; flex-direction: column; gap: 6px; } .plate-multi-item { text-align: left; background: rgba(255,255,255,.04); border: 1px solid var(--admin-border, #24352d); color: var(--admin-on-surface, #edf3ee); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-family: inherit; font-size: .87rem; } .plate-multi-item:hover { border-color: var(--admin-primary, #93cd07); } .plate-multi-item strong { color: var(--admin-primary-strong, #acd943); display: block; margin-bottom: 2px; } /* ── Quick-create de cliente/veiculo no modal de placa ── */ .plate-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; } @media (max-width: 480px) { .plate-quick-actions { grid-template-columns: 1fr; } } .plate-quick-actions .admin-btn { justify-content: center; } .plate-quick-form { display: grid; gap: 10px; margin-top: 4px; } .plate-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .plate-input { width: 100%; background: rgba(0,0,0,.28); border: 1.5px solid var(--admin-border, #24352d); color: var(--admin-on-surface, #edf3ee); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: .92rem; outline: none; transition: border-color .15s ease; } .plate-input:focus { border-color: var(--admin-primary, #93cd07); } .plate-input::placeholder { color: var(--admin-muted, #9fb2a7); opacity: .65; } .plate-quick-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; } .plate-quick-foot .admin-btn { flex: 1; justify-content: center; } .plate-hint { display: block; font-size: .75rem; color: var(--admin-muted, #9fb2a7); margin-top: -4px; } .plate-quick-search-results { max-height: 200px; overflow-y: auto; margin-top: 8px; } /* ── Tabs Placa / Cliente ── */ .plate-mode-tabs { display: flex; gap: 4px; background: rgba(0,0,0,.28); padding: 4px; border-radius: 10px; margin-bottom: 14px; } .plate-mode-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 0; color: var(--admin-muted, #9fb2a7); font-family: inherit; font-size: .85rem; font-weight: 700; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: background .15s ease, color .15s ease; } .plate-mode-tab:hover { color: var(--admin-on-surface, #edf3ee); } .plate-mode-tab.is-active { background: var(--admin-primary, #93cd07); color: var(--admin-on-primary, #0a1005); } .plate-mode-tab svg { flex-shrink: 0; } @media (max-width: 640px) { .plate-mode-tabs { padding: 6px; gap: 6px; margin-bottom: 16px; } .plate-mode-tab { padding: 14px 10px; font-size: 1rem; gap: 8px; min-height: 52px; } .plate-mode-tab svg { width: 18px; height: 18px; } /* Form de busca por placa: input full e botão Buscar embaixo full-width */ .plate-search-form { flex-direction: column; gap: 10px; } .plate-search-form input { min-height: 52px; font-size: 1.1rem; } .plate-search-form button { width: 100%; justify-content: center; min-height: 52px; font-size: 1rem; padding: 0; } .plate-search-form button svg { width: 20px; height: 20px; } /* Input do modo Cliente também maior pra tap */ #client-search-input { min-height: 52px; font-size: 1rem; } } @media (max-width: 640px) { .plate-fab { right: 14px; /* Sobe acima do FAB da IA mobile (52px + 72px safe-area = ~140px) */ bottom: calc(140px + env(safe-area-inset-bottom, 0)); width: 46px; height: 46px; } .plate-fab svg { width: 20px; height: 20px; } .plate-backdrop { padding: 0; align-items: stretch; } .plate-modal { max-width: none; max-height: 100vh; max-height: 100dvh; height: 100vh; height: 100dvh; border-radius: 0; border: none; } .plate-modal-head { padding-top: calc(14px + env(safe-area-inset-top, 0)); } .plate-modal-body { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)); } } /* ── Botão "Voltar" fixo no topo (mobile, todas as páginas exceto dashboard) ── */ .admin-mobile-back { display: none; } @media (max-width: 980px) { .admin-mobile-back { display: flex; align-items: center; justify-content: center; gap: 10px; position: sticky; top: 0; z-index: 27; height: 48px; margin: -16px -14px 14px; background: #141414; color: var(--admin-text); font-weight: 600; font-size: 0.92rem; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); padding-top: env(safe-area-inset-top, 0); height: calc(48px + env(safe-area-inset-top, 0)); } .admin-mobile-back:active { background: #1f1f1f; } .admin-mobile-back svg { flex-shrink: 0; } } /* ── Modais "Configurar exibição" em tela cheia no mobile (não quebram a tela) ── Cobre o AVC global (#avc-modal — admin-view-config.js) e o modal local da página /admin/clients (#cl-view-modal). */ @media (max-width: 640px) { #avc-modal, #cl-view-modal { padding: 0 !important; } #avc-modal > div, #cl-view-modal > div { max-width: 100% !important; width: 100% !important; height: 100vh !important; max-height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; border: 0 !important; } }