/* ============================================================================ R2 Shell · CSS compartilhado entre todos os HTMLs do rhgpc ---------------------------------------------------------------------------- Cobre: - Dark mode via [data-theme="dark"] no (overrides de variaveis) - Densidade compacta via [data-density="compact"] - Sidebar collapse via [data-sidebar="collapsed"] no - Topbar actions (theme btn, density btn, settings, avatar dropdown) - Animacoes uniformes ============================================================================ */ /* ============ DARK MODE ============ Overrides das variaveis CSS usadas em todos os HTMLs do rhgpc. Os HTMLs ja tem :root com paleta GPC. Dark mode redefine cores neutras mantendo navy/orange institucionais. */ html[data-theme="dark"] { --off:#0B131F; /* page bg · navy-900 quase preto */ --gray1:#1B2D48; /* surface escuras */ --gray2:#253C5E; /* borders */ --gray3:#4D6FA0; /* faint */ --txt:#EEF2F8; /* texto principal · navy-50 (claro) */ --txt2:#B0C0DC; /* texto secundario · navy-200 */ --txt3:#7691BC; /* texto faint · navy-300 */ } html[data-theme="dark"] body { background: var(--off) !important; color: var(--txt) !important; } /* Sidebar dark · cor de fundo navy-800 com text claro */ html[data-theme="dark"] .sidebar { background: #131F31 !important; color: var(--txt) !important; border-right-color: #1B2D48 !important; } html[data-theme="dark"] .sidebar-brand, html[data-theme="dark"] .sidebar-brand-text, html[data-theme="dark"] .sidebar-brand-name { color: var(--txt) !important; } html[data-theme="dark"] .sidebar-brand-sub, html[data-theme="dark"] .brand-sub, html[data-theme="dark"] .sidebar-section, html[data-theme="dark"] .sidebar-section-label, html[data-theme="dark"] .sidebar-r2-lbl { color: var(--txt3) !important; } html[data-theme="dark"] .nav-item, html[data-theme="dark"] .sidebar-item { color: var(--txt2) !important; } html[data-theme="dark"] .nav-item:hover, html[data-theme="dark"] .sidebar-item:hover { background: #1B2D48 !important; color: var(--txt) !important; } html[data-theme="dark"] .nav-item.active, html[data-theme="dark"] .sidebar-item.active { background: rgba(245, 134, 52, 0.12) !important; color: var(--orange) !important; } html[data-theme="dark"] .sidebar-footer, html[data-theme="dark"] .sidebar-header { border-color: #1B2D48 !important; } html[data-theme="dark"] .sidebar-r2-logo { filter: brightness(0) invert(1); opacity: 0.55; } html[data-theme="dark"] .brand-logo, html[data-theme="dark"] .sidebar-brand-logo { /* logo continua colorido tambem em dark (preserva identidade) */ } /* Topbar dark */ html[data-theme="dark"] .topbar { background: #131F31 !important; border-bottom-color: #1B2D48 !important; } html[data-theme="dark"] .topbar-title { color: var(--txt2) !important; } html[data-theme="dark"] .topbar-title .crumb { color: var(--txt) !important; } /* Cards/KPIs dark · surface intermediaria */ html[data-theme="dark"] .kpi, html[data-theme="dark"] .module-card, html[data-theme="dark"] .pulse-card, html[data-theme="dark"] .pdi-active, html[data-theme="dark"] .side-card, html[data-theme="dark"] .heatmap-card, html[data-theme="dark"] .matrix-card, html[data-theme="dark"] .spark-card, html[data-theme="dark"] .context-card, html[data-theme="dark"] .legend-card, html[data-theme="dark"] .history-card, html[data-theme="dark"] .cohort-card, html[data-theme="dark"] .wizard, html[data-theme="dark"] .pdi-card, html[data-theme="dark"] .tenants-card, html[data-theme="dark"] .objective-card, html[data-theme="dark"] .filters-bar, html[data-theme="dark"] .modal, html[data-theme="dark"] .pulse-card, html[data-theme="dark"] .demo-card, html[data-theme="dark"] .card, html[data-theme="dark"] .panel, html[data-theme="dark"] .tab-panel { background: #16202E !important; border-color: #253C5E !important; } html[data-theme="dark"] .kpi-value, html[data-theme="dark"] .page-title, html[data-theme="dark"] .obj-title, html[data-theme="dark"] .tenant-name, html[data-theme="dark"] .kr-title, html[data-theme="dark"] .module-title { color: var(--txt) !important; } /* Cards table no dark · linhas e hover */ html[data-theme="dark"] .tenants-table th { color: var(--txt3) !important; border-color: #253C5E !important; } html[data-theme="dark"] .tenants-table td { border-color: #253C5E !important; color: var(--txt2) !important; } html[data-theme="dark"] .tenants-table tr:hover td { background: #1B2D48 !important; } /* Off bg (var(--off)) no dark · vira escuro escuro */ html[data-theme="dark"] .kr-item, html[data-theme="dark"] .trend-row, html[data-theme="dark"] .history-item, html[data-theme="dark"] .pdi-objective, html[data-theme="dark"] .aq-card, html[data-theme="dark"] .step-item:not(.active), html[data-theme="dark"] .summary-card, html[data-theme="dark"] .module-icon { background: #1B2D48 !important; color: var(--txt2) !important; } /* Backgrounds inline #fff hardcoded · seletores de atributo */ html[data-theme="dark"] [style*="background:#fff"]:not(.user-avatar-tb):not(.brand-logo):not(.sidebar-brand-logo) { background: #16202E !important; } /* Hover · texto escuro em backgrounds claros */ html[data-theme="dark"] .filter-pill { background: #1B2D48 !important; color: var(--txt2) !important; } html[data-theme="dark"] .filter-pill.active { background: var(--navy) !important; color: #fff !important; } html[data-theme="dark"] .filter-pill:hover { background: #253C5E !important; } /* Btns secondary no dark */ html[data-theme="dark"] .btn-secondary { background: #1B2D48 !important; color: var(--txt) !important; border-color: #253C5E !important; } html[data-theme="dark"] .btn-secondary:hover { background: #253C5E !important; } html[data-theme="dark"] .btn-ghost { color: var(--txt2) !important; border-color: #253C5E !important; } html[data-theme="dark"] .btn-ghost:hover { background: #1B2D48 !important; color: var(--txt) !important; } /* Banners coloridos · ajustar opacidade no dark */ html[data-theme="dark"] .privacy-banner, html[data-theme="dark"] .checkin-banner, html[data-theme="dark"] .notice-banner { background: rgba(46, 71, 111, 0.2) !important; } /* Persona switcher (toggle de pessoas no topo) */ html[data-theme="dark"] .persona-switcher { background: #1B2D48 !important; } html[data-theme="dark"] .persona-btn.active { background: #253C5E !important; color: var(--txt) !important; } html[data-theme="dark"] .scope-tabs { background: #1B2D48 !important; } html[data-theme="dark"] .scope-tab.active { background: #253C5E !important; color: var(--txt) !important; } /* Cycle pill (purple) no dark */ html[data-theme="dark"] .cycle-pill { background: rgba(109, 40, 217, 0.18) !important; color: #C4B5FD !important; } /* Form inputs dark */ html[data-theme="dark"] .form-input, html[data-theme="dark"] .form-textarea, html[data-theme="dark"] .form-select, html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: #1B2D48 !important; border-color: #253C5E !important; color: var(--txt) !important; } /* ============ DENSIDADE COMPACTA ============ Reduz paddings de cards e listas pra mostrar mais conteudo na tela. */ html[data-density="compact"] .kpi, html[data-density="compact"] .module-card .module-header { padding: 10px 12px !important; } html[data-density="compact"] .kpi-value { font-size: 22px !important; } html[data-density="compact"] .nav-item, html[data-density="compact"] .sidebar-item { padding: 5px 10px !important; font-size: 12px !important; } html[data-density="compact"] .sidebar-section, html[data-density="compact"] .sidebar-section-label { padding: 6px 12px 3px !important; } html[data-density="compact"] .page-header { margin-bottom: 14px !important; } html[data-density="compact"] .page-title { font-size: 22px !important; } html[data-density="compact"] .kpi-grid { gap: 8px !important; } /* ============ SIDEBAR COLLAPSE (desktop) ============ Ao clicar no chevron, sidebar encolhe pra 64px e mostra so ícones. */ @media (min-width: 901px) { html[data-sidebar="collapsed"] .sidebar { width: 64px !important; overflow: visible; } html[data-sidebar="collapsed"] .sidebar .brand-text, html[data-sidebar="collapsed"] .sidebar .sidebar-brand-text, html[data-sidebar="collapsed"] .sidebar .sidebar-brand-version, html[data-sidebar="collapsed"] .sidebar .sidebar-section, html[data-sidebar="collapsed"] .sidebar .sidebar-section-label, html[data-sidebar="collapsed"] .sidebar .nav-item span:not(.badge-readonly), html[data-sidebar="collapsed"] .sidebar .sidebar-item .label, html[data-sidebar="collapsed"] .sidebar .sidebar-item .badge-soon, html[data-sidebar="collapsed"] .sidebar .sidebar-r2-lbl, html[data-sidebar="collapsed"] .sidebar .sidebar-role-block { display: none !important; } html[data-sidebar="collapsed"] .sidebar .brand-logo, html[data-sidebar="collapsed"] .sidebar .sidebar-brand-logo { height: 36px !important; max-width: 100% !important; } html[data-sidebar="collapsed"] .sidebar .sidebar-r2-logo { height: 18px !important; } html[data-sidebar="collapsed"] .sidebar .nav-item, html[data-sidebar="collapsed"] .sidebar .sidebar-item { justify-content: center !important; padding: 9px 8px !important; } html[data-sidebar="collapsed"] .sidebar .sidebar-brand, html[data-sidebar="collapsed"] .sidebar .sidebar-header { padding: 14px 8px !important; } /* Grid · sidebar adapta */ html[data-sidebar="collapsed"] .app { grid-template-columns: 64px 1fr !important; } } /* ============ TOPBAR ACTIONS (icone buttons) ============ Injetados no DOM pelo r2-shell.js. */ .r2-topbar-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; } .r2-topbar-actions .r2-icon-btn { width: 32px; height: 32px; background: transparent; border: 0; border-radius: 6px; cursor: pointer; color: var(--txt2); display: flex; align-items: center; justify-content: center; transition: all .15s; position: relative; } .r2-topbar-actions .r2-icon-btn:hover { background: var(--gray1); color: var(--txt); } html[data-theme="dark"] .r2-topbar-actions .r2-icon-btn:hover { background: #1B2D48; } .r2-topbar-actions .r2-icon-btn svg { width: 17px; height: 17px; } .r2-topbar-actions .r2-icon-btn[data-active="true"] { background: var(--blue2); color: var(--navy); } html[data-theme="dark"] .r2-topbar-actions .r2-icon-btn[data-active="true"] { background: rgba(245, 134, 52, 0.16); color: var(--orange); } /* Bell badge (notificações) */ .r2-topbar-actions .r2-icon-btn[data-kind="bell"] { position: relative; } .r2-bell-badge { position: absolute; top: 3px; right: 3px; min-width: 14px; height: 14px; padding: 0 4px; background: #E82227; color: #fff; border-radius: 7px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff; } html[data-theme="dark"] .r2-bell-badge { border-color: #131F31; } /* Notifications dropdown */ .r2-notif-dropdown { position: fixed; z-index: 100; width: 360px; max-height: 480px; background: #fff; border: 1px solid #E4E8EE; border-radius: 10px; box-shadow: 0 12px 32px rgba(10, 14, 22, 0.18); display: flex; flex-direction: column; overflow: hidden; animation: r2-fade-in .15s ease-out; } @keyframes r2-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } html[data-theme="dark"] .r2-notif-dropdown { background: #16202E; border-color: #253C5E; } .r2-notif-header { padding: 12px 16px; border-bottom: 1px solid #EFF1F5; display: flex; align-items: center; justify-content: space-between; } html[data-theme="dark"] .r2-notif-header { border-color: #253C5E; } .r2-notif-header strong { font-size: 13px; color: var(--txt); } .r2-notif-header a { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--navy); text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; } .r2-notif-header a:hover { text-decoration: underline; } html[data-theme="dark"] .r2-notif-header a { color: var(--orange); } .r2-notif-list { flex: 1; overflow-y: auto; } .r2-notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px; border-bottom: 1px solid #F7F8FA; text-decoration: none; color: var(--txt); transition: background .12s; position: relative; } html[data-theme="dark"] .r2-notif-item { border-color: rgba(255,255,255,0.05); } .r2-notif-item:hover { background: #F7F8FA; } html[data-theme="dark"] .r2-notif-item:hover { background: #1B2D48; } .r2-notif-item.unread::before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: var(--orange); border-radius: 50%; } .r2-notif-icon { font-size: 20px; line-height: 1; flex-shrink: 0; margin-top: 1px; } .r2-notif-body { flex: 1; min-width: 0; } .r2-notif-title { font-size: 12.5px; font-weight: 600; margin-bottom: 2px; } .r2-notif-desc { font-size: 11.5px; color: var(--txt2); line-height: 1.4; } .r2-notif-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--txt3); margin-top: 4px; } .r2-notif-footer { padding: 8px; border-top: 1px solid #EFF1F5; } html[data-theme="dark"] .r2-notif-footer { border-color: #253C5E; } .r2-notif-mark-all { width: 100%; padding: 8px; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--navy); } html[data-theme="dark"] .r2-notif-mark-all { color: var(--orange); } .r2-notif-mark-all:hover { background: #F7F8FA; } html[data-theme="dark"] .r2-notif-mark-all:hover { background: #1B2D48; } @media (max-width: 700px) { .r2-notif-dropdown { width: calc(100vw - 16px) !important; right: 8px !important; left: 8px !important; } } /* ============ SEARCH OVERLAY (Cmd+K) ============ */ .r2-search-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 110; display: flex; align-items: flex-start; justify-content: center; padding: 80px 16px; animation: r2-fade-in 0.12s ease-out; } html[data-theme="dark"] .r2-search-overlay { background: rgba(0, 0, 0, 0.65); } .r2-search-box { width: 100%; max-width: 640px; background: #fff; border-radius: 12px; box-shadow: 0 24px 64px rgba(10, 14, 22, 0.3); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 160px); } html[data-theme="dark"] .r2-search-box { background: #16202E; border: 1px solid #253C5E; } .r2-search-input-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #EFF1F5; } html[data-theme="dark"] .r2-search-input-row { border-color: #253C5E; } .r2-search-icon { width: 18px; height: 18px; color: #6B7280; flex-shrink: 0; } .r2-search-input { flex: 1; border: 0; outline: 0; font-family: inherit; font-size: 15px; color: var(--txt); background: transparent; } .r2-search-input::placeholder { color: var(--txt3); } .r2-search-kbd { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; padding: 3px 7px; background: #EFF1F5; border-radius: 4px; color: var(--txt2); font-weight: 700; border: 1px solid #E4E8EE; } html[data-theme="dark"] .r2-search-kbd { background: #1B2D48; border-color: #253C5E; color: var(--txt2); } .r2-search-results { flex: 1; overflow-y: auto; padding: 8px 8px 12px; } .r2-search-cat { padding: 10px 10px 4px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; color: var(--txt3); text-transform: uppercase; letter-spacing: 0.14em; } .r2-search-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 6px; text-decoration: none; color: var(--txt); cursor: pointer; transition: background 0.1s; } .r2-search-item:hover, .r2-search-item.active { background: var(--accent-bg, #EEF2F8); } html[data-theme="dark"] .r2-search-item:hover, html[data-theme="dark"] .r2-search-item.active { background: #1B2D48; } .r2-search-item-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; } .r2-search-item-title { flex: 1; font-size: 13.5px; font-weight: 500; } .r2-search-item-url { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--txt3); } .r2-search-item.active .r2-search-item-url { color: var(--navy); } html[data-theme="dark"] .r2-search-item.active .r2-search-item-url { color: var(--orange); } .r2-search-empty { padding: 28px 14px; text-align: center; font-size: 13px; color: var(--txt2); } .r2-search-footer { display: flex; gap: 14px; padding: 10px 18px; border-top: 1px solid #EFF1F5; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--txt3); align-items: center; } html[data-theme="dark"] .r2-search-footer { border-color: #253C5E; } .r2-search-footer kbd { font-family: inherit; background: #F7F8FA; border: 1px solid #E4E8EE; border-radius: 3px; padding: 1px 5px; margin-right: 4px; font-weight: 700; font-size: 10px; color: var(--txt2); } html[data-theme="dark"] .r2-search-footer kbd { background: #1B2D48; border-color: #253C5E; } @media (max-width: 700px) { .r2-search-overlay { padding: 60px 12px; } .r2-search-footer { display: none; } } /* ============ USER DROPDOWN ============ */ .r2-user-dropdown { position: fixed; z-index: 100; width: 260px; background: #fff; border: 1px solid #E4E8EE; border-radius: 10px; box-shadow: 0 12px 32px rgba(10, 14, 22, 0.18); overflow: hidden; animation: r2-fade-in .15s ease-out; } html[data-theme="dark"] .r2-user-dropdown { background: #16202E; border-color: #253C5E; } .r2-user-dd-head { padding: 14px 16px; border-bottom: 1px solid #EFF1F5; display: flex; align-items: center; gap: 10px; } html[data-theme="dark"] .r2-user-dd-head { border-color: #253C5E; } .r2-user-dd-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--purple)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } .r2-user-dd-info { line-height: 1.2; min-width: 0; } .r2-user-dd-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .r2-user-dd-email { font-size: 11px; color: var(--txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .r2-user-dd-list { padding: 4px; } .r2-user-dd-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; text-decoration: none; color: var(--txt); cursor: pointer; transition: background .1s; font-size: 13px; border: 0; background: transparent; width: 100%; text-align: left; font-family: inherit; } .r2-user-dd-item:hover { background: #F7F8FA; } html[data-theme="dark"] .r2-user-dd-item:hover { background: #1B2D48; } .r2-user-dd-item svg { width: 15px; height: 15px; color: var(--txt2); flex-shrink: 0; } .r2-user-dd-item.danger { color: var(--red); } .r2-user-dd-item.danger svg { color: var(--red); } .r2-user-dd-divider { height: 1px; background: #EFF1F5; margin: 4px 0; } html[data-theme="dark"] .r2-user-dd-divider { background: #253C5E; } .r2-user-dd-role-pill { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; padding: 2px 7px; background: var(--accent-bg, #EEF2F8); color: var(--navy); border-radius: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } html[data-theme="dark"] .r2-user-dd-role-pill { background: #1B2D48; color: var(--orange); } /* User chip ghost (sem dropdown) usado quando JS nao roda */ .r2-user-chip-trigger { cursor: pointer; border-radius: 8px; transition: background .1s; } .r2-user-chip-trigger:hover { background: var(--gray1, #EEF2F8); } html[data-theme="dark"] .r2-user-chip-trigger:hover { background: #1B2D48; } /* Tooltip simples no hover */ .r2-topbar-actions .r2-icon-btn[aria-label]:hover::after { content: attr(aria-label); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #0A0E16; color: #fff; font-size: 10.5px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; z-index: 100; pointer-events: none; font-family: 'JetBrains Mono', monospace; } /* Sidebar collapse button (apenas desktop · escondido no mobile que tem hamburger) */ .r2-sidebar-collapse-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--gray1); border: 0; border-radius: 4px; cursor: pointer; color: var(--txt2); margin-right: 8px; flex-shrink: 0; } .r2-sidebar-collapse-btn:hover { background: var(--gray2); color: var(--txt); } .r2-sidebar-collapse-btn svg { width: 14px; height: 14px; } html[data-sidebar="collapsed"] .r2-sidebar-collapse-btn svg { transform: rotate(180deg); } @media (max-width: 900px) { .r2-sidebar-collapse-btn { display: none !important; } } /* ============ PAGE HEADER PADRAO COFRE (cross-page) ============ Aplica automaticamente nos h1 que estao dentro de .page-header. Compatível com HTMLs antigos sem precisar tocar markup. */ .page-header h1:not([class]), .page-header h1.page-title { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; color: var(--txt) !important; margin: 0 0 6px 0 !important; } html[data-density="compact"] .page-header h1:not([class]), html[data-density="compact"] .page-header h1.page-title { font-size: 22px !important; } .page-header h1 em, .page-header h1 strong em, .page-title em { font-style: italic !important; font-weight: 800 !important; color: var(--orange, #F58634) !important; } /* page-eyebrow generico (HTMLs novos ja tem · este garante consistencia) */ .page-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--txt2); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 8px; } .page-eyebrow .sep { color: var(--txt3); margin: 0 6px; } .page-subtitle { margin: 6px 0 0; color: var(--txt2); font-size: 13px; } /* Transition suave nas mudancas de estado */ .app, .sidebar, .topbar { transition: background .2s, border-color .2s; } .sidebar { transition: width .25s ease, background .2s, transform .25s ease; }