/* ============================================================ WinLink Portal — Rework design (light + dark, dock nav) Theme switches via data-theme on . Legacy portal class names are preserved & remapped. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ── THEME TOKENS ── */ :root, [data-theme="light"] { --bg: #F0F4FF; --card: #FFFFFF; --card-border: rgba(0,0,0,.06); --card-shadow: 0 2px 12px rgba(0,0,0,.05); --topbar-bg: rgba(255,255,255,.75); --topbar-bdr: rgba(37,99,235,.10); --tx: #0F172A; --tx2: #475569; --tx3: #94A3B8; --input-bg: #F8FAFF; --input-bdr: rgba(37,99,235,.12); --row-hover: #F8FAFF; --th-bg: #F8FAFF; --th-bdr: rgba(37,99,235,.08); --row-bdr: rgba(0,0,0,.04); --btn-bg: rgba(37,99,235,.06); --btn-bdr: rgba(37,99,235,.12); --btn-hover: rgba(37,99,235,.12); --notif-bdr: #F0F4FF; --scroll: rgba(37,99,235,.2); --dot: rgba(37,99,235,.07); --m1: rgba(37,99,235,.10); --m2: rgba(124,58,237,.08); --m3: rgba(234,88,12,.07); --m4: rgba(22,163,74,.07); --dock-bg: rgba(255,255,255,.40); --dock-bdr: rgba(255,255,255,.88); --dock-bdr-bot: rgba(0,0,0,.05); --dock-shadow: 0 0 0 .5px rgba(0,0,0,.07), 0 14px 42px rgba(37,99,235,.10), 0 4px 14px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.03); --dock-sep: rgba(0,0,0,.12); --dico-bg: rgba(0,0,0,.05); --dico-bdr: rgba(0,0,0,.06); --dico-svg: rgba(30,41,59,.55); --dico-hover-bg: rgba(37,99,235,.10); --dico-hover-bdr: rgba(37,99,235,.18); --dico-hover-svg: #2563EB; --dlbl: rgba(30,41,59,.50); --ghost: rgba(0,0,0,.03); /* ── Legacy portal aliases ── */ --surface: #FFFFFF; --surface-2: #F8FAFF; --surface-3: #EEF2FF; --text: #0F172A; --text-2: #475569; --muted: #94A3B8; --text-3: #94A3B8; --text-muted: #94A3B8; --border: rgba(0,0,0,.06); --border-soft: rgba(0,0,0,.04); --speek: #2563EB; --speek-light: rgba(37,99,235,.10); --speek-dark: #1D4ED8; --odoo: #0891B2; --odoo-light: rgba(8,145,178,.10); --odoo-dark: #0E7490; --success: #16A34A; --success-light: rgba(22,163,74,.10); --warning: #EA580C; --warning-light: rgba(234,88,12,.10); --warning-bg: rgba(234,88,12,.08); --warning-text: #EA580C; --danger: #DC2626; --danger-light: rgba(220,38,38,.10); --accent: #2563EB; --accent-2: #0891B2; --shadow-sm: 0 2px 12px rgba(0,0,0,.05); --shadow: 0 8px 28px rgba(0,0,0,.10); --shadow-lg: 0 24px 60px rgba(0,0,0,.18); --radius-sm: 8px; --radius: 14px; --radius-lg: 18px; --font-body: 'Space Grotesk', sans-serif; --font-mono: 'JetBrains Mono', monospace; --ease: cubic-bezier(.34,1.56,.64,1); } [data-theme="dark"] { --bg: #0B0D14; --card: #131620; --card-border: rgba(255,255,255,.06); --card-shadow: 0 2px 20px rgba(0,0,0,.30); --topbar-bg: rgba(11,13,20,.80); --topbar-bdr: rgba(255,255,255,.07); --tx: #E8EAF2; --tx2: #7B82A0; --tx3: #454C66; --input-bg: #1C1F2E; --input-bdr: rgba(255,255,255,.08); --row-hover: rgba(255,255,255,.03); --th-bg: rgba(255,255,255,.03); --th-bdr: rgba(255,255,255,.05); --row-bdr: rgba(255,255,255,.04); --btn-bg: rgba(255,255,255,.05); --btn-bdr: rgba(255,255,255,.09); --btn-hover: rgba(255,255,255,.09); --notif-bdr: #0B0D14; --scroll: rgba(99,102,241,.25); --dot: rgba(99,102,241,.06); --m1: rgba(37,99,235,.12); --m2: rgba(124,58,237,.10); --m3: rgba(234,88,12,.09); --m4: rgba(22,163,74,.07); --dock-bg: rgba(25,28,42,.55); --dock-bdr: rgba(255,255,255,.10); --dock-bdr-bot: rgba(0,0,0,.30); --dock-shadow: 0 0 0 .5px rgba(0,0,0,.5), 0 14px 42px rgba(0,0,0,.50), 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.20); --dock-sep: rgba(255,255,255,.10); --dico-bg: rgba(255,255,255,.06); --dico-bdr: rgba(255,255,255,.08); --dico-svg: rgba(255,255,255,.45); --dico-hover-bg: rgba(99,102,241,.14); --dico-hover-bdr: rgba(99,102,241,.25); --dico-hover-svg: #818CF8; --dlbl: rgba(255,255,255,.45); --ghost: rgba(255,255,255,.025); /* ── Legacy portal aliases (dark) ── */ --surface: #131620; --surface-2: #1C1F2E; --surface-3: #232739; --text: #E8EAF2; --text-2: #7B82A0; --muted: #454C66; --text-3: #7B82A0; --text-muted: #454C66; --border: rgba(255,255,255,.06); --border-soft: rgba(255,255,255,.04); --speek: #60A5FA; --speek-light: rgba(96,165,250,.12); --speek-dark: #93C5FD; --odoo: #22D3EE; --odoo-light: rgba(34,211,238,.12); --odoo-dark: #67E8F9; --success: #4ADE80; --success-light: rgba(74,222,128,.12); --warning: #FB923C; --warning-light: rgba(251,146,60,.12); --warning-bg: rgba(251,146,60,.10); --warning-text: #FB923C; --danger: #F87171; --danger-light: rgba(248,113,113,.12); --accent: #60A5FA; --accent-2: #22D3EE; --shadow-sm: 0 2px 20px rgba(0,0,0,.30); --shadow: 0 8px 28px rgba(0,0,0,.45); --shadow-lg: 0 24px 60px rgba(0,0,0,.6); } /* ── BASE ── */ html, body { height: 100%; } body { font-family: 'Space Grotesk', sans-serif; background: var(--bg); color: var(--tx); font-size: 13px; line-height: 1.5; min-height: 100vh; transition: background .3s, color .3s; -webkit-font-smoothing: antialiased; } svg { display: inline-block; vertical-align: middle; } a { color: inherit; } /* ── MESH BACKGROUND ── */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 15% 10%, var(--m1) 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 85% 15%, var(--m2) 0%, transparent 55%), radial-gradient(ellipse 55% 50% at 80% 85%, var(--m3) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 15% 85%, var(--m4) 0%, transparent 50%); transition: all .3s; } body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px); background-size: 28px 28px; } /* icon helpers */ .icon { width: 16px; height: 16px; flex-shrink: 0; } .icon-sm { width: 14px; height: 14px; } .icon-lg { width: 20px; height: 20px; } /* ── TOPBAR ── */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; background: var(--topbar-bg); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border-bottom: 1px solid var(--topbar-bdr); box-shadow: 0 1px 0 var(--topbar-bdr), 0 4px 20px rgba(37,99,235,.04); transition: background .3s, border-color .3s; } .logo-row { display: flex; align-items: center; gap: 10px; } .logo-mark { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(135deg, #2563EB, #1D4ED8); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 3px 10px rgba(37,99,235,.35); } .logo-mark svg { width: 15px; height: 15px; } .logo-name { font-weight: 700; font-size: 14px; color: var(--tx); letter-spacing: -.02em; } .logo-tag { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--tx3); border: 1px solid rgba(37,99,235,.14); border-radius: 4px; padding: 1px 6px; } .breadcrumb { display: flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--tx3); } .bc-active { color: #60A5FA; font-weight: 500; background: rgba(37,99,235,.12); border: 1px solid rgba(37,99,235,.22); border-radius: 4px; padding: 2px 8px; } [data-theme="light"] .bc-active { color: #2563EB; background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.14); } .tb-right { display: flex; align-items: center; gap: 8px; } .live-chip { display: flex; align-items: center; gap: 6px; background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.18); border-radius: 7px; padding: 4px 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #16A34A; } [data-theme="dark"] .live-chip { color: #4ADE80; background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.18); } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #16A34A; animation: blink 2s ease infinite; box-shadow: 0 0 5px rgba(22,163,74,.5); } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} } .tb-btn { width: 32px; height: 32px; border-radius: 8px; background: var(--btn-bg); border: 1px solid var(--btn-bdr); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--tx2); position: relative; text-decoration: none; transition: all .15s; } .tb-btn svg { width: 15px; height: 15px; } .tb-btn:hover { background: var(--btn-hover); color: var(--tx); } .notif { position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: #DC2626; border: 1.5px solid var(--notif-bdr); } .theme-toggle { width: 32px; height: 32px; border-radius: 8px; background: var(--btn-bg); border: 1px solid var(--btn-bdr); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--tx2); transition: all .15s; } .theme-toggle:hover { background: var(--btn-hover); color: var(--tx); } .theme-toggle svg { width: 15px; height: 15px; } .icon-sun { display: none; } .icon-moon { display: block; } [data-theme="light"] .icon-sun { display: block; } [data-theme="light"] .icon-moon { display: none; } .export-btn { display: flex; align-items: center; gap: 6px; background: #2563EB; color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 3px 12px rgba(37,99,235,.30); text-decoration: none; transition: transform .15s, box-shadow .15s; } .export-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(37,99,235,.40); } .export-btn svg { width: 13px; height: 13px; } /* ── PAGE / MAIN ── */ .main { position: relative; z-index: 1; } .page-content { position: relative; z-index: 1; padding: 70px 22px 96px; max-width: 1400px; margin-inline: auto; } /* ── PAGE HEADER (topbar title block) ── */ .page-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--tx); } .page-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--tx3); margin-top: 2px; } /* ── CARDS ── */ .card { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 18px; box-shadow: var(--card-shadow); position: relative; transition: background .3s, border-color .3s, transform .2s; animation: up .4s ease backwards; } .card.card-speek::before, .card.card-odoo::before, .card.card-success::before, .card.card-warn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 14px 14px 0 0; } .card.card-speek::before { background: linear-gradient(90deg,#2563EB,#60A5FA); } .card.card-odoo::before { background: linear-gradient(90deg,#0891B2,#22D3EE); } .card.card-success::before { background: linear-gradient(90deg,#16A34A,#4ADE80); } .card.card-warn::before { background: linear-gradient(90deg,#EA580C,#FB923C); } .card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; gap: 12px; } .card-title { font-size: 13px; font-weight: 600; color: var(--tx); display: flex; align-items: center; gap: 8px; } .card-title svg { width: 15px; height: 15px; color: var(--tx2); } .card-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--tx3); margin-top: 2px; } /* ── SECTION HEADERS ── */ .section-header { display: flex; align-items: center; gap: 12px; margin: 28px 0 14px; } .section-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 7px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; background: rgba(37,99,235,.09); border: 1px solid rgba(37,99,235,.16); color: #2563EB; } [data-theme="dark"] .section-badge { color: #60A5FA; background: rgba(37,99,235,.14); border-color: rgba(37,99,235,.25); } .section-badge svg { width: 13px; height: 13px; } .section-badge.odoo { background: rgba(8,145,178,.09); border-color: rgba(8,145,178,.16); color: #0891B2; } [data-theme="dark"] .section-badge.odoo { color: #22D3EE; background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.22); } .section-badge.mix { background: rgba(22,163,74,.09); border-color: rgba(22,163,74,.16); color: #16A34A; } [data-theme="dark"] .section-badge.mix { color: #4ADE80; background: rgba(74,222,128,.10); border-color: rgba(74,222,128,.20); } .section-title { font-size: 15px; font-weight: 600; color: var(--tx); } .section-line { flex: 1; height: 1px; background: var(--card-border); } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 8px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid transparent; white-space: nowrap; line-height: 1; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s; } .btn svg { width: 14px; height: 14px; } .btn-primary { background: #2563EB; color: #fff; box-shadow: 0 3px 12px rgba(37,99,235,.28); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(37,99,235,.40); } .btn-ghost { background: var(--btn-bg); color: var(--tx2); border-color: var(--btn-bdr); } .btn-ghost:hover { background: var(--btn-hover); color: var(--tx); } .btn-danger-ghost { background: transparent; color: var(--danger); border-color: var(--btn-bdr); } .btn-danger-ghost:hover { background: var(--danger-light); border-color: var(--danger); } .btn-sm { height: 28px; padding: 0 10px; font-size: 11px; border-radius: 7px; } .btn-sm svg { width: 12px; height: 12px; } .btn-icon { padding: 0; width: 34px; } /* ── FILTERS ── */ .filters-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 150px; } .filter-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--tx3); letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; } .filter-label svg { width: 12px; height: 12px; } input[type="text"], input[type="date"], input[type="search"], input[type="password"], select { background: var(--input-bg); border: 1px solid var(--input-bdr); border-radius: 7px; padding: 0 12px; height: 36px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--tx); transition: border-color .15s, box-shadow .15s, background .3s; outline: none; width: 100%; } input::placeholder { color: var(--tx3); } input:focus, select:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.12); } .filters-actions { display: flex; gap: 8px; align-items: flex-end; } .result-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--tx3); padding: 4px 0; } /* ── KPI GRID ── */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } .kpi-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 16px; position: relative; overflow: hidden; box-shadow: var(--card-shadow); transition: transform .2s, box-shadow .2s, background .3s; animation: up .4s ease backwards; } .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.12); } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 14px 14px 0 0; background: var(--kpi-accent, linear-gradient(90deg,#2563EB,#60A5FA)); } .kpi-card.odoo-kpi { --kpi-accent: linear-gradient(90deg,#0891B2,#22D3EE); } .kpi-card.mix-kpi { --kpi-accent: linear-gradient(90deg,#16A34A,#4ADE80); } .kpi-card.warn-kpi { --kpi-accent: linear-gradient(90deg,#EA580C,#FB923C); } .kpi-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; background: rgba(37,99,235,.10); color: #2563EB; } .kpi-icon svg { width: 18px; height: 18px; } .kpi-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500; color: var(--tx3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; } .kpi-value { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 600; letter-spacing: -1.5px; line-height: 1; color: var(--tx); } .kpi-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--tx3); margin-top: 7px; } /* ── CHARTS ── */ .chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; } .chart-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 18px; box-shadow: var(--card-shadow); transition: background .3s; } .chart-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .chart-card-title { font-size: 13px; font-weight: 600; color: var(--tx); } .chart-card-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--tx3); margin-top: 2px; } .chart-box { height: 240px; position: relative; } .chart-box-tall { height: 300px; position: relative; } /* ── TABLES ── */ .table-wrap { overflow-x: auto; border-radius: 10px; } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead th { padding: 9px 14px; text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--tx3); border-bottom: 1px solid var(--th-bdr); white-space: nowrap; background: var(--th-bg); } tbody tr { border-bottom: 1px solid var(--row-bdr); transition: background .12s; } tbody tr:hover { background: var(--row-hover); } tbody tr:last-child { border-bottom: none; } td { padding: 10px 14px; vertical-align: middle; color: var(--tx); } td.mono, .mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--tx2); } .td-primary { color: var(--tx); font-weight: 600; } .td-muted { color: var(--tx3); font-size: 12px; } .td-note { max-width: 280px; white-space: pre-wrap; word-break: break-word; font-size: 12px; color: var(--tx2); } /* ── TAGS / BADGES ── */ .tag { display: inline-flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: rgba(37,99,235,.09); border: 1px solid rgba(37,99,235,.16); color: #2563EB; } .tag svg { width: 12px; height: 12px; } [data-theme="dark"] .tag { color: #60A5FA; background: rgba(37,99,235,.14); border-color: rgba(37,99,235,.25); } .tag-speek { background: rgba(37,99,235,.09); border-color: rgba(37,99,235,.16); color: #2563EB; } .tag-odoo { background: rgba(8,145,178,.09); border-color: rgba(8,145,178,.16); color: #0891B2; } .tag-success { background: rgba(22,163,74,.09); border-color: rgba(22,163,74,.16); color: #16A34A; } .tag-warn { background: rgba(234,88,12,.09); border-color: rgba(234,88,12,.16); color: #EA580C; } .tag-danger { background: rgba(220,38,38,.09); border-color: rgba(220,38,38,.16); color: #DC2626; } .tag-neutral { background: var(--btn-bg); border-color: var(--btn-bdr); color: var(--tx2); } [data-theme="dark"] .tag-odoo { color: #22D3EE; background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.22); } [data-theme="dark"] .tag-success { color: #4ADE80; background: rgba(74,222,128,.10); border-color: rgba(74,222,128,.20); } [data-theme="dark"] .tag-warn { color: #FB923C; background: rgba(251,146,60,.12); border-color: rgba(251,146,60,.22); } [data-theme="dark"] .tag-danger { color: #F87171; background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.22); } /* ── SCORE BAR ── */ .score-bar-wrap { display: flex; align-items: center; gap: 8px; } .score-bar { flex: 1; height: 6px; background: var(--input-bg); border-radius: 999px; overflow: hidden; } .score-bar-fill { height: 100%; background: linear-gradient(90deg,#2563EB,#60A5FA); border-radius: 999px; transition: width .5s var(--ease); } .score-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: #2563EB; min-width: 28px; text-align: right; } [data-theme="dark"] .score-num { color: #60A5FA; } /* ── RANK BADGE ── */ .rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; } .rank-1 { background: rgba(234,88,12,.12); color: #EA580C; } .rank-2 { background: var(--btn-bg); color: var(--tx2); } .rank-3 { background: rgba(124,58,237,.12); color: #7C3AED; } .rank-n { background: var(--btn-bg); color: var(--tx3); } /* ── STAT WINDOW TABLE ── */ .window-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; } .window-cell { background: var(--input-bg); border: 1px solid var(--input-bdr); border-radius: 8px; padding: 12px; text-align: center; } .window-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500; color: var(--tx3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; } .window-value { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 600; color: var(--tx); } /* ── MISC ── */ .muted { color: var(--tx3); } .empty-state { text-align: center; padding: 44px 20px; color: var(--tx3); } .empty-state-icon { margin-bottom: 12px; display: flex; justify-content: center; } .empty-state-icon svg { width: 34px; height: 34px; color: var(--tx3); opacity: .6; } .empty-state-text { font-size: 14px; } .divider { height: 1px; background: var(--card-border); margin: 20px 0; } .flex-gap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } /* ── DOWNLOAD BUTTON ── */ .btn-download { background: rgba(37,99,235,.09); color: #2563EB; border: 1px solid rgba(37,99,235,.16); border-radius: 7px; padding: 5px 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: all .15s; white-space: nowrap; } .btn-download svg { width: 12px; height: 12px; } .btn-download:hover { background: #2563EB; color: #fff; } [data-theme="dark"] .btn-download { color: #60A5FA; background: rgba(37,99,235,.14); border-color: rgba(37,99,235,.25); } [data-theme="dark"] .btn-download:hover { background: #2563EB; color: #fff; } /* ── STATS SUB-TABS ── */ .stats-tabs { display: inline-flex; gap: 4px; background: var(--input-bg); border: 1px solid var(--input-bdr); border-radius: 9px; padding: 4px; margin-bottom: 20px; } .stats-tab-btn { padding: 0 14px; height: 30px; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; background: transparent; color: var(--tx3); transition: all .15s; display: inline-flex; align-items: center; gap: 6px; } .stats-tab-btn:hover { color: var(--tx); background: var(--btn-hover); } .stats-tab-btn.active { background: #2563EB; color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,.28); } /* ── DELETE BUTTON ── */ .btn-delete { background: none; border: 1px solid var(--btn-bdr); color: var(--danger); border-radius: 7px; padding: 4px 8px; cursor: pointer; display: inline-flex; align-items: center; transition: all .15s; } .btn-delete svg { width: 13px; height: 13px; } .btn-delete:hover { background: var(--danger-light); border-color: var(--danger); } /* ── KPI BAND ── */ .kpi-band { display: flex; align-items: stretch; background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden; flex-wrap: wrap; box-shadow: var(--card-shadow); } .kpi-band-item { display: flex; align-items: center; gap: 12px; padding: 16px 18px; flex: 1; min-width: 130px; transition: background .15s; border-left: 2px solid transparent; } .kpi-band-item:hover { background: var(--row-hover); } .kpi-band-item.kpi-band-accent { background: rgba(37,99,235,.06); border-left-color: #2563EB !important; } .kpi-band-icon { color: var(--tx2); flex-shrink: 0; display: inline-flex; } .kpi-band-icon svg { width: 20px; height: 20px; } .kpi-band-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500; color: var(--tx3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; } .kpi-band-value { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 600; letter-spacing: -1px; line-height: 1; color: var(--tx); } .kpi-band-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--tx3); margin-top: 3px; } .kpi-band-sep { width: 1px; background: var(--card-border); flex-shrink: 0; align-self: stretch; } /* Couleurs distinctes par item de la bande KPI (lisibilité + peps) */ .kpi-band-item:nth-child(1) { border-left-color: #2563EB; } .kpi-band-item:nth-child(3) { border-left-color: #0891B2; } .kpi-band-item:nth-child(5) { border-left-color: #16A34A; } .kpi-band-item:nth-child(7) { border-left-color: #EA580C; } .kpi-band-item:nth-child(9) { border-left-color: #DB2777; } .kpi-band-item:nth-child(11) { border-left-color: #0EA5E9; } .kpi-band-item:nth-child(13) { border-left-color: #16A34A; } .kpi-band-item:nth-child(15) { border-left-color: #7C3AED; } .kpi-band-item:nth-child(1) .kpi-band-icon { color: #2563EB; } .kpi-band-item:nth-child(3) .kpi-band-icon { color: #0891B2; } .kpi-band-item:nth-child(5) .kpi-band-icon { color: #16A34A; } .kpi-band-item:nth-child(7) .kpi-band-icon { color: #EA580C; } .kpi-band-item:nth-child(9) .kpi-band-icon { color: #DB2777; } .kpi-band-item:nth-child(11) .kpi-band-icon { color: #0EA5E9; } .kpi-band-item:nth-child(13) .kpi-band-icon { color: #16A34A; } .kpi-band-item:nth-child(15) .kpi-band-icon { color: #7C3AED; } /* ── CHART boxes ── */ .chart-box-q15 { height: 220px; position: relative; overflow-x: auto; } .chart-box-q15 canvas { min-width: 900px; } .chart-box-wide { height: 280px; position: relative; overflow-x: auto; } .chart-box-wide canvas { min-width: 600px; } .chart-box-q15-user { height: 320px; position: relative; overflow-x: auto; } .chart-box-q15-user canvas { min-width: 900px; } /* ── CHECKBOX TOGGLE ── */ .filter-group-checkbox { justify-content: flex-end; } .checkbox-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; height: 36px; padding: 0 12px; background: var(--input-bg); border: 1px solid var(--input-bdr); border-radius: 7px; transition: border-color .15s; } .checkbox-toggle:hover { border-color: #2563EB; } .checkbox-toggle input[type="checkbox"] { width: 15px; height: 15px; accent-color: #2563EB; cursor: pointer; } .checkbox-label { font-size: 12px; color: var(--tx2); font-weight: 500; } /* ── SCORE LEGEND ── */ .score-legend { background: rgba(37,99,235,.06); border: 1px solid var(--card-border); border-left: 2px solid #2563EB; border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; } .score-legend-title { font-size: 12px; font-weight: 600; color: #2563EB; margin-bottom: 4px; } .score-legend-body { font-size: 12px; color: var(--tx2); line-height: 1.6; } .score-legend-body strong { color: var(--tx); } [data-theme="dark"] .score-legend-title { color: #60A5FA; } /* ── MODAL ── */ .msav-modal-overlay { background: rgba(0,0,0,.55) !important; backdrop-filter: blur(4px); } /* ── APPLE DOCK ── */ .dock-wrap { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 200; animation: dockIn .5s .1s cubic-bezier(.34,1.56,.64,1) backwards; } @keyframes dockIn { from { opacity:0; transform:translateX(-50%) translateY(30px); } } .dock { display: flex; align-items: flex-end; gap: 10px; padding: 7px 12px 9px; border-radius: 18px; background: var(--dock-bg); backdrop-filter: blur(36px) saturate(180%); -webkit-backdrop-filter: blur(36px) saturate(180%); border: 1px solid var(--dock-bdr); border-bottom-color: var(--dock-bdr-bot); box-shadow: var(--dock-shadow); transition: background .3s, border-color .3s; } .dsep { width:1px; height:30px; align-self:center; background:linear-gradient(to bottom, transparent, var(--dock-sep), transparent); margin:0 2px; flex-shrink:0; } .di { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; width:42px; flex-shrink:0; cursor:pointer; position:relative; padding:1px 1px; text-decoration:none; transition:transform .2s cubic-bezier(.34,1.56,.64,1); } .di:hover { transform:translateY(-10px) scale(1.18); } .di:active { transform:translateY(-5px) scale(1.08); } .dico { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--dico-bg); border:1px solid var(--dico-bdr); transition:all .2s; } .dico svg { width:19px; height:19px; color:var(--dico-svg); transition:color .2s; } .di:hover .dico { background:var(--dico-hover-bg); border-color:var(--dico-hover-bdr); box-shadow:0 4px 16px rgba(37,99,235,.15); } .di:hover .dico svg { color:var(--dico-hover-svg); } .di.active .dico { background: linear-gradient(145deg, #2563EB, #1D4ED8); border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 1px rgba(37,99,235,.35), 0 0 18px rgba(37,99,235,.35), 0 5px 16px rgba(0,0,0,.18); } .di.active .dico svg { color: #fff; } .di.active::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:#2563EB; box-shadow:0 0 5px rgba(37,99,235,.8); } .di.stat .dico { background:rgba(22,163,74,.07); border-color:rgba(22,163,74,.12); } .di.stat .dico svg { color:rgba(22,163,74,.65); } .di.stat:hover .dico { background:rgba(22,163,74,.14); border-color:rgba(22,163,74,.22); } .di.stat:hover .dico svg { color:#16A34A; } .di.stat.active .dico { background: linear-gradient(145deg,#16A34A,#15803D); border-color: rgba(22,163,74,.45); box-shadow: 0 0 0 1px rgba(22,163,74,.35), 0 0 18px rgba(22,163,74,.35), 0 5px 16px rgba(0,0,0,.18); } .di.stat.active .dico svg { color:#fff; } .di.stat.active::after { background:#16A34A; box-shadow:0 0 5px rgba(22,163,74,.8); } [data-theme="dark"] .di.stat .dico svg { color:rgba(74,222,128,.55); } [data-theme="dark"] .di.stat:hover .dico svg { color:#4ADE80; } .dlbl { position:absolute; top:100%; left:50%; margin-top:4px; transform:translateX(-50%) translateY(3px); font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:500; color:var(--dlbl); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s,transform .15s; } .di:hover .dlbl { opacity:1; transform:translateX(-50%) translateY(0); } /* ── Couleur distincte par icône du dock (survol) ── */ /* 1: Appels — bleu */ .dock .di:nth-child(1):hover .dico { background:rgba(37,99,235,.14); border-color:rgba(37,99,235,.30); box-shadow:0 4px 16px rgba(37,99,235,.20); } .dock .di:nth-child(1):hover .dico svg { color:#2563EB; } /* 2: Tickets — rouge */ .dock .di:nth-child(2):hover .dico { background:rgba(220,38,38,.14); border-color:rgba(220,38,38,.30); box-shadow:0 4px 16px rgba(220,38,38,.20); } .dock .di:nth-child(2):hover .dico svg { color:#DC2626; } /* 3: Pointeuse — violet */ .dock .di:nth-child(3):hover .dico { background:rgba(124,58,237,.14); border-color:rgba(124,58,237,.30); box-shadow:0 4px 16px rgba(124,58,237,.20); } .dock .di:nth-child(3):hover .dico svg { color:#7C3AED; } /* 4: MSAV — cyan */ .dock .di:nth-child(4):hover .dico { background:rgba(8,145,178,.14); border-color:rgba(8,145,178,.30); box-shadow:0 4px 16px rgba(8,145,178,.20); } .dock .di:nth-child(4):hover .dico svg { color:#0891B2; } /* 5: Manqués — orange */ .dock .di:nth-child(5):hover .dico { background:rgba(234,88,12,.14); border-color:rgba(234,88,12,.30); box-shadow:0 4px 16px rgba(234,88,12,.20); } .dock .di:nth-child(5):hover .dico svg { color:#EA580C; } /* (6 = séparateur) */ /* 7: Stats Speek — vert (déjà .stat) */ .dock .di:nth-child(7):hover .dico { background:rgba(22,163,74,.16); border-color:rgba(22,163,74,.30); box-shadow:0 4px 16px rgba(22,163,74,.20); } .dock .di:nth-child(7):hover .dico svg { color:#16A34A; } /* 8: Stats Odoo — rose */ .dock .di:nth-child(8):hover .dico { background:rgba(219,39,119,.14); border-color:rgba(219,39,119,.30); box-shadow:0 4px 16px rgba(219,39,119,.20); } .dock .di:nth-child(8):hover .dico svg { color:#DB2777; } /* (9 = séparateur) */ /* 10: N1 Win Heures — teal */ .dock .di:nth-child(10):hover .dico { background:rgba(13,148,136,.16); border-color:rgba(13,148,136,.32); box-shadow:0 4px 16px rgba(13,148,136,.22); } .dock .di:nth-child(10):hover .dico svg { color:#0D9488; } /* Teinte de repos discrète par icône (pour les distinguer même sans survol) */ .dock .di:nth-child(2) .dico svg { color:color-mix(in srgb, var(--dico-svg) 78%, #DC2626); } .dock .di:nth-child(3) .dico svg { color:color-mix(in srgb, var(--dico-svg) 78%, #7C3AED); } .dock .di:nth-child(4) .dico svg { color:color-mix(in srgb, var(--dico-svg) 78%, #0891B2); } .dock .di:nth-child(5) .dico svg { color:color-mix(in srgb, var(--dico-svg) 78%, #EA580C); } .dock .di:nth-child(8) .dico svg { color:color-mix(in srgb, var(--dico-svg) 78%, #DB2777); } .dock .di:nth-child(10) .dico svg { color:color-mix(in srgb, var(--dico-svg) 78%, #0D9488); } /* ── État actif coloré par icône (fond plein + point assorti) ── */ /* 1: Appels — bleu (déjà la valeur par défaut .active) */ .dock .di:nth-child(2).active .dico { background:linear-gradient(145deg,#DC2626,#B91C1C); border-color:rgba(220,38,38,.45); box-shadow:0 0 0 1px rgba(220,38,38,.35), 0 0 18px rgba(220,38,38,.35), 0 5px 16px rgba(0,0,0,.18); } .dock .di:nth-child(2).active::after { background:#DC2626; box-shadow:0 0 5px rgba(220,38,38,.8); } .dock .di:nth-child(3).active .dico { background:linear-gradient(145deg,#7C3AED,#6D28D9); border-color:rgba(124,58,237,.45); box-shadow:0 0 0 1px rgba(124,58,237,.35), 0 0 18px rgba(124,58,237,.35), 0 5px 16px rgba(0,0,0,.18); } .dock .di:nth-child(3).active::after { background:#7C3AED; box-shadow:0 0 5px rgba(124,58,237,.8); } .dock .di:nth-child(4).active .dico { background:linear-gradient(145deg,#0891B2,#0E7490); border-color:rgba(8,145,178,.45); box-shadow:0 0 0 1px rgba(8,145,178,.35), 0 0 18px rgba(8,145,178,.35), 0 5px 16px rgba(0,0,0,.18); } .dock .di:nth-child(4).active::after { background:#0891B2; box-shadow:0 0 5px rgba(8,145,178,.8); } .dock .di:nth-child(5).active .dico { background:linear-gradient(145deg,#EA580C,#C2410C); border-color:rgba(234,88,12,.45); box-shadow:0 0 0 1px rgba(234,88,12,.35), 0 0 18px rgba(234,88,12,.35), 0 5px 16px rgba(0,0,0,.18); } .dock .di:nth-child(5).active::after { background:#EA580C; box-shadow:0 0 5px rgba(234,88,12,.8); } .dock .di:nth-child(8).active .dico { background:linear-gradient(145deg,#DB2777,#BE185D); border-color:rgba(219,39,119,.45); box-shadow:0 0 0 1px rgba(219,39,119,.35), 0 0 18px rgba(219,39,119,.35), 0 5px 16px rgba(0,0,0,.18); } .dock .di:nth-child(8).active::after { background:#DB2777; box-shadow:0 0 5px rgba(219,39,119,.8); } .dock .di:nth-child(10).active .dico { background:linear-gradient(145deg,#0D9488,#0F766E); border-color:rgba(13,148,136,.45); box-shadow:0 0 0 1px rgba(13,148,136,.35), 0 0 18px rgba(13,148,136,.35), 0 5px 16px rgba(0,0,0,.18); } .dock .di:nth-child(10).active::after { background:#0D9488; box-shadow:0 0 5px rgba(13,148,136,.8); } /* l'icône active reste blanche sur tous ces fonds */ .dock .di.active .dico svg { color:#fff !important; } @keyframes up { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} } /* ── RESPONSIVE ── */ @media (max-width: 760px) { .page-content { padding: 64px 14px 96px; } .kpi-grid { grid-template-columns: repeat(2, 1fr); } .chart-grid { grid-template-columns: 1fr; } .breadcrumb { display: none; } }