/* КАРМАН Analytics — тёмный интерфейс, акцент — жёлтый КАРМАН. Mobile first. */ /* ───────── Темы оформления ───────── Все цвета — переменные. Тема задаётся атрибутом data-theme (на и на превью в выборе темы). --yellow — акцентный цвет темы (фон кнопок, столбцы), --accent-text — акцент для текста. */ :root, [data-theme="dark"] { --bg: #0f0f10; --bg-rgb: 15, 15, 16; --surface: #1a1a1c; --surface-2: #232326; --line: #2e2e33; --text: #f4f4f2; --muted: #9b9ba1; --yellow: #ffd200; --accent-rgb: 255, 210, 0; --yellow-dim: #6b5a0a; --accent-text: #ffd200; --on-accent: #111; --green: #3ecf8e; --green-rgb: 62, 207, 142; --red: #ff5a5f; --red-rgb: 255, 90, 95; --orange: #ffb020; --orange-rgb: 255, 176, 32; --overlay-rgb: 255, 255, 255; --track: #3a3a42; --track-on: #5a5a66; --handle: #4a4a52; --border-strong: #5b5b62; --border-hover: #45454d; --sheet-bg: rgba(30, 31, 36, 0.97); --tip-bg: rgba(24, 24, 28, 0.96); --backdrop: rgba(0, 0, 0, 0.55); --shadow: rgba(0, 0, 0, 0.45); --banner-bg: #2a2208; --banner-border: #6b5a0a; --banner-text: #ffe680; --error-bg: #2a1011; --error-border: #6b2426; --error-text: #ffb3b5; --info-bg: #14213a; --info-border: #28406b; --info-text: #b7cdf5; --radius: 16px; --gap: 12px; color-scheme: dark; } [data-theme="graphite"] { --bg: #16181c; --bg-rgb: 22, 24, 28; --surface: #1f2228; --surface-2: #282c33; --line: #343942; --text: #eef0f3; --muted: #9aa1ab; --yellow: #ff8a3d; --accent-rgb: 255, 138, 61; --yellow-dim: #6a3a1a; --accent-text: #ff9d5c; --on-accent: #141414; --track: #3a3f48; --track-on: #565c67; --handle: #4a505a; --border-strong: #5f6671; --border-hover: #4a505a; --sheet-bg: rgba(35, 38, 45, 0.97); --tip-bg: rgba(28, 31, 37, 0.96); --banner-border: #6a3a1a; } [data-theme="midnight"] { --bg: #0b1020; --bg-rgb: 11, 16, 32; --surface: #131a2e; --surface-2: #1b2440; --line: #26304f; --text: #e8edf8; --muted: #8f9bb8; --yellow: #3ecbff; --accent-rgb: 62, 203, 255; --yellow-dim: #16506a; --accent-text: #6fd8ff; --on-accent: #06121f; --track: #2a3558; --track-on: #3d4a75; --handle: #35416a; --border-strong: #4a5782; --border-hover: #3a4670; --sheet-bg: rgba(22, 30, 52, 0.97); --tip-bg: rgba(17, 24, 43, 0.96); --banner-bg: #0f2233; --banner-border: #16506a; --banner-text: #9fe3ff; } [data-theme="forest"] { --bg: #0d1410; --bg-rgb: 13, 20, 16; --surface: #152019; --surface-2: #1c2a21; --line: #27392d; --text: #e9f3ec; --muted: #93a89a; --yellow: #9be15d; --accent-rgb: 155, 225, 93; --yellow-dim: #3d5a25; --accent-text: #b2ec7f; --on-accent: #0d1410; --track: #2c4033; --track-on: #3f5a48; --handle: #36503f; --border-strong: #4a6553; --border-hover: #3c5545; --sheet-bg: rgba(24, 36, 28, 0.97); --tip-bg: rgba(20, 31, 24, 0.96); --banner-bg: #18260f; --banner-border: #3d5a25; --banner-text: #cdf2a8; } [data-theme="wine"] { --bg: #170c10; --bg-rgb: 23, 12, 16; --surface: #22131a; --surface-2: #2c1922; --line: #3b2330; --text: #f6eaee; --muted: #b196a1; --yellow: #f0b6a0; --accent-rgb: 240, 182, 160; --yellow-dim: #6a4034; --accent-text: #f5c7b5; --on-accent: #1d0f14; --track: #45293a; --track-on: #613a50; --handle: #553347; --border-strong: #6e4a5d; --border-hover: #57384a; --sheet-bg: rgba(40, 23, 31, 0.97); --tip-bg: rgba(34, 19, 26, 0.96); --banner-bg: #2c1813; --banner-border: #6a4034; --banner-text: #f7d3c5; } [data-theme="sunset"] { --bg: #150f1f; --bg-rgb: 21, 15, 31; --surface: #20172e; --surface-2: #2a1f3b; --line: #3a2b50; --text: #f3ecfb; --muted: #a898bd; --yellow: #ff7a59; --accent-rgb: 255, 122, 89; --yellow-dim: #6b2f22; --accent-text: #ff9477; --on-accent: #1a0f14; --track: #43325c; --track-on: #5d4880; --handle: #4f3d6e; --border-strong: #685589; --border-hover: #52406f; --sheet-bg: rgba(38, 28, 54, 0.97); --tip-bg: rgba(32, 23, 46, 0.96); --banner-bg: #2b1520; --banner-border: #6b2f22; --banner-text: #ffc2b0; } [data-theme="contrast"] { --bg: #000000; --bg-rgb: 0, 0, 0; --surface: #0b0b0b; --surface-2: #161616; --line: #5c5c5c; --text: #ffffff; --muted: #d0d0d0; --yellow: #ffe600; --accent-rgb: 255, 230, 0; --yellow-dim: #8a7a00; --accent-text: #ffe600; --on-accent: #000000; --green: #00e676; --green-rgb: 0, 230, 118; --red: #ff5252; --red-rgb: 255, 82, 82; --track: #4a4a4a; --track-on: #7a7a7a; --handle: #8a8a8a; --border-strong: #9a9a9a; --border-hover: #bdbdbd; --sheet-bg: rgba(18, 18, 18, 0.98); --tip-bg: rgba(12, 12, 12, 0.98); --banner-bg: #1a1700; --banner-border: #ffe600; --banner-text: #fff27a; } /* Светлые темы: общие значения, палитры — ниже. */ [data-theme="light"], [data-theme="ocean"], [data-theme="sand"], [data-theme="mint"], [data-theme="lavender"] { color-scheme: light; --overlay-rgb: 0, 0, 0; --backdrop: rgba(15, 23, 42, 0.35); --shadow: rgba(15, 23, 42, 0.14); --green: #16a34a; --green-rgb: 22, 163, 74; --red: #dc2626; --red-rgb: 220, 38, 38; --orange: #d97706; --orange-rgb: 217, 119, 6; --sheet-bg: rgba(255, 255, 255, 0.98); --tip-bg: rgba(255, 255, 255, 0.97); --banner-bg: #fff7db; --banner-border: #f0d78a; --banner-text: #7a5600; --error-bg: #fdecec; --error-border: #f3b4b6; --error-text: #9f1d22; --info-bg: #e8f0fe; --info-border: #b9cff7; --info-text: #1e40af; } [data-theme="light"] { --bg: #f4f5f7; --bg-rgb: 244, 245, 247; --surface: #ffffff; --surface-2: #eef0f3; --line: #dfe2e7; --text: #16181d; --muted: #6b7280; --yellow: #ffd200; --accent-rgb: 255, 210, 0; --yellow-dim: #f2dc7a; --accent-text: #9a6b00; --on-accent: #111; --track: #d5d9e0; --track-on: #b4bbc6; --handle: #c7ccd4; --border-strong: #b9bfc8; --border-hover: #c9ced6; } [data-theme="ocean"] { --bg: #eef5fb; --bg-rgb: 238, 245, 251; --surface: #ffffff; --surface-2: #e3eef8; --line: #cfdeec; --text: #0f2436; --muted: #587189; --yellow: #1e88e5; --accent-rgb: 30, 136, 229; --yellow-dim: #a9cff2; --accent-text: #1565c0; --on-accent: #ffffff; --track: #cddcea; --track-on: #9fb7cc; --handle: #bccfe0; --border-strong: #a9bfd3; --border-hover: #b9cde0; --banner-bg: #e6f2fc; --banner-border: #a9cff2; --banner-text: #0d4f8b; } [data-theme="sand"] { --bg: #f6f1e7; --bg-rgb: 246, 241, 231; --surface: #fffcf5; --surface-2: #efe7d6; --line: #e0d5bf; --text: #2b2418; --muted: #7d705a; --yellow: #c8643b; --accent-rgb: 200, 100, 59; --yellow-dim: #ecc3ae; --accent-text: #a54e2a; --on-accent: #ffffff; --track: #e2d7c2; --track-on: #c2b395; --handle: #d6c9b0; --border-strong: #c4b597; --border-hover: #d2c4a8; --sheet-bg: rgba(255, 252, 245, 0.98); --tip-bg: rgba(255, 252, 245, 0.97); --banner-bg: #fbeee4; --banner-border: #ecc3ae; --banner-text: #7c3a1f; } [data-theme="mint"] { --bg: #eef8f4; --bg-rgb: 238, 248, 244; --surface: #ffffff; --surface-2: #e1f2ea; --line: #cbe6da; --text: #10261d; --muted: #5b7a6d; --yellow: #12a58a; --accent-rgb: 18, 165, 138; --yellow-dim: #a5dccf; --accent-text: #0b7c67; --on-accent: #ffffff; --track: #cfe5db; --track-on: #9cc6b5; --handle: #bddbcd; --border-strong: #a6cbbb; --border-hover: #b7d7c9; --banner-bg: #e3f5ef; --banner-border: #a5dccf; --banner-text: #0a5c4c; } [data-theme="lavender"] { --bg: #f4f1fb; --bg-rgb: 244, 241, 251; --surface: #ffffff; --surface-2: #ebe5f8; --line: #dcd3f0; --text: #1f1833; --muted: #6f6585; --yellow: #7c5cff; --accent-rgb: 124, 92, 255; --yellow-dim: #c9bcff; --accent-text: #5b3fd9; --on-accent: #ffffff; --track: #ddd5ef; --track-on: #b3a6d6; --handle: #cdc3e8; --border-strong: #b8acd9; --border-hover: #c9bee6; --banner-bg: #efeafd; --banner-border: #c9bcff; --banner-text: #45309e; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } button, select, input { font: inherit; color: inherit; } .topbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: calc(env(safe-area-inset-top) + 12px) 16px 10px; background: rgba(var(--bg-rgb), 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .brand { display: flex; flex-direction: column; line-height: 1; } .brand__name { font-weight: 900; font-size: 22px; letter-spacing: 0.06em; color: var(--accent-text); } .brand__sub { font-size: 12px; color: var(--muted); letter-spacing: 0.2em; text-transform: uppercase; margin-top: 3px; } .topbar__actions { display: flex; gap: 8px; } .btn--logout { margin-top: 0; } .filters { flex: 1 1 100%; min-width: 0; } /* Фильтр: период сегментами, точки чипами */ .filterbar { display: grid; gap: 8px; min-width: 0; } .seg, .chips { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .seg::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; } .seg { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px; } .seg__item { flex: none; border: 0; background: transparent; color: var(--muted); padding: 7px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; scroll-snap-align: start; transition: background 0.15s ease, color 0.15s ease; } .seg__item:hover { color: var(--text); } .seg__item--on, .seg__item--on:hover { background: var(--yellow); color: var(--on-accent); box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.22); } .seg__item--more { color: var(--text); } .seg__item--icon { position: relative; display: inline-grid; place-items: center; padding: 6px 10px; color: var(--text); } .seg__item--dot::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); } .seg--compact { padding: 3px; border-radius: 12px; } /* Подпись периода и кнопка «на это же время» */ .caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 0 10px; } .caption .note { margin: 0; } .cmp-chip { flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 11px; font-size: 12px; cursor: pointer; white-space: nowrap; } .cmp-chip--on { color: var(--on-accent); background: var(--yellow); border-color: var(--yellow); font-weight: 700; } /* Нижняя панель: выбор периода, настройки показателей */ .sheet-host { position: fixed; inset: 0; z-index: 50; pointer-events: none; } .sheet-host--open { pointer-events: auto; } .sheet-backdrop { position: absolute; inset: 0; background: var(--backdrop); animation: sheet-fade 0.18s ease; } .sheet { position: absolute; inset-inline: 0; bottom: 0; margin-inline: auto; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--sheet-bg); backdrop-filter: blur(18px); border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 6px 16px calc(env(safe-area-inset-bottom) + 18px); animation: sheet-rise 0.22s ease; } .sheet__handle { width: 40px; height: 4px; border-radius: 2px; background: var(--handle); margin: 4px auto 10px; } .sheet__head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 32px; margin-bottom: 10px; } .sheet__title { margin: 0; font-size: 17px; font-weight: 700; } .sheet__close { position: absolute; right: 0; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); cursor: pointer; } .sheet__group { border-top: 1px solid var(--line); } .sheet__group + .sheet__group { margin-top: 8px; } .sheet__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 14px 4px; border: 0; border-bottom: 1px solid rgba(var(--overlay-rgb), 0.08); background: transparent; color: var(--text); font-size: 16px; text-align: left; cursor: pointer; } .sheet__row:last-child { border-bottom: 0; } .sheet__row--on { color: var(--accent-text); font-weight: 700; } .sheet__check { flex: none; width: 13px; height: 7px; border: 2.5px solid var(--yellow); border-top: 0; border-right: 0; transform: translateY(-2px) rotate(-45deg); } .sheet__text { display: block; } .sheet__note { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); } .switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: var(--track); cursor: pointer; transition: background 0.2s ease; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; } .switch:checked { background: var(--yellow); } .switch:checked::after { transform: translateX(18px); } .switch:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } body.no-scroll { overflow: hidden; } /* Колонки блока «Сотрудники с продажами» */ .section__tools { display: inline-flex; align-items: center; gap: 6px; } .chips--wrap { flex-wrap: wrap; overflow: visible; } .emp-cols { margin-bottom: 10px; } /* Раздел «Доступы» */ .acc-user { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); } .acc-user__main { min-width: 0; overflow-wrap: anywhere; } .acc-user__actions { display: flex; flex: none; align-items: center; gap: 6px; } .acc-user .select { max-width: 44vw; } .acc-add { display: grid; gap: 8px; margin-top: 12px; } .acc-add .input, .acc-add .select { width: 100%; max-width: 100%; text-align: left; } .acc-add .btn { margin-top: 0; } .acc-pass { display: grid; gap: 8px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); } .acc-pass .input { width: 100%; max-width: 100%; text-align: left; } .acc-pass .toolbar { flex-wrap: wrap; margin-top: 0; } .acc-pass__row { display: flex; align-items: center; gap: 8px; } .acc-pass__row .input { flex: 1 1 auto; min-width: 0; } .acc-pass__row .btn { flex: none; margin-top: 0; } .tool--on { color: var(--accent-text); } .acc-pass__status { font-size: 13px; overflow-wrap: anywhere; } .acc-pass__status:empty { display: none; } .acc-pass__status--error { color: var(--red); font-weight: 600; } .login .toolbar { flex-wrap: wrap; } .acc-perm { margin-bottom: 12px; } .acc-perm .section__title { margin: 10px 0 8px; } /* Подробный график показателя */ .block--clickable { cursor: pointer; } .block--clickable .card { transition: border-color 0.15s ease, transform 0.1s ease; } .block--clickable:hover .card { border-color: var(--border-hover); } .block--clickable:active .card { transform: scale(0.985); } .detail__buckets { width: max-content; max-width: 100%; margin: 0 auto 12px; } .detail__total { margin-bottom: 12px; } .detail__chart { margin-bottom: 10px; } .detail__list { max-height: 36vh; overflow-y: auto; } .chart__bar--prev { fill: var(--track); } .chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 12px; color: var(--muted); } .legend::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; } .legend--cur::before { background: var(--yellow); } .legend--prev::before { background: var(--track); } @keyframes sheet-rise { from { transform: translateY(100%); } to { transform: none; } } @keyframes sheet-fade { from { opacity: 0; } } .seg--compact .seg__item { padding: 6px 12px; } .chips { gap: 6px; padding: 1px 0; } .pchip { flex: none; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 13px 6px 8px; font-size: 13px; white-space: nowrap; cursor: pointer; scroll-snap-align: start; transition: border-color 0.15s ease, background 0.15s ease; } .pchip__mark { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-strong); transition: background 0.15s ease, border-color 0.15s ease; } .pchip--on { border-color: var(--yellow); background: rgba(var(--accent-rgb), 0.12); } .pchip--on .pchip__mark { background: var(--yellow); border-color: var(--yellow); } .pchip--on .pchip__mark::after { content: ""; width: 7px; height: 4px; border: 2px solid var(--on-accent); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); } .pchip--all { padding-left: 13px; font-weight: 600; } .pchip__count { font-size: 11px; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; } .pchip--all.pchip--on { background: var(--yellow); color: var(--on-accent); } .pchip--all.pchip--on .pchip__count { background: rgba(0, 0, 0, 0.14); color: var(--on-accent); } .seg__item:focus-visible, .pchip:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } .daterange { display: flex; align-items: center; gap: 8px; } .input--date { flex: 1; min-width: 0; max-width: none; } .daterange__dash { color: var(--muted); } /* Главный экран: переключатель «Итого / По точкам» и блоки точек */ .toolbar--between { justify-content: space-between; align-items: center; margin-bottom: 10px; } .toolbar--between .btn { margin-top: 0; } .point-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; } .point-group__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 10px; } .point-group__grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 720px) { .point-group__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .point-group .card { background: var(--surface-2); padding: 10px 12px; } .select, .input { appearance: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 30px 8px 12px; min-height: 38px; max-width: 46vw; background-image: linear-gradient(45deg, transparent 50%, var(--yellow) 50%), linear-gradient(135deg, var(--yellow) 50%, transparent 50%); background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size: 5px 5px; background-repeat: no-repeat; } .input { padding-right: 12px; background-image: none; } .select:focus, .input:focus { outline: 2px solid var(--yellow); outline-offset: 1px; } .tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; border-bottom: 1px solid var(--line); } .tabs::-webkit-scrollbar { display: none; } .tab { flex: none; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 14px; color: var(--muted); cursor: pointer; white-space: nowrap; } .tab--active { background: var(--yellow); color: var(--on-accent); border-color: var(--yellow); font-weight: 700; } .page { max-width: 1100px; margin: 0 auto; padding: 14px 16px calc(env(safe-area-inset-bottom) + 40px); } .loader, .empty { color: var(--muted); padding: 30px 0; text-align: center; } .banner { border-radius: 12px; padding: 10px 14px; margin-bottom: var(--gap); background: var(--banner-bg); border: 1px solid var(--banner-border); color: var(--banner-text); } .banner--error { background: var(--error-bg); border-color: var(--error-border); color: var(--error-text); } .banner--demo { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); } .section { margin: 22px 0 8px; } .section__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .section__title { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0; font-weight: 700; } .grid { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--1 { grid-template-columns: 1fr; } @media (min-width: 720px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--1 { grid-template-columns: 1fr; } } /* Карточки смен длинные: на телефоне по одной в ряд, на широком экране — по две. */ .grid--shifts { grid-template-columns: 1fr; } @media (min-width: 720px) { .grid--shifts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; min-width: 0; } .card--click { cursor: pointer; } .card--click:active { transform: scale(0.99); } .metric__label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .metric__value { font-size: 20px; font-weight: 800; margin: 6px 0 2px; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.01em; } .metric--big .metric__value { color: var(--accent-text); font-size: 22px; } .metric .metric__value--long { font-size: 17px; } .metric .metric__value--xlong { font-size: 15px; } .metric__secondary { font-size: 13px; color: var(--muted); } .metric__compare { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12px; margin-top: 6px; } .muted { color: var(--muted); } .num { font-variant-numeric: tabular-nums; } .trend { font-weight: 700; font-size: 12px; padding: 2px 7px; border-radius: 999px; white-space: nowrap; } .trend--good { color: var(--green); background: rgba(var(--green-rgb), 0.12); } .trend--bad { color: var(--red); background: rgba(var(--red-rgb), 0.12); } .trend--flat, .trend--none { color: var(--muted); background: var(--surface-2); } .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line); } .row:last-child { border-bottom: 0; } .row__label { color: var(--muted); font-size: 13px; } .row__value { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .row__sub { font-size: 12px; font-weight: 400; color: var(--muted); } .row__value .chip { margin: 4px 0 0; } .title { font-size: 17px; font-weight: 800; margin: 0; } .title-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-bottom: 8px; } /* Название точки — одной строкой сверху, без переноса слов. */ .point-title { margin: 0 0 4px; overflow-wrap: normal; word-break: keep-all; hyphens: none; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 380px) { .point-title { font-size: 16px; } } .point-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-bottom: 6px; } .big-value { font-size: 22px; font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .big-value--long { font-size: 18px; } .chip { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); margin: 2px 4px 2px 0; white-space: nowrap; } .chip--ok { color: var(--green); border-color: rgba(var(--green-rgb), 0.4); } .chip--warn { color: var(--orange); border-color: rgba(var(--orange-rgb), 0.4); } .chip--bad { color: var(--red); border-color: rgba(var(--red-rgb), 0.4); } .chip--yellow { color: var(--on-accent); background: var(--yellow); border-color: var(--yellow); font-weight: 700; } .person { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); } .person__name { font-weight: 700; } .person__role { color: var(--muted); font-size: 12px; } .person__times { text-align: right; font-variant-numeric: tabular-nums; flex: 0 1 auto; min-width: 0; max-width: 58%; } /* Текст не выходит за карточку: длинные имена и пометки переносятся, время прихода/ухода — одной строкой. */ /* ФИО не рвётся по буквам: колонка значений сжимается и переносит строки, а не отнимает ширину у имени. */ .person > div:first-child { min-width: 0; flex: 1 1 42%; overflow-wrap: break-word; } .shift-time { white-space: nowrap; font-weight: 700; } .row__value { min-width: 0; } .row__value .chip, .person__times .chip { white-space: normal; } /* «приход 08:40 · уход на смене» переносится внутри колонки, а не выходит за край карточки. */ .person__times .staff-time, .person__times .shift-time { white-space: normal; overflow-wrap: break-word; } .title-line > :first-child { min-width: 0; } .title-line > .chip { flex-shrink: 0; } .alert { border-left: 4px solid var(--orange); } .alert--critical { border-left-color: var(--red); } .alert--info { border-left-color: #4b8bff; } .alert__title { font-weight: 800; margin-bottom: 4px; } .medal { font-size: 26px; line-height: 1; margin-right: 8px; } .rank-head { display: flex; align-items: center; } .chart { width: 100%; height: auto; display: block; } .chart__bar { fill: var(--yellow-dim); } .chart__bar--peak { fill: var(--yellow); } .chart__label { fill: var(--muted); font-size: 10px; } .chart__grid { stroke: var(--line); stroke-width: 1; } /* Интерактивный график: столбец подсвечивается, над ним — подсказка с датой/временем и суммой. */ .chart-box { position: relative; } .chart--interactive .chart__col { cursor: pointer; } .chart__hit { fill: transparent; transition: fill .15s ease; } .chart__col--on .chart__hit { fill: rgba(var(--overlay-rgb), .06); } .chart__bar { transform-box: fill-box; transform-origin: 50% 100%; transition: fill .15s ease, opacity .15s ease; } /* Ряды «сейчас / сравнение» различимы: текущий — жёлтый, сравнение — серый позади. */ .chart--series .chart__bar--cur { fill: var(--yellow); } .chart--interactive .chart__bar--prev { fill: var(--track); } .chart__col--on .chart__bar--cur { fill: var(--yellow); } .chart--interactive .chart__col--on .chart__bar--prev { fill: var(--track-on); } /* Выбран столбец — остальные приглушаются. */ .chart-box--active .chart__col:not(.chart__col--on) .chart__bar { opacity: .5; } /* backwards: до старта столбец скрыт, после — анимация не удерживает opacity и приглушение работает. */ .chart--animate .chart__bar { animation: bar-grow .6s cubic-bezier(.2, .8, .2, 1) backwards; } .chart--animate .chart__bar--d1 { animation-delay: 30ms; } .chart--animate .chart__bar--d2 { animation-delay: 60ms; } .chart--animate .chart__bar--d3 { animation-delay: 90ms; } .chart--animate .chart__bar--d4 { animation-delay: 120ms; } .chart--animate .chart__bar--d5 { animation-delay: 150ms; } .chart--animate .chart__bar--d6 { animation-delay: 180ms; } .chart--animate .chart__bar--d7 { animation-delay: 210ms; } .chart--animate .chart__bar--d8 { animation-delay: 240ms; } .chart--animate .chart__bar--d9 { animation-delay: 270ms; } .chart--animate .chart__bar--d10 { animation-delay: 300ms; } .chart--animate .chart__bar--d11 { animation-delay: 330ms; } @keyframes bar-grow { from { transform: scaleY(0); opacity: .2; } to { transform: scaleY(1); opacity: 1; } } .chart-tip { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; white-space: nowrap; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--tip-bg); box-shadow: 0 6px 18px var(--shadow); font-size: 12px; line-height: 1.35; animation: tip-in .14s ease-out; } .chart-tip__label { color: var(--muted); } .chart-tip__value { font-size: 15px; font-weight: 800; color: var(--accent-text); } .chart-tip__prev { color: var(--muted); } @keyframes tip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .chart-tip__avg { font-weight: 700; } /* Линии среднего на графике. */ .chart__avg { pointer-events: none; } .chart__avg line { stroke-width: 1.2; stroke-dasharray: 4 3; } .chart__avg text { font-size: 9px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; } .chart__avg--cur line { stroke: var(--accent-text); opacity: .9; } .chart__avg--cur text { fill: var(--accent-text); } .chart__avg--prev line { stroke: var(--muted); opacity: .8; } .chart__avg--prev text { fill: var(--muted); } .chart--animate .chart__avg { animation: avg-in .5s ease-out .45s backwards; } @keyframes avg-in { from { opacity: 0; } } .legend--avg::before { height: 0; border-radius: 0; border-top: 2px dashed var(--yellow); background: none; vertical-align: 3px; } /* Средние показатели над графиком: три карточки в ряд. */ .chart-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 2px 0 10px; } .chart-stat { min-width: 0; padding: 8px; border-radius: 10px; background: rgba(var(--overlay-rgb), .04); } .chart-stat__label { font-size: 11px; line-height: 1.25; color: var(--muted); } .chart-stat__value { margin-top: 2px; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chart-stat__cmp { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 3px; font-size: 11px; } @media (prefers-reduced-motion: reduce) { .chart--animate .chart__bar, .chart--animate .chart__avg, .chart-tip { animation: none; } } /* Блок «График выручки»: период графика, итог, график. */ .chart-ranges { margin-bottom: 10px; } .pchip--plain { padding-left: 12px; } .chart-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-bottom: 6px; } .revenue-chart { transition: opacity .2s ease; } .revenue-chart--loading .chart-box, .revenue-chart--loading .chart-summary { opacity: .45; } .chart-loader { min-height: 180px; display: flex; align-items: center; justify-content: center; } /* Прогноз выручки. */ .chart--series .chart__bar--forecast, .chart__bar--forecast { fill: var(--yellow); fill-opacity: .3; stroke: var(--yellow); stroke-opacity: .75; stroke-width: 1; stroke-dasharray: 3 2; } .legend--forecast::before { background: rgba(var(--accent-rgb), .3); box-shadow: inset 0 0 0 1px var(--yellow); } .forecast-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; } .forecast-head > div:first-child { min-width: 0; } .forecast-head__side { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; } .forecast-compares { margin-top: 8px; } /* Зарплаты. */ .pay-ranges { margin-bottom: 8px; } .pay-cards { margin-bottom: var(--gap); } .pay-card { min-width: 0; } .pay-card__value { margin-top: 2px; font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pay-role + .pay-role { margin-top: 8px; } /* Суммы «начислено → прогноз» не рвутся посередине числа: переносится подпись должности. */ .pay-role .bar-row__head { gap: 8px; } .pay-role .bar-row__head .num { flex: none; white-space: nowrap; text-align: right; } .pay-person { border-top: 1px solid var(--line); } .pay-person:first-child { border-top: 0; } .pay-person > summary { list-style: none; cursor: pointer; } .pay-person > summary.person { border-top: 0; } .pay-person > summary::-webkit-details-marker { display: none; } .pay-person[open] > summary { color: var(--accent-text); } .pay-person__empty { padding: 0 0 8px; font-size: 12px; } .pay-days { width: 100%; margin: 0 0 10px; font-size: 12px; } .pay-subtitle { margin: 12px 0 2px; font-size: 14px; } .input--rate { flex: none; width: 96px; text-align: right; } .form-row--warn .muted { color: var(--orange); } .pay-avg { color: var(--text); } .pay-avg b { color: var(--accent-text); } /* Прибыль и расходы. */ .grid--profit { grid-template-columns: 1fr; } @media (min-width: 720px) { .grid--profit { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pl-card--network { border-color: var(--yellow-dim); } .pl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; font-variant-numeric: tabular-nums; } .pl-row__label { min-width: 0; color: var(--muted); } .pl-row__sub { font-size: 12px; } .pl-row__value { flex: none; white-space: nowrap; } .pl-row--strong .pl-row__label { color: var(--text); font-weight: 600; } .pl-row--strong .pl-row__value { font-weight: 700; } .pl-net { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--overlay-rgb), .05); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; } .pl-net.pl--good { color: var(--green); background: rgba(var(--green-rgb), .1); } .pl-net.pl--bad { color: var(--red); background: rgba(var(--red-rgb), .1); } .pl-net small { font-size: 12px; font-weight: 700; opacity: .85; } .pl-cats { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; } .pl-cat { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; color: var(--muted); } .pl-card .chip { display: inline-block; margin-top: 8px; white-space: normal; } .pl-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: var(--gap); font-variant-numeric: tabular-nums; } .pl-total b { font-size: 18px; } .profit-tabs { margin-bottom: 10px; } .cost-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; } .cost-search { flex: 1 1 180px; max-width: none; } .cost-search-all { flex: none; margin-top: 0; width: auto; } .cost-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; cursor: pointer; } .cost-row:first-child { border-top: 0; } .cost-row[hidden] { display: none; } .cost-row:disabled { cursor: default; } .cost-row__main { display: flex; flex-direction: column; min-width: 0; } .cost-row__name { font-weight: 600; overflow-wrap: break-word; } .cost-row__meta { font-size: 12px; color: var(--muted); } .cost-row__nums { display: flex; flex: none; flex-direction: column; align-items: flex-end; text-align: right; } .cost-row__cost { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .cost-row__cost--none { color: var(--orange); font-weight: 600; } .cost-row__src { font-size: 11px; color: var(--muted); white-space: nowrap; } .cost-empty { padding: 10px 0; } .cost-modes { margin: 10px 0 4px; } .recipe { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; } .recipe-head, .recipe-line { display: grid; grid-template-columns: minmax(0, 1fr) 62px 48px 72px 30px; gap: 6px; align-items: center; } .recipe-head { font-size: 11px; color: var(--muted); } .recipe-line .input { width: 100%; max-width: none; min-height: 34px; padding: 6px 7px; } .recipe-line__total { grid-column: 1 / -1; margin-top: -3px; font-size: 11px; color: var(--muted); text-align: right; } .recipe-add { align-self: flex-start; width: auto; margin-top: 2px; } .icon-del { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--muted); cursor: pointer; } .cost-summary { margin: 10px 0 4px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--accent-rgb), .12); font-variant-numeric: tabular-nums; } .cost-editor .btn + .btn { margin-top: 8px; } .expense { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); } .expense--click { cursor: pointer; } .expense:first-child { border-top: 0; } .expense__main { min-width: 0; } .expense__side { flex: none; text-align: right; font-variant-numeric: tabular-nums; } .link-btn { display: inline-block; margin: 4px 0 0 10px; padding: 0; border: 0; background: none; color: var(--accent-text); font-size: 12px; cursor: pointer; } .link-btn.link-btn--value { margin: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; } .link-btn--danger { color: var(--red); } .expense-form { margin-bottom: var(--gap); } .tax-card { margin-bottom: var(--gap); } .expense-form .btn + .btn { margin-top: 8px; } /* Выбор темы оформления: кнопка в шапке и карточки с живым превью (у превью свой data-theme). */ .topbar__actions { display: flex; align-items: center; gap: 8px; } .icon-btn { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; transition: transform .15s ease, border-color .15s ease; } .icon-btn:hover { border-color: var(--border-hover); } .icon-btn:active { transform: scale(.94); } .icon-btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } .theme-note { margin: 0 0 10px; } .theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-bottom: 6px; } @media (min-width: 480px) { .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .theme-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px 6px 8px; border: 2px solid transparent; border-radius: 14px; background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s ease, transform .15s ease; } .theme-card:active { transform: scale(.97); } .theme-card--on { border-color: var(--yellow); } .theme-card:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } .theme-card__label { padding: 0 2px; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .theme-card__note { margin-top: -5px; padding: 0 2px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .theme-card__split { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 10px; } .theme-card__split .theme-prev { border-radius: 0; } .theme-prev { display: block; height: 64px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); } .theme-prev__card { display: flex; flex-direction: column; gap: 5px; height: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); } .theme-prev__accent { width: 62%; height: 9px; border-radius: 5px; background: var(--yellow); } .theme-prev__line { width: 86%; height: 5px; border-radius: 3px; background: var(--muted); opacity: .55; } .theme-prev__line--short { width: 48%; } .bar-row { margin: 8px 0; } .tasks-home .disc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tasks-point { margin: 10px 0; padding: 8px; border-radius: 12px; } .tasks-point--inv { background: rgba(var(--green-rgb), .08); } .fine { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 14px; overflow-wrap: anywhere; } .fine:first-of-type { border-top: 0; } .fine--off { opacity: .6; } .fine__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .fine__time { font-weight: 700; font-variant-numeric: tabular-nums; } .fine__point { color: var(--muted); } .fine__sum { margin-left: auto; color: var(--red); white-space: nowrap; font-variant-numeric: tabular-nums; } .fine--off .fine__sum { color: var(--muted); } .fine__what { font-weight: 600; } .fine__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; } .fine__src { font-size: 12px; } .fine-edit { display: grid; gap: 6px; margin-top: 6px; padding: 8px; border-radius: 12px; background: rgba(var(--overlay-rgb), .05); } .fine-edit .toolbar { flex-wrap: wrap; margin-top: 0; } .fine-edit .select, .fine-edit .input { max-width: 60%; } .fine-filters { margin-bottom: var(--gap); } .fine-person { margin-top: 2px; } .fine-person > summary { list-style: none; cursor: pointer; } .fine-person > summary::-webkit-details-marker { display: none; } .fine-person[open] > summary .tasks-row__label { color: var(--accent-text); } .fine-person__line { padding: 3px 0 3px 10px; font-size: 12px; overflow-wrap: anywhere; } .fine-staff { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 13px; } .fine-staff__row { padding: 2px 0; overflow-wrap: anywhere; } .tasks-late { padding: 3px 0 3px 10px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } .tasks-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; } .tasks-row:first-of-type { border-top: 0; } .tasks-row__label { min-width: 0; overflow-wrap: anywhere; } .tasks-chip { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow-wrap: anywhere; } .tasks-chip--ok { background: rgba(var(--green-rgb), .16); color: var(--green); } .tasks-chip--bad { background: rgba(var(--red-rgb), .14); color: var(--red); } .tasks-chip--wait { background: rgba(var(--orange-rgb), .16); color: var(--orange); } .tasks-chip--none { background: var(--surface-2); color: var(--muted); font-weight: 500; } .tasks-marks { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; } .tasks-inv, .tasks-time { padding: 2px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; background: var(--surface-2); color: var(--muted); } .tasks-inv--done { background: rgba(var(--green-rgb), .16); color: var(--green); font-weight: 600; } .tasks-inv--miss { background: rgba(var(--red-rgb), .12); color: var(--red); font-weight: 600; } .tasks-time--bad { background: rgba(var(--red-rgb), .12); color: var(--red); } .tasks-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; } .tasks-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } .tasks-dot--done { background: var(--green); } .tasks-dot--late { background: var(--red); } .tasks-dot--skip { background: var(--orange); } .tasks-ok { color: var(--green); font-weight: 600; } .tasks-point__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; } .tasks-point__head .num { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; } .tasks-point__sub { margin-top: 3px; font-size: 12px; } .tasks-recent { padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; } .tasks-bad { color: var(--red); font-weight: 600; } /* Кассовые смены: журнал смен и итог по каждой точке после закрытия. */ .cash-shift { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 14px; overflow-wrap: anywhere; } .cash-shift:first-of-type { border-top: 0; } .cash-shift--short { border-left: 3px solid var(--red); padding-left: 8px; } .cash-shift--over { border-left: 3px solid var(--orange); padding-left: 8px; } .cash-shift__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .cash-shift__who { font-size: 13px; color: var(--muted); } .cash-shift__calc { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .cash-shift__calc b { color: var(--text); } .cash-hold { justify-self: start; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(var(--red-rgb), .14); color: var(--red); } .cash-last { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 13px; } /* Кассовые смены: сверка дня, пересчёт кассира и операции кассы. */ .cash-wait { justify-self: start; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(var(--orange-rgb), .16); color: var(--orange); } .cash-ops { margin-top: 4px; font-size: 12px; } .cash-ops summary { cursor: pointer; color: var(--muted); } .cash-op { padding: 2px 0 2px 10px; color: var(--muted); overflow-wrap: anywhere; } .cash-op .num { font-weight: 700; color: var(--text); } .cash-form { display: grid; gap: 6px; margin-top: 6px; padding: 8px; border-radius: 12px; background: rgba(var(--overlay-rgb), .05); } .cash-form .input { max-width: 100%; } .cash-form__buttons { display: flex; flex-wrap: wrap; gap: 8px; } /* Прибыль: средние за день и месяц, суммы-кнопки открывают график. */ .pl-avg { margin-top: 6px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; } .disc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; } .disc-stat { min-width: 0; padding: 8px; border-radius: 10px; background: rgba(var(--overlay-rgb), .05); } .disc-stat b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; } .disc-stat span { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } .disc-top { margin-top: 6px; } .disc-row { display: block; width: 100%; margin: 0; padding: 0 6px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .disc-row--on { background: rgba(var(--accent-rgb), .14); } .disc-row .bar-row__head > span:first-child { min-width: 0; overflow-wrap: anywhere; } .disc-row .bar-row__head > .num { flex: none; white-space: nowrap; } .disc-row__sub { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; margin: -2px 0 10px; font-size: 12px; color: var(--muted); } .disc-filter-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; } .disc-event { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; overflow-wrap: anywhere; } .disc-event:last-of-type { border-bottom: 0; } .disc-event__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; } .disc-event__time { font-weight: 700; font-variant-numeric: tabular-nums; } .disc-event__sum { margin-left: auto; color: var(--red); white-space: nowrap; font-variant-numeric: tabular-nums; } .disc-event__name { font-weight: 600; } .disc-event__comment { padding: 4px 8px; border-radius: 8px; background: rgba(var(--accent-rgb), .12); } .pay-method { margin: 12px 0; } .pay-method .bar-row__head { align-items: baseline; } .pay-method .bar-row__head > span:first-child { min-width: 0; overflow-wrap: anywhere; } .pay-method .bar-row__head > .num { flex: none; white-space: nowrap; } .pay-method__cmp { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 12px; font-variant-numeric: tabular-nums; } .pay-types { margin: 6px 0 0 4px; padding-left: 10px; border-left: 2px solid var(--line); } .pay-type { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 6px 0; font-size: 12px; font-variant-numeric: tabular-nums; } .pay-type + .pay-type { border-top: 1px dashed var(--line); } .pay-type__name { font-size: 13px; overflow-wrap: anywhere; } .pay-type__val { justify-self: end; white-space: nowrap; } .pay-type .trend { justify-self: end; } .pay-total-prev { font-size: 13px; margin: 2px 0 4px; font-variant-numeric: tabular-nums; } .pay-points { margin-top: var(--gap); } .pay-point > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .pay-point > summary::-webkit-details-marker { display: none; } .pay-point > summary .point-title { flex: 1 1 auto; min-width: 0; margin: 0; white-space: nowrap; } .pay-point__sum { flex: none; display: flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; } .pay-point[open] > summary { margin-bottom: 6px; } .pay-point[open] > summary .point-title { color: var(--accent-text); } .bar-row__head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 4px; } .bar { width: 100%; height: 8px; display: block; } .bar__track { fill: var(--surface-2); } .bar__fill { fill: var(--yellow); } .insight { padding: 10px 0; border-bottom: 1px solid var(--line); } .insight:last-child { border-bottom: 0; } .toolbar { display: flex; flex-wrap: wrap; gap: 8px; } .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } th, td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; } th:first-child, td:first-child { text-align: left; } th { color: var(--muted); font-size: 12px; font-weight: 700; } .form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .form-row label { color: var(--text); } .form-row > label { min-width: 0; } .form-row .input { flex: none; width: 110px; max-width: 55%; text-align: right; } .form-row.form-row--stack { display: block; } .form-row.form-row--stack > label { display: block; margin-bottom: 6px; } .form-row.form-row--stack .chips { margin: 0; } .form-row .input--wide { width: 180px; max-width: 58%; text-align: left; } .unit-input { display: inline-flex; flex: none; align-items: center; gap: 6px; } .unit-input .input { width: 80px; max-width: none; } /* Карточки настроек точек: на телефоне по одной в ряд, чтобы поля помещались. */ .grid--wide { grid-template-columns: 1fr; } @media (min-width: 720px) { .grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sync-note { margin: 4px 0 10px; } .form-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--yellow); } .btn { border: 0; border-radius: 12px; padding: 12px 16px; background: var(--yellow); color: var(--on-accent); font-weight: 800; cursor: pointer; width: 100%; margin-top: 14px; } .btn:disabled { opacity: 0.5; } .note { color: var(--muted); font-size: 12px; margin-top: 8px; } .hidden { display: none; } /* Настраиваемые блоки главного экрана */ .layout { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 720px) { .layout { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .block { min-width: 0; display: flex; flex-direction: column; } .block > .card { flex: 1; } .block--section { grid-column: 1 / -1; } .block--large { grid-column: span 2; } .block .section { margin: 10px 0 0; } .block--editing > .card, .block--editing > .section { outline: 1px dashed var(--yellow-dim); outline-offset: 2px; border-radius: var(--radius); } .block--dragging { opacity: 0.55; } .block__tools { display: flex; gap: 4px; margin-bottom: 6px; } .tool { min-width: 34px; min-height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; } .tool:disabled { opacity: 0.35; cursor: default; } .tool--drag { cursor: grab; touch-action: none; margin-right: auto; font-size: 18px; } .tool--danger { color: var(--red); } .btn--small { width: auto; margin-top: 8px; padding: 9px 12px; font-size: 14px; } .btn--ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); font-weight: 600; } .toolbar--end { justify-content: flex-end; margin-bottom: 8px; } .toolbar .select { margin-top: 8px; } .editbar, .editor { margin-bottom: var(--gap); } .editor { border-color: var(--yellow); } .editor .select { max-width: 60vw; } /* Главный экран: сотрудники с продажами и по должностям */ .list-card .person:first-child { border-top: 0; } .staff-group .title-line { margin-bottom: 4px; } .staff-group .person__times b { font-weight: 700; } .staff-time { white-space: nowrap; } /* Вход на сайт кодом от бота */ .login { max-width: 440px; margin: 32px auto; } .login__title { margin: 0 0 8px; font-size: 20px; } .login .input { width: 100%; max-width: 100%; margin: 12px 0; text-align: left; font-size: 17px; } .login__code { letter-spacing: 0.3em; text-align: center !important; font-variant-numeric: tabular-nums; } /* Вкладка «Индикаторы» */ .ind-group { margin-top: 14px; } .ind-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); } .ind-row:last-child { border-bottom: 0; } .ind-row__name { flex: 1; min-width: 0; font-size: 14px; } .ind-row__value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .ind-row__prev { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); white-space: normal; } .ind-preview { margin-top: 12px; } .input--search { width: 100%; max-width: 100%; margin: 8px 0; text-align: left; } .checklist { max-height: 240px; overflow-y: auto; margin: 4px 0; border-top: 1px solid var(--line); } .check { display: flex; align-items: center; gap: 10px; padding: 7px 2px; font-size: 14px; cursor: pointer; border-bottom: 1px dashed var(--line); } .check input { flex: none; width: 18px; height: 18px; accent-color: var(--yellow); } /* Раздел «Кнопки»: редактор кнопок Telegram и предпросмотр клавиатуры */ .btn-edit { border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin: 10px 0; background: var(--surface-2); } .btn-edit .select { max-width: 55vw; } .spacer { flex: 1; } textarea { font: inherit; color: inherit; } .input--area { display: block; width: 100%; max-width: 100%; min-height: 110px; padding: 10px 12px; margin: 6px 0; resize: vertical; line-height: 1.4; } .label--block { display: block; margin-top: 10px; } .tg-kb { display: flex; flex-direction: column; gap: 4px; padding: 8px; margin: 6px 0 10px; border-radius: 12px; background: #17212b; } .tg-kb__row { display: flex; gap: 4px; } .tg-kb__btn { flex: 1; min-width: 0; padding: 8px 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 13px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }