/* ========================================================================== Дастархан CRM — визуальный макет, СВЕТЛАЯ ТЕМА Дизайн-система: iOS glassmorphism, тёплая «льняная» палитра, акцент — гранатовый (бордо), классический цвет дастархана. Только оформление: скриптов и обработчиков нет. ========================================================================== */ /* ---------- Токены (светлая тема, без тёмных переопределений) ---------- */ :root{ --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Cascadia Mono", Consolas, monospace; /* чернила — тёмно-коричневый по светлому */ --ink: #2A211C; --ink-2: #6A5C52; --ink-3: #9C8E83; --line: rgba(42,33,28,.10); --line-2: rgba(42,33,28,.17); /* льняная основа и мягкая «аврора» под стеклом */ --bg: #F5F1EB; --blob-1: #F6D2A8; /* шафран */ --blob-2: #F2BEBE; /* гранат */ --blob-3: #AFE0D7; /* бирюза */ --blob-4: #C8CFF0; /* индиго */ --blob-a: .50; /* стекло — полупрозрачный кремово-белый */ --glass: rgba(255,253,250,.66); --glass-2: rgba(255,253,250,.44); --glass-3: rgba(255,253,250,.30); --glass-strong: rgba(255,254,252,.86); --pop: rgba(255,253,250,.97); /* всплывающий список — почти непрозрачный, поверх любого фона */ --glass-brd: rgba(255,255,255,.78); --blur: saturate(170%) blur(26px); /* мягкие светло-серые тени */ --shadow-1: 0 1px 2px rgba(122,110,100,.07), 0 6px 16px -9px rgba(122,110,100,.20); --shadow-2: 0 2px 6px rgba(122,110,100,.07), 0 20px 44px -22px rgba(122,110,100,.26); --shadow-3: 0 28px 64px -26px rgba(122,110,100,.34); /* акцент — гранат (бордо) */ --accent: #8B3A3A; --accent-ink: #7A3131; --accent-soft: rgba(139,58,58,.10); --accent-brd: rgba(139,58,58,.22); --on-accent: #FFF8F5; /* статусы: бирюза / шафран / алый — проверены на цветовую слепоту */ --ok: #0E9C8E; --ok-soft: rgba(14,156,142,.13); --warn: #C4820D; --warn-soft: rgba(196,130,13,.15); --crit: #D2342F; --crit-soft: rgba(210,52,47,.12); --info: #3B5BC4; --info-soft: rgba(59,91,196,.12); /* серии графиков */ --s1: #A63D3D; --s2: #3B5BC4; --s3: #0E9C8E; --s4: #C4820D; /* радиусы 11–30px */ --r-xl: 30px; --r-lg: 22px; --r-md: 16px; --r-sm: 11px; --r-xs: 8px; --sidebar: 268px; color-scheme: light; } /* ---------- База ---------- */ *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui); font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } h1,h2,h3,h4{ margin:0; text-wrap:balance; letter-spacing:-.02em; font-weight:650; } p{ margin:0; } table{ border-collapse:collapse; width:100%; } img{ max-width:100%; } a{ color:inherit; text-decoration:none; } :focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; border-radius:6px; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } .num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } .mono{ font-family:var(--font-mono); font-size:.86em; letter-spacing:-.01em; } .ic{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; } /* «Аврора» — то, что просвечивает сквозь стекло */ .aurora{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; } .aurora span{ position:absolute; display:block; border-radius:50%; filter:blur(72px); opacity:var(--blob-a); } .aurora span:nth-child(1){ width:52vmax; height:52vmax; left:-14vmax; top:-16vmax; background:var(--blob-1); } .aurora span:nth-child(2){ width:46vmax; height:46vmax; right:-12vmax; top:6vmax; background:var(--blob-2); } .aurora span:nth-child(3){ width:44vmax; height:44vmax; left:6vmax; top:52vmax; background:var(--blob-3); } .aurora span:nth-child(4){ width:50vmax; height:50vmax; right:-8vmax; top:86vmax; background:var(--blob-4); } .aurora span:nth-child(5){ width:40vmax; height:40vmax; left:-6vmax; top:128vmax; background:var(--blob-2); } .aurora span:nth-child(6){ width:46vmax; height:46vmax; right:2vmax; top:170vmax; background:var(--blob-3); } .grain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.30; background-image:radial-gradient(rgba(42,33,28,.09) .5px, transparent .5px); background-size:3px 3px; } /* ---------- Каркас ---------- */ .app{ display:grid; grid-template-columns:1fr; min-height:100vh; } .main{ min-width:0; padding:16px 16px 104px; display:flex; flex-direction:column; gap:40px; } /* Боковое меню (планшет/десктоп) */ .sidebar{ display:none; } .side-inner{ position:sticky; top:16px; height:calc(100vh - 32px); display:flex; flex-direction:column; gap:12px; background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-brd); border-radius:var(--r-xl); box-shadow:var(--shadow-2); padding:18px 14px; } .brand{ display:flex; align-items:center; gap:11px; padding:4px 8px 12px; } .brand-mark{ width:38px; height:38px; border-radius:12px; flex:none; display:grid; place-items:center; background:linear-gradient(145deg, #A8474A, #6F2626); color:var(--on-accent); box-shadow:0 6px 16px -6px rgba(139,58,58,.50); font-weight:700; font-size:15px; } .brand-name{ font-size:15px; font-weight:650; letter-spacing:-.02em; } .brand-sub{ font-size:11.5px; color:var(--ink-3); } .nav{ display:flex; flex-direction:column; gap:2px; overflow-y:auto; scrollbar-width:thin; } .nav-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); padding:14px 10px 6px; font-weight:600; } .nav-item{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--r-sm); font-size:14px; color:var(--ink-2); font-weight:500; } .nav-item .ic{ width:19px; height:19px; opacity:.85; } .nav-item.is-active{ background:var(--accent-soft); color:var(--accent-ink); font-weight:600; box-shadow:inset 0 0 0 1px var(--accent-brd); } .nav-item .count{ margin-left:auto; font-size:11.5px; color:var(--ink-3); background:var(--glass-3); border-radius:6px; padding:1px 6px; } .nav-item.is-locked{ opacity:.45; } .side-user{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px 8px 2px; border-top:1px solid var(--line); } /* Нижняя панель вкладок (телефон) */ .tabbar{ position:fixed; left:12px; right:12px; bottom:12px; z-index:40; display:grid; grid-template-columns:repeat(5,1fr); gap:2px; padding:8px 6px 9px; background:var(--glass-strong); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-brd); border-radius:26px; box-shadow:var(--shadow-2); } .tabbar a{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; color:var(--ink-3); font-weight:500; } .tabbar a.is-active{ color:var(--accent-ink); } .tabbar .ic{ width:22px; height:22px; } /* «Ещё» открывает все разделы листом снизу: в панели помещается только пять */ .modal-body.nav-sheet{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding-top:4px; } .nav-sheet .nav-item{ padding:12px; font-size:14px; border:1px solid var(--glass-brd); min-width:0; } .nav-sheet .nav-item:not(.is-active){ background:var(--glass-2); } .nav-sheet .nav-label{ grid-column:1 / -1; padding:10px 4px 2px; } /* кто вошёл и выход — на телефоне бокового меню с этим блоком нет */ .nav-sheet-user{ align-items:center; justify-content:flex-start; flex-wrap:nowrap; gap:10px; padding-bottom:calc(13px + env(safe-area-inset-bottom)); } .nav-sheet-user .grow{ flex:1; min-width:0; } .nav-sheet-user .row-sub{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ---------- Секции макета ---------- */ .screen{ scroll-margin-top:16px; display:flex; flex-direction:column; gap:14px; } .screen-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:22px 4px 0; border-top:1px solid var(--line); } .screen-num{ font-family:var(--font-mono); font-size:11px; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-brd); padding:3px 8px; border-radius:999px; } .screen-title{ font-size:19px; font-weight:680; } .screen-ref{ font-size:11.5px; color:var(--ink-3); margin-left:auto; font-family:var(--font-mono); } /* Панель экрана */ .toolbar{ display:flex; flex-direction:column; gap:12px; } .toolbar-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .page-title{ font-size:26px; font-weight:700; letter-spacing:-.03em; } .page-sub{ font-size:13px; color:var(--ink-2); } .spacer{ margin-left:auto; } /* Кнопки */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 15px; border-radius:999px; border:1px solid var(--glass-brd); background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); font:inherit; font-size:13.5px; font-weight:560; color:var(--ink); box-shadow:var(--shadow-1); } .btn .ic{ width:16px; height:16px; } .btn-primary{ background:linear-gradient(160deg, var(--accent), var(--accent-ink)); color:var(--on-accent); border-color:transparent; box-shadow:0 8px 20px -8px rgba(139,58,58,.48); font-weight:620; } .btn-danger{ color:var(--crit); border-color:color-mix(in srgb, var(--crit) 28%, transparent); background:var(--crit-soft); } .btn-ok{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 28%, transparent); background:var(--ok-soft); } .btn-warn{ color:var(--warn); border-color:color-mix(in srgb, var(--warn) 28%, transparent); background:var(--warn-soft); } /* недоступное действие видно сразу: кнопка гасится, а не молча ничего не делает */ .btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; } .btn-ghost{ background:var(--glass-3); box-shadow:none; } .btn-sm{ height:32px; padding:0 12px; font-size:12.5px; } .btn-icon{ width:38px; padding:0; } .btn-row{ display:flex; gap:8px; flex-wrap:wrap; } /* Поиск / поля / фильтры */ .search{ display:flex; align-items:center; gap:9px; height:40px; padding:0 14px; flex:1 1 220px; min-width:0; background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-brd); border-radius:999px; box-shadow:var(--shadow-1); color:var(--ink-3); } .search .ic{ width:17px; height:17px; } .search input{ border:0; background:transparent; font:inherit; font-size:14px; color:var(--ink); width:100%; outline:none; } .search input::placeholder{ color:var(--ink-3); } .filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .select, .chip{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border-radius:999px; background:var(--glass-2); border:1px solid var(--glass-brd); font-size:12.5px; color:var(--ink-2); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); white-space:nowrap; } .select .ic{ width:13px; height:13px; opacity:.6; } .select b{ color:var(--ink); font-weight:560; } .chip.is-on{ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-brd); font-weight:560; } .checkbox{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); } .box{ width:17px; height:17px; border-radius:5px; border:1.5px solid var(--line-2); background:var(--glass-2); flex:none; } .box.is-on{ background:var(--accent); border-color:var(--accent); position:relative; } .box.is-on::after{ content:""; position:absolute; left:4.5px; top:1px; width:4px; height:9px; border:solid var(--on-accent); border-width:0 2px 2px 0; transform:rotate(42deg); } /* Сегментированный переключатель (iOS) */ .segment{ display:inline-flex; padding:3px; gap:3px; border-radius:999px; background:var(--glass-2); border:1px solid var(--glass-brd); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); } .segment span{ padding:6px 15px; border-radius:999px; font-size:13px; font-weight:540; color:var(--ink-2); white-space:nowrap; } .segment span.is-on{ background:var(--glass-strong); color:var(--ink); box-shadow:var(--shadow-1); font-weight:600; } /* ---------- Карточки ---------- */ .card{ background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-brd); border-radius:var(--r-xl); box-shadow:var(--shadow-2); overflow:hidden; } .card-head{ display:flex; align-items:center; gap:10px; padding:16px 18px 12px; flex-wrap:wrap; } .card-title{ font-size:15px; font-weight:640; } .card-note{ font-size:12px; color:var(--ink-3); } .card-body{ padding:0 18px 18px; display:flex; flex-direction:column; gap:14px; } .card-body.flush{ padding:0 0 4px; } .card-foot{ padding:12px 18px; border-top:1px solid var(--line); background:var(--glass-3); display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .hr{ width:100%; height:1px; background:var(--line-2); border:0; margin:0; flex:none; } /* ничто не должно растягивать страницу шире экрана */ .screen, .screen > *, .cols > *, .card, .card-body, .modal, .modal-body, .toolbar{ min-width:0; } /* KPI */ .kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; } .kpi{ padding:15px 16px; border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--glass-brd); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:4px; min-width:0; } .kpi-label{ font-size:11.5px; color:var(--ink-2); font-weight:530; display:flex; align-items:center; gap:6px; } .kpi-value{ font-size:25px; font-weight:700; letter-spacing:-.035em; line-height:1.15; } .kpi-value small{ font-size:15px; font-weight:600; color:var(--ink-2); letter-spacing:-.01em; } .kpi-sub{ font-size:11.5px; color:var(--ink-3); } .kpi.is-warn{ background:linear-gradient(170deg, var(--warn-soft), var(--glass) 70%); } .kpi.is-crit{ background:linear-gradient(170deg, var(--crit-soft), var(--glass) 70%); } .kpi.is-ok{ background:linear-gradient(170deg, var(--ok-soft), var(--glass) 70%); } .kpi.is-accent{ background:linear-gradient(170deg, var(--accent-soft), var(--glass) 70%); } .delta{ font-size:11.5px; font-weight:600; display:inline-flex; align-items:center; gap:3px; } .delta.up{ color:var(--ok); } .delta.down{ color:var(--crit); } /* Пилюли-статусы: цвет + точка + подпись */ .pill{ display:inline-flex; align-items:center; gap:6px; padding:3.5px 10px 3.5px 8px; border-radius:999px; font-size:11.5px; font-weight:580; white-space:nowrap; border:1px solid transparent; } .pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; } .pill.ok{ color:var(--ok); background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 22%,transparent); } .pill.warn{ color:var(--warn); background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 22%,transparent); } .pill.crit{ color:var(--crit); background:var(--crit-soft); border-color:color-mix(in srgb,var(--crit) 22%,transparent); } .pill.info{ color:var(--info); background:var(--info-soft); border-color:color-mix(in srgb,var(--info) 22%,transparent); } .pill.mute{ color:var(--ink-2); background:var(--glass-3); border-color:var(--line); } .pill.acc{ color:var(--accent-ink); background:var(--accent-soft); border-color:var(--accent-brd); } .pill.plain::before{ display:none; } /* Образцы ткани и миниатюры */ .thumb{ width:44px; height:44px; border-radius:12px; flex:none; box-shadow:inset 0 0 0 1px rgba(42,33,28,.10), var(--shadow-1); position:relative; overflow:hidden; } .thumb::after{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.20) 0 2px, transparent 2px 5px); } .thumb.sm{ width:34px; height:34px; border-radius:10px; } .thumb.lg{ width:100%; aspect-ratio:1/1; height:auto; border-radius:var(--r-lg); max-width:100%; } /* Название товара в ячейке */ .item{ display:flex; align-items:center; gap:10px; min-width:0; } .item-name{ font-weight:570; font-size:13.5px; line-height:1.25; display:block; } .item-meta{ font-size:11.5px; color:var(--ink-3); display:block; } /* ---------- Таблицы ---------- */ .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .grid{ font-size:13px; } .grid th{ text-align:left; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); padding:10px 12px; white-space:nowrap; border-bottom:1px solid var(--line); } .grid th.r, .grid td.r{ text-align:right; } .grid td{ padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle; } .grid tbody tr:last-child td{ border-bottom:0; } .grid tfoot td{ font-weight:640; background:var(--glass-3); border-top:1px solid var(--line-2); border-bottom:0; } .grid .sorted{ color:var(--accent-ink); } .grid .sorted::after{ content:"▾"; font-size:9px; margin-left:4px; } .grid .muted{ color:var(--ink-3); } .grid .strong{ font-weight:620; } .grid .neg{ color:var(--crit); font-weight:600; } .grid .pos{ color:var(--ok); font-weight:600; } .row-group td{ background:var(--glass-3); font-weight:620; } .caret{ display:inline-block; width:14px; color:var(--ink-3); } /* Мобильные «карточные» таблицы */ @media (max-width: 760px){ .grid, .grid tbody, .grid tr, .grid td{ display:block; width:100%; } .grid thead, .grid tfoot{ display:none; } .grid tr{ padding:12px 14px; border-bottom:1px solid var(--line); } .grid tbody tr:last-child{ border-bottom:0; } .grid td{ padding:3px 0; border:0; display:flex; align-items:center; justify-content:space-between; gap:14px; } .grid td::before{ content:attr(data-l); font-size:11px; color:var(--ink-3); font-weight:520; flex:none; } .grid td.lead{ justify-content:flex-start; padding-bottom:8px; } .grid td.lead::before{ display:none; } .grid td.hide-m{ display:none; } .row-group td{ background:transparent; } } @media (min-width: 761px){ .grid{ min-width:660px; } .grid.narrow{ min-width:440px; } .grid td::before{ display:none; } } /* ---------- Формы и поп-апы ---------- */ .modal-stage{ position:relative; border-radius:var(--r-xl); padding:30px 14px 22px; overflow:hidden; background:linear-gradient(160deg, rgba(88,70,60,.34), rgba(88,70,60,.20)); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); display:flex; justify-content:center; } .modal-stage::before{ content:attr(data-stage); position:absolute; left:18px; top:10px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.85); font-weight:600; } .modal{ width:100%; max-width:520px; background:var(--glass-strong); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-brd); border-radius:26px; box-shadow:var(--shadow-3); overflow:hidden; } .modal.wide{ max-width:780px; } .modal-head{ display:flex; align-items:center; gap:10px; padding:16px 18px 6px; } .modal-head h3{ font-size:17px; } .modal-body{ padding:10px 18px 16px; display:flex; flex-direction:column; gap:13px; } .modal-foot{ padding:13px 18px; border-top:1px solid var(--line); background:var(--glass-3); display:flex; gap:9px; justify-content:flex-end; flex-wrap:wrap; } .modal-note{ font-size:11.5px; color:var(--ink-3); } .field{ display:flex; flex-direction:column; gap:6px; min-width:0; } .field > label{ font-size:11.5px; font-weight:590; color:var(--ink-2); letter-spacing:.01em; } .field .req{ color:var(--accent); } .control{ display:flex; align-items:center; gap:9px; min-height:42px; padding:9px 13px; border-radius:var(--r-md); background:var(--glass-2); border:1px solid var(--glass-brd); box-shadow:inset 0 1px 1px rgba(255,255,255,.28); font-size:14px; color:var(--ink); } .control.ph{ color:var(--ink-3); } .control .ic{ width:16px; height:16px; opacity:.6; } .control input, .control textarea{ border:0; background:transparent; font:inherit; color:var(--ink); width:100%; outline:none; resize:none; } .control input::placeholder, .control textarea::placeholder{ color:var(--ink-3); } .control.is-focus{ border-color:var(--accent-brd); box-shadow:0 0 0 3.5px var(--accent-soft); background:var(--glass-strong); } .control.tall{ align-items:flex-start; min-height:74px; } .control .grow{ flex:1; min-width:0; } .hint{ font-size:11px; color:var(--ink-3); } .hint.warn{ color:var(--warn); } .hint.crit{ color:var(--crit); font-weight:560; } .two-col{ display:grid; grid-template-columns:1fr; gap:13px; } @media (min-width: 560px){ .two-col{ grid-template-columns:1fr 1fr; } .two-col .span2{ grid-column:1/-1; } } /* Выпадающий список с поиском */ .dropdown{ border-radius:var(--r-md); border:1px solid var(--glass-brd); background:var(--glass-strong); box-shadow:var(--shadow-2); overflow:hidden; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); } .dd-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); font-size:13.5px; } .dd-item:last-child{ border-bottom:0; } .dd-item.is-hl{ background:var(--accent-soft); } .dd-item.is-new{ color:var(--accent-ink); font-weight:590; } .dd-meta{ margin-left:auto; font-size:11.5px; color:var(--ink-3); text-align:right; white-space:nowrap; } /* Переключатель iOS */ .switch{ width:44px; height:26px; border-radius:999px; background:var(--line-2); position:relative; flex:none; } .switch::after{ content:""; position:absolute; top:2.5px; left:2.5px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.28); } .switch.is-on{ background:var(--ok); } .switch.is-on::after{ left:auto; right:2.5px; } /* ---------- Списки и колонки ---------- */ .list{ display:flex; flex-direction:column; } .list-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); } .list-row:last-child{ border-bottom:0; } .list-row .grow{ min-width:0; flex:1; } .row-title{ font-size:13.5px; font-weight:560; display:block; } .row-sub{ font-size:11.5px; color:var(--ink-3); display:block; } .avatar{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:12px; font-weight:650; color:var(--on-accent); background:linear-gradient(150deg,#A8474A,#6F2626); } .avatar.b2{ background:linear-gradient(150deg,var(--s2),#25357E); color:#fff; } .avatar.b3{ background:linear-gradient(150deg,var(--s3),#0A5F4C); color:#fff; } .avatar.b4{ background:linear-gradient(150deg,var(--s4),#8A5A06); color:#fff; } .cols{ display:grid; grid-template-columns:1fr; gap:14px; align-items:start; } @media (min-width: 900px){ .cols.c2{ grid-template-columns:1fr 1fr; } .cols.c3{ grid-template-columns:repeat(3,1fr); } .cols.c21{ grid-template-columns:1.6fr 1fr; } .cols.c12{ grid-template-columns:1fr 1.7fr; } } /* Статусы-цепочка */ .flow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .flow .step{ padding:7px 13px; border-radius:999px; font-size:12.5px; font-weight:560; background:var(--glass-2); border:1px solid var(--glass-brd); } .flow .step.is-now{ background:var(--accent); color:var(--on-accent); border-color:transparent; font-weight:620; box-shadow:0 8px 18px -8px rgba(139,58,58,.46); } .flow .step.is-done{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 26%,transparent); background:var(--ok-soft); } .flow .step.is-end{ color:var(--ink-3); } .flow .arr{ color:var(--ink-3); font-size:12px; } /* Плитка товаров */ .tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px; } .tile{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r-lg); padding:10px; box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:8px; min-width:0; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); } .tile-name{ font-size:13.5px; font-weight:590; line-height:1.25; } .tile-meta{ font-size:11.5px; color:var(--ink-3); } .tile-price{ font-size:14.5px; font-weight:680; letter-spacing:-.02em; } /* Дерево категорий */ .tree{ display:flex; flex-direction:column; gap:2px; font-size:13.5px; } .tree-row{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r-sm); } .tree-row.lvl2{ margin-left:22px; background:var(--glass-3); } .tree-row .drag{ color:var(--ink-3); } .tree-row .count{ margin-left:auto; font-size:11.5px; color:var(--ink-3); } /* Графики */ .chart{ width:100%; max-width:100%; height:auto; display:block; } .chart .axis{ fill:var(--ink-3); font-size:10px; font-family:var(--font-ui); } .chart .grid-l{ stroke:var(--line); stroke-width:1; } .chart .val{ fill:var(--ink); font-size:10.5px; font-weight:600; font-family:var(--font-ui); } .legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); } .legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:-1px; } /* Матрица прав */ .matrix th.c{ text-align:center; font-size:10.5px; } .matrix td.c{ text-align:center; } .yes{ color:var(--ok); font-weight:700; } .no{ color:var(--ink-3); } .part{ color:var(--warn); font-size:11.5px; font-weight:600; } /* Телефонные рамки */ .phones{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; } .phone{ width:100%; max-width:288px; margin:0 auto; border-radius:42px; padding:9px; background:linear-gradient(160deg, rgba(74,60,52,.55), rgba(74,60,52,.34)); box-shadow:var(--shadow-3); border:1px solid var(--glass-brd); } .phone-screen{ border-radius:34px; overflow:hidden; background:var(--bg); position:relative; min-height:520px; display:flex; flex-direction:column; } .phone-bg{ position:absolute; inset:0; overflow:hidden; } .phone-bg span{ position:absolute; border-radius:50%; filter:blur(34px); opacity:.7; } .phone-in{ position:relative; display:flex; flex-direction:column; gap:9px; padding:6px 11px 74px; flex:1; } .status-bar{ display:flex; align-items:center; justify-content:space-between; padding:10px 16px 2px; font-size:11.5px; font-weight:640; position:relative; } .phone-caption{ text-align:center; font-size:12px; color:var(--ink-2); margin-top:10px; } .mini-card{ background:var(--glass); border:1px solid var(--glass-brd); border-radius:18px; padding:10px 12px; box-shadow:var(--shadow-1); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); display:flex; flex-direction:column; gap:4px; } .mini-label{ font-size:10.5px; color:var(--ink-2); } .mini-value{ font-size:19px; font-weight:700; letter-spacing:-.03em; } .mini-bar{ position:absolute; left:10px; right:10px; bottom:10px; display:grid; grid-template-columns:repeat(5,1fr); padding:7px 4px; background:var(--glass-strong); border:1px solid var(--glass-brd); border-radius:20px; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--shadow-2); } .mini-bar span{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:8.5px; color:var(--ink-3); } .mini-bar .ic{ width:17px; height:17px; } .mini-bar span.is-on{ color:var(--accent-ink); } .scan-frame{ flex:1; border-radius:20px; border:2px dashed rgba(255,255,255,.6); display:grid; place-items:center; background:rgba(60,48,42,.40); color:#fff; font-size:12px; text-align:center; padding:16px; min-height:170px; } /* Экран входа */ .login-stage{ display:grid; place-items:center; padding:26px 12px; border-radius:var(--r-xl); background:linear-gradient(160deg, rgba(88,70,60,.20), rgba(88,70,60,.07)); } .login-card{ width:100%; max-width:390px; background:var(--glass-strong); border:1px solid var(--glass-brd); border-radius:28px; box-shadow:var(--shadow-3); padding:24px 20px; display:flex; flex-direction:column; gap:13px; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); } .login-card .brand-mark{ margin:0 auto; width:52px; height:52px; border-radius:16px; font-size:19px; } /* Обложка макета */ .cover{ padding:24px 20px; display:flex; flex-direction:column; gap:16px; } .cover h1{ font-size:clamp(27px,7vw,40px); font-weight:730; letter-spacing:-.04em; } .cover .lead{ font-size:15px; color:var(--ink-2); max-width:62ch; } .spec{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:10px; } .spec div{ padding:11px 13px; border-radius:var(--r-md); background:var(--glass-3); border:1px solid var(--line); } .spec b{ display:block; font-size:12px; margin-bottom:3px; } .spec span{ font-size:11.5px; color:var(--ink-2); } .foot{ padding:14px 4px 4px; font-size:12px; color:var(--ink-3); text-align:center; } /* Содержание */ .toc{ display:grid; grid-template-columns:repeat(auto-fill,minmax(166px,1fr)); gap:8px; } .toc a{ display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:var(--r-md); background:var(--glass-2); border:1px solid var(--glass-brd); font-size:13px; font-weight:530; } .toc a .n{ font-family:var(--font-mono); font-size:10.5px; color:var(--accent-ink); } /* ---------- Десктоп ---------- */ @media (min-width: 1024px){ .app{ grid-template-columns:var(--sidebar) 1fr; } .sidebar{ display:block; padding:16px 0 16px 16px; } .main{ padding:20px 26px 48px; gap:52px; } .tabbar{ display:none; } .screen-title{ font-size:21px; } } @media (min-width: 1440px){ .main{ padding:26px 44px 60px; } } /* ========================================================================== ЭТАП 1 — интерактив: экраны, модалки, формы, состояния ========================================================================== */ [hidden]{ display:none !important; } /* Экран входа */ .auth{ min-height:100vh; display:grid; place-items:center; padding:28px 16px; } .auth .login-card{ max-width:400px; } .auth-title{ text-align:center; display:flex; flex-direction:column; gap:3px; align-items:center; } /* Переключение экранов */ .view{ display:flex; flex-direction:column; gap:20px; } /* Модальные окна */ .overlay{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; background:rgba(88,70,60,.36); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:0; overflow-y:auto; overscroll-behavior:contain; } .overlay .modal{ margin-top:auto; max-height:94vh; overflow-y:auto; border-bottom-left-radius:0; border-bottom-right-radius:0; } @media (min-width:640px){ .overlay{ align-items:center; padding:24px 16px; } .overlay .modal{ margin:auto; border-radius:26px; } } .overlay[data-level="2"]{ background:rgba(88,70,60,.30); z-index:70; } /* Клавиатура на iOS не уменьшает 100vh и сдвигает страницу, а fixed-слой остаётся на месте — окно уезжает под клавиатуру. --vv-top и --vv-h задаёт app.js по visualViewport: оверлей занимает ровно видимую часть экрана над клавиатурой. */ .overlay{ top:var(--vv-top, 0px); bottom:auto; height:var(--vv-h, 100%); } .overlay .modal{ max-height:calc(var(--vv-h, 100vh) * .94); } /* Поля формы */ .control select{ border:0; background:transparent; font:inherit; font-size:14px; color:var(--ink); width:100%; outline:none; appearance:none; -webkit-appearance:none; cursor:pointer; } .control select:disabled{ color:var(--ink-3); cursor:not-allowed; } .control:has(select){ cursor:pointer; } .control input[type="date"]{ cursor:pointer; } .control.is-error{ border-color:color-mix(in srgb, var(--crit) 55%, transparent); box-shadow:0 0 0 3.5px var(--crit-soft); } .err{ font-size:11.5px; color:var(--crit); font-weight:560; } /* Кликабельные таблицы и сортировка */ .grid th.sortable{ cursor:pointer; -webkit-user-select:none; user-select:none; } .grid th.sortable:hover{ color:var(--accent-ink); } .grid th.sortable .dir{ opacity:0; margin-left:4px; font-size:9px; } .grid th.sortable.is-sorted{ color:var(--accent-ink); } .grid th.sortable.is-sorted .dir{ opacity:1; } .grid tbody tr.clickable{ cursor:pointer; } .grid tbody tr.clickable:hover{ background:var(--glass-2); } @media (max-width:760px){ .grid tbody tr.clickable:active{ background:var(--accent-soft); } } /* Цепочка статусов — кликабельная */ .flow .step{ cursor:pointer; font-family:inherit; } .flow button.step{ border:1px solid var(--glass-brd); background:var(--glass-2); color:var(--ink-2); } .flow button.step:hover:not(:disabled){ border-color:var(--accent-brd); color:var(--accent-ink); } .flow button.step.is-now{ background:var(--accent); color:var(--on-accent); border-color:transparent; } .flow button.step.is-done{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 26%,transparent); background:var(--ok-soft); } .flow button.step:disabled{ opacity:.45; cursor:not-allowed; } .flow button.step.is-cancel{ color:var(--crit); border-color:color-mix(in srgb,var(--crit) 30%,transparent); background:var(--crit-soft); } /* Строки конструктора заказа */ .line{ display:grid; grid-template-columns:1fr; gap:9px; padding:12px; border-radius:var(--r-md); background:var(--glass-2); border:1px solid var(--glass-brd); } @media (min-width:640px){ .line{ grid-template-columns:minmax(0,2.2fr) 84px 108px 96px 34px; align-items:end; } } .line .line-sum{ font-weight:640; font-variant-numeric:tabular-nums; text-align:right; padding-bottom:11px; font-size:14px; } .line .btn-del{ width:34px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-sm); border:1px solid var(--glass-brd); background:var(--glass-2); color:var(--crit); cursor:pointer; } .line-head{ display:none; } @media (min-width:640px){ .line-head{ display:grid; grid-template-columns:minmax(0,2.2fr) 84px 108px 96px 34px; gap:9px; padding:0 12px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); font-weight:600; } .line-head span:nth-child(4){ text-align:right; } } /* Пустое состояние */ .empty{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:34px 18px; text-align:center; } .empty .ic{ width:30px; height:30px; color:var(--ink-3); } .empty b{ font-size:14.5px; } .empty span{ font-size:12.5px; color:var(--ink-3); max-width:36ch; } /* Тосты */ .toasts{ position:fixed; left:12px; right:12px; bottom:92px; z-index:90; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; } @media (min-width:1024px){ .toasts{ bottom:24px; left:auto; right:24px; align-items:flex-end; } } .toast{ display:flex; align-items:center; gap:9px; padding:11px 16px; border-radius:999px; max-width:min(92vw,420px); background:var(--glass-strong); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-brd); box-shadow:var(--shadow-2); font-size:13px; font-weight:540; animation:toast-in .22s ease-out; } .toast .ic{ width:16px; height:16px; } .toast.ok{ color:var(--ok); } .toast.err{ color:var(--crit); } .toast.info{ color:var(--ink); } @keyframes toast-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } } @media (prefers-reduced-motion: reduce){ .toast{ animation:none } } /* Прочее */ .nav-item, .tabbar a{ cursor:pointer; background:none; border:0; font:inherit; text-align:left; width:100%; } .nav-item.is-locked{ cursor:default; } .stage-badge{ margin-left:auto; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); border:1px solid var(--line); border-radius:6px; padding:1px 5px; } .mini-bar-track{ height:6px; border-radius:3px; background:var(--glass-3); overflow:hidden; margin-top:5px; } .mini-bar-fill{ height:100%; border-radius:3px; background:var(--s1); } .side-actions{ display:flex; gap:6px; } .link{ color:var(--accent-ink); font-weight:560; cursor:pointer; background:none; border:0; font:inherit; padding:0; } .link:hover{ text-decoration:underline; } /* Узкие таблицы внутри боковых карточек не должны распирать колонку */ @media (min-width:761px){ .grid.fit{ min-width:0; } } .grid.fit td, .grid.fit th{ padding-left:10px; padding-right:10px; } /* На телефоне ячейка-заголовок строки раскладывается в столбик */ @media (max-width:760px){ .grid td.lead{ display:block; } } /* ========================================================================== ЭТАП 2 — товары, клиенты, остатки ========================================================================== */ /* Плитки кликабельны */ .tile.clickable{ cursor:pointer; } .tile.clickable:hover{ border-color:var(--accent-brd); box-shadow:var(--shadow-2); } .tile .tile-meta.mono{ font-family:var(--font-mono); font-size:10.5px; } /* Врезка «клиент и его заказы» в поп-апе заказа */ .client-preview{ padding:4px 12px; border-radius:var(--r-md); background:var(--glass-2); border:1px solid var(--glass-brd); } /* Кнопка, нужная только на телефоне */ .only-m{ display:inline-flex; } @media (min-width:1024px){ .only-m{ display:none; } } /* Нативный select внутри фильтра-пилюли */ .select select{ border:0; background:transparent; font:inherit; font-size:12.5px; font-weight:560; color:var(--ink); outline:none; appearance:none; -webkit-appearance:none; cursor:pointer; max-width:46vw; text-overflow:ellipsis; } .select:has(select)::after{ content:"▾"; font-size:9px; color:var(--ink-3); margin-left:-2px; } .select:focus-within{ border-color:var(--accent-brd); box-shadow:0 0 0 3px var(--accent-soft); } @media (min-width:640px){ .select select{ max-width:none; } } /* ЭТАП 3 — отчёты и приход */ #report-nav{ gap:6px; } #report-nav .chip{ cursor:pointer; } #report-body{ gap:16px; } #report-body .kpis{ margin-bottom:2px; } #report-body .table-wrap{ margin:0 -18px; } #report-body .grid th:first-child, #report-body .grid td:first-child{ padding-left:18px; } #report-body .grid th:last-child, #report-body .grid td:last-child{ padding-right:18px; } @media (max-width:760px){ #report-body .table-wrap{ margin:0 -8px; } } .segment span[data-gran], .segment span[data-dead]{ cursor:pointer; } /* ЭТАП 4 — матрица прав, журнал аудита */ .perm{ width:30px; height:30px; border-radius:9px; border:1px solid var(--glass-brd); background:var(--glass-2); color:var(--ink-3); font:inherit; font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .perm.is-on{ background:var(--ok-soft); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 30%,transparent); } .perm.is-locked{ opacity:.55; cursor:not-allowed; } .perm:hover:not(:disabled){ border-color:var(--accent-brd); } @media (max-width:760px){ .perm{ width:26px; height:26px; } } .grid tbody tr.row-risky td{ background:var(--crit-soft); } .grid tbody tr.row-risky td:first-child{ box-shadow:inset 3px 0 0 var(--crit); } @media (max-width:760px){ .grid tbody tr.row-risky{ background:var(--crit-soft); border-radius:var(--r-md); } } #view-payments .segment span{ cursor:pointer; } #pay-orders .dd-item{ cursor:pointer; } #pay-orders .dd-item:hover{ background:var(--glass-2); } /* ---------- ожидание ответа сервера ---------- Каждый экран грузится запросом: пока он идёт, показываем тонкую полосу сверху и гасим курсор, чтобы не казалось, что клик потерялся. */ body.is-busy{ cursor:progress; } body.is-busy::before{ content:''; position:fixed; inset:0 0 auto 0; height:2px; z-index:90; background:linear-gradient(90deg,transparent,var(--s1),transparent); background-size:40% 100%; background-repeat:no-repeat; animation:busy-slide 1.1s linear infinite; } @keyframes busy-slide{ from{ background-position:-40% 0; } to{ background-position:140% 0; } } @media (prefers-reduced-motion:reduce){ body.is-busy::before{ animation:none; background:var(--s1); opacity:.5; } } /* ========================================================================== Выпадающие списки Нативный