/* ===================================================================== NEXA PLATFORM — Shared Base Design System Three-axis theming: mode (dark/light) × accent (6 colors) × preset (5 packs) Consumed by all role dashboards. Extends the proven Nexa component set. ===================================================================== */ /* ===================================================================== 1. TOKENS — constants (theme-independent) ===================================================================== */ :root { /* Full brand palette (each accent option maps to these) */ --indigo: #6366f1; --indigo-2: #818cf8; --teal: #2dd4bf; --teal-2: #5eead4; --violet: #8b5cf6; --violet-2: #a78bfa; --rose: #fb7185; --rose-2: #fda4af; --amber: #f59e0b; --amber-2: #fbbf24; --emerald: #10b981; --emerald-2: #34d399; /* Extended palette — full-spectrum accent options */ --blue: #3b82f6; --blue-2: #60a5fa; --sky: #0ea5e9; --sky-2: #38bdf8; --cyan: #06b6d4; --cyan-2: #22d3ee; --fuchsia: #d946ef; --fuchsia-2: #e879f9; --pink: #ec4899; --pink-2: #f472b6; --red: #ef4444; --red-2: #f87171; --orange: #f97316; --orange-2: #fb923c; --lime: #84cc16; --lime-2: #a3e635; /* Semantic accents that never change */ --success: #2dd4bf; --warning: #f59e0b; --danger: #fb7185; --info: #6366f1; /* Type families — distinct roles (display / body / numeric-data) */ --font-display: 'Sora', sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --font-num: 'Space Grotesk', 'Sora', monospace; /* tabular numerals for all data */ /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Layout */ --sidebar-w: 272px; --sidebar-w-collapsed: 84px; --radius: 18px; --radius-sm: 12px; --radius-lg: 24px; /* Accent indirection — defaults to indigo; overridden by [data-accent] */ --accent: var(--indigo); --accent-2: var(--indigo-2); --accent-rgb: 99, 102, 241; } /* ---------- Accent picker — one block per accent ---------- */ [data-accent="indigo"] { --accent: var(--indigo); --accent-2: var(--indigo-2); --accent-rgb: 99, 102, 241; } [data-accent="teal"] { --accent: var(--teal); --accent-2: var(--teal-2); --accent-rgb: 45, 212, 191; } [data-accent="violet"] { --accent: var(--violet); --accent-2: var(--violet-2); --accent-rgb: 139, 92, 246; } [data-accent="rose"] { --accent: var(--rose); --accent-2: var(--rose-2); --accent-rgb: 251, 113, 133; } [data-accent="amber"] { --accent: var(--amber); --accent-2: var(--amber-2); --accent-rgb: 245, 158, 11; } [data-accent="emerald"] { --accent: var(--emerald); --accent-2: var(--emerald-2); --accent-rgb: 16, 185, 129; } [data-accent="blue"] { --accent: var(--blue); --accent-2: var(--blue-2); --accent-rgb: 59, 130, 246; } [data-accent="sky"] { --accent: var(--sky); --accent-2: var(--sky-2); --accent-rgb: 14, 165, 233; } [data-accent="cyan"] { --accent: var(--cyan); --accent-2: var(--cyan-2); --accent-rgb: 6, 182, 212; } [data-accent="fuchsia"] { --accent: var(--fuchsia); --accent-2: var(--fuchsia-2); --accent-rgb: 217, 70, 239; } [data-accent="pink"] { --accent: var(--pink); --accent-2: var(--pink-2); --accent-rgb: 236, 72, 153; } [data-accent="red"] { --accent: var(--red); --accent-2: var(--red-2); --accent-rgb: 239, 68, 68; } [data-accent="orange"] { --accent: var(--orange); --accent-2: var(--orange-2); --accent-rgb: 249, 115, 22; } [data-accent="lime"] { --accent: var(--lime); --accent-2: var(--lime-2); --accent-rgb: 132, 204, 22; } /* ===================================================================== 2. MODE — dark / light (the semantic surface tokens) ===================================================================== */ /* Dark (default) */ [data-theme="dark"] { --bg: #0a0b14; --bg-2: #0e1020; --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.06); --surface-hover: rgba(255, 255, 255, 0.08); --card: rgba(20, 22, 38, 0.72); --card-solid: #14162b; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --text: #f4f5fb; --text-2: #b4b8d4; --text-3: #6b6f8e; --shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7); --shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, 0.8); --track: rgba(255, 255, 255, 0.06); --grid-line: rgba(255, 255, 255, 0.06); color-scheme: dark; } /* Light */ [data-theme="light"] { --bg: #eef1f9; --bg-2: #e6e9f5; --surface: rgba(255, 255, 255, 0.7); --surface-2: rgba(255, 255, 255, 0.9); --surface-hover: rgba(255, 255, 255, 1); --card: rgba(255, 255, 255, 0.75); --card-solid: #ffffff; --border: rgba(20, 30, 60, 0.08); --border-strong: rgba(20, 30, 60, 0.14); --text: #1a1c2e; --text-2: #54587a; --text-3: #8a8fab; --shadow: 0 20px 50px -24px rgba(40, 50, 90, 0.22); --shadow-lg: 0 40px 80px -30px rgba(40, 50, 90, 0.28); --track: rgba(20, 30, 60, 0.06); --grid-line: rgba(20, 30, 60, 0.07); color-scheme: light; } /* ===================================================================== 3. PRESET PACKS — override bg + accent + ambient for a full restyle. Presets stack ON TOP of mode (so preset-dark and preset-light both work). Each preset sets its accent + a tinted background per mode. ===================================================================== */ /* Midnight — deep blue-black, electric indigo */ [data-preset="midnight"][data-theme="dark"] { --bg: #060818; --bg-2: #0a0e24; --card: rgba(18, 22, 48, 0.75); --card-solid: #0e1230; } [data-preset="midnight"][data-theme="light"] { --bg: #e8ecf8; --bg-2: #dde3f5; } [data-preset="midnight"] { --accent: #818cf8; --accent-2: #a5b4fc; --accent-rgb: 129, 140, 248; } /* Ocean — teal/cyan vibes */ [data-preset="ocean"][data-theme="dark"] { --bg: #04141f; --bg-2: #061a28; --card: rgba(10, 36, 52, 0.75); --card-solid: #08283c; } [data-preset="ocean"][data-theme="light"] { --bg: #e6f6f6; --bg-2: #d8efef; } [data-preset="ocean"] { --accent: #2dd4bf; --accent-2: #5eead4; --accent-rgb: 45, 212, 191; } /* Sunset — warm amber/rose */ [data-preset="sunset"][data-theme="dark"] { --bg: #150a0a; --bg-2: #1c0e0e; --card: rgba(38, 18, 18, 0.75); --card-solid: #2a1212; } [data-preset="sunset"][data-theme="light"] { --bg: #fbeee8; --bg-2: #f6e2d8; } [data-preset="sunset"] { --accent: #fb7185; --accent-2: #fda4af; --accent-rgb: 251, 113, 133; } /* Forest — deep green */ [data-preset="forest"][data-theme="dark"] { --bg: #081410; --bg-2: #0c1c16; --card: rgba(14, 34, 26, 0.75); --card-solid: #102820; } [data-preset="forest"][data-theme="light"] { --bg: #e8f5ee; --bg-2: #dceee4; } [data-preset="forest"] { --accent: #10b981; --accent-2: #34d399; --accent-rgb: 16, 185, 129; } /* Aurora — deep violet/purple */ [data-preset="aurora"][data-theme="dark"] { --bg: #0c0820; --bg-2: #120c2a; --card: rgba(30, 18, 52, 0.75); --card-solid: #1a1038; } [data-preset="aurora"][data-theme="light"] { --bg: #f0ecfb; --bg-2: #e6dff7; } [data-preset="aurora"] { --accent: #a78bfa; --accent-2: #c4b5fd; --accent-rgb: 167, 139, 250; } /* Noir — monochrome / neutral gray */ [data-preset="noir"][data-theme="dark"] { --bg: #0c0c0e; --bg-2: #121214; --card: rgba(28, 28, 32, 0.75); --card-solid: #1a1a1e; } [data-preset="noir"][data-theme="light"] { --bg: #eeeef0; --bg-2: #e4e4e8; } [data-preset="noir"] { --accent: #94a3b8; --accent-2: #cbd5e1; --accent-rgb: 148, 163, 184; } /* Candy — warm pink pastel */ [data-preset="candy"][data-theme="dark"] { --bg: #1a0a14; --bg-2: #22101b; --card: rgba(44, 18, 34, 0.75); --card-solid: #2c1222; } [data-preset="candy"][data-theme="light"] { --bg: #fdeef4; --bg-2: #f7e0ec; } [data-preset="candy"] { --accent: #ec4899; --accent-2: #f472b6; --accent-rgb: 236, 72, 153; } /* Slate — steel blue-gray */ [data-preset="slate"][data-theme="dark"] { --bg: #0a0f1a; --bg-2: #0e1422; --card: rgba(18, 26, 42, 0.75); --card-solid: #121a2c; } [data-preset="slate"][data-theme="light"] { --bg: #eef1f6; --bg-2: #e2e7f0; } [data-preset="slate"] { --accent: #3b82f6; --accent-2: #60a5fa; --accent-rgb: 59, 130, 246; } /* ===================================================================== 4. RESET ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.5s var(--ease), color 0.3s var(--ease); } /* Smooth theme transitions for all themed surfaces */ body.theme-transitioning, body.theme-transitioning * { transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease) !important; } h1, h2, h3, .brand__name, .seg__btn, .btn, .tab { font-family: var(--font-display); letter-spacing: -0.01em; } ::selection { background: var(--accent); color: #fff; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; color: inherit; } a { color: inherit; text-decoration: none; } /* Focus-visible — accessible keyboard ring, mouse clicks don't trigger it */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; transition: outline-offset 0.15s var(--ease); } .btn:focus-visible, .nav__item:focus-visible, .tab:focus-visible, .chip:focus-visible, .icon-btn:focus-visible, .seg__btn:focus-visible, .link:focus-visible, .currency-btn:focus-visible, .currency-opt:focus-visible, .pcard:focus-visible, .review-card:focus-visible, .coupon:focus-visible, .palette-item:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; } svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } svg.i--sm { width: 18px; height: 18px; } svg.i--xs { width: 15px; height: 15px; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; } /* ===================================================================== 5. AMBIENT BACKGROUND ===================================================================== */ .ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; animation: float 18s ease-in-out infinite; } .orb--a { width: 520px; height: 520px; background: var(--accent); top: -12%; left: -8%; } .orb--b { width: 460px; height: 460px; background: var(--teal); bottom: -14%; right: -6%; animation-delay: -6s; } .orb--c { width: 380px; height: 380px; background: var(--rose); top: 40%; left: 55%; animation-delay: -12s; opacity: 0.35; } [data-theme="light"] .orb { opacity: 0.22; filter: blur(110px); } [data-theme="light"] .orb--c { opacity: 0.16; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.06); } 66% { transform: translate(-30px, 40px) scale(0.96); } } .grain { position: absolute; inset: 0; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } [data-theme="light"] .grain { opacity: 0.05; } /* ===================================================================== 6. APP SHELL ===================================================================== */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; transition: grid-template-columns 0.4s var(--ease); } .app.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; } /* ===================================================================== 7. SIDEBAR ===================================================================== */ .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 8px; padding: 22px 16px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border-right: 1px solid var(--border); z-index: 50; } .sidebar__brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 16px; } .brand__mark { flex-shrink: 0; perspective: 600px; } .brand__cube { position: relative; width: 40px; height: 40px; transform-style: preserve-3d; animation: spin3d 12s linear infinite; } .brand__cube .face { position: absolute; inset: 0; border-radius: 10px; } .brand__cube .top { background: linear-gradient(135deg, var(--accent-2), var(--accent)); transform: rotateX(90deg) translateZ(20px); } .brand__cube .left { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); transform: rotateY(-90deg) translateZ(20px); opacity: 0.85; } .brand__cube .right { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, #000), color-mix(in srgb, var(--accent) 50%, #000)); transform: translateZ(20px); opacity: 0.95; } @keyframes spin3d { from { transform: rotateX(-20deg) rotateY(0deg); } to { transform: rotateX(-20deg) rotateY(360deg); } } .brand__text { display: flex; flex-direction: column; line-height: 1.1; } .brand__name { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; background: linear-gradient(120deg, var(--text) 30%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand__sub { font-size: 0.7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; } .sidebar__collapse { margin-left: auto; opacity: 0.45; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .sidebar:hover .sidebar__collapse, .sidebar__collapse:focus-visible { opacity: 1; } .app.is-collapsed .sidebar__collapse { opacity: 1; margin-left: 0; } .app.is-collapsed .sidebar__collapse .i { transform: rotate(180deg); } /* Nav */ .nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; padding-right: 4px; } .nav__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3); font-weight: 700; padding: 14px 12px 6px; } .nav__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500; font-size: 0.92rem; position: relative; transition: color 0.25s var(--ease), background 0.25s var(--ease), transform 0.2s var(--ease); } .nav__item:hover { color: var(--text); background: var(--surface-hover); transform: translateX(3px); } .nav__item .i { transition: transform 0.3s var(--spring); } .nav__item:hover .i { transform: scale(1.12); } .nav__item.is-active { color: var(--text); background: linear-gradient(100deg, rgba(var(--accent-rgb), 0.22), transparent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.3); } .nav__item.is-active::before { content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: linear-gradient(var(--accent-2), var(--accent)); box-shadow: 0 0 12px var(--accent); } .nav__item.is-active .i { color: var(--accent-2); } .nav__text { flex: 1; white-space: nowrap; } .nav__pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); } .nav__item.is-active .nav__pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(45,212,191,0.6); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .badge { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--surface-hover); color: var(--text-2); font-family: var(--font-num); font-feature-settings: "tnum"; } .nav__chip { font-size: 0.68rem; color: var(--accent-2); font-weight: 600; } .nav__mute { font-size: 0.78rem; color: var(--text-3); } .sidebar__foot { padding-top: 8px; } .nav--foot { flex: 0 0 auto !important; overflow: visible; } .upsell { position: relative; overflow: hidden; padding: 18px; border-radius: var(--radius); background: linear-gradient(140deg, rgba(var(--accent-rgb), 0.3), var(--card-solid)); border: 1px solid var(--border-strong); } .upsell__glow { position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; background: radial-gradient(circle, var(--accent-2), transparent 70%); opacity: 0.5; filter: blur(20px); } .upsell__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; position: relative; } .upsell__desc { font-size: 0.78rem; color: var(--text-2); margin: 4px 0 12px; position: relative; } /* Collapsed state */ .app.is-collapsed .brand__text, .app.is-collapsed .nav__text, .app.is-collapsed .nav__label, .app.is-collapsed .badge, .app.is-collapsed .nav__chip, .app.is-collapsed .nav__mute, .app.is-collapsed .nav__pulse, .app.is-collapsed .sidebar__foot { display: none; } .app.is-collapsed .sidebar__brand { flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: 4px 0 16px; } .app.is-collapsed .nav__item { justify-content: center; padding: 12px; } .app.is-collapsed .nav__item.is-active::before { left: 0; } /* ===================================================================== 8. TOPBAR ===================================================================== */ .main { display: flex; flex-direction: column; min-width: 0; } .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; background: color-mix(in srgb, var(--bg) 75%, transparent); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--border); } .topbar__left, .topbar__right { display: flex; align-items: center; gap: 10px; } .topbar__menu { display: none; } .search { display: flex; align-items: center; gap: 10px; padding: 0 14px; width: 380px; max-width: 40vw; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; height: 42px; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease); } .search:focus-within { border-color: rgba(var(--accent-rgb), 0.5); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14); background: var(--surface-2); } .search .i { color: var(--text-3); } .search input { flex: 1; border: none; background: none; outline: none; font-size: 0.9rem; } .search input::placeholder { color: var(--text-3); } .search kbd { font-family: var(--font-num); font-size: 0.7rem; font-weight: 600; padding: 3px 7px; border-radius: 6px; background: var(--surface-hover); color: var(--text-2); border: 1px solid var(--border); } .icon-btn { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); transition: all 0.25s var(--ease); position: relative; } .icon-btn:hover { color: var(--text); background: var(--surface-hover); transform: translateY(-2px); } .icon-btn:active { transform: translateY(0) scale(0.96); } .icon-btn.has-dot::after { content: ""; position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); border: 2px solid var(--bg); box-shadow: 0 0 8px var(--rose); } #themeBtn .i--moon { display: none; } [data-theme="light"] #themeBtn .i--sun { display: none; } [data-theme="light"] #themeBtn .i--moon { display: block; } .divider-v { width: 1px; height: 26px; background: var(--border); margin: 0 4px; } /* Currency switcher dropdown */ .currency-switch { position: relative; } .currency-btn { display: flex; align-items: center; gap: 7px; padding: 0 12px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 0.82rem; transition: all 0.25s var(--ease); white-space: nowrap; } .currency-btn:hover { background: var(--surface-hover); transform: translateY(-2px); } .currency-btn .symbol { font-family: var(--font-num); font-weight: 700; color: var(--accent-2); font-size: 0.95rem; } .currency-btn .code { text-transform: uppercase; letter-spacing: 0.04em; } .currency-btn .chev { transition: transform 0.25s var(--ease); } .currency-switch.is-open .currency-btn .chev { transform: rotate(180deg); } .currency-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 220px; padding: 8px; background: var(--card-solid); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateY(-8px) scale(0.96); transition: all 0.25s var(--spring); max-height: 360px; overflow-y: auto; } .currency-switch.is-open .currency-menu { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .currency-search { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; font-size: 0.82rem; outline: none; margin-bottom: 6px; color: var(--text); } .currency-search:focus { border-color: rgba(var(--accent-rgb), 0.5); } .currency-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 9px; text-align: left; transition: background 0.2s; cursor: pointer; color: var(--text); } .currency-opt:hover { background: var(--surface-hover); } .currency-opt.is-active { background: linear-gradient(100deg, rgba(var(--accent-rgb), 0.14), transparent); } .currency-opt .sym { font-family: var(--font-num); font-weight: 700; width: 28px; color: var(--accent-2); } .currency-opt .meta { flex: 1; min-width: 0; } .currency-opt .nm { font-size: 0.84rem; font-weight: 600; } .currency-opt .cd { font-size: 0.7rem; color: var(--text-3); text-transform: uppercase; } .currency-opt .rate { font-family: var(--font-num); font-size: 0.74rem; color: var(--text-3); } .currency-opt .check { color: var(--accent); opacity: 0; } .currency-opt.is-active .check { opacity: 1; } .currency-loading { padding: 14px; text-align: center; font-size: 0.8rem; color: var(--text-3); display: flex; align-items: center; justify-content: center; gap: 8px; } .currency-spin { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .userchip { display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 30px; background: var(--surface); border: 1px solid var(--border); transition: all 0.25s var(--ease); } .userchip:hover { background: var(--surface-hover); } .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; text-align: center; line-height: 1; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--rose)); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2); flex-shrink: 0; } .userchip__meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } .userchip__name { font-weight: 600; font-size: 0.85rem; } .userchip__role { font-size: 0.7rem; color: var(--text-3); } .userchip .i { color: var(--text-3); } /* ===================================================================== 9. CONTENT / VIEWS ===================================================================== */ .content { padding: 28px; max-width: 1500px; width: 100%; margin: 0 auto; } .view { display: none; animation: viewIn 0.5s var(--ease-out); } .view.is-active { display: flex; flex-direction: column; gap: 22px; } @keyframes viewIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .view__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .crumb { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-2); font-weight: 700; margin-bottom: 8px; display: inline-flex; align-items: center; gap: 8px; } .crumb::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), transparent); } .h1 { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.35rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; } .h2 { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; } .muted { color: var(--text-2); font-size: 0.86rem; margin-top: 5px; } .view__actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ===================================================================== 10. BUTTONS ===================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 12px; font-weight: 600; font-size: 0.88rem; border: 1px solid transparent; position: relative; overflow: hidden; transition: transform 0.25s var(--spring), box-shadow 0.3s var(--ease), background 0.3s var(--ease); } .btn:active { transform: scale(0.97); } .btn--sm { padding: 7px 12px; font-size: 0.8rem; } .btn--block { width: 100%; } .btn--primary { color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb), 0.7), inset 0 1px 0 rgba(255,255,255,0.25); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(var(--accent-rgb), 0.8), inset 0 1px 0 rgba(255,255,255,0.3); } .btn--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25), transparent 70%); transform: translateX(-120%); transition: transform 0.6s var(--ease); } .btn--primary:hover::after { transform: translateX(120%); } .btn--soft { background: var(--surface); border-color: var(--border); color: var(--text); } .btn--soft:hover { background: var(--surface-hover); transform: translateY(-2px); } .btn--ghost { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.2); backdrop-filter: blur(10px); } .btn--ghost:hover { background: rgba(255,255,255,0.18); } .btn--danger { background: linear-gradient(135deg, var(--rose-2), var(--rose)); color: #fff; } .btn--danger:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px var(--rose); } .link { color: var(--accent-2); font-size: 0.85rem; font-weight: 600; } .link:hover { text-decoration: underline; } /* ===================================================================== 11. CARDS / GRID ===================================================================== */ .grid { display: grid; gap: 20px; } .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .kpis { grid-template-columns: repeat(4, 1fr); } .kpis--3 { grid-template-columns: repeat(3, 1fr); } .grid > * { min-width: 0; } .card { position: relative; background: var(--card); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); transition: border-color 0.3s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease); } .card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .card__head .muted { margin: 0; } /* KPI cards */ .kpi { padding: 20px; overflow: hidden; } .kpi::before { content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.7; } .kpi::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%); pointer-events: none; opacity: 0.9; transition: opacity 0.4s var(--ease); } .kpi:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), 0 20px 50px -24px color-mix(in srgb, var(--accent) 60%, transparent); } .kpi:hover::after { opacity: 1; } .kpi__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .kpi__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: transparent; color: var(--accent); box-shadow: none; } .kpi__label { font-size: 0.82rem; color: var(--text-2); font-weight: 500; } .kpi__value { font-family: var(--font-num); font-size: 1.9rem; font-weight: 600; margin-top: 2px; font-feature-settings: "tnum"; letter-spacing: -0.02em; } .kpi--sm .kpi__value { font-size: 1.6rem; margin-top: 6px; } .trend { font-family: var(--font-num); font-size: 0.76rem; font-weight: 600; padding: 3px 8px; border-radius: 20px; letter-spacing: -0.01em; } .trend--up { color: var(--teal); background: rgba(45, 212, 191, 0.14); } .trend--down { color: var(--rose); background: rgba(251, 113, 133, 0.14); } .spark { height: 38px; margin-top: 12px; } .spark svg { width: 100%; height: 100%; } .seg { display: inline-flex; padding: 4px; gap: 2px; background: var(--track); border-radius: 10px; } .seg__btn { padding: 6px 12px; border-radius: 7px; font-size: 0.76rem; font-weight: 600; color: var(--text-2); transition: all 0.25s var(--ease); } .seg__btn:hover { color: var(--text); } .seg__btn.is-active { background: var(--surface-hover); color: var(--text); box-shadow: 0 2px 8px -2px rgba(0,0,0,0.3); } /* ===================================================================== 12. CHARTS ===================================================================== */ .chart-card { display: flex; flex-direction: column; } .chart-wrap { flex: 1; position: relative; min-height: 260px; } .chart-wrap canvas { width: 100% !important; } .donut-wrap { position: relative; width: 220px; height: 220px; margin: 8px auto 20px; } .donut-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } .donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; padding: 0 8px; } .donut-center__num { font-family: var(--font-num); font-size: 2rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; } .donut-center__lbl { font-size: 0.76rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; } .legend { list-style: none; display: flex; flex-direction: column; gap: 10px; } .legend li { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--text-2); } .legend li strong { margin-left: auto; color: var(--text); font-family: var(--font-num); font-feature-settings: "tnum"; } .legend .dot { width: 10px; height: 10px; border-radius: 3px; } /* ===================================================================== 13. TABLES ===================================================================== */ .table-scroll, .table-wrap { overflow-x: auto; margin: 0 -22px; padding: 0 22px; min-width: 0; display: block; max-width: 100%; } .table { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 0; } .table thead th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 700; padding: 0 14px 12px; border-bottom: 1px solid var(--border); } .table tbody td { padding: 14px; border-bottom: 1px solid var(--border); vertical-align: middle; overflow-wrap: anywhere; word-break: break-word; } .table tbody tr { transition: background 0.2s var(--ease); } .table tbody tr:hover { background: var(--surface); } .table tbody tr:last-child td { border-bottom: none; } .ord-id { font-family: var(--font-num); font-weight: 600; color: var(--text-2); letter-spacing: -0.01em; } .cell-user { display: flex; align-items: center; gap: 10px; } .cell-user .avatar { width: 32px; height: 32px; font-size: 0.72rem; } .cell-user b { font-weight: 600; } .cell-user div span { font-size: 0.76rem; color: var(--text-3); display: block; } .amt { font-family: var(--font-num); font-weight: 600; font-feature-settings: "tnum"; } .dispute-reason { font-size: 0.82rem; color: var(--text-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .icon-act { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); transition: all 0.2s; } .icon-act:hover { color: var(--text); background: var(--surface-hover); } /* Status pills */ .pill { font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 20px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill--done, .pill--active, .pill--approved, .pill--published { color: var(--teal); background: rgba(45, 212, 191, 0.14); } .pill--pending, .pill--processing { color: var(--amber); background: rgba(245, 158, 11, 0.14); } .pill--failed, .pill--rejected, .pill--flagged, .pill--frozen { color: var(--rose); background: rgba(251, 113, 133, 0.14); } .pill--idle, .pill--closed { color: var(--text-3); background: var(--surface-hover); } .pill--open { color: var(--accent-2); background: rgba(var(--accent-rgb), 0.14); } /* SLA badges (disputes) — tabular figures, color-coded urgency */ .sla-badge { font-family: var(--font-num); font-weight: 700; font-size: 0.72rem; padding: 3px 8px; border-radius: 6px; white-space: nowrap; font-feature-settings: "tnum"; } .sla-badge--ok { color: var(--teal); background: rgba(45, 212, 191, 0.14); } .sla-badge--warn { color: var(--amber); background: rgba(245, 158, 11, 0.14); } .sla-badge--urgent { color: var(--rose); background: rgba(251, 113, 133, 0.14); animation: pulse 2s infinite; } .sla-badge--closed { color: var(--text-3); background: var(--surface-hover); } /* Responsive table → stacked cards */ @media (max-width: 720px) { .table-scroll, .table-wrap { margin: 0; padding: 0; overflow: visible; } .table thead { display: none; } .table, .table tbody, .table tr, .table td { display: block; width: 100%; } .table { font-size: 0.88rem; } .table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; padding: 16px; border-radius: 14px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--border); } .table tr:last-child { margin-bottom: 0; } .table tbody td { display: flex; align-items: center; gap: 10px; padding: 7px 0; border: none; white-space: normal; } .table td::before { content: attr(data-label); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 700; flex-shrink: 0; width: 78px; } .table td { flex-wrap: wrap; min-width: 0; } .table td[data-label=""]::before { content: none; } .table td[data-label=""] { justify-content: flex-end; } .table td[data-label="Customer"], .table td[data-label="User"], .table td[data-label="Vendor"], .table td[data-label="Order"], .table td[data-label="Item"], .table td[data-label="Action"] { grid-column: 1 / -1; } .table td[data-label="Customer"], .table td[data-label="User"], .table td[data-label="Vendor"] { padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .table td[data-label="Amount"] { grid-column: 1; padding-top: 10px; margin-top: 6px; border-top: 1px dashed var(--border); } .table td[data-label="Status"] { grid-column: 2; padding-top: 10px; margin-top: 6px; border-top: 1px dashed var(--border); justify-content: flex-end; } .table td[data-label="Status"]::before { width: auto; } .table td.cell-act { position: absolute; top: 14px; right: 14px; } .table tr:has(.cell-act) { position: relative; } } /* ===================================================================== 14. TOOLBAR + PRODUCTS ===================================================================== */ .toolbar { display: flex; align-items: center; gap: 16px; padding: 14px 18px; flex-wrap: wrap; } .toolbar__search { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; height: 42px; } .toolbar__search .i { color: var(--text-3); } .toolbar__search input { flex: 1; background: none; border: none; outline: none; font-size: 0.88rem; } .toolbar__search--sm { height: 38px; flex: 0 1 280px; } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { padding: 7px 14px; border-radius: 20px; font-size: 0.82rem; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); transition: all 0.25s var(--ease); } .chip:hover { color: var(--text); border-color: var(--border-strong); } .chip.is-active { color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--accent)); border-color: transparent; } .select { padding: 0 14px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 0.85rem; font-weight: 500; outline: none; cursor: pointer; color: var(--text); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .select option, .field select option { background: var(--card-solid); color: var(--text); } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .pcard { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--card); backdrop-filter: blur(20px); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s; display: flex; flex-direction: column; opacity: 0; transform: translateY(20px); animation: cardIn 0.5s var(--ease-out) forwards; } @keyframes cardIn { to { opacity: 1; transform: translateY(0); } } .pcard:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); } .pcard__media { position: relative; height: 150px; overflow: hidden; } .pcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.4)); } .pcard__emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; transition: transform 0.5s var(--spring); } .pcard:hover .pcard__emoji { transform: scale(1.18) rotate(-6deg); } .pcard__cat { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 0.68rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(0,0,0,0.45); color: #fff; backdrop-filter: blur(8px); } .pcard__fav { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,0.45); color: #fff; backdrop-filter: blur(8px); transition: all 0.25s var(--spring); } .pcard__fav:hover { background: var(--rose); transform: scale(1.1); } .pcard__fav.is-on { color: var(--rose); } .pcard__stock-badge { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: 0.62rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; background: rgba(0,0,0,0.55); color: #fff; backdrop-filter: blur(8px); white-space: nowrap; } .pcard__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .pcard__name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; } .pcard__desc { font-size: 0.8rem; color: var(--text-2); flex: 1; } .pcard__stats { display: flex; align-items: center; gap: 12px; font-size: 0.76rem; color: var(--text-3); } .pcard__stats .star { color: var(--amber); } .pcard__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--border); margin-top: 4px; } .pcard__price { font-family: var(--font-num); font-weight: 700; font-size: 1.15rem; font-feature-settings: "tnum"; letter-spacing: -0.01em; } .pcard__price small { font-size: 0.7rem; color: var(--text-3); font-weight: 500; } .pcard__buy { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--accent)); transition: transform 0.25s var(--spring), box-shadow 0.3s; } .pcard__buy:hover { transform: scale(1.1) rotate(8deg); box-shadow: 0 6px 18px -4px var(--accent); } .empty-state { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--text-3); } .empty-state__emoji { font-size: 3rem; margin-bottom: 12px; } /* ===================================================================== 15. TOPLIST ===================================================================== */ .toplist { list-style: none; display: flex; flex-direction: column; gap: 4px; } .toplist__item { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 12px; transition: background 0.2s; } .toplist__item:hover { background: var(--surface); } .toplist__rank { font-family: var(--font-num); font-weight: 700; font-size: 0.85rem; color: var(--text-3); width: 22px; } .toplist__thumb { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; } .toplist__meta { flex: 1; min-width: 0; } .toplist__name { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .toplist__sub { font-size: 0.76rem; color: var(--text-3); } .toplist__bar { height: 5px; border-radius: 4px; background: var(--track); margin-top: 6px; overflow: hidden; } .toplist__bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transform-origin: left; animation: grow 1s var(--ease-out) both; } @keyframes grow { from { transform: scaleX(0); } } .toplist__val { font-family: var(--font-num); font-weight: 600; font-size: 0.9rem; font-feature-settings: "tnum"; } /* ===================================================================== 16. COUPONS ===================================================================== */ .form { display: flex; flex-direction: column; gap: 16px; } .field { display: flex; flex-direction: column; gap: 7px; } .field > span { font-size: 0.8rem; font-weight: 600; color: var(--text-2); } .field input, .field select, .field textarea { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; font-size: 0.9rem; outline: none; transition: all 0.25s; color: var(--text); font-family: var(--font-body); } .field textarea { resize: vertical; min-height: 80px; } .field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(var(--accent-rgb), 0.5); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14); } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .field__row { display: flex; gap: 8px; } .field__row input { flex: 1; } .coupon-list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .coupon { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong); background: var(--surface); position: relative; transition: all 0.3s var(--ease); } .coupon:hover { border-style: solid; transform: translateX(4px); } .coupon::before, .coupon::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); top: 50%; transform: translateY(-50%); left: -10px; } .coupon::after { left: auto; right: -10px; } .coupon__cut { flex-shrink: 0; width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-num); font-weight: 700; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--rose)); letter-spacing: -0.02em; } .coupon__code { font-family: var(--font-num); font-weight: 700; letter-spacing: 0.04em; } .coupon__meta { font-size: 0.76rem; color: var(--text-3); } .coupon__right { margin-left: auto; text-align: right; } .coupon__uses { font-size: 0.76rem; color: var(--text-2); } .coupon__bar { width: 80px; height: 5px; background: var(--track); border-radius: 4px; margin-top: 6px; overflow: hidden; margin-left: auto; } .coupon__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--accent)); } /* ===================================================================== 17. REVIEWS ===================================================================== */ .review-list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .review-card { display: flex; gap: 14px; padding: 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); transition: all 0.3s var(--ease); } .review-card:hover { border-color: var(--border-strong); transform: translateY(-2px); } .review-card__main { flex: 1; min-width: 0; } .review-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .review-card__name { font-weight: 600; font-size: 0.9rem; } .review-card__product { font-size: 0.76rem; color: var(--text-3); } .review-card__text { font-size: 0.86rem; color: var(--text-2); line-height: 1.55; } .review-card__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; } .review-card__date { font-size: 0.72rem; color: var(--text-3); } .review-card__reason { font-size: 0.78rem; color: var(--rose); background: rgba(244,63,94,0.06); padding: 8px 10px; border-radius: 8px; border-left: 3px solid var(--rose); margin-top: 6px; } .stars { display: inline-flex; gap: 1px; color: var(--amber); font-size: 0.85rem; letter-spacing: 1px; } .stars .empty { color: var(--text-3); opacity: 0.4; } /* Review-form emoji picker (user dashboard + storefront share these classes via the .usr-* prefix in user.js; the storefront uses .sf-* in store.css). */ .usr-emoji-toggle { position: absolute; right: 6px; bottom: 6px; background: var(--surface-hover, var(--surface)); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 1.2rem; padding: 2px 8px; line-height: 1; } .usr-emoji-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-hover, var(--surface)); } .usr-emoji-opt:hover { background: rgba(var(--accent-rgb, 99,102,241), 0.12); } .usr-star-widget { display: flex; gap: 6px; } /* ===================================================================== 18. SETTINGS — tabs, panels, toggle switch ===================================================================== */ .settings-layout { grid-template-columns: 220px 1fr; align-items: start; } .settings-nav { padding: 10px; position: sticky; top: 84px; } .tabs { display: flex; flex-direction: column; gap: 2px; } .tab { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; color: var(--text-2); font-weight: 600; font-size: 0.88rem; text-align: left; transition: all 0.25s var(--ease); } .tab:hover { color: var(--text); background: var(--surface-hover); } .tab.is-active { color: var(--text); background: linear-gradient(100deg, rgba(var(--accent-rgb), 0.22), transparent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.3); } .tab.is-active .i { color: var(--accent-2); } .tab-panel { display: none; animation: viewIn 0.4s var(--ease-out); } .tab-panel.is-active { display: block; } .profile-row { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; } .avatar--lg { width: 64px; height: 64px; font-size: 1.3rem; } .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: background 0.2s; } .switch-row:hover { background: var(--surface-hover); } .switch-row b { font-weight: 600; font-size: 0.9rem; } .switch-row .muted { margin: 2px 0 0; font-size: 0.78rem; } .switch { position: relative; flex-shrink: 0; display: inline-block; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .switch__track { display: block; width: 44px; height: 26px; border-radius: 20px; background: var(--track); border: 1px solid var(--border); transition: background 0.3s var(--ease); position: relative; } .switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-2); transition: transform 0.3s var(--spring), background 0.3s var(--ease); } .switch input:checked ~ .switch__track { background: linear-gradient(135deg, var(--accent-2), var(--accent)); border-color: transparent; } .switch input:checked ~ .switch__track::after { transform: translateX(18px); background: #fff; } /* ===================================================================== 19. SKELETON LOADER (for async/AJAX content) ===================================================================== */ .skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 50%, var(--surface) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; border-radius: 8px; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .skeleton-line { height: 14px; margin-bottom: 8px; } .skeleton-line--sm { height: 10px; width: 60%; } .skeleton-line--lg { height: 20px; width: 40%; } .skeleton-card { height: 140px; border-radius: var(--radius); } .skeleton-row { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); } .skeleton-row .skel-circle { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; } /* ===================================================================== 20. TOASTS ===================================================================== */ .toasts { position: fixed; bottom: 24px; right: 24px; z-index: 1100; display: flex; flex-direction: column; gap: 10px; } .toast { display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: 380px; padding: 14px 16px; border-radius: 14px; background: var(--card-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); animation: toastIn 0.4s var(--spring); } .toast.is-out { animation: toastOut 0.3s var(--ease) forwards; } @keyframes toastIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toastOut { to { transform: translateX(120%); opacity: 0; } } .toast__icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; } .toast--success .toast__icon { background: rgba(45,212,191,0.18); color: var(--teal); } .toast--info .toast__icon { background: rgba(var(--accent-rgb), 0.18); color: var(--accent-2); } .toast--error .toast__icon { background: rgba(251,113,133,0.18); color: var(--rose); } .toast--warning .toast__icon { background: rgba(245,158,11,0.18); color: var(--amber); } .toast__title { font-weight: 600; font-size: 0.88rem; } .toast__msg { font-size: 0.78rem; color: var(--text-2); } /* ===================================================================== 21. SCRIM + MODAL ===================================================================== */ .scrim { position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); } .app.is-menu-open .scrim { opacity: 1; pointer-events: auto; } @media (min-width: 861px) { .scrim { display: none; } } /* Modal (for confirmations) */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); } .modal-overlay.is-open { opacity: 1; pointer-events: auto; } .modal { background: var(--card-solid); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 460px; width: 100%; padding: 28px; transform: scale(0.92) translateY(10px); transition: transform 0.3s var(--spring); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; } .modal-overlay.is-open .modal { transform: scale(1) translateY(0); } .modal__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-shrink: 0; } .modal__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--accent-rgb), 0.16); color: var(--accent); flex-shrink: 0; } .modal__icon--danger { background: rgba(251,113,133,0.16); color: var(--rose); } .modal__icon--success { background: rgba(45,212,191,0.16); color: var(--success); } .modal__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; } /* Body scrolls when content exceeds the viewport — the modal itself never grows past calc(100vh - 40px), so tall detail views stay fully reachable. */ .modal__body { color: var(--text-2); font-size: 0.9rem; margin-bottom: 20px; line-height: 1.6; min-height: 0; overflow-y: auto; } .modal__actions { display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0; } /* Wide variant for form modals (multi-column fields, search dropdowns). */ .modal--wide { max-width: 540px; } @media (max-width: 600px) { .modal--wide { max-width: 100%; } } /* Extra-wide variant for dense detail views (admin campaign detail etc.). */ .modal--xwide { max-width: 860px; } @media (max-width: 900px) { .modal--xwide { max-width: 100%; } } /* Detail Modal — rich detail popups (orders, users, products, etc.) */ .dmodal-overlay { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); } .dmodal-overlay.is-open { opacity: 1; pointer-events: auto; } .dmodal { background: var(--card-solid); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 640px; max-height: 88vh; display: flex; flex-direction: column; transform: scale(0.94) translateY(16px); transition: transform 0.35s var(--spring); overflow: hidden; } .dmodal--wide { max-width: 920px; } .dmodal-overlay.is-open .dmodal { transform: scale(1) translateY(0); } .dmodal__header { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .dmodal__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--accent-rgb), 0.14); flex-shrink: 0; } .dmodal__icon svg { width: 24px; height: 24px; } .dmodal__headtext { flex: 1; min-width: 0; } .dmodal__title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.01em; } .dmodal__subtitle { font-size: 0.8rem; color: var(--text-3); margin-top: 2px; } .dmodal__close { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--text-3); background: var(--surface); transition: all 0.2s var(--ease); flex-shrink: 0; } .dmodal__close:hover { color: var(--text); background: var(--surface-hover); transform: rotate(90deg); } .dmodal__body { padding: 22px 24px; overflow-y: auto; flex: 1; } .dmodal__footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0; flex-wrap: wrap; } /* Detail modal content blocks */ .dmodal__section { margin-bottom: 22px; } .dmodal__section:last-child { margin-bottom: 0; } .dmodal__section-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); font-weight: 700; margin-bottom: 12px; } .dmodal__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .dmodal__grid--3 { grid-template-columns: repeat(3, 1fr); } .dmodal__cell { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; } .dmodal__cell .lbl { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 700; margin-bottom: 3px; } .dmodal__cell .val { font-size: 0.86rem; font-weight: 600; } .dmodal__cell .val--mono { font-family: var(--font-num); font-feature-settings: "tnum"; } .dmodal__lineitem { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 8px; } .dmodal__lineitem-emoji { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; } .dmodal__lineitem-info { flex: 1; min-width: 0; } .dmodal__lineitem-name { font-weight: 600; font-size: 0.86rem; } .dmodal__lineitem-sub { font-size: 0.74rem; color: var(--text-3); } .dmodal__lineitem-price { font-family: var(--font-num); font-weight: 700; font-size: 0.9rem; font-feature-settings: "tnum"; } .dmodal__total { display: flex; justify-content: space-between; align-items: center; padding: 14px 12px; margin-top: 8px; border-top: 1px dashed var(--border-strong); } .dmodal__total-label { font-weight: 600; font-size: 0.88rem; } .dmodal__total-value { font-family: var(--font-num); font-weight: 700; font-size: 1.25rem; color: var(--accent-2); letter-spacing: -0.02em; } .dmodal__timeline { display: flex; flex-direction: column; gap: 0; } .dmodal__timeline-item { display: flex; gap: 14px; padding-bottom: 18px; position: relative; } .dmodal__timeline-item:last-child { padding-bottom: 0; } .dmodal__timeline-item::before { content: ""; position: absolute; left: 9px; top: 22px; bottom: -4px; width: 2px; background: var(--border); } .dmodal__timeline-item:last-child::before { display: none; } .dmodal__timeline-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); flex-shrink: 0; z-index: 1; display: grid; place-items: center; margin-top: 2px; } .dmodal__timeline-dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .dmodal__timeline-dot--muted { border-color: var(--text-3); } .dmodal__timeline-dot--muted::after { background: var(--text-3); } .dmodal__timeline-dot--done { border-color: var(--teal); background: rgba(45,212,191,0.15); } .dmodal__timeline-dot--done::after { background: var(--teal); box-shadow: 0 0 6px var(--teal); } .dmodal__timeline-content { flex: 1; } .dmodal__timeline-title { font-weight: 600; font-size: 0.84rem; } .dmodal__timeline-time { font-size: 0.74rem; color: var(--text-3); } .dmodal__stat-row { display: flex; gap: 16px; flex-wrap: wrap; } .dmodal__stat { flex: 1; min-width: 90px; } .dmodal__stat .val { font-family: var(--font-num); font-weight: 700; font-size: 1.15rem; font-feature-settings: "tnum"; } .dmodal__stat .lbl { font-size: 0.72rem; color: var(--text-3); } /* ===================================================================== 22. 3D TILT ===================================================================== */ .tilt { transform-style: preserve-3d; will-change: transform; } /* ===================================================================== 22B. SUPPORT / INBOX — shared ticket chat layout (used by both vendor & super-admin support views) ===================================================================== */ .tickets-layout { display: grid; grid-template-columns: 360px 1fr; gap: 20px; min-height: 620px; } .tickets-layout > * { min-width: 0; } /* --- Inbox list panel --- */ .ticket-list-panel { display: flex; flex-direction: column; max-height: 72vh; padding: 0; overflow: hidden; } .ticket-list-panel .card__head { margin: 0 0 4px; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--card-solid); z-index: 2; border-radius: var(--radius) var(--radius) 0 0; backdrop-filter: blur(12px); } .ticket-list-panel .card__head .h2 { display: inline-flex; align-items: center; gap: 8px; } .ticket-list-panel .badge { font-size: 0.72rem; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: grid; place-items: center; background: rgba(var(--accent-rgb), 0.16); color: var(--accent-2); } .ticket-items { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px; overscroll-behavior: contain; } .ticket-item { position: relative; padding: 13px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease); } .ticket-item:hover { background: var(--surface-hover); border-color: var(--border-strong); transform: translateX(3px); } .ticket-item.is-active { background: linear-gradient(100deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.02)); border-color: rgba(var(--accent-rgb), 0.38); box-shadow: 0 8px 24px -14px rgba(var(--accent-rgb), 0.5); } .ticket-item.is-active::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(var(--accent-2), var(--accent)); } /* Unread marker for items with recent activity */ .ticket-item.is-unread .ticket-item__subject { color: var(--text); } .ticket-item.is-unread::after { content: ""; position: absolute; top: 16px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } .ticket-item__head { display: flex; justify-content: space-between; align-items: start; gap: 10px; margin-bottom: 6px; } .ticket-item__subject { font-weight: 600; font-size: 0.86rem; line-height: 1.35; color: var(--text); letter-spacing: -0.005em; } .ticket-item__meta { display: flex; gap: 6px; align-items: center; font-size: 0.73rem; color: var(--text-3); flex-wrap: wrap; margin-top: 2px; } .ticket-item__meta .pill { font-size: 0.66rem; padding: 2px 8px; } .ticket-item__meta + .ticket-item__meta { margin-top: 6px; opacity: 0.85; } .ticket-item__id { font-family: var(--font-num); font-weight: 600; font-size: 0.72rem; color: var(--text-3); font-feature-settings: "tnum"; } /* --- Conversation / detail panel --- */ .ticket-detail { display: flex; flex-direction: column; min-height: 620px; padding: 0; overflow: hidden; } .ticket-detail__head { padding: 20px 22px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 12px; background: linear-gradient(180deg, var(--surface), transparent); } .ticket-detail__subject { font-family: var(--font-display); font-weight: 700; font-size: 1.14rem; letter-spacing: -0.015em; line-height: 1.25; } .ticket-detail__head .ticket-item__meta { margin-top: 6px; } .ticket-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; padding: 14px 22px; border-bottom: 1px solid var(--border); } .ticket-meta-cell { padding: 10px 12px; background: var(--surface); border-radius: 10px; border: 1px solid var(--border); } .ticket-meta-cell .lbl { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); font-weight: 700; margin-bottom: 4px; } .ticket-meta-cell .val { font-size: 0.82rem; font-weight: 600; } /* --- Chat thread --- */ .chat-thread { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; max-height: 54vh; overscroll-behavior: contain; } .msg { display: flex; gap: 10px; max-width: 78%; animation: msgIn 0.3s var(--ease-out); } @keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .msg > div { min-width: 0; } .msg__sender { font-size: 0.7rem; font-weight: 600; color: var(--text-3); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .msg__bubble { padding: 10px 14px; border-radius: 14px; font-size: 0.85rem; line-height: 1.5; word-wrap: break-word; } .msg__time { font-family: var(--font-num); font-size: 0.66rem; color: var(--text-3); margin-top: 5px; font-feature-settings: "tnum"; } /* role alignment + bubble colors */ .msg--customer, .msg--vendor { align-self: flex-start; } .msg--customer .msg__bubble, .msg--vendor .msg__bubble { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .msg--admin, .msg--manager, .msg--me { align-self: flex-end; flex-direction: row-reverse; } .msg--admin .msg__sender, .msg--manager .msg__sender, .msg--me .msg__sender { justify-content: flex-end; } .msg--admin .msg__bubble, .msg--manager .msg__bubble, .msg--me .msg__bubble { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; border: none; border-bottom-right-radius: 4px; box-shadow: 0 8px 22px -12px rgba(var(--accent-rgb), 0.7); } .msg--system { align-self: center; max-width: 100%; } .msg--system .msg__bubble { background: transparent; color: var(--text-3); font-style: italic; font-size: 0.78rem; padding: 4px 0; } /* reply composer */ .chat-reply { display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface); } .chat-reply input { flex: 1; min-width: 0; background: var(--card-solid); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; font-size: 0.88rem; color: var(--text); outline: none; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .chat-reply input::placeholder { color: var(--text-3); } .chat-reply input:focus { border-color: rgba(var(--accent-rgb), 0.5); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14); } .chat-reply .btn { flex-shrink: 0; } /* empty state */ .chat-empty { display: grid; place-items: center; flex: 1; gap: 6px; color: var(--text-3); text-align: center; padding: 40px; } .chat-empty__emoji { font-size: 2.8rem; margin-bottom: 8px; opacity: 0.85; filter: drop-shadow(0 8px 20px rgba(var(--accent-rgb), 0.25)); } .chat-empty p { font-size: 0.86rem; } /* ===================================================================== 22C. MESSAGES — 1:1 direct messaging inbox (admin ↔ vendor ↔ customer) Shares the .tickets-layout / .msg / .chat-reply chrome above. Only the tab bar and conversation list item are new here. ===================================================================== */ /* Role-tab segmented control (Vendors | Customers | Admin) */ .msg-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--track); border-radius: 12px; margin-bottom: 4px; } .msg-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: none; background: none; color: var(--text-3); font-family: var(--font-body); font-weight: 600; font-size: 0.82rem; border-radius: 9px; cursor: pointer; transition: color 0.2s var(--ease), background 0.2s var(--ease); white-space: nowrap; } .msg-tab:hover { color: var(--text-2); } .msg-tab.is-active { color: var(--text); background: var(--surface); box-shadow: 0 2px 8px -2px rgba(0,0,0,0.3); } .msg-tab__count { font-family: var(--font-num); font-size: 0.7rem; font-weight: 700; font-feature-settings: "tnum"; padding: 1px 6px; border-radius: 8px; background: var(--surface-hover); color: var(--text-3); } .msg-tab.is-active .msg-tab__count { background: rgba(var(--accent-rgb), 0.18); color: var(--accent-2); } .msg-tab__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } .msg-tab__dot.is-empty { display: none; } /* Conversation list item — mirrors .ticket-item craft with an avatar */ .conv-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease); } .conv-item:hover { background: var(--surface-hover); border-color: var(--border-strong); transform: translateX(3px); } .conv-item.is-active { background: linear-gradient(100deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.02)); border-color: rgba(var(--accent-rgb), 0.38); box-shadow: 0 8px 24px -14px rgba(var(--accent-rgb), 0.5); } .conv-item.is-active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(var(--accent-2), var(--accent)); } .conv-item__avatar { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; color: #fff; flex-shrink: 0; background: var(--conv-grad, linear-gradient(135deg,var(--accent-2),var(--accent))); position: relative; } .conv-item__body { flex: 1; min-width: 0; } .conv-item__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .conv-item__name { font-weight: 600; font-size: 0.86rem; line-height: 1.25; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-item__time { font-family: var(--font-num); font-size: 0.66rem; color: var(--text-3); flex-shrink: 0; font-feature-settings: "tnum"; } .conv-item__preview { font-size: 0.76rem; color: var(--text-3); line-height: 1.4; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-item.is-unread .conv-item__name { color: var(--text); } .conv-item.is-unread .conv-item__preview { color: var(--text-2); font-weight: 500; } .conv-item__unread { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex-shrink: 0; } .conv-item__ctx { display: inline-flex; align-items: center; gap: 4px; font-size: 0.66rem; color: var(--accent-2); background: rgba(var(--accent-rgb), 0.1); padding: 1px 7px; border-radius: 6px; margin-top: 5px; font-weight: 600; } /* Conversation detail header — reuse ticket-detail__subject look, add avatar */ .conv-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--surface), transparent); } .conv-head__avatar { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 0.84rem; font-weight: 700; color: #fff; flex-shrink: 0; background: var(--conv-grad, linear-gradient(135deg,var(--accent-2),var(--accent))); } .conv-head__info { min-width: 0; } .conv-head__name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.015em; line-height: 1.2; } .conv-head__role { font-size: 0.74rem; color: var(--text-3); margin-top: 2px; display: flex; align-items: center; gap: 8px; } .conv-head__role .pill { font-size: 0.66rem; padding: 2px 8px; } /* ===================================================================== 22D. APPEARANCE / THEME — mode, accent, preset (vendor & super-admin) ===================================================================== */ .appearance-section { display: flex; flex-direction: column; gap: 28px; } .appear-group__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); margin-bottom: 12px; } /* Mode toggle — segmented light/dark */ .mode-toggle { display: flex; gap: 8px; max-width: 320px; } .mode-btn { flex: 1; padding: 13px 14px; border-radius: 13px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-family: var(--font-body); font-weight: 600; font-size: 0.86rem; transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.2s var(--ease); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; } .mode-btn .i { color: var(--text-3); transition: color 0.25s var(--ease); } .mode-btn:hover { border-color: var(--border-strong); color: var(--text); transform: translateY(-1px); } .mode-btn:hover .i { color: var(--text-2); } .mode-btn.is-active { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; border-color: transparent; box-shadow: 0 8px 22px -10px rgba(var(--accent-rgb), 0.7); } .mode-btn.is-active .i { color: #fff; } /* Accent swatches */ .accent-swatches { display: flex; gap: 14px; flex-wrap: wrap; } .accent-swatch { width: 46px; height: 46px; border-radius: 14px; cursor: pointer; position: relative; border: 2px solid transparent; box-shadow: 0 4px 12px -4px rgba(0,0,0,0.3); transition: transform 0.25s var(--spring), box-shadow 0.25s var(--ease); } .accent-swatch:hover { transform: scale(1.12) rotate(-3deg); } .accent-swatch.is-active { box-shadow: 0 0 0 3px var(--card-solid), 0 0 0 5px currentColor; } .accent-swatch.is-active::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.15rem; text-shadow: 0 1px 3px rgba(0,0,0,0.4); } /* Theme preset cards — mini live preview */ .preset-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .preset-card { padding: 12px; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.3s var(--ease); text-align: center; } .preset-card:hover { border-color: var(--border-strong); transform: translateY(-3px); } .preset-card.is-active { border-color: var(--accent); box-shadow: 0 12px 28px -14px rgba(var(--accent-rgb), 0.55); } .preset-card__swatch { height: 62px; border-radius: 10px; margin-bottom: 12px; position: relative; overflow: hidden; } /* tiny fake-UI overlay on each preview swatch for a live-dashboard feel */ .preset-card__swatch::before { content: ""; position: absolute; top: 10px; left: 10px; width: 30%; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.7); } .preset-card__swatch::after { content: ""; position: absolute; bottom: 10px; left: 10px; right: 10px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.22); box-shadow: 0 -12px 0 -2px rgba(255,255,255,0.22); } .preset-card__name { font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; letter-spacing: -0.005em; } .preset-card__sub { font-size: 0.7rem; color: var(--text-3); margin-top: 2px; } /* ===================================================================== 22E. PRODUCT FIELD GROUPS (dynamic template sections) ===================================================================== */ .field-group { margin-bottom: 0; } .field-group + .field-group { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } .field-group__title { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: -0.005em; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .field-group__title::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); flex-shrink: 0; } .field-group .field-grid { gap: 12px; } /* ===================================================================== 23. RESPONSIVE ===================================================================== */ @media (max-width: 1180px) { .kpis { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 980px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } .kpis--3 { grid-template-columns: 1fr; } } @media (max-width: 860px) { .app { grid-template-columns: 1fr; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(var(--sidebar-w), 84vw); height: 100dvh; transform: translateX(-105%); transition: transform 0.4s var(--ease); z-index: 60; overflow-y: auto; padding-top: max(22px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); } .app.is-menu-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); } .sidebar__collapse { display: none; } .sidebar__brand { justify-content: flex-start; } .topbar__menu { display: grid; } .content { padding: 16px; } .topbar { padding: 12px 16px; } .search { width: 42px; max-width: none; padding: 0; justify-content: center; cursor: pointer; overflow: hidden; transition: width 0.35s var(--ease), padding 0.35s var(--ease); } .search input, .search kbd { display: none; } .search:focus-within, .search.is-expanded { width: 100%; flex: 1; padding: 0 14px; justify-content: flex-start; } .search:focus-within input, .search.is-expanded input { display: block; } .userchip__meta { display: none; } .userchip { padding: 5px; } .userchip .i--sm { display: none; } .divider-v { display: none; } .settings-layout { grid-template-columns: 1fr; } .settings-nav { position: static; } .tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; } .tabs::-webkit-scrollbar { height: 0; } .tab { flex-shrink: 0; white-space: nowrap; } .conv-item__avatar { width: 34px; height: 34px; font-size: 0.7rem; border-radius: 9px; } .conv-item { padding: 10px 12px; } .msg-tabs { width: 100%; } .msg-tab { flex: 1; justify-content: center; padding: 8px 10px; font-size: 0.78rem; } } /* Support inbox → stack list above conversation on narrow screens */ @media (max-width: 980px) { .tickets-layout { grid-template-columns: 1fr; min-height: auto; } .ticket-list-panel { max-height: 420px; } .ticket-detail { min-height: 480px; } .chat-thread { max-height: 60vh; } } @media (max-width: 560px) { :root { --radius: 16px; } .content { padding: 12px; } .topbar { padding: 10px 12px; gap: 8px; } .view.is-active { gap: 14px; } .kpis { grid-template-columns: 1fr; gap: 12px; } .kpi__value { font-size: 1.5rem; } .kpi { padding: 16px; } .view__head { flex-direction: column; align-items: stretch; gap: 12px; } .h1 { font-size: 1.35rem; } .view__actions { width: 100%; } .view__actions .btn { flex: 1; padding: 10px 12px; font-size: 0.82rem; } .card { padding: 14px; border-radius: var(--radius); } .toolbar { flex-direction: column; align-items: stretch; gap: 10px; } .toolbar__search { width: 100%; } .toolbar__right { width: 100%; } .select { width: 100%; } .chips { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; } .chip { flex-shrink: 0; } .chips::-webkit-scrollbar { height: 0; } .product-grid { grid-template-columns: 1fr; gap: 14px; } .pcard__media { height: 110px; } .chart-wrap { min-height: 200px; } .donut-wrap { width: 150px; height: 150px; } .donut-center__num { font-size: 1.3rem; } .field-grid { grid-template-columns: 1fr; } .coupon { flex-wrap: wrap; gap: 8px; } .coupon__right { width: 100%; } /* Chat/Messages tight mobile */ .ticket-list-panel { max-height: 300px; } .ticket-detail { min-height: 400px; } .chat-thread { max-height: 50vh; gap: 12px; padding: 14px; } .msg { max-width: 90%; } .msg__bubble { font-size: 0.82rem; padding: 8px 12px; } .chat-reply { padding: 10px 14px; flex-direction: column; gap: 8px; } .chat-reply input { font-size: 0.82rem; padding: 10px 14px; width: 100%; } .chat-reply .btn { width: 100%; } /* Tighter product card stats row */ .pcard__stats { flex-wrap: wrap; gap: 6px; } .coupon__right { width: 100%; } .toasts { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); } .toast { min-width: 0; max-width: none; width: 100%; } .review-card { flex-direction: column; } .review-card__actions { flex-direction: row; align-items: center; justify-content: flex-end; } /* Currency menu spans full width on phones so it doesn't overflow */ .currency-menu { min-width: 0; right: -40px; left: auto; width: 240px; } .currency-btn .code { display: none; } /* show only symbol on tight screens */ /* Detail modal → full-screen sheet on phones */ .dmodal-overlay { padding: 0; } .dmodal { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; } .dmodal__grid, .dmodal__grid--3 { grid-template-columns: 1fr; } } @media (max-width: 380px) { .content { padding: 12px; } .topbar { padding: 8px 10px; } .kpi__value { font-size: 1.45rem; } } @media (max-width: 860px) and (orientation: landscape) and (max-height: 480px) { .kpis { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .orb, .brand__cube, .nav__pulse { animation: none !important; } } /* Global Notification Dropdown Styles Section CSS (super-admin.css / user.css / vendor.css) may override positioning & specifics. Use visibility/opacity rather than display:none so a flex column layout (head/list/footer) keeps working when open. */ .notif-dropdown { position: fixed; top: 64px; right: 20px; background: var(--card-solid); border: 1px solid var(--border-strong); border-radius: 16px; width: 360px; max-width: calc(100vw - 40px); max-height: 480px; box-shadow: var(--shadow-lg); z-index: 100; display: flex; flex-direction: column; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-10px) scale(0.96); transition: all 0.25s var(--spring); } .notif-dropdown.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 0.84rem; transition: background 0.15s; } .notif-item:hover { background: var(--surface-hover); } .notif-item--unread { background: rgba(var(--accent-rgb), 0.04); } .notif-item__title { font-weight: 600; margin-bottom: 2px; color: var(--text); } .notif-item__time { font-size: 0.72rem; color: var(--text-3); } .notif-dropdown__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); } .notif-dropdown__title { font-weight: 700; font-size: 0.9rem; } .notif-dropdown__list { flex: 1; overflow-y: auto; padding: 6px; } .notif-dropdown__item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; } .notif-dropdown__item:hover { background: var(--surface-hover); } .notif-dropdown__icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 0.9rem; background: var(--surface); flex-shrink: 0; } .notif-dropdown__body { flex: 1; min-width: 0; } .notif-dropdown__title-text { font-weight: 600; font-size: 0.82rem; color: var(--text); } .notif-dropdown__text { font-size: 0.78rem; color: var(--text-2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notif-dropdown__time { font-size: 0.68rem; color: var(--text-3); margin-top: 3px; } .notif-dropdown__footer { padding: 10px 16px; text-align: center; border-top: 1px solid var(--border); }