:root{ --bg:#FAF7F0; --card:#FFFFFF; --bg2:#F5F1E6; --line:#E9E2D2; --line2:#E2DBC9; --line3:#F1ECDF; --line4:#E4DCC8; --accent:#2F5BFF; --accent-dark:#1E3FCC; --accent-bg:#EDF1FF; --dark:#20242B; --yellow:#FFD34D; --ok:#1F8A4C; --ok-text:#166A3A; --ok-bg:#E8F4EC; --warn:#B36B00; --warn-text:#8A6400; --warn-bg:#FFF3D6; --err:#D4562B; --err-text:#A83E1C; --err-bg:#FFEDE4; --teal:#0E7C86; --teal-bg:#DDF1F2; --violet:#5B3AC4; --violet-bg:#ECE6FB; --text:#20242B; --text-soft:#5C6270; --text-faint:#6F6752; --text-faint2:#666048; /* faint/faint2 калібровані під WCAG AA 4,5:1 проти bg/card/bg2/card2 (аудит 08-22 UX-14, було 2,93:1) — не світлішати назад без перерахунку контрасту. */ --f-head:'Unbounded',sans-serif; --f-body:'Golos Text',sans-serif; --f-mono:'JetBrains Mono',monospace; /* поверхні, що раніше були захардкоджені інлайном: --card2 = світліше поле вводу (#FCFAF4), --on-dark = текст на темних плашках, --hdr-bg = напівпрозоре тло шапки */ --card2:#FCFAF4; --on-dark:#F5F1E6; --hdr-bg:rgba(250,247,240,.94); --bg-soft:#F5F1E6; /* м'який фон плашок (біз-трек: чипи CAPEX/окупність), = --bg2 у палітрі */ } /* ── ТЕМНА ТЕМА. Перемикається атрибутом data-theme на (VX.cycleTheme). Кольори БЛОКІВ конструктора (сині/бурштинові/фіолетові) навмисно НЕ чіпаємо: це кольори-ідентичність даних, а не поверхні — вони мають лишатись впізнаваними. */ :root[data-theme="dark"]{ --bg:#15171C; --card:#1D2027; --bg2:#232730; --card2:#22262E; --line:#2E333D; --line2:#39404C; --line3:#262B33; --line4:#353C48; --accent:#5B82FF; --accent-dark:#93ACFF; --accent-bg:#1C2540; --dark:#2B303A; --yellow:#FFD34D; --on-dark:#F0ECE0; --ok:#3FB871; --ok-text:#74D69C; --ok-bg:#15301F; --warn:#E0A22E; --warn-text:#F1C86B; --warn-bg:#33270E; --err:#F0724A; --err-text:#FF9C7A; --err-bg:#3A1E15; --teal:#48B7C0; --teal-bg:#12262A; --violet:#9B84E8; --violet-bg:#221A33; --text:#ECE8DC; --text-soft:#AAB1BF; --text-faint:#9AA1AF; --text-faint2:#8B92A0; --hdr-bg:rgba(21,23,28,.94); --bg-soft:#22262E; /* м'який фон плашок у темній темі — не білий (=--card2) */ color-scheme:dark; } /* Тіні на темному тлі нечитні — глушимо разом із занадто яскравим білим у SVG-планах. */ :root[data-theme="dark"] img,:root[data-theme="dark"] .vxp-card{filter:brightness(.94);} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--f-body);} /* Аудит 08-22 п.9 (UX-14): 0 правил :focus-visible в усьому файлі — клавіатурний фокус ніде не було видно. Одне глобальне правило покриває все, крім елементів, що самі глушать outline (лише .v2sin input — компенсовано нижче біля свого селектора). */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px;} a{color:var(--accent);text-decoration:none;} a:hover{color:var(--accent-dark);text-decoration:underline;} input[type=range]{accent-color:var(--accent);} ::selection{background:#FFE9B8;} button{font-family:var(--f-body);} @keyframes vxFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}} @keyframes vxPulse{0%{box-shadow:0 0 0 0 rgba(31,138,76,.35);}70%{box-shadow:0 0 0 9px rgba(31,138,76,0);}100%{box-shadow:0 0 0 0 rgba(31,138,76,0);}} @keyframes vxScan{0%{top:0;}100%{top:calc(100% - 3px);}} @keyframes vxSpin{to{transform:rotate(360deg);}} /* «Зберігаємо…» у кнопці збереження */ @keyframes vxSkelPulse{0%,100%{opacity:.5;}50%{opacity:1;}} .vx-skel-bar{background:var(--line3);border-radius:8px;animation:vxSkelPulse 1.1s ease-in-out infinite;} /* 🎯 Клік по предмету на кресленні (2D-план/3D-перегляд) → шлях у «Конструкторі»: розгорнули дерево, проскролили — короткий спалах, щоб очі знайшли рядок. Клас сам собою нічого не запускає (transition чекає зміни background-color), тому ctorFlash додає й ЗНІМАЄ клас vx-flash-on через requestAnimationFrame — саме ця зміна і грає перехід «яскраве тло → назад». */ .vx-ctor-flash{transition:background-color 1.5s ease, border-left-color 1.5s ease;} .vx-ctor-flash.vx-flash-on{background-color:var(--accent-bg)!important;border-left-color:var(--accent)!important;} /* ── ГЕНПЛАН: підписи споруд не закривають підоснову ────────────────────────── Постійні назви поверх супутникового знімка ховали саме те, заради чого знімок і вмикають. Тепер підпис і ручка повороту проявляються на наведення; кнопка «Підписи» на канві вмикає всі підписи разом (.gen-lbl-on) — для тач-екранів, де наведення не існує, і для друку/скріншотів. Сама пляма споруди видима завжди, тож клікати й тягнути можна так само. 🔴 Схована ручка мусить мати `pointer-events:none`: сама лише opacity:0 лишає її клікабельною, і хват біля верхньої грані плями крутив би споруду замість тягти. */ /* Обертається ЛИШЕ пляма (.gen-b-shape); підпис і ручка живуть у необернутому .gen-b, тож підпис завжди горизонтальний, а хват повороту — на місці. */ .gen-b .gen-b-shape{transition:opacity .12s ease,filter .12s ease;} .gen-b .gen-b-lbl{opacity:0;transition:opacity .12s ease;} /* Підпис видно: на наведення, коли увімкнено «Підписи», або коли споруду ОБРАНО. */ .gen-b:hover .gen-b-lbl,.gen-lbl-on .gen-b .gen-b-lbl,.gen-b.gen-b-on .gen-b-lbl{opacity:1;} /* Ручку повороту рендеримо лише для обраної споруди (див. vx-render), тож вона просто видима — окремий hover-тригер більше не потрібен. */ .gen-b .gen-b-rot{z-index:6;} /* Підпис — СПЛИВАЮЧА підказка ЗА межами плями (над нею або під нею), а не напис усередині: напис усередині закривав саме ту забудову, яку показує знімок, і на малій плямі ще й не вміщався. Темна плашка читається і на полі, і на даху. */ .gen-b .gen-b-lbl{position:absolute;left:50%;z-index:5;white-space:nowrap;background:rgba(32,36,43,.92);color:#F5F1E6;border-radius:7px;padding:3px 8px;box-shadow:0 3px 10px rgba(32,36,43,.28);} /* ВИДІЛЕННЯ ОБРАНОЇ СПОРУДИ = ГАСИМО РЕШТУ. Обрану НЕ фарбуємо й не світимо (вимога власника): вона лишається точно такою, як без вибору, лише лежить зверху й має акцентну рамку — хват для повороту. Решта плям сіріє (grayscale) і притлумлюється. Клікати притлумлені все одно можна (opacity кліки не блокує) — так перемикаєшся між спорудами. Те саме правило в 3D (highlightGen у vx-actions.js). */ .gen-b.gen-b-on{z-index:4;} .gen-has-sel .gen-b:not(.gen-b-on) .gen-b-shape{opacity:.45;filter:grayscale(.92);} /* ── ЗУМ 2D-ПОЛОТНА ────────────────────────────────────────────────────────── Масштаб міняє РЕАЛЬНИЙ розмір полотна у скрол-порті, а не CSS transform: уся вказівникова математика (перетягування кімнат і споруд, ручки повороту, обведення) рахується від getBoundingClientRect() самого полотна, тож при зміні його власного розміру координати сходяться самі. З transform:scale() довелось би ділити на масштаб у КОЖНОМУ обробнику, і перший забутий давав би класичне «тягну тут — рухається там». */ /* Ліве полотно = flex-колонка: тулбар/панелі беруть природну висоту зверху, а скрол-порт полотна (#vx-zoomvp) забирає ВСЮ решту місця й ширину. Так порт має СТАЛИЙ розмір незалежно від зуму — тулбар і навігація над ним не рухаються й не «зумляться», а полотно розгортається на всю ширину панелі (а не на 620px). */ .vx-cv-left{display:flex;flex-direction:column;} .vx-cv-left>*:not(.vx-zoomwrap){flex:0 0 auto;} .vx-cv-left>.vx-zoomwrap{flex:1 1 0;min-height:320px;} /* Обгортка полотна: скрол-порт заповнює її абсолютно (тому має СТАЛИЙ розмір), а закріплений шар контролів (кнопки «Підписи»/«Супутник», компас-орієнтація) лежить ПОВЕРХ порту й НЕ скролиться — саме тому вони не зникають при зумі/прокрутці. */ .vx-zoomwrap{position:relative;} .vx-zoomwrap>#vx-zoomvp{position:absolute;inset:0;} /* Зум міняє РОЗМІР ВМІСТУ (.vx-zoomin = z×ширина порту), а не розмір порту: порт лишається сталою рамкою, вміст скролиться всередині. overflow на обидві осі. */ .vx-zoomvp{overflow:auto;overscroll-behavior:contain;border-radius:12px;} .vx-zoomvp.vx-can-pan{cursor:grab;} .vx-zoomvp.vx-panning{cursor:grabbing;} .vx-zoomin{margin:0 auto;} /* Полотно (svg-план / div-генплан) заповнює всю ширину порту; 620px-стелю знімаємо. */ .vx-zoomin>svg,.vx-zoomin>div{max-width:none!important;width:100%!important;} /* Закріплений шар контролів: сам прозорий для кліків (щоб пан/клік по полотну проходили крізь нього), а самі контроли — клікабельні. */ .vx-zoomovl{position:absolute;inset:0;pointer-events:none;z-index:6;} .vx-zoomovl>*{pointer-events:auto;} /* ── РОЗГОРНУТИ НА ВЕСЬ ЕКРАН ──────────────────────────────────────────────── Сітка «полотно + панель» стає одноколонковим оверлеєм; невидиму половину не викидаємо з DOM, а ховаємо — так переживають монтування 3D-канва, мапи й скрол панелі (їх повертає V3D.sync/PMAP.sync після кожного рендера). z-index нижчий за модалки (100+): каталог і опитники мусять лягати ЗВЕРХУ. */ /* box-sizing обовʼязково: сітка НЕ має глобального border-box, тож 100vh + падінги давали б 744 px у вікні 720 — низ панелі ховався б за краєм екрана. */ .vx-fs{position:fixed!important;inset:0!important;z-index:64;box-sizing:border-box;background:var(--bg);padding:12px!important;margin:0!important;gap:0!important;height:100vh!important;min-height:0!important;grid-template-columns:minmax(0,1fr)!important;} body.vx-fs-on{overflow:hidden;} /* ── ЗСУВНА МЕЖА між полотном (візуалізація) і конструктором ───────────────── Сидить у середній 14px-доріжці сітки .vx-canvas (ліва fr · ця смуга · права fr). Тонка вертикальна риска (::before) — сама межа; по центру — «ручка» з крапок. Курсор col-resize по всій смузі; тягне JS (VX.splitStart), не CSS. touch-action:none — щоб на тачі жест не крутив сторінку. */ .vx-split{align-self:stretch;position:relative;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none;user-select:none;-webkit-user-select:none;} .vx-split::before{content:"";position:absolute;top:8px;bottom:8px;left:50%;width:2px;transform:translateX(-50%);background:var(--line3);border-radius:2px;transition:background .14s,width .14s;} .vx-split:hover::before,.vx-split.vx-split-on::before{background:var(--accent);width:3px;} .vx-split-grip{position:relative;z-index:1;width:8px;height:46px;border-radius:6px;background:var(--card);border:1.5px solid var(--line2);box-shadow:0 2px 6px rgba(32,36,43,.12);background-image:radial-gradient(var(--text-faint2) 1.1px,transparent 1.4px);background-size:100% 7px;background-position:center;transition:border-color .14s;} .vx-split:hover .vx-split-grip,.vx-split.vx-split-on .vx-split-grip{border-color:var(--accent);} /* Ручка регулювання ширини колонки таблиці (VX.colResizeStart) — той самий col-resize патерн, що vx-split, лише в шапці : тонка смужка, підсвічується під курсором/тягом. */ .vx-colrs{touch-action:none;user-select:none;-webkit-user-select:none;} .vx-colrs::after{content:"";position:absolute;top:4px;bottom:4px;right:3px;width:2px;background:transparent;border-radius:2px;transition:background .14s;} .vx-colrs:hover::after,.vx-colrs.vx-colrs-on::after{background:var(--accent);} .vx-fs-canvas #ctor-panel-scroll,.vx-fs-canvas #design-panel-scroll,.vx-fs-canvas #gen-panel-scroll{display:none;} .vx-fs-panel .vx-cv-left{display:none;} .hov-line:hover{border-color:var(--accent)!important;} .hov-link:hover{border-color:var(--accent)!important;color:var(--accent)!important;} .hov-bright:hover{filter:brightness(1.07);} .hov-bright5:hover{filter:brightness(1.05);} /* нав-кроки: чіпи ПЕРЕНОСЯТЬСЯ на новий рядок (усі читаються), а не клипаються/розпихають шапку. Права група (дзвінок/вхід/мова) не стискається й лишається видимою. */ .vx-nav{min-width:0;} .hdr-actions{flex-shrink:0;} html,body{overflow-x:hidden;} @media (max-width:960px){ .vx-hero{grid-template-columns:1fr!important;gap:28px!important;padding-top:36px!important;} .vx-steps{grid-template-columns:repeat(2,1fr)!important;} .vx-canvas{grid-template-columns:1fr!important;grid-template-rows:auto!important;height:auto!important;flex:0 0 auto!important;} .vx-entry{grid-template-columns:1fr!important;} .vx-pillars{grid-template-columns:1fr!important;} .vx-how{grid-template-columns:repeat(2,1fr)!important;} } @media (max-width:560px){ .vx-how{grid-template-columns:1fr!important;} } /* Телефон: шапка двома чистими смугами замість каші. Рядок 1 — лого(іконка)+дії; рядок 2 — степер ОДНІЄЮ горизонтально-прокручуваною стрічкою (без переносу/накладань). */ @media (max-width:720px){ .vx-hdr{flex-wrap:wrap;row-gap:8px;padding-left:12px;padding-right:12px;} .vx-nav{order:10!important;flex:1 1 100%!important;justify-content:flex-start!important;flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none;margin:2px -12px -2px;padding:0 12px;} .vx-nav::-webkit-scrollbar{display:none;} .vx-nav>*{flex-shrink:0;} .vx-logo-text{display:none;} .vx-acct-name{display:none!important;} .hdr-pick-min{display:none!important;} } @media print{ body *{visibility:hidden;} [data-print-area],[data-print-area] *{visibility:visible;} /* max-height/overflow (липкий скрол-контейнер таблиці) НЕ повинні обрізати друк */ [data-print-area]{position:absolute;left:0;top:0;width:100%;max-height:none !important;overflow:visible !important;} [data-print-area] thead th{position:static !important;} } /* Пошук елементів у пілюлі «Елементи» (темний фон) — читабельний плейсхолдер-фон */ #block-search::placeholder{color:var(--bg2);opacity:.6;letter-spacing:.05em;} #block-search:focus::placeholder{opacity:.35;} /* Липка шапка таблиць: контейнер скролиться, thead лишається вгорі (усі таблиці ERP/адмін/нормативи) */ .vx-tbl-scroll{max-height:72vh;overflow:auto;} .vx-tbl-scroll thead th{position:sticky;top:0;z-index:5;background:var(--bg2);box-shadow:0 1px 0 var(--line3);} @media print{ .vx-tbl-scroll{max-height:none !important;overflow:visible !important;} .vx-tbl-scroll thead th{position:static !important;} } /* Межа колонки видно на КОЖНОМУ рядку (не лише в шапці) — тягнеться вздовж усієї таблиці «Товари» постачальника, де колонки регулюються (VX.colResizeStart). */ .vx-nomen-tbl th:not(:last-child),.vx-nomen-tbl td:not(:last-child){border-right:1px solid var(--line3);} /* ── Головна 2.0: персони-входи (redesign, рендериться лише за прапорцем v2on) ── */ .vxp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:15px;} .vxp-card{grid-column:span 2;position:relative;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:17px;padding:20px;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;font-family:inherit;transition:transform .16s,box-shadow .16s,border-color .16s;} .vxp-card.vxp-big{grid-column:span 3;} .vxp-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--pf);} .vxp-card:hover{transform:translateY(-3px);border-color:var(--pf);box-shadow:0 20px 40px -22px rgba(32,36,43,.4);} .vxp-t{display:flex;align-items:center;gap:12px;margin-bottom:11px;} .vxp-ic{width:47px;height:47px;border-radius:13px;background:var(--pb);color:var(--pf);display:grid;place-items:center;font-size:23px;} .vxp-tag{margin-left:auto;font-family:var(--f-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--pf);background:var(--pb);border-radius:99px;padding:4px 9px;} .vxp-card h3{font-family:var(--f-head);font-size:18px;font-weight:650;line-height:1.15;margin:0;} .vxp-card.vxp-big h3{font-size:20px;} .vxp-card p{font-size:13px;color:var(--text-soft);line-height:1.5;margin:9px 0 0;} .vxp-go{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--pf);} @media(max-width:900px){ .vxp-grid{grid-template-columns:1fr 1fr;} .vxp-card,.vxp-card.vxp-big{grid-column:span 1;} .vxp-band{grid-template-columns:1fr !important;} } /* ── Шапка 2.0 (єдина шапка прода) ── */ .v2hdr{position:sticky;top:0;z-index:60;background:var(--hdr-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);} .v2hdr-in{max-width:1440px;margin:0 auto;padding:9px 22px;min-height:48px;display:flex;align-items:center;gap:12px;} .v2hdr-in.v2hdr-wide{max-width:none;} /* товари постачальника: шапка йде врівень з широкою таблицею нижче */ .v2brand{display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;padding:0;flex-shrink:0;} .v2v{width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--yellow);display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:14px;} .v2brand b{font-family:var(--f-head);font-weight:700;font-size:15px;letter-spacing:-.02em;color:var(--text);white-space:nowrap;} .v2brand b i{color:var(--accent);font-style:normal;} .v220{font-family:var(--f-mono);font-size:10px;font-weight:800;color:var(--accent);background:var(--accent-bg);border-radius:6px;padding:2px 5px;} .v2demo{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;background:#FEF3C7;color:#92600A;border:1px solid #F5D98B;border-radius:99px;padding:3px 9px;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;} .v2nav{display:flex;align-items:center;gap:4px;flex:1 1 0;min-width:0;justify-content:center;flex-wrap:wrap;} .v2np{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line4);background:var(--card);color:var(--text-soft);border-radius:99px;padding:8px 15px;font-size:13.5px;font-weight:650;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .14s,color .14s,border-color .14s;} .v2np:hover{background:var(--card);color:var(--accent-dark);border-color:var(--accent);} .v2np.on{background:var(--dark);color:var(--on-dark);border-color:var(--text);} .v2np i{font-size:16px;} .v2right{display:flex;align-items:center;gap:9px;flex-shrink:0;} .v2ico{position:relative;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line4);background:var(--card);color:var(--text-soft);cursor:pointer;font-size:16px;display:grid;place-items:center;} .v2ico:hover{border-color:var(--accent);color:var(--accent);} .v2dot{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;border-radius:99px;background:var(--err);color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;padding:0 4px;} .v2bell{position:absolute;right:0;top:46px;width:330px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 48px rgba(0,0,0,.18);z-index:80;overflow:hidden;} .v2ico.on{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);} /* кнопка пошуку в шапці */ .v2search{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line4);background:var(--card);color:var(--text-faint);border-radius:99px;padding:8px 13px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;flex-shrink:0;} .v2search:hover{border-color:var(--accent);color:var(--accent);} .v2search i{font-size:15px;} .v2search kbd{font-family:var(--f-mono);font-size:10px;background:var(--bg2);border:1px solid var(--line4);border-radius:5px;padding:1px 5px;color:var(--text-soft);} /* ⚙ панель налаштувань: одиниці · валюта · мова · тема */ .v2setp{position:absolute;right:0;top:46px;width:262px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 48px rgba(0,0,0,.18);z-index:80;padding:6px 12px;} .v2setrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line3);} .v2setrow>span{font-size:11.5px;font-weight:700;color:var(--text-soft);} .v2seg{display:inline-flex;gap:2px;background:var(--bg2);border:1px solid var(--line4);border-radius:9px;padding:2px;flex-shrink:0;} .v2seg button{border:0;background:transparent;border-radius:7px;padding:5px 9px;font-family:inherit;font-size:11.5px;font-weight:800;color:var(--text-soft);cursor:pointer;white-space:nowrap;} .v2seg button.on{background:var(--card);color:var(--accent-dark);box-shadow:0 1px 4px rgba(0,0,0,.12);} /* ── КОНСОЛІДОВАНЕ МЕНЮ КОРИСТУВАЧА (не-Головні екрани, 2026-08-16) ── */ .v2um-trig{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line4);background:var(--card);border-radius:99px;padding:3px 9px 3px 3px;cursor:pointer;position:relative;} .v2um-trig:hover{border-color:var(--accent);} .v2um-trig.on{border-color:var(--accent);background:var(--accent-bg);} .v2um-av{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;flex-shrink:0;} .v2um-av.lg{width:36px;height:36px;font-size:15px;} .v2um-panel{position:absolute;right:0;top:48px;width:300px;max-width:calc(100vw - 24px);background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 48px rgba(0,0,0,.18);z-index:80;padding:10px 12px;max-height:min(78vh,640px);overflow-y:auto;} .v2um-brand{display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;padding:6px 4px 12px;width:100%;border-bottom:1px solid var(--line3);margin-bottom:8px;} .v2um-brand b{font-family:var(--f-head);font-weight:700;font-size:15px;letter-spacing:-.02em;color:var(--text);white-space:nowrap;} .v2um-brand b i{color:var(--accent);font-style:normal;} .v2um-acts{display:flex;gap:8px;margin-bottom:6px;} .v2um-act{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;border:1.5px solid var(--line4);background:var(--card);border-radius:11px;padding:11px 6px;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--text-soft);cursor:pointer;} .v2um-act:hover{border-color:var(--accent);color:var(--accent-dark);} .v2um-act i{font-size:18px;} .v2um-sect{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);padding:10px 4px 4px;} .v2um-notif{display:flex;flex-direction:column;max-height:190px;overflow-y:auto;} .v2um-nrow{display:flex;gap:9px;align-items:flex-start;text-align:left;border:0;background:none;padding:8px 6px;border-radius:9px;cursor:pointer;width:100%;font-family:inherit;} .v2um-nrow:hover{background:var(--bg2);} .v2um-nic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;flex-shrink:0;} .v2um-ntx{flex:1;font-size:12px;line-height:1.4;color:var(--text);} .v2um-ntx small{display:block;font-size:10px;color:var(--text-faint);font-weight:700;margin-top:2px;} .v2um-empty{font-size:11.5px;color:var(--text-faint);font-weight:600;padding:8px 6px;} .v2um-set{padding:0 4px;} .v2um-divider{height:1px;background:var(--line3);margin:10px 0 8px;} .v2um-id{display:flex;align-items:center;gap:10px;padding:4px 4px 10px;} .v2um-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;padding:11px 8px;border-radius:9px;font-family:inherit;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;} .v2um-row:hover{background:var(--bg2);} .v2um-row i{font-size:17px;color:var(--text-soft);} .v2um-danger{color:var(--err-text);} .v2um-danger i{color:var(--err-text);} /* ── Оверлей пошуку (⌘K) + модалка довідки ── */ .v2sov{position:fixed;inset:0;z-index:120;background:rgba(18,20,25,.5);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding:12vh 18px 18px;} .v2sbox{width:100%;max-width:600px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;max-height:70vh;} .v2sin{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--line3);flex-shrink:0;} .v2sin>i{font-size:19px;color:var(--text-faint);} .v2sin input{flex:1;border:0;outline:0;background:none;font-family:inherit;font-size:15px;color:var(--text);min-width:0;} /* .v2sin input навмисно без рамки (безрамковий пошук у картці) — global :focus-visible тут не спрацював би (нижча специфічність за outline:0 вище), тож фокус повертаємо тут. */ .v2sin input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .v2sesc{border:1px solid var(--line4);background:var(--bg2);border-radius:6px;padding:3px 8px;font-family:var(--f-mono);font-size:10.5px;color:var(--text-soft);cursor:pointer;} .v2sres{overflow-y:auto;padding:8px;} .v2sgrp{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);padding:9px 10px 5px;} .v2srow{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;border-radius:10px;padding:9px 11px;font-family:inherit;font-size:13.5px;color:var(--text);cursor:pointer;text-align:left;} .v2srow:hover,.v2srow.on{background:var(--accent-bg);color:var(--accent-dark);} .v2srow i{font-size:17px;color:var(--text-faint);flex-shrink:0;} .v2srow.on i,.v2srow:hover i{color:var(--accent);} .v2sl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;} .v2sm{font-size:11px;color:var(--text-faint);flex-shrink:0;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .v2sempty{text-align:center;padding:34px 20px;color:var(--text-faint);} .v2sempty i{font-size:28px;} .v2sempty div{font-size:13.5px;font-weight:700;margin:9px 0 4px;color:var(--text-soft);} .v2sempty small{font-size:11.5px;line-height:1.5;display:block;max-width:330px;margin:0 auto;} .v2hbox{width:100%;max-width:540px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.35);overflow:hidden;max-height:76vh;display:flex;flex-direction:column;} .v2hh{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line3);flex-shrink:0;} .v2hh b{font-family:var(--f-head);font-size:16px;} .v2hb{padding:16px 18px 20px;overflow-y:auto;} .v2hsecs{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;} .v2hsec{display:flex;gap:12px;align-items:flex-start;} .v2hsec>i{font-size:20px;color:var(--accent);flex-shrink:0;margin-top:1px;} .v2hsec b{font-size:13.5px;display:block;margin-bottom:2px;} .v2hsec span{font-size:12.5px;color:var(--text-soft);line-height:1.5;} .v2hkt{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:9px;} .v2hkeys{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;} .v2hk{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-soft);} .v2hk kbd{font-family:var(--f-mono);font-size:10.5px;background:var(--bg2);border:1px solid var(--line4);border-radius:5px;padding:2px 7px;color:var(--text-soft);white-space:nowrap;} .v2sethelp{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;border-radius:9px;padding:10px 8px;margin:4px 0 2px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--text-soft);cursor:pointer;text-align:left;} .v2sethelp:hover{background:var(--accent-bg);color:var(--accent-dark);} .v2sethelp i{font-size:16px;} @media(max-width:1150px){ .v2np span{display:none;} .v2np{padding:8px 11px;} .v2search .stxt,.v2search kbd{display:none;} .v2search{padding:9px;} } /* Телефон: шапка двома смугами. Рядок 1 — бренд + дії, рядок 2 — навігація ОДНІЄЮ горизонтальною стрічкою (без переносу). Тему й довідку прибираємо з рейки — обидві лишаються доступними в ⚙-панелі, тож нічого не втрачено. */ @media(max-width:760px){ .v2brand b i{display:none;} .v2hdr-in{gap:8px;padding:8px 12px;flex-wrap:wrap;row-gap:6px;} .v2nav{order:10;flex:1 1 100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px;margin:0 -12px -2px;padding:0 12px;} .v2nav::-webkit-scrollbar{display:none;} .v2nav>*{flex-shrink:0;} .v2right{margin-left:auto;gap:6px;} .v2-opt{display:none;} .v2ico{width:34px;height:34px;font-size:15px;} .v2hkeys{grid-template-columns:1fr;} .v2sov{padding:8vh 12px 12px;} .v2setp{width:min(262px,calc(100vw - 24px));} } /* ── Кабінет 2.0: рейка + таби (redesign, лише за v2on) ── */ .cabv2-in{max-width:1240px;margin:0 auto;padding:22px 24px 70px;display:flex;gap:22px;align-items:flex-start;} .cabv2-in.cabv2-wide{max-width:none;} /* товари постачальника: широка таблиця на весь екран */ .cabv2-rail{position:sticky;top:70px;width:236px;flex-shrink:0;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:14px;} .cabv2-ctx{display:flex;align-items:center;gap:11px;padding:6px 4px 12px;border-bottom:1px solid var(--line3);} .cabv2-av{width:40px;height:40px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:16px;flex-shrink:0;} .cabv2-who b{font-size:14px;display:block;}.cabv2-who small{font-size:11px;color:var(--text-faint);} .cabv2-sw{display:flex;gap:3px;background:var(--line3);border:1px solid var(--line4);border-radius:10px;padding:3px;margin-bottom:4px;} .cabv2-swb{flex:1;border:0;background:transparent;border-radius:8px;padding:7px 4px;font-size:11.5px;font-weight:700;cursor:pointer;color:var(--text-soft);font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .cabv2-swb.on{background:var(--card);box-shadow:0 1px 4px rgba(32,36,43,.12);color:var(--accent-dark);} .cabv2-nav{display:flex;flex-direction:column;gap:3px;} .cabv2-ri{display:flex;align-items:center;gap:11px;border:0;background:none;border-radius:11px;padding:10px 12px;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:650;color:var(--text-soft);text-align:left;width:100%;transition:background .14s,color .14s;} .cabv2-ri i{font-size:18px;}.cabv2-ri span{flex:1;} .cabv2-ri:hover{background:var(--bg2);color:var(--text);} .cabv2-ri.on{background:var(--accent-bg);color:var(--accent-dark);font-weight:750;} .cabv2-rc{font-family:var(--f-mono);font-size:11px;font-weight:800;background:var(--line3);color:var(--text-soft);border-radius:99px;min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 6px;} .cabv2-ri.on .cabv2-rc{background:var(--accent);color:#fff;} .cabv2-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line3);display:flex;flex-direction:column;gap:6px;} /* «Вийти» — єдина деструктивна дія акаунта, тому червона; решта пунктів рейки лишаються нейтральними. Живе всередині рядка «Профіль» (крок 15.1): сам «Профіль» тягнеться на решту ширини, «Вийти» тулиться праворуч. */ .cabv2-out{color:var(--err-text);} .cabv2-out:hover{background:var(--err-bg);color:var(--err-text);} .cabv2-profrow{display:flex;align-items:center;gap:4px;} .cabv2-profrow>.cabv2-ri{flex:1;min-width:0;} .cabv2-profrow>.cabv2-ri span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* width:auto обов'язковий: .cabv2-ri несе width:100%, і з flex-basis:auto «Вийти» забирало б увесь рядок, лишаючи «Профілю» самі відступи. */ .cabv2-outmini{flex:none !important;width:auto !important;gap:6px;padding:10px 11px;font-size:12.5px;} .cabv2-outmini i{font-size:17px;} .cabv2-new{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#fff;border:0;border-radius:12px;padding:11px 16px;font-size:13px;font-weight:800;cursor:pointer;} .cabv2-main{flex:1;min-width:0;} .cabv2-mh{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap;} .cabv2-mh h2{font-family:var(--f-head);font-size:23px;font-weight:700;margin:0;} .cabv2-newtop{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:0;border-radius:12px;padding:10px 18px;font-size:13.5px;font-weight:800;cursor:pointer;} .cabv2-kpis{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:12px;margin-bottom:18px;} .cabv2-kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;} .cabv2-kpi span{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);display:block;margin-bottom:6px;} .cabv2-kpi b{font-family:var(--f-mono);font-size:19px;} .cabv2-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:17px 19px;margin-bottom:16px;} .cabv2-ch{display:flex;align-items:center;gap:9px;margin-bottom:12px;} .cabv2-chi{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;font-size:15px;} .cabv2-badge{font-size:11px;font-weight:800;color:var(--warn-text);background:var(--warn-bg);border-radius:99px;padding:2px 9px;} .cabv2-ct{font-size:13.5px;display:block;margin-bottom:12px;} /* Порожній стан «повний каркас»: підписи-поля + плашка «Інформація поки відсутня». Мета — жодних порожніх зон; видно, ЩО зʼявиться, коли дані будуть. */ .cabv2-skel{display:flex;flex-direction:column;gap:9px;margin:2px 0 14px;} .cabv2-skel-row{display:flex;align-items:center;gap:12px;} .cabv2-skel-l{flex:0 0 38%;max-width:210px;font-size:12px;font-weight:700;color:var(--text-soft);} .cabv2-skel-b{flex:1;height:32px;border-radius:9px;border:1.5px dashed var(--line4);background:var(--card2);} .cabv2-emp{display:flex;align-items:flex-start;gap:11px;background:var(--accent-bg);border:1px dashed var(--line4);border-radius:12px;padding:12px 14px;} .cabv2-emp-ic{width:30px;height:30px;flex-shrink:0;border-radius:9px;background:var(--card);color:var(--accent-dark);display:grid;place-items:center;font-size:16px;} .cabv2-emp b{display:block;font-size:12.5px;color:var(--accent-dark);} .cabv2-emp small{display:block;font-size:11.5px;color:var(--text-soft);margin-top:2px;line-height:1.4;} .cabv2-al{display:flex;align-items:center;gap:12px;border:1px solid var(--line3);border-radius:12px;padding:10px 13px;} .cabv2-ali{width:34px;height:34px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;font-size:16px;} .cabv2-albtn{flex-shrink:0;border:1.5px solid var(--line2);background:var(--card2);border-radius:10px;padding:8px 13px;font-size:12px;font-weight:800;cursor:pointer;color:var(--text);white-space:nowrap;} .cabv2-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px;} /* Кошик у табі «Оплати»: список ліворуч, картка оплати вузькою колонкою праворуч. Окремий клас, бо .cabv2-2col (1fr 1fr) тут дає надто широку праву колонку. */ .cabv2-pay{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start;} .cabv2-pay .cabv2-card{margin-bottom:0;} /* box-sizing: на телефоні рейка стає width:100%, а вона content-box — padding 14 і рамка додавались ЗВЕРХУ, даючи 6px горизонтального оверфлоу на 375px (пре-існуюче з кроку 3, знайдено при перекомпонуванні «Вийти»). */ /* align-items:stretch обов'язковий: .cabv2-in несе align-items:flex-start (для sticky-рейки на десктопі), а в колонці (мобільний) це лишає .cabv2-main (flex:1) без розтягування на всю ширину — він бере власну min-content ширину замість ширини контейнера. Симптом: оверфлоу 375→398 на кабінеті замовника (KPI-рядок), 375→2214 на ERP-канбані «Ліди», 375→566 на pro-nomen (таблиця) — усі три мали ОДНУ причину, знайдено в сесії 18. */ @media(max-width:900px){ .cabv2-in{flex-direction:column;align-items:stretch;} .cabv2-rail{position:static;width:100%;box-sizing:border-box;} .cabv2-kpis{grid-template-columns:1fr 1fr;} .cabv2-2col{grid-template-columns:1fr;} .cabv2-pay{grid-template-columns:1fr;} } /* ── «Товари та склади» постачальника: єдина зона скролу — сторінка НЕ гортається, скролиться лише сама таблиця (як у Notion/Airtable). До цього тут було ДВА скролу одразу: сторінка (щоб дістатись таблиці під шапкою/рейкою/фільтрами) + сама таблиця (max-height:72vh, бо 2785 товарів). body.vx-nomen-lock фіксує viewport; .cabv2-main стає flex-колонкою, де все, КРІМ .vx-tbl-scroll, лишає свою природну висоту, а таблиця забирає весь залишок і скролиться сама. Скоуп — лише цей екран (клас на body ставить render() лише для pro-nomen/supplier/tab≠wh), інші кабінети без змін. Висоту .cabv2-in.cabv2-wide НЕ рахуємо тут фіксованим calc(100vh−N) — N «пливе» (demo-банер/roleBar/повідомлення можуть додати рядок над контентом) — її виставляє vxNomenLockSync() у vx-erp.js інлайн-стилем за реальним offsetTop елемента. */ body.vx-nomen-lock{overflow:hidden;} /* align-items:stretch обов'язковий: базовий .cabv2-in несе flex-start, тож рейка й .cabv2-main просто беруть свою природну (контентну) висоту й ПЕРЕЛИВАЮТЬСЯ за межі фіксованої висоти — stretch змушує обидва зайняти всю висоту ряду, а вже min-height:0 на .cabv2-main дозволяє flex-колонці всередині стиснутись і віддати залишок таблиці (без min-height:0 flex-item не стискається нижче контенту). */ body.vx-nomen-lock .cabv2-in.cabv2-wide{overflow:hidden;padding-top:14px;padding-bottom:10px;box-sizing:border-box;align-items:stretch;} /* align-self:flex-start повертає рейці КОНТЕНТНУ висоту: stretch на .cabv2-in вище потрібен лише .cabv2-main (щоб таблиця забрала залишок), а рейку він розтягував на весь viewport — картка меню виглядала інакше, ніж у решті кабінетів. */ /* position:static: сторінка тут не гортається, а .cabv2-in із overflow:hidden стає скролпортом для sticky — top:70px зсував рейку на 70px нижче за панель праворуч. */ body.vx-nomen-lock .cabv2-rail{position:static;align-self:flex-start;max-height:100%;overflow-y:auto;flex-shrink:0;} /* .cabv2-main огортає ГОТОВИЙ HTML з secWrap() —
… — обидві ці безкласові обгортки теж мусять стати ланками flex-колонки, інакше flex:1 на .vx-tbl-scroll ігнорується (він не прямий flex-item жодного flex-контейнера). nomenGoodsPanel не огортає СВІЙ вивід власним div — усі шматки (шапка/kpi/фільтри/ таблиця) лежать прямими siblings усередині div secWrap, тож `>div>*` дістає їх усі. */ body.vx-nomen-lock .cabv2-main{display:flex;flex-direction:column;overflow:hidden;min-height:0;} body.vx-nomen-lock .cabv2-main>section{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;} body.vx-nomen-lock .cabv2-main>section>div{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;} body.vx-nomen-lock .cabv2-main>section>div>*{flex:0 0 auto;} body.vx-nomen-lock .cabv2-main>section>div>.vx-tbl-scroll{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;} /* Мобільний варіант: рейка теж не має «зʼїдати» весь фіксований viewport під себе — вертикальний список пунктів згортаємо у горизонтальну прокрутну стрічку (як таб-бар), звільняючи місце під таблицю. Скоуп — лише під vx-nomen-lock, інші мобільні екрани лишає без змін (їм вертикальний список нормальний). */ @media(max-width:900px){ body.vx-nomen-lock .cabv2-rail{align-self:stretch;max-height:none;overflow:visible;flex-shrink:0;} body.vx-nomen-lock .cabv2-nav{flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:6px;padding-bottom:2px;} body.vx-nomen-lock .cabv2-nav .cabv2-ri{flex:0 0 auto;white-space:nowrap;padding:8px 12px;width:auto;} body.vx-nomen-lock .cabv2-nav .cabv2-profrow{flex:0 0 auto;} } /* Соло-кабінет виконавця (крок 11): екрани приходять у своїй обгортці secWrap (max-width+padding). Усередині рейки ці відступи подвоюються — гасимо їх тут, щоб не правити 6 proXxxHTML(). Скоуп — лише .prov2-main, решта рейок не зачеплена. !important обов'язковий: secWrap ставить max-width/padding ІНЛАЙНОМ, а інлайн б'є клас без нього. */ .prov2-main>section{flex:none;} .prov2-main>section>div{max-width:none !important;padding:0 !important;} /* ── Нерухомість 2.0: горизонт. фільтри + сітка (redesign, лише за v2on) ── */ .estv2-filters{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;} .estv2-frow{display:flex;gap:12px;flex-wrap:wrap;align-items:center;} .estv2-seg{display:inline-flex;gap:3px;background:var(--line3);border:1px solid var(--line4);border-radius:11px;padding:3px;flex-shrink:0;} .estv2-seg .estv2-chip{border:0;background:transparent;padding:7px 14px;} .estv2-seg .estv2-chip.on{background:var(--card);box-shadow:0 1px 4px rgba(32,36,43,.12);color:var(--accent-dark);} .estv2-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line2);background:var(--card);color:var(--text-soft);border-radius:99px;padding:8px 14px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;} .estv2-chip i{font-size:14px;} .estv2-chip:hover{border-color:var(--accent);color:var(--accent-dark);} .estv2-chip.on{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-dark);} .estv2-cc{font-family:var(--f-mono);font-size:10.5px;font-weight:800;color:var(--text-faint);} .estv2-chip.on .estv2-cc{color:var(--accent);} .estv2-kinds{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0;} .estv2-inputs{display:flex;gap:8px;flex-wrap:wrap;flex:1;justify-content:flex-end;min-width:0;} .estv2-inp{box-sizing:border-box;border:1.5px solid var(--line2);border-radius:10px;padding:9px 12px;font-size:13px;background:var(--card2);color:var(--text);font-family:inherit;} .estv2-rooms{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;} .estv2-rooms>span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);} .estv2-room{border:1.5px solid var(--line2);background:var(--card);color:var(--text-soft);border-radius:9px;width:40px;padding:8px 0;font-size:12.5px;font-weight:700;cursor:pointer;} .estv2-room.on{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-dark);} .estv2-reset{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--line2);background:var(--card);border-radius:10px;padding:8px 13px;font-size:12px;font-weight:700;cursor:pointer;color:var(--text-soft);margin-left:auto;} .estv2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;} /* Перемикач «Сітка/Список» на біржі + режим списку (OLX-рядок estListRow). */ .estv2-view{width:34px;height:34px;flex-shrink:0;border:1.5px solid var(--line2);background:var(--card);color:var(--text-faint);border-radius:9px;cursor:pointer;display:grid;place-items:center;font-size:15px;} .estv2-view:hover{border-color:var(--accent);color:var(--accent);} .estv2-view.on{border-color:var(--accent);background:var(--accent-bg);color:var(--accent);} .estv2-list{display:flex;flex-direction:column;gap:12px;} /* Вузький екран: фото 190px зʼїдає рядок — рядок стає вертикальним (фото зверху). */ @media(max-width:560px){ .estv2-list>button{flex-direction:column;} .estv2-lrimg{width:100% !important;height:160px;} } @media(max-width:760px){ .estv2-inputs{justify-content:flex-start;} .estv2-reset{margin-left:0;} } /* поля фільтра мають захардкоджені інлайн-ширини (200/130/110/90/130px, сума 660px) — на вузькому екрані вони не стискаються й не переносяться по одному в рядок, даючи оверфлоу 375→448 (знайдено в сесії 18). Стек у колонку на повну ширину картки — width:100% !important бʼє інлайн (правило 2). */ @media(max-width:480px){ .estv2-inputs{flex-direction:column;align-items:stretch;} .estv2-inp{width:100% !important;} } /* Картка оголошення 2.0: галерея+інфо ліворуч, липка колонка дії праворуч. */ .estv2-back{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line2);background:var(--card);border-radius:11px;padding:9px 14px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--text-soft);margin-bottom:16px;font-family:inherit;} .estv2-det{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start;} /* grid-item min-width:auto дає лівій колонці розпливтись під фіксовану ширину SVG-плану героя (він у боксі з overflow:hidden, але сам трек тягнеться) — min-width:0 тримає колонку в межах треку, а не контенту. */ .estv2-det>*{min-width:0;} .estv2-side{position:sticky;top:70px;display:flex;flex-direction:column;gap:16px;} @media(max-width:900px){ .estv2-det{grid-template-columns:1fr;} .estv2-side{position:static;} } /* ── Магазин 2.0: каталог + картка товару (redesign, лише за v2on) ── Форма «рейка+сітка» в магазині вже була — цей набір лише переводить її на токени тем. У v1 тут були захардкоджені світлі поверхні (#FBFAF5 під категоріями, градієнт #F6F2E8→#EEF3EE у фото-боксі), які в темній темі світились білими плямами. */ .shopv2-wrap{display:grid;grid-template-columns:252px minmax(0,1fr);gap:20px;align-items:start;} .shopv2-rail{align-self:start;position:sticky;top:70px;display:flex;flex-direction:column;gap:14px;min-width:0;} .shopv2-box{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;} .shopv2-bt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);border-bottom:1px solid var(--line3);} .shopv2-reset{border:0;background:none;cursor:pointer;font-family:inherit;font-size:11px;font-weight:700;color:var(--accent-dark);text-transform:none;letter-spacing:0;} .shopv2-dept{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;padding:10px 14px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:650;color:var(--text);text-align:left;border-bottom:1px solid var(--line3);} .shopv2-dept i:first-child{font-size:15px;width:16px;color:var(--text-faint);} .shopv2-dept:hover{background:var(--bg2);} .shopv2-dept.on{background:var(--accent-bg);color:var(--accent-dark);font-weight:800;} .shopv2-dept.on i:first-child{color:var(--accent);} .shopv2-subs{background:var(--bg2);border-bottom:1px solid var(--line3);padding:4px 0;} .shopv2-sub{width:100%;text-align:left;border:0;background:none;padding:7px 14px 7px 39px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text-soft);} .shopv2-sub:hover{color:var(--text);} .shopv2-sub.on{font-weight:800;color:var(--accent-dark);} .shopv2-fx{display:flex;flex-direction:column;gap:1px;max-height:236px;overflow:auto;padding:8px 12px 12px;} .shopv2-fo{display:flex;align-items:center;gap:9px;border:0;background:none;padding:6px 3px;cursor:pointer;font-family:inherit;font-size:12.5px;text-align:left;color:var(--text);} .shopv2-cb{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line2);background:var(--card2);display:grid;place-items:center;flex-shrink:0;} .shopv2-fo.on .shopv2-cb{border-color:var(--accent);background:var(--accent);} .shopv2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:14px;} .shopv2-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden;transition:border-color .14s,box-shadow .14s;} .shopv2-card:hover{border-color:var(--line2);box-shadow:0 6px 20px rgba(32,36,43,.08);} .shopv2-img{width:100%;border:0;background:var(--bg2);height:142px;display:grid;place-items:center;font-size:54px;cursor:pointer;padding:0;overflow:hidden;} .shopv2-body{display:flex;flex-direction:column;gap:7px;flex:1;padding:12px 13px 13px;} .shopv2-brand{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--text-faint);} .shopv2-name{text-align:left;border:0;background:none;padding:0;cursor:pointer;font-family:inherit;font-size:13px;line-height:1.35;color:var(--text);min-height:35px;font-weight:600;} .shopv2-pr{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-top:auto;} .shopv2-pr b{font-family:var(--f-mono);font-size:17px;color:var(--accent);} .shopv2-pr span{font-size:11px;color:var(--text-faint);font-weight:600;} .shopv2-add{background:var(--accent);color:#fff;border:0;border-radius:11px;padding:10px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;} .shopv2-step{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent-bg);border-radius:11px;padding:5px;} .shopv2-sb{width:30px;height:30px;border:1px solid var(--line3);background:var(--card);border-radius:8px;cursor:pointer;font-size:16px;font-weight:700;color:var(--text-soft);} .shopv2-sb.plus{color:var(--accent);} .shopv2-qty{font-family:var(--f-mono);font-weight:800;min-width:26px;text-align:center;color:var(--text);} .shopv2-crumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--text-faint);font-weight:600;margin-bottom:12px;} .shopv2-crumb button{border:0;background:none;padding:0;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;color:var(--text-faint);} .shopv2-crumb button:hover{color:var(--accent-dark);} .shopv2-crumb b{color:var(--accent-dark);font-weight:800;} .shopv2-rate{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-faint);font-weight:600;} .shopv2-rate b{font-family:var(--f-mono);font-size:11.5px;color:var(--text-soft);font-weight:800;} /* Пагінатор каталогу — токени тем, тож живе в обох. Лічильник «X–Y з N» іде праворуч і на вузькому переноситься під ряд кнопок (flex-wrap на контейнері). */ .shopv2-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:20px;} .shopv2-pg{min-width:34px;height:34px;padding:0 9px;border:1.5px solid var(--line2);background:var(--card);color:var(--text-soft);border-radius:10px;font-family:var(--f-mono);font-size:12.5px;font-weight:700;cursor:pointer;display:grid;place-items:center;} .shopv2-pg:hover:not(:disabled){border-color:var(--accent);color:var(--accent-dark);} .shopv2-pg.on{border-color:var(--accent);background:var(--accent);color:#fff;} .shopv2-pg:disabled{opacity:.4;cursor:default;} .shopv2-pgdots{color:var(--text-faint);font-weight:800;padding:0 2px;} .shopv2-pgcnt{margin-left:auto;font-size:12px;color:var(--text-faint);font-weight:600;} .shopv2-hero{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;margin-bottom:24px;} .shopv2-heroimg{border:1px solid var(--line);border-radius:20px;background:var(--bg2);height:360px;display:grid;place-items:center;font-size:150px;position:sticky;top:70px;overflow:hidden;} @media(max-width:900px){ .shopv2-wrap{grid-template-columns:1fr;} .shopv2-rail{position:static;} .shopv2-hero{grid-template-columns:1fr;gap:18px;} .shopv2-heroimg{position:static;height:220px;font-size:92px;} } /* ═══ Огляд 2.0: багаті KPI-картки (іконка+назва / велике число / підпис) ═══ */ .cabv2-okpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 17px;} .cabv2-okl{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;} .cabv2-okl i{font-size:15px;} .cabv2-okv{display:block;font-family:var(--f-mono);font-size:22px;line-height:1;} .cabv2-okd{font-size:11px;color:var(--text-faint);margin-top:6px;} .cabv2-attn{border-left:4px solid var(--warn);} .cabv2-2wide{grid-template-columns:1.4fr 1fr;} @media(max-width:900px){ .cabv2-2wide{grid-template-columns:1fr;} } /* підзаголовок під h2 у шапці кабінету (сторінка «Мої проєкти») */ .cabv2-mh-tt{min-width:0;} .cabv2-mh-sub{font-size:12.5px;color:var(--text-soft);margin-top:4px;line-height:1.45;} /* ═══ «Мої проєкти»: панель «Список обʼєктів» + рядки об'єктів ═══ */ .pjlist-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line3);} .pjlist-h b{font-size:14px;font-family:var(--f-head);} .pjlist-add{border:0;background:none;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:800;color:var(--accent-dark);display:inline-flex;align-items:center;gap:5px;} .pjlist-add i{font-size:14px;} .pjlist-filt{padding:12px 18px;border-bottom:1px solid var(--line3);} .pjlist{display:flex;flex-direction:column;} .pjrow{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line3);} .pjrow:last-child{border-bottom:0;} .pjrow:hover{background:var(--bg2);} .pjrow-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;font-size:19px;} .pjrow-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;} .pjrow-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;} .pjrow-top b{font-size:14px;color:var(--text);} .pjrow-chip{font-size:10.5px;font-weight:800;border-radius:99px;padding:2px 9px;white-space:nowrap;} .pjrow-sub{font-size:11.5px;color:var(--text-faint);display:flex;align-items:center;gap:5px;flex-wrap:wrap;} .pjrow-sub i{font-size:13px;} .pjrow-dot{opacity:.6;} .pjrow-bar{height:6px;border-radius:99px;background:var(--line3);overflow:hidden;max-width:320px;} .pjrow-bar span{display:block;height:100%;border-radius:99px;} .pjrow-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;} .pjrow-sum{font-family:var(--f-mono);font-size:14.5px;color:var(--text);white-space:nowrap;} .pjrow-acts{display:inline-flex;align-items:center;gap:7px;} .pjrow-open{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--line2);background:var(--card2);border-radius:11px;padding:9px 14px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--text);white-space:nowrap;} .pjrow-open:hover{border-color:var(--accent);color:var(--accent-dark);} .pjrow-open i{font-size:14px;} @media(max-width:640px){ .pjrow{flex-wrap:wrap;} .pjrow-right{align-items:flex-start;width:100%;flex-direction:row;justify-content:space-between;} } /* ═══ Профіль замовника: картка даних + кнопка «Вийти» ═══ */ .cabv2-logout{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line2);background:var(--card2);border-radius:11px;padding:9px 16px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;color:var(--err-text);white-space:nowrap;} .cabv2-logout:hover{border-color:var(--err);background:var(--err-bg);} .cabv2-logout i{font-size:16px;} .cabv2-pf{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;} .cabv2-pf-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line3);border-radius:13px;padding:12px 14px;background:var(--card2);} .cabv2-pf-ic{width:38px;height:38px;border-radius:11px;flex-shrink:0;background:var(--accent-bg);color:var(--accent-dark);display:grid;place-items:center;font-size:18px;} .cabv2-pf-txt{min-width:0;} .cabv2-pf-l{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);display:block;margin-bottom:3px;} .cabv2-pf-v{font-size:14px;color:var(--text);word-break:break-word;} @media(max-width:640px){ .cabv2-pf{grid-template-columns:1fr;} } /* ═══ Двоколонкові інлайн-грід-екрани (майстер «Новий проєкт», Лего-конструктив, кошторис): фіксована/мінімальна ширина колонки на вузькому екрані не стискається — друга колонка йде за межі viewport (немає горизонтального скролу сторінки, тож вона просто клипається/ховається за краєм, як «Локація об'єкта» на мобільному майстрі). Одна колонка на телефоні для всіх трьох. */ @media(max-width:760px){ .vx-wiz2col,.vx-side350,.vx-side330{grid-template-columns:1fr!important;gap:18px!important;} } /* ═══ Шапка групи «Елементи конструкцій» (genCtorElemsHTML): flex-рядок без grid-template-columns — назва мала лише `min-width:0` без реальної підлоги, тож на вузькому екрані сусіди («N поз.», сума, тумблер), яким нема куди стискатись (немає overflow:hidden), забирали всю ширину, а назва стискалась до 0 і зникала повністю (не обрізана — саме невидима). Бейдж «N поз.» дублює число, яке видно й розгорнувши групу, тож на телефоні він ховається першим; назві повертається реальна мінімальна ширина замість 0. */ @media(max-width:520px){ .ctorgrp-cnt{display:none;} .ctorgrp-l{min-width:72px!important;} }