/* Zenit Analytics – dashboard shell. Two themes, switchable (data-theme on , default follows the OS): - Light: warm light-grey plane, solid white cards with a large radius, soft shadows. Neutral action colour is near-black; the data accent is the brand teal #009692. (Reference: the client's light-dashboard mock.) - Dark: deep navy plane, navy cards, white text. Neutral action colour is near-white; the data accent is coral #f2795c. (Reference: the client's dark-dashboard mock.) Each theme therefore has one neutral action colour (--btn, black/white) and one data accent (--series, teal/coral). Type is Inter. --surface/--plane and the --series* palette are read by the chart JS, so they stay solid. */ /* Inter, self-hosted (variable weight 100-900) - no external requests. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/InterVariable.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("fonts/InterVariable-Italic.woff2") format("woff2"); } /* Colour system - David's intentional styling. Note the split: --surface stays SOLID (chart JS reads it: tooltips, cohort header; and dropdowns/popovers need it opaque to stay readable). Only --card carries the translucent card fill in dark. */ :root { color-scheme: light; --plane: #f7f8f7; --surface: #ffffff; --surface-2: #f1f2f1; --card: #ffffff; --ink: #17191b; --ink-2: #565c5b; --muted: #949a98; --grid: #edefee; --baseline: #d7dbd9; --border: rgba(20, 22, 24, .09); --btn: #17191b; --btn-ink: #ffffff; --chip-bg: #eceeed; --series: #70bfbd; --series-wash: rgba(0, 150, 146, .12); --series-2: #f2795c; --series-3: #4f5dc4; --series-4: #d8a600; --series-5: #6f42c1; /* Fixed theme -> hue mapping, read by the chart JS: the colour follows the theme through every chart, never its position in the dataset. Only Atmos shifts between light and dark (its teal needs more punch on navy); the other four are the client's picks and hold in both. */ --theme-atmos: #70bfbd; --theme-gravity: #f2795c; --theme-horizon: #7faec2; --theme-sphere: #f2d4b0; --theme-stratus: #95979f; /* Semantic brand pair (same in both themes): teal = positive, coral = cancellation/neutral. Defined once here; inherited by the dark blocks. */ --pos: #70bfbd; --pos-wash: rgba(112, 191, 189, .16); --neg: #f1795c; --neg-wash: rgba(241, 121, 92, .16); --good: #0a7d52; --warn: #b3860a; --bad: #c22a54; --glow: rgba(255, 255, 255, .10); --shadow: 0 1px 2px rgba(20, 22, 24, .03), 0 8px 22px -14px rgba(20, 22, 24, .14); --shadow-pop: 0 2px 8px rgba(20, 22, 24, .08), 0 24px 60px -24px rgba(20, 22, 24, .30); } /* Dark tokens live in a mixin we apply twice: on an explicit choice, and on the OS setting when the user has not chosen light. */ :root[data-theme="dark"] { color-scheme: dark; --plane: #10131e; --surface: #191f31; --surface-2: #1b2236; --card: rgba(71, 86, 133, .10); --ink: #f4f6fb; --ink-2: #9aa0c0; --muted: #656b8c; --grid: #202840; --baseline: #2f3752; --border: rgba(255, 255, 255, .07); --btn: #eef0f6; --btn-ink: #141a2b; --chip-bg: #1c2338; --series: #f2795c; --series-wash: rgba(242, 121, 92, .16); --series-2: #16b8b0; --series-3: #6674e0; --series-4: #c98500; --series-5: #8b78e6; --theme-atmos: #16b8b0; --good: #3fbf8a; --warn: #e0ac33; --bad: #f0698f; --glow: #242a42; --shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 20px 44px -28px rgba(0, 0, 0, .55); --shadow-pop: 0 24px 70px -24px rgba(0, 0, 0, .75); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --plane: #10131e; --surface: #191f31; --surface-2: #1b2236; --card: rgba(71, 86, 133, .10); --ink: #f4f6fb; --ink-2: #9aa0c0; --muted: #656b8c; --grid: #202840; --baseline: #2f3752; --border: rgba(255, 255, 255, .07); --btn: #eef0f6; --btn-ink: #141a2b; --chip-bg: #1c2338; --series: #f2795c; --series-wash: rgba(242, 121, 92, .16); --series-2: #16b8b0; --series-3: #6674e0; --series-4: #c98500; --series-5: #8b78e6; --theme-atmos: #16b8b0; --good: #3fbf8a; --warn: #e0ac33; --bad: #f0698f; --glow: #242a42; --shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 20px 44px -28px rgba(0, 0, 0, .55); --shadow-pop: 0 24px 70px -24px rgba(0, 0, 0, .75); } } /* Theme-conditional visibility (theme-aware logo, sun/moon glyph). Default is the light view; the dark view shows only under an explicit or OS dark theme. Sizing rules (.brand-logo img, .icon-btn svg) must NOT set display, or their higher specificity would defeat these toggles. */ .on-light { display: block; } .on-dark { display: none; } :root[data-theme="dark"] .on-light { display: none; } :root[data-theme="dark"] .on-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .on-light { display: none; } :root:not([data-theme="light"]) .on-dark { display: block; } } * { box-sizing: border-box; } html, body { margin: 0; } body { display: flex; min-height: 100vh; color: var(--ink); /* Radial brightness glow at the top of the plane, fixed so it sits still while content scrolls. */ background: radial-gradient(circle at 50% 0%, var(--glow), transparent 100%), var(--plane); background-attachment: fixed; font: 14px/1.5 "Inter", "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } :focus-visible { outline: 2px solid var(--series); outline-offset: 2px; } /* ---------- Sidebar (icon-only rail; labels appear on hover) ---------- */ .sidebar { position: sticky; top: 0; align-self: flex-start; z-index: 10; display: flex; flex-direction: column; align-items: center; width: 74px; min-width: 74px; height: 100vh; padding: 1.4rem .7rem 1.2rem; } .brand { display: block; padding: 0 0 1.1rem; } .brand-mark { display: block; width: 34px; height: auto; } nav { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; } .nav-section { display: none; } /* Sidebar badge (open support tickets) on the nav icon. */ .nav-badge { position: absolute; top: 1px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--series); color: #fff; font-size: .6rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--plane); } .nav-badge.dot-only { min-width: 10px; height: 10px; padding: 0; right: 7px; } .nav-item { position: relative; display: flex; align-items: center; justify-content: center; color: var(--ink-2); text-decoration: none; } /* The icon lives in a soft round chip; the active item fills it with the neutral action colour. */ .nav-item svg { width: 42px; height: 42px; padding: 12px; flex: none; box-sizing: border-box; border-radius: 50%; background: var(--chip-bg); color: var(--ink-2); fill: currentColor; transition: background .15s, color .15s; } .nav-item.active svg { background: var(--btn); color: var(--btn-ink); } .nav-item:not(.disabled):not(.active):hover svg { color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent); } .nav-item.disabled { cursor: default; } .nav-item.disabled svg { opacity: .5; } /* Hover flyout label */ .nav-item .label { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--plane); padding: .3rem .6rem; border-radius: 9px; font-size: .76rem; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 50; box-shadow: var(--shadow-pop); } .nav-item:hover .label, .nav-item:focus-visible .label { opacity: 1; } .sidebar-foot { border-top: 1px solid var(--border); padding-top: .8rem; margin-top: .4rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; } /* ---------- Main / topbar ---------- */ main { flex: 1; min-width: 0; padding: 1.9rem 2.1rem 3rem; } /* Two rows on every width: the title and the action cluster (theme, sync, avatar) share the first row — the title pushes the actions hard right, so they always read as "top right". The filter bar takes the full second row, right-aligned on desktop and reduced to a "Filter" opener on mobile. */ .topbar { display: flex; flex-wrap: wrap; gap: .9rem 1.3rem; align-items: center; margin-bottom: 1.5rem; } .topbar-lead { order: 1; margin-right: auto; min-width: 0; } .topbar-actions { order: 2; display: flex; align-items: center; gap: .5rem; } .filterbar { order: 3; flex-basis: 100%; display: flex; gap: .5rem; align-items: center; justify-content: flex-end; position: relative; flex-wrap: wrap; } h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; margin: 0; } h2 { font-size: .98rem; font-weight: 600; margin: 0; } .sub { color: var(--ink-2); font-size: .8rem; margin: .2rem 0 0; } /* ---------- Filter controls ---------- */ .filter-controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } /* The two extension presets are one logical group (kept together on both layouts); the picker sits next to them. */ .preset-group { display: flex; gap: .5rem; align-items: center; } /* Equal height for every control in the filter bar: the segmented controls are otherwise a touch shorter than the chips next to them. */ .filterbar .seg { align-items: stretch; } .filterbar .seg, .filterbar .chip { min-height: 36px; } .filterbar .seg-btn { display: flex; align-items: center; } /* The "Filter" opener and the drawer title only exist on mobile. The compound selector outranks the generic ".chip { display: inline-flex }". */ .filterbar .filter-toggle { display: none; } .drawer-title { display: none; } /* Bottom nav + drawer backdrop are a mobile affordance; hidden on the desktop layout where the icon rail already carries every destination. */ .mobile-nav, .drawer-backdrop { display: none; } .icon-btn { width: 36px; height: 36px; border-radius: 50%; flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .15s, border-color .15s; } .icon-btn:hover { color: var(--ink); border-color: var(--baseline); } .icon-btn svg { width: 16px; height: 16px; } .avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--btn); color: var(--btn-ink); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8rem; letter-spacing: .02em; text-transform: uppercase; } /* Avatar dropdown (account & logout) */ .user-menu { position: relative; } .user-panel { width: 216px; } .user-head { display: flex; flex-direction: column; gap: .1rem; padding: .3rem .5rem .55rem; border-bottom: 1px solid var(--border); margin-bottom: .4rem; } .user-name { font-weight: 600; font-size: .85rem; } .user-mail { color: var(--muted); font-size: .74rem; word-break: break-all; } .menu-item { display: block; padding: .5rem .55rem; border-radius: 9px; color: var(--ink-2); text-decoration: none; font-size: .84rem; } .menu-item:hover { background: var(--surface-2); color: var(--ink); } /* Footer status line (replaces the separate Systemstatus page) */ .statusbar { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; margin-top: 1.6rem; padding-top: .9rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .74rem; } .status-item { display: inline-flex; align-items: center; gap: .35rem; } /* Segmented controls (Shopware version, time range) */ .seg { display: inline-flex; align-items: center; background: var(--surface-2); border-radius: 99px; padding: 3px; } .seg-btn { border: none; background: transparent; color: var(--ink-2); font: inherit; font-size: .78rem; font-weight: 500; padding: .34rem .7rem; border-radius: 99px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .seg-btn.active { background: var(--btn); color: var(--btn-ink); } .seg-btn:not(.active):hover { color: var(--ink); } .chip { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: .45rem .9rem; font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .chip:hover { border-color: var(--baseline); color: var(--ink); } .chip.active { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); } .chip svg { width: 9px; height: 6px; } .chip-count { background: color-mix(in srgb, currentColor 16%, transparent); border-radius: 99px; font-size: .7rem; padding: .05rem .4rem; } .picker { position: relative; } .picker-panel[hidden] { display: none; } .picker-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 300px; max-height: 380px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-pop); padding: .7rem; } .picker-panel input[type="search"] { width: 100%; padding: .48rem .65rem; margin-bottom: .5rem; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: .82rem; } .picker-list { overflow-y: auto; flex: 1; } .picker-list label { display: flex; align-items: center; gap: .5rem; padding: .32rem .45rem; border-radius: 8px; font-size: .82rem; cursor: pointer; } .picker-list .badge { margin-left: auto; font-size: .64rem; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 0 .3rem; white-space: nowrap; } .picker-list label:hover { background: var(--surface-2); } .picker-list input { accent-color: var(--series); } .picker-actions { display: flex; justify-content: space-between; gap: .5rem; padding-top: .6rem; } /* Buttons: the neutral action colour (black in light, white in dark). */ .btn { background: var(--btn); color: var(--btn-ink); border: 1px solid transparent; border-radius: 99px; padding: .5rem 1.1rem; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: opacity .15s; } .btn:hover { opacity: .88; } .btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--border); } .btn.ghost:hover { background: var(--surface-2); opacity: 1; color: var(--ink); } .btn.link { background: transparent; color: var(--ink-2); border-color: transparent; padding: .5rem .3rem; text-decoration: underline; text-underline-offset: 2px; } .btn.link:hover { opacity: 1; color: var(--ink); } /* ---------- Content ---------- */ .content { display: flex; flex-direction: column; gap: .85rem; } .content.loading { opacity: .55; pointer-events: none; transition: opacity .15s; } .page { display: flex; flex-direction: column; gap: .85rem; } .page[hidden] { display: none; } /* Borderless: cards lift off the plane by elevation alone. --card may be a translucent fill (dark) so the glow shimmers through; popovers/charts keep the solid --surface. */ .card { background: var(--card); border-radius: 28px; padding: 1.35rem 1.5rem; box-shadow: var(--shadow); } .card-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; } .kpis { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } /* Double-width KPI card for paired values ("aufgelaufen / Prognose"). */ .kpi.wide { grid-column: span 2; } /* Growth KPIs carry their direction in the value colour. */ .kpi .value.pos { color: var(--pos); } .kpi .value.neg { color: var(--neg); } .kpi .label { color: var(--ink-2); font-size: .8rem; } .kpi .value { font-size: 2rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: .2rem; } .kpi .value small { font-size: 1rem; font-weight: 500; color: var(--ink-2); } .kpi .hint { color: var(--muted); font-size: .75rem; margin-top: .2rem; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .05rem; vertical-align: 0; } .dot.good { background: var(--good); } .dot.mid { background: var(--warn); } .dot.bad { background: var(--bad); } /* ---------- Info buttons & popover (KPI explanations) ---------- */ .info-btn { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: .15rem; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--muted); font-family: inherit; font-size: .62rem; font-weight: 600; font-style: normal; cursor: pointer; vertical-align: 1px; transition: color .15s, border-color .15s; } .info-btn:hover { color: var(--series); border-color: var(--series); } h2 .info-btn { vertical-align: 2px; } .info-pop { position: fixed; z-index: 60; max-width: min(340px, calc(100vw - 16px)); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-pop); padding: .95rem 1.1rem; } .info-pop h3 { margin: 0 0 .2rem; font-size: .88rem; } .info-pop h4 { margin: .6rem 0 .1rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .info-pop p { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--ink-2); } /* ---------- KPI trend small multiples (home view) ---------- */ .trend-grid { display: grid; gap: 1.1rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .trend-cell h3 { margin: 0; font-size: .8rem; font-weight: 500; color: var(--ink-2); } .trend-box { position: relative; height: 110px; margin-top: .4rem; } .trend-now { color: var(--muted); font-size: .76rem; margin-top: .35rem; } .trend-now strong { color: var(--ink); font-size: .88rem; font-weight: 600; } /* ---------- Explainer card (home view) ---------- */ .explain-grid { display: grid; gap: 1.1rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .explain-grid h3 { margin: 0 0 .3rem; font-size: .84rem; } .explain-grid p { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--ink-2); } .grid-2 { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); } .chart-box { position: relative; height: 240px; } .chart-box.tall { height: 280px; } details { margin-top: .7rem; } summary { color: var(--muted); font-size: .78rem; cursor: pointer; } /* ---------- Tables ---------- */ .scroll { overflow-x: auto; } table { border-collapse: collapse; width: 100%; font-size: .84rem; } th, td { padding: .48rem .65rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } th:first-child, td:first-child { text-align: left; font-variant-numeric: normal; } thead th { color: var(--ink-2); font-weight: 600; border-bottom: 1px solid var(--baseline); } tbody tr { border-bottom: 1px solid var(--grid); } tbody tr:hover { background: var(--series-wash); } tfoot td { font-weight: 600; border-top: 1px solid var(--baseline); } /* Own products in the downloads table: named, not tinted - the row background is reserved for hover. */ .own-row td:first-child { font-weight: 600; } /* Weekly vendor comparison */ td.best { font-weight: 650; } tr.week-current td { color: var(--muted); } th small, td small { color: var(--muted); font-weight: 500; } #table-weekly .dot { vertical-align: 1px; } .cohort-scroll { max-height: 300px; overflow-y: auto; } /* Solid surface here on purpose: rows scroll beneath the sticky header. */ .cohort-scroll thead th { position: sticky; top: 0; background: var(--surface); } .cohort-cell { text-align: center; min-width: 3.2rem; } .cohort-cell.na { color: var(--muted); } .footnote { color: var(--muted); font-size: .76rem; margin: .2rem 0 0; } .error-box { border-left: 3px solid var(--bad); } /* ---------- Login / Ersteinrichtung ---------- */ .auth-body { display: grid; place-items: center; min-height: 100vh; } .auth-main { width: min(340px, calc(100vw - 2rem)); } .auth-card { display: flex; flex-direction: column; gap: .8rem; } .auth-card h1 { margin: 0; font-size: 1.2rem; } .auth-card .sub { margin: -.5rem 0 .2rem; } .auth-logo { width: 118px; height: auto; margin-bottom: .5rem; } .auth-error { margin: 0; color: var(--bad); font-size: .8rem; } /* Shared form styling (login, Konto, customer editor) */ .auth-card label, .stack-form label, .customer-editor label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--ink-2); } .auth-card input, .stack-form input, .customer-editor textarea, .customer-editor select, .assign-select { padding: .5rem .65rem; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: .82rem; } .auth-card .btn { margin-top: .3rem; } .stack-form { display: flex; flex-direction: column; gap: .7rem; max-width: 24rem; } .stack-form .btn { align-self: flex-start; } .form-title { margin: 1.2rem 0 .6rem; font-size: .88rem; } .form-msg { margin: 0; font-size: .78rem; color: var(--bad); } .form-msg.ok { color: var(--good); } /* Per-user avatar colour picker (Konto view) */ .user-color { width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; vertical-align: middle; } .user-color::-webkit-color-swatch-wrapper { padding: 0; } .user-color::-webkit-color-swatch { border: 1px solid var(--border); border-radius: 50%; } .user-color::-moz-color-swatch { border: 1px solid var(--border); border-radius: 50%; } /* ---------- Sync widget (topbar) ---------- */ .syncbar { position: relative; } .syncbar .chip svg { width: 12px; height: 12px; } .syncbar .chip.spinning svg, .icon-btn.spinning svg { animation: sync-rotate 1.1s linear infinite; } @keyframes sync-rotate { to { transform: rotate(360deg); } } .sync-panel { width: 320px; } /* The rows scroll inside the panel's max-height so the "Alles aktualisieren" action never overflows below the popover. */ .sync-rows { overflow-y: auto; flex: 1; min-height: 0; } .sync-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem; border-radius: 10px; } .sync-row:hover { background: var(--surface-2); } .sync-row-main { display: flex; flex-direction: column; gap: .1rem; font-size: .82rem; } .sync-row-main small { color: var(--muted); font-size: .72rem; } .sync-row-main .sync-fail { color: var(--bad); } .sync-one { white-space: nowrap; font-size: .76rem; padding: .35rem .7rem; border: 1px solid var(--border); border-radius: 8px; } .spinner { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--border); border-top-color: var(--series); border-radius: 50%; animation: sync-rotate .8s linear infinite; } /* ---------- Store view: listing positions ---------- */ .listing-controls { display: flex; gap: .5rem; align-items: flex-start; flex-wrap: wrap; } /* ---------- Support view ---------- */ .hint-text { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--ink-2); } .hint-text code { background: var(--surface-2); padding: .1rem .3rem; border-radius: 4px; } .status-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; white-space: nowrap; } .ticket-number { display: block; } td .badge { font-size: .66rem; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: .05rem .3rem; white-space: nowrap; } td .badge-first { color: var(--series); border-color: var(--series); font-weight: 600; } td .badge-review { color: var(--warn); border-color: var(--warn); } .customer-toggle { border: none; background: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--baseline); text-underline-offset: 3px; } .customer-toggle:hover { text-decoration-color: var(--series); color: var(--series); } .ticket-actions { display: flex; align-items: center; gap: .5rem; } .ticket-sync-hint { color: var(--muted); font-size: .74rem; white-space: nowrap; } #table-tickets th, #table-tickets td { text-align: left; vertical-align: top; } #table-tickets td { white-space: normal; } #table-tickets table a.subject { color: var(--ink); text-decoration-color: var(--baseline); text-underline-offset: 3px; font-weight: 500; } #table-tickets table a.subject:hover { color: var(--series); } #table-tickets .ticket-id { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } #table-tickets td.col-badges { min-width: 16rem; } .col-badges .badges-wrap { display: flex; flex-wrap: wrap; gap: .3rem; align-content: flex-start; } .cust-name { font-weight: 500; } a.cust-sub, .cust-sub { display: block; color: var(--muted); font-size: .72rem; margin-top: .1rem; } a.cust-sub { text-decoration: underline; text-decoration-color: var(--baseline); text-underline-offset: 2px; } a.cust-sub:hover { color: var(--series); } /* Assignee avatar + its picker menu */ .assignee { width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); font-size: .68rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .assignee.is-assigned { background: var(--series); color: #fff; border-color: transparent; } .assignee:hover { border-color: var(--baseline); } .assign-menu { position: fixed; z-index: 70; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-pop); padding: .35rem; } .assign-menu button { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; background: none; border: none; font: inherit; font-size: .82rem; color: var(--ink); padding: .4rem .5rem; border-radius: 8px; cursor: pointer; } .assign-menu button:hover { background: var(--surface-2); } .mini-avatar { width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--series); color: #fff; font-size: .6rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .mini-avatar.none { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); } /* Ticket-count pulse indicators (25+ amber, 50+ red) */ .pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .35rem; } .pulse.warn { background: var(--warn); animation: pulse-w 1.5s ease-out infinite; } .pulse.bad { background: var(--bad); animation: pulse-b 1.5s ease-out infinite; } .pulse.good { background: var(--good); } /* calm, no animation */ #table-tickets .col-activity { white-space: nowrap; } /* Needs the id selector: "#table-tickets td { white-space: normal }" above outweighs the generic td.col-actions rule, and the two 36px icon buttons would wrap on top of each other in the narrow column. */ #table-tickets td.col-actions { white-space: nowrap; } .t-muted { color: var(--muted); } @keyframes pulse-w { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 5px transparent; } } @keyframes pulse-b { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 5px transparent; } } @media (prefers-reduced-motion: reduce) { .pulse { animation: none !important; } } .customer-editor-row td { background: color-mix(in srgb, var(--series) 4%, transparent); } /* Two columns: knowledge on the left, the note on the right. */ .customer-editor { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.6rem; padding: .5rem .3rem; } .ce-col { display: flex; flex-direction: column; gap: .7rem; min-width: 0; } .ce-col .btn, .ce-actions { align-self: flex-start; } .ce-actions { display: flex; gap: .5rem; margin-top: auto; } .customer-facts { font-size: .8rem; color: var(--ink-2); line-height: 1.5; } .customer-facts strong { color: var(--ink); } .customer-editor label.inline { flex-direction: row; align-items: center; gap: .45rem; } .customer-editor input[type="checkbox"] { accent-color: var(--series); } .customer-editor textarea { resize: vertical; min-height: 6rem; } .customer-editor .ce-note { flex: 1; } .rented-list { list-style: none; margin: .1rem 0 0; padding: 0; display: flex; flex-direction: column; } .rented-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; padding: .22rem 0; border-bottom: 1px solid var(--grid); } .rented-list li:last-child { border-bottom: none; } .rented-list .r-since { color: var(--muted); white-space: nowrap; } .rented-list .r-ended { opacity: .7; } .rented-list .r-name { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .ext-tag { font-size: .64rem; border-radius: 5px; padding: .05rem .3rem; border: 1px solid var(--border); white-space: nowrap; } .ext-tag.ok { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 45%, transparent); } .ext-tag.buy { color: var(--series-3); border-color: color-mix(in srgb, var(--series-3) 45%, transparent); } .ext-tag.cxl { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 45%, transparent); } .ce-title { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0; } @media (max-width: 720px) { .customer-editor { grid-template-columns: 1fr; } } /* ---------- Responsive (mobile) ---------- Below 760px the icon rail disappears; navigation moves to a floating bottom bar and the full sidebar returns as a slide-up drawer behind "Mehr". The chart filters collapse behind a "Filter" opener, and theme + sync + avatar sit top-right on their own row. */ @media (max-width: 760px) { /* overflow-x guard: any stray wide element would otherwise let the page scroll sideways, which makes the fixed bottom bar look like it drifts. */ body { flex-direction: column; overflow-x: hidden; } /* --- Sidebar as slide-up drawer (opened by the bottom bar's "Mehr") --- */ .sidebar { display: none; } body.drawer-open { overflow: hidden; } body.drawer-open .sidebar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; min-width: 0; height: auto; max-height: 82vh; z-index: 130; flex-direction: column; align-items: stretch; gap: .15rem; padding: .8rem .8rem calc(1rem + env(safe-area-inset-bottom)); background: var(--surface); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-pop); animation: drawer-up .22s ease; } @keyframes drawer-up { from { transform: translateY(102%); } to { transform: none; } } /* A grab-handle above the title. */ body.drawer-open .sidebar::before { content: ""; width: 38px; height: 4px; border-radius: 2px; background: var(--baseline); align-self: center; margin-bottom: .5rem; } body.drawer-open .sidebar .brand { display: none; } body.drawer-open .drawer-title { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0 .5rem .4rem; } body.drawer-open .sidebar nav { flex: none; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow-y: auto; gap: .1rem; min-height: 0; } body.drawer-open .nav-item { justify-content: flex-start; gap: .85rem; padding: .3rem .5rem; border-radius: 14px; } body.drawer-open .nav-item:not(.disabled):hover { background: var(--surface-2); } body.drawer-open .nav-item svg { width: 40px; height: 40px; padding: 11px; } /* Labels become inline list text instead of the desktop hover flyout. */ body.drawer-open .nav-item .label { position: static; transform: none; opacity: 1; pointer-events: auto; background: none; color: var(--ink); box-shadow: none; padding: 0; font-size: .95rem; font-weight: 500; white-space: normal; } #last-sync { display: none; } .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 120; background: color-mix(in srgb, var(--plane) 55%, transparent); backdrop-filter: blur(2px); } .drawer-backdrop[hidden] { display: none; } /* --- Floating bottom navigation --- */ .mobile-nav { display: flex; flex-direction: row; position: fixed; z-index: 110; left: .7rem; right: .7rem; bottom: calc(.7rem + env(safe-area-inset-bottom)); justify-content: space-around; align-items: stretch; gap: .2rem; padding: .35rem; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid var(--border); border-radius: 26px; box-shadow: var(--shadow-pop); } /* The bar holds the real sidebar nodes (moved here, not copied), restyled as icon-over-label; the "Mehr" button matches. */ .mobile-nav .nav-item, .mobile-nav .mnav-more { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem; padding: .45rem .2rem; border: none; background: none; cursor: pointer; color: var(--ink-2); text-decoration: none; font: inherit; font-size: .64rem; font-weight: 600; border-radius: 18px; transition: color .15s, background .15s; } /* Drop the sidebar's round icon chip; the bar uses a plain small glyph. */ .mobile-nav .nav-item svg, .mobile-nav .mnav-more svg { width: 22px; height: 22px; padding: 0; border-radius: 0; background: none; color: inherit; } .mobile-nav .nav-item.active, .mobile-nav .mnav-more.active { color: var(--ink); background: var(--chip-bg); } .mobile-nav .nav-item.active svg { background: none; color: inherit; } .mobile-nav .nav-item:not(.active):hover svg { background: none; } /* Swap the long sidebar label for the short one carried in the attribute. */ .mobile-nav .nav-item .label { display: none; } .mobile-nav .nav-item::after { content: attr(data-mobile-label); } .mobile-nav .nav-badge { position: absolute; top: .3rem; left: calc(50% + .4rem); min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--series); color: #fff; font-size: .58rem; font-weight: 700; line-height: 15px; text-align: center; box-shadow: 0 0 0 2px var(--surface); } .mobile-nav .nav-badge.dot-only { min-width: 9px; height: 9px; padding: 0; } main { padding: 1rem .9rem calc(6rem + env(safe-area-inset-bottom)); } /* --- Topbar: title + actions on row 1, filters on row 2 --- */ .topbar { gap: .55rem .7rem; margin-bottom: 1rem; align-items: center; } .topbar-lead { order: 1; flex: 1 1 auto; } .topbar-lead h1 { font-size: 1.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-actions { order: 2; flex: none; } .filterbar { order: 3; flex-basis: 100%; justify-content: flex-start; } /* Sync shrinks to an icon button; the "Stand:" text lives in its panel. */ #sync-btn-label { display: none; } .syncbar .chip { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; } /* Chart filters collapse behind the "Filter" opener. */ .filterbar .filter-toggle { display: inline-flex; } .filter-toggle svg { width: 13px; height: 13px; } .filterbar.filters-open .filter-toggle { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); } .filter-controls { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; flex-direction: column; align-items: stretch; gap: .55rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-pop); padding: .8rem; } .filterbar.filters-open .filter-controls { display: flex; } /* Uniform control sizing so the panel reads as one tidy list: full-width segmented controls with equal segments, the two presets side by side, the picker full width. Everything shares one height. */ .filter-controls { gap: .5rem; } .filter-controls .seg, .filter-controls .preset-group, .filter-controls .picker { width: 100%; } .filter-controls .seg { min-height: 42px; align-items: stretch; padding: 4px; } .filter-controls .seg-btn { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; } .filter-controls .chip { min-height: 42px; display: flex; align-items: center; } .filter-controls .preset-group .chip { flex: 1; justify-content: center; } .filter-controls .picker .chip { width: 100%; justify-content: space-between; } /* Only the extension picker becomes a centred sheet; the user and sync popovers stay docked to their buttons (they open from the top-right). */ #picker-panel { position: fixed; left: .8rem; right: .8rem; top: 14vh; width: auto; max-height: 68vh; } .user-panel, .sync-panel { max-width: calc(100vw - 1.4rem); } /* Card headers with their own controls stack instead of crowding; wide segmented controls (ticket status, granularity) take a full row so they never run past the viewport edge. */ .card-head { flex-wrap: wrap; } .card-head .seg { width: 100%; } .card-head .seg-btn { flex: 1; text-align: center; } .ticket-actions { flex-wrap: wrap; } .ticket-actions .seg { flex: 1 1 100%; } .chart-box { height: 210px; } .chart-box.tall { height: 240px; } .card { padding: 1.15rem 1.2rem; border-radius: 18px; } .kpi .value { font-size: 1.6rem; } .statusbar { gap: .7rem 1.1rem; } } @media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } .kpi .value { font-size: 1.4rem; } .content, .page { gap: .9rem; } .topbar-lead .sub { display: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* The hidden attribute always wins over author display rules. */ [hidden] { display: none !important; } /* ---------- Team: absence calendar ---------- */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: .4rem; } .cal-head { text-align: center; font-size: .68rem; font-weight: 600; color: var(--muted); padding: .2rem 0; } .cal-cell { min-height: 52px; border-radius: 8px; background: var(--surface-2); padding: .25rem .3rem; display: flex; flex-direction: column; gap: 2px; } .cal-cell.empty { background: transparent; } .cal-cell.weekend { background: color-mix(in srgb, var(--surface-2) 45%, transparent); } .cal-cell.today { outline: 2px solid var(--series); outline-offset: -2px; } .cal-day { font-size: .68rem; color: var(--ink-2); } .cal-cell.weekend .cal-day { color: var(--muted); } .cal-bar { display: block; height: 6px; border-radius: 3px; width: 100%; } /* Sick/other absences: same user colour, hatched so vacation stays distinct */ .cal-bar.hatched { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 3px, transparent 3px 6px); } .cal-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .7rem; } .cal-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--ink-2); } .form-row { display: flex; gap: .7rem; } .form-row label { flex: 1; } .stack-form select { padding: .5rem .65rem; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: .82rem; } td.col-actions { text-align: right; white-space: nowrap; } .status-absence { color: var(--ink-2); } /* ---------- Support: one-click claim ---------- Unassigned tickets: the first click on the avatar claims the ticket for yourself (hover signals it with the accent colour); assigned tickets open the reassignment picker instead. */ td.col-assign { white-space: nowrap; } .assignee:not(.is-assigned):hover { background: var(--series-wash); color: var(--series); border-color: color-mix(in srgb, var(--series) 55%, transparent); } .assignee:disabled { opacity: .5; cursor: default; } .assign-score { margin-left: auto; padding: .05rem .4rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .66rem; color: var(--ink-2); font-variant-numeric: tabular-nums; } /* ---------- Leads ---------- */ .lead-note { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lead-editor-row td { background: color-mix(in srgb, var(--series) 4%, transparent); } .lead-editor { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; padding: .35rem 0; } .lead-editor label { display: flex; flex-direction: column; gap: .3rem; font-size: .74rem; color: var(--ink-2); text-align: left; font-variant-numeric: normal; } .lead-editor label.grow { flex: 1; min-width: 12rem; } .lead-editor input, .lead-editor select { padding: .45rem .6rem; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: .8rem; } .lead-editor-actions { display: flex; gap: .5rem; margin-left: auto; } .inline-form { display: flex; gap: .6rem; margin-top: .8rem; } .inline-form input[type="text"] { flex: 1; max-width: 20rem; padding: .5rem .65rem; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: .82rem; } .agency-name { width: 100%; max-width: 18rem; padding: .35rem .5rem; background: transparent; color: var(--ink); border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: .82rem; } .agency-name:hover, .agency-name:focus { border-color: var(--border); background: var(--surface-2); } .user-vacation { width: 4.2rem; padding: .35rem .5rem; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: .82rem; } .user-autoassign, .agency-active { accent-color: var(--series); width: 15px; height: 15px; } /* ---------- AI draft modal ---------- */ /* Near-fullscreen overlay, modelled after a typical LLM chat UI: history + growing composer on one side, model/context/review in a sidebar. Elevation comes from the shadow, not borders - flat colour blocks throughout. */ .ai-modal { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--plane) 60%, transparent); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: .6rem; } /* display:flex above would defeat the hidden attribute (author styles win over the UA's [hidden] rule) - the closed modal must really be gone. */ .ai-modal[hidden] { display: none; } .ai-modal-card { width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-pop); padding: 1.3rem 1.6rem; gap: .9rem; } .ai-modal-card h3 { margin: 0; font-size: .78rem; font-weight: 600; color: var(--ink-2); } .ai-modal-card h3 small { font-weight: 500; color: var(--muted); } .ai-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } /* The headline is the ticket subject - long titles clip with an ellipsis rather than wrapping into the controls. */ .ai-modal-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; max-width: 44rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-modal-head .sub { margin: .2rem 0 0; font-size: .78rem; color: var(--muted); } .ai-modal-controls { display: flex; align-items: center; gap: .5rem; flex: none; } .ai-modal-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 18rem; gap: 1.4rem; } .ai-chat-col { display: flex; flex-direction: column; gap: .8rem; min-height: 0; min-width: 0; } .ai-chat { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .9rem; padding: .4rem .6rem; } .ai-msg { max-width: min(70%, 44rem); padding: .7rem 1rem; border-radius: 20px; font-size: .87rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .ai-msg-kunde { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 6px; } /* "Ours" (Zenit's own replies/drafts) is tinted with the brand teal itself (--theme-atmos: same hue as light mode, punched up for dark contrast) - NOT --series, which intentionally flips to coral in dark for chart legibility and would otherwise misrepresent the brand colour here. */ .ai-msg-zenit { align-self: flex-end; background: color-mix(in srgb, var(--theme-atmos) 12%, var(--surface-2)); border-bottom-right-radius: 6px; } .ai-msg-sensitive { font-style: italic; color: var(--muted); } .ai-msg-meta { display: block; margin-bottom: .25rem; font-size: .68rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; } /* A generated draft is its own bubble, editable (the agent may hand-tweak it before copying or refining) and always carries its own copy button. */ .ai-msg-draft { align-self: flex-end; width: min(78%, 48rem); max-width: min(78%, 48rem); background: color-mix(in srgb, var(--theme-atmos) 10%, var(--surface-2)); border-bottom-right-radius: 6px; display: flex; flex-direction: column; gap: .4rem; } .ai-msg-draft-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .ai-msg-draft-head .ai-msg-meta { margin: 0; color: var(--theme-atmos); } .ai-msg-draft textarea { width: 100%; resize: none; overflow: hidden; background: transparent; color: var(--ink); border: none; padding: 0; font: inherit; font-size: .87rem; line-height: 1.55; } .ai-msg-draft textarea:focus { outline: none; } .ai-msg-copy { flex: none; background: transparent; border: none; border-radius: 99px; padding: .2rem .7rem; font: inherit; font-size: .68rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; } .ai-msg-copy:hover { background: color-mix(in srgb, var(--theme-atmos) 15%, transparent); color: var(--ink); } /* Composer: single rounded bar, grows with the text like ChatGPT's input - the actions live inside the same shape, "Anfrage kopieren" right next to "Entwurf erzeugen". */ .ai-prompt-box { flex: none; display: flex; align-items: flex-end; gap: .4rem; background: var(--surface-2); border-radius: 26px; padding: .5rem .6rem .5rem 1.2rem; } .ai-prompt-box textarea { flex: 1; min-width: 0; max-height: 9rem; resize: none; overflow-y: auto; background: transparent; color: var(--ink); border: none; padding: .5rem 0; font: inherit; font-size: .88rem; line-height: 1.5; } .ai-prompt-box textarea:focus { outline: none; } .ai-prompt-actions { display: flex; align-items: center; gap: .3rem; flex: none; padding-bottom: .1rem; } /* Sidebar: model, context, anonymized-values review - everything about the request itself, out of the way of the conversation. */ .ai-sidebar { display: flex; flex-direction: column; gap: 1.1rem; min-height: 0; overflow-y: auto; } .ai-side-block { flex: none; display: flex; flex-direction: column; gap: .5rem; } .ai-side-block select { padding: .5rem .7rem; background: var(--surface-2); color: var(--ink); border: none; border-radius: 12px; font: inherit; font-size: .78rem; } .ai-side-anon { flex: 1; min-height: 6rem; } .ai-pre { margin: 0; padding: .7rem .8rem; max-height: 11rem; overflow-y: auto; background: var(--surface-2); border: none; border-radius: 14px; font: inherit; font-size: .76rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; } /* Review table: everything that was replaced before sending */ .ai-anon-scroll { max-height: 16rem; overflow-y: auto; background: var(--surface-2); border-radius: 14px; } #ai-anon { font-size: .76rem; width: 100%; } #ai-anon th { position: sticky; top: 0; background: var(--surface-2); } #ai-anon th, #ai-anon td { text-align: left; white-space: normal; word-break: break-word; padding: .35rem .6rem; } #ai-anon td.ai-ph { font-variant-numeric: normal; font-weight: 600; color: var(--series); white-space: nowrap; } .ai-spinner { display: inline-block; width: 13px; height: 13px; margin-right: .45rem; border: 2px solid var(--border); border-top-color: var(--series); border-radius: 50%; vertical-align: -2px; animation: sync-rotate .9s linear infinite; } .ai-status { margin: 0; } .ai-status.error { color: var(--bad); } .ai-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ai-modal-foot .hint-text { margin: 0; font-size: .72rem; } /* Scrollbars stay invisible until the area is actually hovered - permanent scrollbars read as dated next to the rest of this layout. Firefox has no hover-only knob, so it falls back to a slim, always-visible bar there. */ .ai-chat, .ai-sidebar, .ai-pre, .ai-anon-scroll, .ai-prompt-box textarea { scrollbar-width: thin; scrollbar-color: transparent transparent; } .ai-chat::-webkit-scrollbar, .ai-sidebar::-webkit-scrollbar, .ai-pre::-webkit-scrollbar, .ai-anon-scroll::-webkit-scrollbar, .ai-prompt-box textarea::-webkit-scrollbar { width: 7px; } .ai-chat::-webkit-scrollbar-thumb, .ai-sidebar::-webkit-scrollbar-thumb, .ai-pre::-webkit-scrollbar-thumb, .ai-anon-scroll::-webkit-scrollbar-thumb, .ai-prompt-box textarea::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; } .ai-chat:hover::-webkit-scrollbar-thumb, .ai-sidebar:hover::-webkit-scrollbar-thumb, .ai-pre:hover::-webkit-scrollbar-thumb, .ai-anon-scroll:hover::-webkit-scrollbar-thumb, .ai-prompt-box textarea:hover::-webkit-scrollbar-thumb { background: var(--muted); } /* Below ~900px the sidebar moves under the chat; the card stays fullscreen. */ @media (max-width: 900px) { .ai-modal { padding: 0; } .ai-modal-card { border-radius: 0; } .ai-modal-body { grid-template-columns: 1fr; overflow-y: auto; } .ai-chat { max-height: 40vh; } .ai-sidebar { overflow-y: visible; } } .ai-form { max-width: 34rem; } .ai-form textarea { padding: .6rem .7rem; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: .82rem; line-height: 1.5; resize: vertical; } /* Action cells with several icon buttons (tickets, leads) */ td.col-actions .icon-btn:not(:first-child) { margin-left: .3rem; } a.icon-btn { text-decoration: none; }