/* ============================================================ NETMANTOS · Painel da Empresa Design system: Shopify Polaris (tema CLARO + ESCURO). Trocar tema = setar data-theme="light|dark" no . Os NOMES de token antigos são mantidos pra todas as páginas (que usam var(--bg), var(--fg), var(--emerald)...) auto-tematizarem. Tokens de cor = valores oficiais @shopify/polaris-tokens. ============================================================ */ :root, html[data-theme="light"] { /* Superfícies (Polaris claro) */ --bg: #F1F1F1; --bg-elevated: #FFFFFF; --bg-card: #FFFFFF; --bg-card-hover: #F7F7F7; --bg-nav: #FBFBFB; --bg-topbar: #1A1A1A; /* topbar é escura nos 2 temas (igual admin Shopify) */ /* Bordas */ --border: #E3E3E3; --border-strong: #D2D2D2; --border-accent: #B5B5B5; /* Texto */ --fg: #303030; --fg-secondary: #616161; --fg-tertiary: #8A8A8A; --fg-quaternary: #B5B5B5; /* Topbar (sempre escura) + nav */ --on-topbar: #E3E3E3; --on-topbar-dim: #8A8A8A; --nav-active-bg: #EBEBEB; --nav-hover-bg: #F1F1F1; /* Semânticas (mantém nomes antigos; agora = paleta Polaris) */ --emerald: #047B5D; --emerald-glow: rgba(4,123,93,0.15); --emerald-soft: rgba(4,123,93,0.09); --success-bg: #AFFEBF; --success-fg: #014B40; --rose: #C70A24; --rose-glow: rgba(199,10,36,0.15); --rose-soft: rgba(199,10,36,0.08); --critical-bg: #FED1D7; --critical-fg: #8E0B21; --amber: #B98900; --amber-glow: rgba(185,137,0,0.15); --amber-soft: rgba(255,230,0,0.18); --caution-bg: #FFEB78; --caution-fg: #4F4700; --sky: #005BD3; --sky-glow: rgba(0,91,211,0.15); --sky-soft: rgba(0,91,211,0.08); --info-bg: #D5EBFF; --info-fg: #003A5A; --violet: #7F56D9; --violet-glow: rgba(127,86,217,0.18); --violet-soft: rgba(127,86,217,0.08); /* Botão primário (Polaris: preto no claro) */ --btn-primary-bg: #303030; --btn-primary-fg: #FFFFFF; --btn-primary-hover: #1A1A1A; /* Sombra */ --shadow: 0 1px 0 0 rgba(26,26,26,0.07); --shadow-card: 0 1px 0 0 rgba(26,26,26,0.07), 0 0 0 1px rgba(26,26,26,0.04); /* Vidro/elevacao (rico): no CLARO escurece sutil; no escuro clareia. Usado no lugar dos literais rgba(255,255,255,X) que assumiam fundo escuro. */ --glass-1: rgba(0,0,0,0.015); --glass-2: rgba(0,0,0,0.022); --glass-3: rgba(0,0,0,0.032); --glass-4: rgba(0,0,0,0.05); --glass-5: rgba(0,0,0,0.06); --glass-6: rgba(0,0,0,0.09); --glass-strong: rgba(0,0,0,0.13); /* Gradientes de superficie rica (hero/cards) - claro */ --grad-surface: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%); --grad-surface-rose: linear-gradient(135deg, #fff5f5 0%, #ffe9ea 100%); --grad-surface-deep: linear-gradient(180deg, #ffffff 0%, #eef0f3 100%); /* Gráficos (Chart.js) - claro: legível no branco */ --chart-tick: #616161; --chart-grid: #E8E8E8; --chart-point-ring: #FFFFFF; --chart-tooltip-bg: #FFFFFF; --chart-tooltip-border: #D2D2D2; /* Canvas do builder de fluxos + paineis translucidos - claro */ --canvas-bg: #ECECEC; --canvas-dot: rgba(0,0,0,0.06); --bar-blur: rgba(255,255,255,0.72); --panel-blur: rgba(255,255,255,0.92); /* Espaçamento / forma */ --pad: 24px; --gap: 18px; --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --sidebar-w: 240px; --topbar-h: 64px; /* Tipografia (Polaris = Inter) */ --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-numeric: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace; color-scheme: light; } html[data-theme="dark"] { /* Superfícies (Polaris escuro · .p-theme-dark-experimental) */ --bg: #1A1A1A; --bg-elevated: #303030; --bg-card: #303030; --bg-card-hover: #4A4A4A; --bg-nav: #1F1F1F; --bg-topbar: #141414; --border: #444444; --border-strong: #5A5A5A; --border-accent: #5A5A5A; --fg: #E3E3E3; --fg-secondary: #B5B5B5; --fg-tertiary: #8A8A8A; --fg-quaternary: #6A6A6A; --on-topbar: #E3E3E3; --on-topbar-dim: #8A8A8A; --nav-active-bg: #383838; --nav-hover-bg: #2A2A2A; --emerald: #1FAB7A; --emerald-glow: rgba(31,171,122,0.2); --emerald-soft: rgba(31,171,122,0.16); --success-bg: #14342B; --success-fg: #8FE6BF; --rose: #E85D6B; --rose-glow: rgba(232,93,107,0.2); --rose-soft: rgba(232,93,107,0.16); --critical-bg: #3A1A1F; --critical-fg: #FF9FAA; --amber: #E0A82E; --amber-glow: rgba(224,168,46,0.2); --amber-soft: rgba(224,168,46,0.16); --caution-bg: #332F00; --caution-fg: #FFE600; --sky: #4D9EFF; --sky-glow: rgba(77,158,255,0.2); --sky-soft: rgba(77,158,255,0.16); --info-bg: #0E2B3D; --info-fg: #91D0FF; --violet: #B392F0; --violet-glow: rgba(179,146,240,0.2); --violet-soft: rgba(179,146,240,0.16); /* Botão primário (Polaris: branco no escuro) */ --btn-primary-bg: #FFFFFF; --btn-primary-fg: #303030; --btn-primary-hover: #E3E3E3; --shadow: 0 1px 0 0 rgba(0,0,0,0.4); --shadow-card: 0 1px 0 0 rgba(0,0,0,0.4); /* Vidro/elevacao - escuro (clareia, como era originalmente) */ --glass-1: rgba(255,255,255,0.02); --glass-2: rgba(255,255,255,0.03); --glass-3: rgba(255,255,255,0.04); --glass-4: rgba(255,255,255,0.06); --glass-5: rgba(255,255,255,0.08); --glass-6: rgba(255,255,255,0.12); --glass-strong: rgba(255,255,255,0.2); /* Gradientes de superficie rica - escuro (valores originais do dashboard) */ --grad-surface: linear-gradient(135deg, #1a1d28 0%, #0f1118 100%); --grad-surface-rose: linear-gradient(135deg, #2a1719 0%, #15080a 100%); --grad-surface-deep: linear-gradient(180deg, #11141c 0%, #0a0c11 100%); /* Gráficos (Chart.js) - escuro: valores originais (escuro fica idêntico) */ --chart-tick: rgba(245,245,247,0.4); --chart-grid: rgba(255,255,255,0.04); --chart-point-ring: #0a0a0a; --chart-tooltip-bg: rgba(13, 15, 21, 0.95); --chart-tooltip-border: rgba(255,255,255,0.1); /* Canvas do builder + paineis - escuro (valores originais) */ --canvas-bg: #06070a; --canvas-dot: rgba(255,255,255,0.05); --bar-blur: rgba(6,7,10,0.6); --panel-blur: rgba(13,15,21,0.92); color-scheme: dark; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { font-family: var(--font); background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.006em; min-height: 100vh; min-height: 100dvh; font-weight: 400; font-size: 16px; line-height: 1.5; } body { position: relative; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ─── AMBIENT: removido no Polaris (flat). Mantido inerte p/ não quebrar markup. ─── */ .ambient, .ambient-glow, .ambient-grain { display: none !important; } /* ─── APP SHELL: sidebar fixed + main com padding-left ───── */ .app-shell { min-height: 100vh; min-height: 100dvh; position: relative; z-index: 1; } /* ─── SIDEBAR (Polaris: clara/neutra) ────────────────────── */ .sidebar { position: fixed; left: 0; top: 0; width: var(--sidebar-w); height: 100vh; height: 100dvh; background: var(--bg-nav); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 12px; z-index: 100; transition: width 0.2s ease; } .sidebar.collapsed { width: 64px; padding: 16px 8px; } .sidebar.collapsed .sidebar-brand-text, .sidebar.collapsed .sidebar-section-label, .sidebar.collapsed .sidebar-link span:not(.sidebar-link-icon), .sidebar.collapsed .sidebar-user { display: none; } .sidebar.collapsed .sidebar-link { justify-content: center; padding: 8px; } .sidebar.collapsed .sidebar-brand { justify-content: center; padding: 6px 0 16px; } .sidebar.collapsed .sidebar-foot { justify-content: center; } .sidebar-collapse-btn { position: absolute; right: -12px; top: 22px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--fg-secondary); cursor: pointer; z-index: 1; box-shadow: var(--shadow); transition: all 0.15s ease; } .sidebar-collapse-btn:hover { color: var(--fg); border-color: var(--fg-tertiary); } .sidebar-collapse-btn svg { width: 12px; height: 12px; transition: transform 0.2s ease; } .sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); } @media (max-width: 880px) { .sidebar-collapse-btn { display: none; } } .app-shell.sidebar-collapsed .app-main { padding-left: 64px; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 16px; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .sidebar-brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: transparent; color: var(--fg); flex-shrink: 0; } .sidebar-brand-mark svg { width: 20px; height: 20px; } .sidebar-brand-logo { justify-content: flex-start; gap: 0; } .sidebar-logo { width: 150px; max-width: 100%; height: auto; display: block; } .sidebar-brand-mark-mini { display: none; } .sidebar.collapsed .sidebar-logo { display: none; } .sidebar.collapsed .sidebar-brand-mark-mini { display: grid; } /* Logo da marca costuma ser clara: inverte no tema claro p/ ficar legível */ html[data-theme="light"] .sidebar-logo { filter: invert(1) hue-rotate(180deg) brightness(0.55) saturate(0); } .sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.1; } .sidebar-brand-title { font-weight: 600; font-size: 14px; letter-spacing: 0.02em; color: var(--fg); } .sidebar-brand-sub { font-size: 12px; font-weight: 400; color: var(--fg-tertiary); letter-spacing: 0.02em; margin-top: 2px; } .sidebar-nav { display: flex; flex-direction: column; gap: 1px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .sidebar-nav::-webkit-scrollbar { width: 6px; } .sidebar-section-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-tertiary); padding: 14px 12px 5px; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--fg-secondary); transition: background 0.15s ease, color 0.15s ease; cursor: pointer; border: 1px solid transparent; } .sidebar-link:hover { background: var(--nav-hover-bg); color: var(--fg); } .sidebar-link.active { background: var(--nav-active-bg); color: var(--fg); font-weight: 600; border-color: transparent; } .sidebar-link.active .sidebar-link-icon { color: var(--fg); } .sidebar-link-icon { width: 18px; height: 18px; display: grid; place-items: center; flex-shrink: 0; color: var(--fg-tertiary); } .sidebar-link-icon svg { width: 17px; height: 17px; } .sidebar-foot { padding: 10px 8px 2px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sidebar-user { font-size: 13px; color: var(--fg-tertiary); display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sidebar-user svg { width: 16px; height: 16px; } .sidebar-logout { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: transparent; border: 1px solid var(--border); color: var(--fg-tertiary); cursor: pointer; transition: all 0.15s ease; } .sidebar-logout:hover { background: var(--rose-soft); border-color: var(--rose); color: var(--rose); } .sidebar-logout svg { width: 14px; height: 14px; } .sidebar-foot-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .sidebar-foot .theme-toggle { width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid var(--border); color: var(--fg-tertiary); } .sidebar-foot .theme-toggle:hover { background: var(--nav-hover-bg); color: var(--fg); border-color: var(--border-strong); } .sidebar-foot .theme-toggle svg { width: 15px; height: 15px; } /* ─── MAIN ───────────────────────────────────────────────── */ .app-main { min-width: 0; display: flex; flex-direction: column; padding-left: var(--sidebar-w); min-height: 100vh; min-height: 100dvh; overflow-x: hidden; } /* Topbar (sempre ESCURA, igual admin Shopify) */ .app-topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); background: var(--bg-topbar); border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); gap: 16px; } .app-topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .app-topbar-title { font-size: 16px; font-weight: 600; color: var(--on-topbar); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-topbar-sub { font-size: 13px; color: var(--on-topbar-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .live-indicator { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); font-size: 13px; font-weight: 500; color: var(--on-topbar); } .live-indicator.stale { color: #FFD79D; } .live-indicator.error { color: #FF9FAA; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #1FAB7A; } .live-indicator.stale .live-dot { background: #FFD79D; } .live-indicator.error .live-dot { background: #FF9FAA; } /* Botão de ícone na topbar escura */ .btn-icon-topbar, .theme-toggle { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--on-topbar); cursor: pointer; transition: all 0.15s ease; } .btn-icon-topbar:hover, .theme-toggle:hover { background: rgba(255,255,255,0.12); color: #fff; } .btn-icon-topbar svg, .theme-toggle svg { width: 16px; height: 16px; } .btn-icon-topbar.spinning svg { animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* O toggle troca de ícone conforme o tema (sol no escuro, lua no claro) */ .theme-toggle .ico-sun { display: none; } html[data-theme="dark"] .theme-toggle .ico-sun { display: block; } html[data-theme="dark"] .theme-toggle .ico-moon { display: none; } .app-content { flex: 1; padding: 28px var(--pad) 60px; max-width: 1400px; margin: 0 auto; width: 100%; } /* ─── MOBILE: sidebar vira drawer ────────────────────────── */ @media (max-width: 880px) { .app-main { padding-left: 0; } .sidebar { width: 280px; transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 0 60px rgba(0,0,0,0.3); padding-left: max(12px, env(safe-area-inset-left)); padding-bottom: max(16px, env(safe-area-inset-bottom)); } .sidebar.open { transform: translateX(0); } body.drawer-open { overflow: hidden; } .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); z-index: 99; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .sidebar-overlay.show { opacity: 1; pointer-events: auto; } .menu-toggle { display: grid; place-items: center; width: 34px; height: 34px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: var(--on-topbar); cursor: pointer; position: relative; z-index: 51; } .menu-toggle svg { width: 18px; height: 18px; } } @media (min-width: 881px) { .menu-toggle { display: none; } .sidebar-overlay { display: none; } } @media (max-width: 540px) { .app-content { padding: 20px max(14px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); } .app-topbar { padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); } .app-topbar-sub { display: none; } } @media (max-width: 880px) { input, select, textarea, input.field-input, select.field-input, textarea.field-input { font-size: 16px !important; } } /* ─── Helpers ────────────────────────────────────────────── */ .muted { color: var(--fg-tertiary); font-size: 14px; } .dot { color: var(--fg-quaternary); } ::selection { background: rgba(0,91,211,0.18); color: inherit; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 100px; } ::-webkit-scrollbar-thumb:hover { background: var(--fg-quaternary); } /* ─── Stagger entrance (Polaris é sóbrio; mantido sutil) ─── */ [data-stagger] { opacity: 0; transform: translateY(10px); } [data-stagger].visible { opacity: 1; transform: translateY(0); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } [data-stagger]:nth-child(1) { transition-delay: 0.03s; } [data-stagger]:nth-child(2) { transition-delay: 0.07s; } [data-stagger]:nth-child(3) { transition-delay: 0.11s; } [data-stagger]:nth-child(4) { transition-delay: 0.15s; } [data-stagger]:nth-child(5) { transition-delay: 0.19s; } [data-stagger]:nth-child(6) { transition-delay: 0.23s; } [data-stagger]:nth-child(7) { transition-delay: 0.27s; } [data-stagger]:nth-child(8) { transition-delay: 0.31s; } @media (prefers-reduced-motion: reduce) { [data-stagger] { opacity: 1; transform: none; } }