/* ========================================================================== Shopline Analytics (Demo) - styles Neutral slate UI with a single teal accent. Light by default, dark via [data-theme="dark"] on . ========================================================================== */ /* ---------- Design tokens ---------- */ :root { --ribbon-h: 36px; --sidebar-w: 248px; --sidebar-w-collapsed: 76px; --radius: 14px; --radius-sm: 9px; --bg: #f5f7fa; --surface: #ffffff; --surface-2: #f1f4f8; --surface-3: #e8edf3; --border: #e2e8f0; --border-strong: #cbd5e1; --text: #0f172a; --text-2: #334155; --muted: #64748b; --faint: #94a3b8; --accent: #0d9488; --accent-strong: #0f766e; --accent-soft: rgba(13, 148, 136, 0.1); --accent-contrast: #ffffff; --focus: #0d9488; --up: #047857; --up-bg: rgba(16, 185, 129, 0.12); --down: #b91c1c; --down-bg: rgba(239, 68, 68, 0.1); /* Channel palette */ --c1: #0d9488; --c2: #6366f1; --c3: #f59e0b; --c4: #ec4899; --c5: #0ea5e9; --grid: #e8edf3; --axis: #64748b; --prev-line: #94a3b8; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.05); --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.18); /* Status pills */ --st-paid-fg: #4338ca; --st-paid-bg: #eef2ff; --st-ship-fg: #0369a1; --st-ship-bg: #e0f2fe; --st-deliv-fg: #047857; --st-deliv-bg: #d1fae5; --st-ref-fg: #b91c1c; --st-ref-bg: #fee2e2; --st-pend-fg: #a16207; --st-pend-bg: #fef3c7; color-scheme: light; } :root[data-theme="dark"] { --bg: #0b1120; --surface: #111a2e; --surface-2: #17223a; --surface-3: #1f2c47; --border: #22304b; --border-strong: #334463; --text: #e8eef8; --text-2: #c3cedf; --muted: #8d9bb3; --faint: #64748b; --accent: #2dd4bf; --accent-strong: #5eead4; --accent-soft: rgba(45, 212, 191, 0.14); --accent-contrast: #042f2e; --focus: #5eead4; --up: #34d399; --up-bg: rgba(52, 211, 153, 0.14); --down: #f87171; --down-bg: rgba(248, 113, 113, 0.14); --c1: #2dd4bf; --c2: #818cf8; --c3: #fbbf24; --c4: #f472b6; --c5: #38bdf8; --grid: #1d2942; --axis: #8d9bb3; --prev-line: #64748b; --shadow-sm: none; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55); --st-paid-fg: #a5b4fc; --st-paid-bg: rgba(99, 102, 241, 0.18); --st-ship-fg: #7dd3fc; --st-ship-bg: rgba(14, 165, 233, 0.16); --st-deliv-fg: #6ee7b7; --st-deliv-bg: rgba(16, 185, 129, 0.16); --st-ref-fg: #fca5a5; --st-ref-bg: rgba(239, 68, 68, 0.16); --st-pend-fg: #fcd34d; --st-pend-bg: rgba(245, 158, 11, 0.16); color-scheme: dark; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } button, input, select { font: inherit; color: inherit; } button { cursor: pointer; } a { color: var(--accent-strong); } svg { display: block; flex-shrink: 0; } [hidden] { display: none !important; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; } .skip-link { position: fixed; top: calc(var(--ribbon-h) + 8px); left: 8px; z-index: 200; padding: 10px 14px; background: var(--surface); color: var(--text); border-radius: 8px; box-shadow: var(--shadow-lg); transform: translateY(-200%); } .skip-link:focus { transform: none; } /* ---------- Demo ribbon ---------- */ .demo-ribbon { position: fixed; inset: 0 0 auto 0; height: var(--ribbon-h); z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: #0f172a; color: #cbd5e1; font-size: 12.5px; border-bottom: 1px solid #1e293b; } .demo-ribbon__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .demo-ribbon__short { display: none; } .demo-ribbon__link { flex-shrink: 0; color: #f8fafc; font-weight: 600; text-decoration: none; padding: 6px 2px; } .demo-ribbon__link:hover { text-decoration: underline; } .demo-ribbon__link:focus-visible { outline-color: #5eead4; } /* ---------- App shell ---------- */ .app { display: flex; min-height: 100vh; padding-top: var(--ribbon-h); } .sidebar { position: sticky; top: var(--ribbon-h); height: calc(100vh - var(--ribbon-h)); width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 18px 14px; background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; z-index: 60; } .sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; } .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: var(--accent-contrast); flex-shrink: 0; } .brand-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; } .icon-btn.sidebar__close { display: none; margin-left: auto; } .sidebar__nav { flex: 1; } .sidebar__nav ul { display: flex; flex-direction: column; gap: 2px; } .nav-link { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-weight: 500; transition: background-color .15s, color .15s; } .nav-link svg { color: var(--muted); } .nav-link:hover { background: var(--surface-2); color: var(--text); } .nav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; } .nav-link[aria-current="page"] svg { color: var(--accent); } .user-chip { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); } .user-chip__avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; } .user-chip__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .user-chip__name { font-weight: 600; } .user-chip__role { color: var(--muted); font-size: 12px; } .sidebar-backdrop, .drawer-backdrop { position: fixed; inset: var(--ribbon-h) 0 0 0; background: rgba(2, 6, 23, 0.45); z-index: 55; animation: fade-in .2s ease; } .drawer-backdrop { z-index: 80; } .main { flex: 1; min-width: 0; /* lets wide content shrink instead of widening the page */ display: flex; flex-direction: column; } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: var(--ribbon-h); z-index: 40; display: flex; align-items: center; gap: 16px; padding: 14px 28px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .topbar__title { display: contents; } .topbar__title > div { order: 1; min-width: 0; margin-right: auto; } .topbar__controls { order: 2; display: flex; align-items: center; gap: 12px; } .theme-toggle { order: 3; } .icon-btn.hamburger { display: none; order: 0; } h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; } .updated { color: var(--muted); font-size: 12.5px; } .updated::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); vertical-align: 1px; } .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-2); transition: background-color .15s, border-color .15s; } .icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } .search { position: relative; width: 280px; } .search__icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .search input { width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; } .search input::placeholder { color: var(--faint); } .search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Segmented control (native radios for free keyboard support) */ .segmented { display: inline-flex; margin: 0; padding: 3px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); min-width: 0; } .segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .segmented label { display: grid; place-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px; color: var(--muted); font-weight: 500; font-size: 13px; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color .15s, color .15s; } .segmented label:hover { color: var(--text); } .segmented input:checked + label { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 0 0 1px var(--border); } .segmented input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 1px; } .seg-short { display: none; } /* ---------- Content ---------- */ main { width: 100%; max-width: 1600px; margin: 0 auto; padding: 20px 28px 48px; outline: none; } .range-caption { color: var(--muted); font-size: 13px; margin-bottom: 14px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; } .card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; } .card__head--wrap { flex-wrap: wrap; } .card__title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .card__sub { color: var(--muted); font-size: 12.5px; } /* KPI tiles */ .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } .kpi { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "value value" "delta spark"; column-gap: 12px; padding: 16px 18px; overflow: hidden; } .kpi__label { grid-area: label; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 6px; } .kpi__value { grid-area: value; font-size: 26px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi__delta { grid-area: delta; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--muted); } .delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 5px; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; } .delta--up { color: var(--up); background: var(--up-bg); } .delta--down { color: var(--down); background: var(--down-bg); } .delta--flat { color: var(--muted); background: var(--surface-2); } .kpi__spark { grid-area: spark; align-self: end; width: 88px; height: 36px; margin-top: 6px; } .kpi__spark svg { width: 100%; height: 100%; overflow: visible; } .spark-line { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; } .spark-area { fill: var(--accent-soft); stroke: none; } .kpi--down .spark-line { stroke: var(--down); } .kpi--down .spark-area { fill: var(--down-bg); } .spark-dot { fill: var(--accent); } .kpi--down .spark-dot { fill: var(--down); } /* Layout grid */ .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; } .card--chart { grid-column: span 8; } .card--donut { grid-column: span 4; align-self: stretch; } .card--table { grid-column: span 8; } .card--products { grid-column: span 4; } /* ---------- Revenue chart ---------- */ .chart-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; color: var(--text-2); font-size: 12.5px; } .legend-key { display: inline-flex; align-items: center; gap: 7px; } .swatch { display: inline-block; width: 16px; height: 0; border-top: 2.5px solid var(--accent); border-radius: 2px; } .swatch--dashed { border-top: 2px dashed var(--prev-line); } .switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; user-select: none; } .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .switch__track { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color .15s; } .switch__thumb { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform .18s ease; } .switch input:checked + .switch__track { background: var(--accent); border-color: var(--accent); } .switch input:checked + .switch__track .switch__thumb { transform: translateX(14px); } .switch input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; } .switch__text { display: inline-flex; align-items: center; gap: 7px; } .chart { position: relative; padding: 4px 12px 12px 4px; } .chart__svg { width: 100%; height: 290px; touch-action: pan-y; } .chart__svg svg { width: 100%; height: 100%; overflow: visible; } .chart__svg text { font-family: inherit; } .grid-line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; } .axis-text { fill: var(--axis); font-size: 11.5px; font-variant-numeric: tabular-nums; } .rev-area { fill: url(#revGradient); } .rev-grad-top { stop-color: var(--accent); stop-opacity: 0.22; } .rev-grad-bottom { stop-color: var(--accent); stop-opacity: 0; } .rev-line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; } .prev-line { fill: none; stroke: var(--prev-line); stroke-width: 1.8; stroke-dasharray: 5 5; stroke-linecap: round; } .crosshair { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; } .hover-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; } .hover-dot--prev { stroke: var(--prev-line); } .hit-area { fill: transparent; cursor: crosshair; } .chart-tip { position: absolute; top: 0; left: 0; z-index: 5; min-width: 164px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 12.5px; pointer-events: none; } .chart-tip__date { font-weight: 600; margin-bottom: 6px; color: var(--text); } .chart-tip__row { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); } .chart-tip__row strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .chart-tip__row--prev { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--border); } /* ---------- Donut ---------- */ .donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 10px 20px 20px; } .donut { position: relative; width: 190px; height: 190px; } .donut svg { width: 100%; height: 100%; } .donut-seg { fill: none; stroke-width: 26; transition: opacity .2s, stroke-width .2s; cursor: pointer; } .donut.has-active .donut-seg { opacity: 0.28; } .donut.has-active .donut-seg.is-active { opacity: 1; stroke-width: 32; } .donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; } .donut-center__label { color: var(--muted); font-size: 12px; } .donut-center__value { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .c1 { stroke: var(--c1); background: var(--c1); } .c2 { stroke: var(--c2); background: var(--c2); } .c3 { stroke: var(--c3); background: var(--c3); } .c4 { stroke: var(--c4); background: var(--c4); } .c5 { stroke: var(--c5); background: var(--c5); } .donut-legend { width: 100%; display: flex; flex-direction: column; gap: 2px; } .donut-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: 8px; cursor: default; transition: background-color .15s, opacity .15s; } .donut-legend li:hover, .donut-legend li.is-active { background: var(--surface-2); } .donut-legend.has-active li:not(.is-active) { opacity: 0.55; } .legend-dot { width: 10px; height: 10px; border-radius: 3px; } .legend-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .legend-pct { color: var(--muted); font-variant-numeric: tabular-nums; } .legend-val { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; } /* ---------- Top products ---------- */ .top-products { display: flex; flex-direction: column; gap: 14px; padding: 12px 20px 20px; counter-reset: rank; } .tp { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "rank name val" "rank bar bar"; column-gap: 10px; row-gap: 6px; align-items: center; } .tp__rank { grid-area: rank; align-self: start; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; } .tp__name { grid-area: name; min-width: 0; } .tp__title { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tp__meta { color: var(--muted); font-size: 12px; } .tp__val { grid-area: val; align-self: start; font-weight: 600; font-variant-numeric: tabular-nums; } .tp__bar { grid-area: bar; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .tp__fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--c5))); transform-origin: left; transition: width .5s cubic-bezier(.2, .7, .2, 1); } /* ---------- Buttons & select ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 500; font-size: 13.5px; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s; } .btn:hover { background: var(--surface-2); border-color: var(--border-strong); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn--ghost { min-width: 38px; padding: 0 8px; } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } .table-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .select { position: relative; display: inline-block; } .select::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .select select { appearance: none; -webkit-appearance: none; min-height: 38px; padding: 0 34px 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 13.5px; cursor: pointer; } .select select:hover { border-color: var(--border-strong); } /* ---------- Orders table ---------- */ .table-scroll { position: relative; overflow-x: auto; margin-top: 8px; } .orders { width: 100%; border-collapse: collapse; font-size: 13.5px; } .orders th { position: relative; padding: 0; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); white-space: nowrap; } .orders th button { display: inline-flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; padding: 0 16px; border: 0; background: none; color: inherit; font-weight: inherit; text-align: inherit; letter-spacing: 0.02em; text-transform: uppercase; font-size: 11.5px; } .orders th button:hover { color: var(--text); } .orders th.num button { justify-content: flex-end; } .sort-ico { width: 8px; height: 10px; opacity: 0.35; background: currentColor; clip-path: polygon(50% 0, 100% 40%, 0 40%, 0 60%, 100% 60%, 50% 100%); } .orders th[aria-sort="ascending"] .sort-ico { opacity: 1; clip-path: polygon(50% 0, 100% 60%, 0 60%); color: var(--accent); } .orders th[aria-sort="descending"] .sort-ico { opacity: 1; clip-path: polygon(0 40%, 100% 40%, 50% 100%); color: var(--accent); } .orders th[aria-sort="ascending"] button, .orders th[aria-sort="descending"] button { color: var(--text); } .orders td { padding: 11px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; } .orders tbody tr { cursor: pointer; transition: background-color .12s; } .orders tbody tr:hover { background: var(--surface-2); } .orders tbody tr:last-child td { border-bottom: 0; } .orders .num { text-align: right; font-variant-numeric: tabular-nums; } .order-link { border: 0; background: none; padding: 4px 0; color: var(--accent-strong); font-weight: 600; font-variant-numeric: tabular-nums; } .order-link:hover { text-decoration: underline; } .cust { display: flex; flex-direction: column; line-height: 1.3; } .cust__name { font-weight: 500; color: var(--text); } .cust__city, .date__time { color: var(--muted); font-size: 12px; } .date { display: flex; flex-direction: column; line-height: 1.3; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill--paid { color: var(--st-paid-fg); background: var(--st-paid-bg); } .pill--shipped { color: var(--st-ship-fg); background: var(--st-ship-bg); } .pill--delivered { color: var(--st-deliv-fg); background: var(--st-deliv-bg); } .pill--refunded { color: var(--st-ref-fg); background: var(--st-ref-bg); } .pill--pending { color: var(--st-pend-fg); background: var(--st-pend-bg); } .chan { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); } .chan__dot { width: 8px; height: 8px; border-radius: 50%; } .empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 44px 20px 40px; color: var(--faint); } .empty__title { color: var(--text); font-weight: 600; font-size: 15px; margin-top: 6px; } .empty__text { color: var(--muted); margin-bottom: 10px; } .table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } .pager { display: flex; align-items: center; gap: 8px; } .pager__label { color: var(--text-2); min-width: 92px; text-align: center; } /* ---------- Drawer ---------- */ .drawer { position: fixed; top: var(--ribbon-h); right: 0; bottom: 0; z-index: 90; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: slide-in .26s cubic-bezier(.2, .7, .2, 1); } .drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 16px; border-bottom: 1px solid var(--border); } .drawer__eyebrow { color: var(--muted); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; } .drawer h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; } .drawer__body { flex: 1; overflow-y: auto; padding: 18px 22px 28px; display: flex; flex-direction: column; gap: 22px; overscroll-behavior: contain; } .drawer h3 { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; } .meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } .meta-grid dt { color: var(--muted); font-size: 12px; } .meta-grid dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; } .items { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; } .item + .item { border-top: 1px solid var(--border); } .item__thumb { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; } .item__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item__meta { color: var(--muted); font-size: 12px; } .item__price { font-weight: 600; font-variant-numeric: tabular-nums; } .totals { display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; } .totals div { display: flex; justify-content: space-between; color: var(--text-2); } .totals .totals__grand { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text); font-weight: 700; font-size: 16px; } .timeline { position: relative; display: flex; flex-direction: column; gap: 16px; } .tl { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; } .tl::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: -18px; width: 2px; background: var(--border); } .tl:last-child::before { display: none; } .tl.is-done::before { background: var(--accent); } .tl__dot { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; } .tl.is-done .tl__dot { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); } .tl.is-bad .tl__dot { border-color: var(--down); background: var(--down); color: #fff; } .tl__title { font-weight: 600; } .tl:not(.is-done):not(.is-bad) .tl__title { color: var(--muted); font-weight: 500; } .tl__time { color: var(--muted); font-size: 12px; } /* ---------- Placeholder ---------- */ .placeholder { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 560px; margin: 48px auto; padding: 44px 28px; } .placeholder h2 { font-size: 20px; font-weight: 700; } .placeholder p { color: var(--muted); margin-bottom: 8px; } .placeholder__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; } /* ---------- Animations ---------- */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } } .is-fading { animation: fade-in .35s ease; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1360px) { .search { width: 220px; } } @media (max-width: 1199px) { /* Sidebar collapses to icons */ .sidebar { width: var(--sidebar-w-collapsed); padding: 18px 12px; align-items: center; } .sidebar .sidebar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sidebar__brand { padding: 4px 0 18px; } .nav-link { justify-content: center; padding: 8px; width: 44px; height: 44px; } .user-chip { padding: 4px; border: 0; background: none; } .card--chart, .card--table { grid-column: 1 / -1; } .card--donut, .card--products { grid-column: span 6; } .card--products { grid-row: 2; } /* sit next to the donut, above the table */ .card--table { grid-row: 3; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .donut-wrap { flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; } .donut-legend { flex: 1 1 220px; } } @media (max-width: 1060px) { .topbar { flex-wrap: wrap; } .topbar__controls { order: 4; width: 100%; } .search { flex: 1; width: auto; } } @media (max-width: 899px) { /* Sidebar becomes an off-canvas drawer */ .icon-btn.hamburger { display: inline-grid; } .sidebar { position: fixed; top: var(--ribbon-h); left: 0; bottom: 0; height: auto; width: min(280px, 86vw); align-items: stretch; padding: 18px 14px; transform: translateX(-105%); visibility: hidden; transition: transform .25s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .25s; box-shadow: var(--shadow-lg); } .sidebar.is-open { transform: none; visibility: visible; transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .sidebar .sidebar__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; } .sidebar__brand { padding: 4px 4px 18px 8px; } .icon-btn.sidebar__close { display: inline-grid; } .nav-link { justify-content: flex-start; width: auto; height: auto; min-height: 44px; padding: 8px 12px; } .user-chip { padding: 10px; border: 1px solid var(--border); background: var(--surface-2); } .topbar { padding: 12px 16px; gap: 12px; } main { padding: 16px 16px 40px; } } @media (max-width: 719px) { .card--donut, .card--products, .card--chart, .card--table { grid-column: 1 / -1; grid-row: auto; } .topbar__controls { flex-direction: column; align-items: stretch; gap: 10px; } .search { width: 100%; } .segmented { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .segmented label { padding: 0 6px; } .chart__svg { height: 240px; } .card__head { padding: 16px 16px 4px; flex-wrap: wrap; } .top-products { padding: 12px 16px 18px; } .donut-wrap { padding: 8px 16px 18px; } /* Orders table -> stacked cards */ .table-scroll { overflow: visible; } .orders, .orders thead, .orders tbody, .orders tr, .orders td { display: block; width: 100%; } /* Column headers become a row of wrap-around sort chips */ .orders thead tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 10px; } .orders th { display: block; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); } .orders th button { min-height: 34px; padding: 0 12px; font-size: 11px; } .orders th.num button { justify-content: flex-start; } .orders tbody { display: flex; flex-direction: column; gap: 10px; padding: 4px 12px 12px; } .orders tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id total" "cust status" "date chan"; gap: 6px 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .orders td { padding: 0; border: 0; white-space: normal; min-width: 0; } .orders td[data-col="id"] { grid-area: id; } .orders td[data-col="total"] { grid-area: total; font-weight: 700; font-size: 15px; } .orders td[data-col="customer"] { grid-area: cust; } .orders td[data-col="status"] { grid-area: status; text-align: right; } .orders td[data-col="date"] { grid-area: date; } .orders td[data-col="channel"] { grid-area: chan; text-align: right; font-size: 12.5px; } .date { flex-direction: row; gap: 6px; color: var(--muted); font-size: 12px; } .date__day { color: var(--muted); } .order-link { min-height: 40px; } } @media (max-width: 520px) { .kpis { grid-template-columns: minmax(0, 1fr); gap: 12px; } .kpi__value { font-size: 24px; } .seg-long { display: none; } .seg-short { display: inline; } .demo-ribbon { padding: 0 12px; font-size: 12px; } .demo-ribbon__full { display: none; } .demo-ribbon__short { display: inline; } .drawer__head, .drawer__body { padding-left: 16px; padding-right: 16px; } .table-foot { justify-content: center; } .donut { width: 170px; height: 170px; } } /* Touch devices: comfortable targets and no iOS zoom on focus */ @media (pointer: coarse) { input, select, textarea { font-size: 16px !important; } .btn, .select select, .search input { min-height: 44px; } .segmented label { min-height: 40px; } .btn--ghost { min-width: 44px; } .icon-btn { width: 44px; height: 44px; } .switch { min-height: 40px; } .orders th button { min-height: 44px; } .order-link { min-height: 40px; } .donut-legend li { min-height: 44px; } .demo-ribbon__link { padding: 9px 2px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }