/* Орендо — дизайн-система. Теми перемикаються через [data-theme] на . */ :root { /* за замовчуванням: нейтрал (zinc) + смарагд, near-black кнопки */ --bg: #fafafa; --surface: #ffffff; --text: #18181b; --muted: #52525b; /* темніший сірий — контраст ≈7:1 (було #71717a ≈4.7:1, ледь читалось) */ --border: #e9e9ec; --primary: #18181b; --primary-700: #2a2a2e; --on-primary: #ffffff; --link: #047857; --accent: #059669; --accent-soft: #ecfdf5; --accent-ink: #047857; --danger: #dc2626; --danger-soft: #fef2f2; --danger-ink: #b91c1c; /* бурштиновий — планові/майбутні платежі (3-рівневе кодування за бренд-буком) */ --warn: #f59e0b; --warn-soft: #fffbeb; --warn-ink: #b45309; /* кнопки: основні — брендовий емералд (білий текст), вторинні — контурні */ --btn-bg: #059669; --btn-bg-h: #047857; --btn-fg: #ffffff; --nav-bg: rgba(255, 255, 255, .72); --hover: #f4f4f5; --ring: rgba(5, 150, 105, .15); --shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 1px 3px rgba(24, 24, 27, .05); --shadow-md: 0 10px 28px -10px rgba(24, 24, 27, .16), 0 3px 8px -4px rgba(24, 24, 27, .06); --radius: 11px; --radius-lg: 14px; --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* сигнатурний дисплейний шрифт — мʼякший, лише для бренду та великих числових показників */ --font-display: 'Manrope', var(--font); } /* СВІТЛА: біле тло + синій акцент */ [data-theme="light"] { --bg: #f9fafb; --surface: #ffffff; --text: #0f172a; --muted: #4b5563; /* темніший — контраст ≈7:1 */ --border: #e5e7eb; --primary: #2563eb; --primary-700: #1d4ed8; --on-primary: #ffffff; --link: #2563eb; --nav-bg: rgba(255, 255, 255, .8); --hover: #f3f6fc; --ring: rgba(37, 99, 235, .16); } /* ТЕМНА: справжній сучасний dark (zinc-950) + смарагд */ [data-theme="dark"] { --bg: #09090b; --surface: #18181b; --text: #fafafa; --muted: #b4b4be; /* трохи світліший на темному тлі — краще видно */ --border: #27272a; --primary: #fafafa; --primary-700: #e4e4e7; --on-primary: #18181b; --link: #34d399; --accent: #10b981; --accent-soft: #052e22; --accent-ink: #6ee7b7; --danger: #f87171; --danger-soft: #2a1414; --danger-ink: #fca5a5; --warn: #fbbf24; --warn-soft: #2a1d05; --warn-ink: #fcd34d; --nav-bg: rgba(9, 9, 11, .8); --hover: #27272a; --ring: rgba(16, 185, 129, .22); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .5); --shadow-md: 0 14px 32px -10px rgba(0, 0, 0, .65); } * { box-sizing: border-box; } body { font-family: var(--font); margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } /* ── Каркас кабінету: бічне меню зліва + контент ── */ .shell { display: flex; min-height: 100vh; } .sidebar { width: 208px; flex: none; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .side-brand { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); } /* ── Єдиний логотип на всіх сторінках: мітка + словесний знак ── */ .brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: var(--text); } .brand:hover { text-decoration: none; } .brand-mark { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: var(--accent); color: #fff; flex: none; } .brand-mark .ic { width: 15px; height: 15px; stroke-width: 2.1; opacity: 1; } .side-nav { flex: 1; padding: 6px 8px; } .side-group { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; padding: 9px 10px 3px; } .side-link { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; color: var(--text); font-weight: 600; font-size: .875rem; } .side-link .ic { width: 17px; height: 17px; } .side-link:hover { background: var(--hover); color: var(--text); text-decoration: none; } .side-link.on { background: var(--accent-soft); color: var(--accent-ink); } .side-link .si { font-size: 1.05rem; width: 20px; text-align: center; flex: none; } .ic { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } /* іконки в дрібних елементах — менші, щоб не випирати з тексту */ .badge .ic, .pill .ic { width: 13px; height: 13px; } .chip .ic, .prow-link .ic { width: 15px; height: 15px; } .menu-ic .ic { width: 18px; height: 18px; color: var(--muted); } .side-link .ic { opacity: .85; } .side-link.on .ic { opacity: 1; } .side-foot { padding: 8px 10px; border-top: 1px solid var(--border); } .side-logout { background: none; border: none; cursor: pointer; font: inherit; width: 100%; text-align: left; } /* Адмін-простір (роль 3): індиго-маркер відділяє його від клієнтського (бренд-бук §4.2). Перевизначення --accent на сайдбарі перефарбовує мітку, активний пункт і бейдж в індиго. */ .side-admin { --accent: #4338ca; --accent-soft: #eef2ff; --accent-ink: #3730a3; border-right: 2px solid #1e1b4b; } .adminbadge { background: #1e1b4b; color: #fff; } /* активний пункт — лівий акцентний маркер (чіткіший стан) */ .side-link.on { box-shadow: inset 3px 0 0 var(--accent); } /* бейдж-лічильник у меню (нові заявки / прострочення) */ .nav-badge { margin-left: auto; background: var(--accent); color: #fff; border-radius: 999px; min-width: 19px; height: 19px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; } .nav-badge.bad { background: var(--danger); } /* профіль унизу меню — імʼя + тариф */ /* профіль угорі меню — імʼя + тариф, веде в налаштування (єдиний вхід, без дубля) */ .side-profile { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 4px 8px 6px; border-radius: 10px; color: var(--text); border: 1px solid var(--border); } .side-profile.on, .side-profile:hover { background: var(--hover); text-decoration: none; } .side-avatar { width: 31px; height: 31px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; font-family: var(--font-display); } .side-profile-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; flex: 1; } .side-profile-name { font-weight: 700; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-profile-plan { font-size: .72rem; color: var(--muted); } .side-profile-go { width: 16px; height: 16px; flex: none; color: var(--muted); } /* згортаючі групи меню (Облік / Бізнес) */ summary.side-group { cursor: pointer; display: flex; align-items: center; list-style: none; user-select: none; } summary.side-group::-webkit-details-marker { display: none; } summary.side-group::marker { content: ""; } summary.side-group:hover { color: var(--text); } .grp-arr { margin-left: auto; width: 14px; height: 14px; color: var(--muted); transition: transform .15s ease; } .side-grp[open] > summary .grp-arr { transform: rotate(180deg); } .content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 18px 18px; } .main-public { max-width: 760px; } .mobilebar { display: none; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--nav-bg); backdrop-filter: blur(8px); z-index: 40; } .hamb { font-size: 1.5rem; cursor: pointer; line-height: 1; } .hamb-close { display: none; font-size: 1.2rem; cursor: pointer; color: var(--muted); } .navtoggle { position: absolute; opacity: 0; pointer-events: none; } @media (max-width: 820px) { .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: auto; z-index: 60; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-md); } .navtoggle:checked ~ .shell .sidebar { transform: translateX(0); } .navtoggle:checked ~ .shell .navscrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.45); } .mobilebar { display: flex; } .hamb-close { display: inline; } .tabbar { display: flex; } /* контент не ховається за нижньою навігацією */ .main { padding: 16px 14px calc(74px + env(safe-area-inset-bottom, 0px)); } .bughunt-btn { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } .appinstall-btn { bottom: calc(126px + env(safe-area-inset-bottom, 0px)); } } h1 { font-size: 1.32rem; font-weight: 700; letter-spacing: -.015em; margin: .1em 0 .5em; } h2 { font-size: .98rem; font-weight: 650; margin: 1.3em 0 .45em; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } p { margin: .4em 0; } /* ── Типографічний підпис ── Один характерний дисплейний шрифт (Space Grotesk) для бренду та великих грошових показників — це і є «сигнатура» фінтех-продукту, решта лишається Inter. */ .brand, .side-brand .brand, .hero-amount, .collect-sum, .tile-n, .funnel-n, .plan-price, .stat .num, .prow-sum, .setup-title { font-family: var(--font-display); } /* Цифри, що шикуються в колонки/списки — табличні (рівні) фігури, щоб суми вирівнювалися */ .hero-amount, .collect-sum, .collect-pct, .tile-n, .funnel-n, .plan-price, .stat .num, .prow-sum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* слім-хедер зверху */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; margin: -16px -16px 14px; padding: 12px 16px; background: var(--nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .topbar .brand, .mobilebar .brand { font-size: 1.12rem; } /* бренд уніфіковано у .brand */ /* окрема оболонка адміна (роль 3): візуально відмінна від панелі орендодавця */ .admintop { border-bottom: 2px solid var(--accent); } .adminbadge { display: inline-block; background: var(--accent); color: var(--on-primary); font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 2px; } .admin-actions { display: flex; align-items: center; gap: 14px; } /* вкладки адмін-панелі */ .admin-nav { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 16px; border-bottom: 1px solid var(--border); } .admin-nav a { color: var(--muted); padding: 9px 15px; border-radius: 10px 10px 0 0; font-weight: 600; white-space: nowrap; } .admin-nav a:hover { color: var(--text); background: var(--hover); text-decoration: none; } .admin-nav a.on { color: var(--primary); border-bottom: 2px solid var(--accent); margin-bottom: -1px; } .topbar .brand:hover { text-decoration: none; } .topbar-ic { color: var(--muted); font-size: 1.2rem; } .topbar-ic:hover { color: var(--text); text-decoration: none; } /* нижня таб-навігація (мобільний застосунок-вигляд) — видима лише на вузьких екранах */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: none; justify-content: space-around; background: var(--nav-bg); backdrop-filter: blur(14px); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: .66rem; font-weight: 600; padding: 6px 4px; border-radius: 12px; min-height: 48px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tab .ti { position: relative; line-height: 1; } .tab .ti .ic { width: 23px; height: 23px; } .tab:hover, .tab:focus-visible { color: var(--text); text-decoration: none; } .tab.on { color: var(--primary); } .tab.on .ic { opacity: 1; } /* індикатор-крапка (напр. є прострочені платежі) */ .tab-badge { position: absolute; top: -3px; right: -6px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid var(--nav-bg); } /* затемнення-підкладка під висувним меню (тап поза меню — закрити) */ .navscrim { display: none; } /* список-меню (сторінка «Ще», налаштування) */ .menu { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 18px; } .menu-row { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; color: var(--text); box-shadow: var(--shadow); } .menu-row:hover { background: var(--hover); text-decoration: none; } .menu-ic { font-size: 1.25rem; width: 26px; text-align: center; } .menu-t { flex: 1; font-weight: 600; } .menu-go { color: var(--muted); } .logout-form { margin: 0; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 14px; margin: 9px 0; box-shadow: var(--shadow); transition: box-shadow .15s ease; } .card:hover { box-shadow: var(--shadow-md); } .card.archived { opacity: .62; } .card.notice { background: var(--hover); border-color: var(--border); } .muted { color: var(--muted); font-size: .92rem; } /* Маскування ПД у /manage/: значення + кнопка показу за кліком */ .pd { white-space: nowrap; } .pd-val { font-variant-numeric: tabular-nums; letter-spacing: .02em; } .pd-show { border: 0; background: none; cursor: pointer; padding: 0 .15em; font-size: .9em; line-height: 1; opacity: .55; vertical-align: baseline; transition: opacity var(--dur) var(--ease); } .pd-show:hover, .pd-show:focus-visible { opacity: 1; } .badge { display: inline-block; background: var(--hover); color: var(--muted); border-radius: 999px; padding: 2px 10px; font-size: .76rem; font-weight: 600; margin-left: 6px; vertical-align: middle; } .badge.ok { background: var(--accent-soft); color: var(--accent-ink); } .badge.bad { background: var(--danger-soft); color: var(--danger-ink); } .actions { margin-top: 12px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .btn { display: inline-block; background: var(--btn-bg); color: var(--btn-fg); padding: 6px 13px; border-radius: 8px; text-decoration: none; border: 1px solid transparent; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 650; line-height: 1.4; } .btn:hover { background: var(--btn-bg-h); text-decoration: none; } /* вторинна — мінімал-контур (без заливки й тіні) */ .btn.ghost { background: transparent; color: var(--text); border-color: var(--border); box-shadow: none; } .btn.ghost:hover { background: var(--hover); border-color: var(--muted); } /* небезпечна дія (видалення в кошик) — контур, фарбується лише на ховер */ .btn.danger { background: transparent; color: var(--danger); border-color: var(--border); box-shadow: none; } .btn.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); } h1 + .btn, h1 + a.btn { margin: 2px 0 16px; } /* Заголовок сторінки: назва + основна дія в один рядок (мобільний — стовпчиком) */ .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; } .page-head h1 { margin: 0; } .page-head .ph-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .page-head h1 + .btn, .page-head h1 + a.btn { margin: 0; } /* у рядку-заголовку без відступу */ /* Плашка нових заявок із каталогу на дашборді (швидкий доступ) */ .lead-alert { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin: 0 0 14px; border-radius: var(--radius-lg); background: var(--accent-soft); border: 1px solid var(--accent); text-decoration: none; } .lead-alert:hover { text-decoration: none; box-shadow: var(--shadow-md); } .lead-alert-ic .ic { width: 20px; height: 20px; color: var(--accent-ink); } .lead-alert-txt { flex: 1; font-weight: 600; font-size: .9rem; color: var(--text); } .lead-alert-badge { background: var(--accent); color: #fff; border-radius: 999px; min-width: 22px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; } .lead-alert-go { color: var(--accent-ink); font-weight: 700; } /* акцентна (потрібна дія: орендар підтвердив) — суцільний emerald, сильніший заклик */ .lead-alert.action { background: var(--accent); border-color: var(--accent); } .lead-alert.action .lead-alert-txt, .lead-alert.action .lead-alert-go { color: #fff; } .lead-alert.action .lead-alert-ic .ic { color: #fff; } .lead-alert.action .lead-alert-badge { background: #fff; color: var(--accent-ink); } /* Воронка конверсії каталогу (заявки -> пропозиції -> підтверджено -> договори) */ .funnel { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; } .funnel-step { flex: 1; min-width: 70px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 8px; text-align: center; } .funnel-step.ok { background: var(--accent-soft); border-color: var(--accent); } .funnel-n { font-size: 1.3rem; font-weight: 750; letter-spacing: -.02em; } .funnel-step.ok .funnel-n { color: var(--accent-ink); } .funnel-l { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .funnel-arr { align-self: center; color: var(--muted); } @media (max-width: 560px) { .funnel-arr { display: none; } } /* Блок пропозиції договору в рядку заявки */ .offer-box { margin-top: 8px; padding: 10px 12px; background: var(--hover); border-radius: 10px; font-size: .88rem; } .offer-box .copyrow { margin: 8px 0 0; } .schedule-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0; } .schedule-form input { margin: 0; width: auto; flex: 1; min-width: 140px; font-size: .85rem; padding: 6px 10px; } .offer-meet { margin: 6px 0; color: var(--accent-ink); font-weight: 600; } .meet-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 8px 0; font-size: .85rem; } /* Рядок комунального тарифу (послуга + ставка) */ .tariff-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .tariff-l { flex: 1; font-size: .9rem; } .tariff-row input { width: 110px; margin: 0; } /* Підключення орендаря: дві картки (веб-кабінет + Telegram) з копіюванням */ .connect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; } .card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .card-h .ic { width: 18px; height: 18px; color: var(--muted); } .copyrow { display: flex; gap: 8px; margin: 10px 0; } .copyrow input { margin: 0; flex: 1; font-size: .82rem; } .connect-ok { font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: 8px; } @media (max-width: 640px) { .connect-grid { grid-template-columns: 1fr; } } /* Порожній стан: іконка + заклик + дія (замість плаского сірого тексту) */ .empty { text-align: center; padding: 40px 22px; border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--surface); } .empty-ic { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 15px; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 14px; } .empty-ic .ic { width: 26px; height: 26px; } .empty-title { font-weight: 650; color: var(--text); margin-bottom: 4px; } .empty-sub { color: var(--muted); font-size: .9rem; margin: 0 auto 18px; max-width: 360px; line-height: 1.45; } button.link { background: none; border: none; color: var(--link); cursor: pointer; padding: 0; font: inherit; font-weight: 600; } button.link:hover { text-decoration: underline; } input, select, textarea { width: 100%; padding: 8px 11px; margin: 3px 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font: inherit; color: var(--text); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } /* Доступність: видиме кільце фокуса з клавіатури на ВСІХ інтерактивних контролах (миша/тап його не показують — завдяки :focus-visible). Пріоритет №1 за ui-ux-pro-max. */ a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible, .chip:focus-visible, .qbtn:focus-visible, .side-link:focus-visible, .tab:focus-visible, .menu-row:focus-visible, .prow-as-link:focus-visible, .step-go:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } /* поля вже мають кільце через box-shadow — без подвійного контуру */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; } label { font-weight: 600; font-size: .92rem; } input[type="checkbox"], input[type="radio"] { width: auto; margin: 0 6px 0 0; } ul { padding-left: 1.1em; } /* форми (створення/редагування) — у картці, кнопки в ряд */ .formcard { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); margin: 4px 0 14px; } .formcard p { margin: 0 0 14px; } .formcard label { display: block; margin-bottom: 2px; } .formcard p label[for$="-0"], .formcard label.inline { display: inline; } /* чекбокси лишаються в рядок */ .helptext { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; } ul.errorlist { list-style: none; padding: 0; margin: 4px 0; color: var(--danger); font-size: .85rem; } .form-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; } .form-actions .btn { flex: 1; text-align: center; } /* картка «скільки винен зараз» (борг+пеня−переплата) */ .debtcard { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--danger); border-radius: var(--radius-lg); padding: 13px 16px; margin: 0 0 16px; box-shadow: var(--shadow); } .debtcard.clear { border-left-color: var(--accent); } .debtcard .lbl { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .debtcard .amt { font-family: var(--font-display); font-size: 1.6rem; font-weight: 750; letter-spacing: -.02em; color: var(--danger-ink); font-variant-numeric: tabular-nums; } .debtcard.clear .amt { color: var(--accent-ink); font-size: 1.1rem; } .debtcard .brk { color: var(--muted); font-size: .86rem; margin-top: 2px; } /* доступний рендер полів (партіал _form.html) */ .field { margin: 0 0 14px; } .field.check label.inline { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; } .field.check label.inline input { width: auto; margin: 0; } .req { color: var(--danger); font-weight: 700; } .field-error { display: block; color: var(--danger-ink); font-size: .85rem; margin-top: 3px; } .field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--danger); } .form-error { background: var(--danger-soft); color: var(--danger-ink); border: 1px solid var(--danger); border-radius: 11px; padding: 10px 13px; margin: 0 0 14px; font-size: .9rem; } /* ── Сторінки входу/реєстрації: спліт-екран (бренд-панель + форма) ── */ .auth-split { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; } .auth-aside { position: relative; overflow: hidden; color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(155deg, #065f46 0%, #054b37 55%, #04331f 100%); } .auth-aside::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 38% at 82% 12%, rgba(255,255,255,.12), transparent 70%); } .aside-brand { position: relative; display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; } .aside-brand .mk { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px -6px rgba(0,0,0,.4); } .aside-brand .mk img { width: 28px; height: 28px; object-fit: contain; } .aside-mid { position: relative; } .aside-mid h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.12; letter-spacing: -.025em; font-weight: 800; max-width: 13em; } .aside-mid p { color: #bdf0db; margin: 14px 0 26px; font-size: 1.05rem; max-width: 24em; } .aside-points { display: flex; flex-direction: column; gap: 14px; } .aside-pt { display: flex; align-items: center; gap: 12px; color: #eafaf3; font-size: 1rem; } .aside-pt svg { width: 22px; height: 22px; flex: none; stroke: #6ee7b7; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .aside-foot { position: relative; color: #8fd3ba; font-size: .85rem; } .auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .auth-box { width: 100%; max-width: 384px; } .auth-mark { display: none; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--text); margin-bottom: 26px; } .auth-mark img { width: 30px; height: 30px; object-fit: contain; } .auth-box h1 { font-size: 1.7rem; letter-spacing: -.02em; margin: 0 0 5px; color: var(--text); } .auth-sub { color: var(--muted); margin: 0 0 24px; font-size: .98rem; } .auth-box form { margin: 0; } .auth-box .field { margin-bottom: 16px; } .auth-box label { font-weight: 600; font-size: .9rem; color: var(--text); } .auth-box input { width: 100%; } .auth-consent { display: flex; gap: 9px; align-items: flex-start; font-size: .88rem; color: var(--muted); margin: 0 0 16px; line-height: 1.45; } .auth-consent input { width: auto; margin: 2px 0 0; flex: none; } .auth-submit { width: 100%; height: 48px; font-size: 1rem; margin-top: 6px; } .auth-or { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--muted); font-size: .85rem; } .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth-google { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1rem; } .auth-alt { color: var(--muted); margin-top: 20px; font-size: .93rem; text-align: center; } .auth-alt a { color: var(--accent-ink); font-weight: 650; } .auth-tenant { margin-top: 26px; background: var(--accent-soft); border: 1px solid var(--border); border-radius: 13px; padding: 13px 15px; font-size: .88rem; color: var(--accent-ink); line-height: 1.45; } .auth-tenant b { font-weight: 700; } @media (max-width: 860px) { .auth-split { grid-template-columns: 1fr; } .auth-aside { display: none; } .auth-mark { display: flex; } } /* чат орендодавець↔орендар */ .chat-thread { display: flex; flex-direction: column; gap: 7px; margin: 12px 0 14px; } .msg { max-width: 80%; padding: 8px 12px; border-radius: 14px; font-size: .9rem; } .msg .meta { font-size: .68rem; opacity: .7; margin-top: 3px; } .msg.them { background: var(--hover); align-self: flex-start; border-bottom-left-radius: 4px; } .msg.mine { background: var(--accent-soft); color: var(--accent-ink); align-self: flex-end; border-bottom-right-radius: 4px; } .chat-send { display: flex; gap: 8px; align-items: flex-end; } .chat-send textarea { flex: 1; margin: 0; } .chat-clip { display: inline-grid; place-items: center; cursor: pointer; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--muted); } .chat-clip:hover { color: var(--accent); } .msg-attach { margin-top: 4px; font-size: .85rem; } .msg-attach a { display: inline-flex; align-items: center; gap: 4px; } .heatmap { display: flex; gap: 3px; margin-top: 8px; flex-wrap: wrap; } .hm-cell { width: 16px; height: 16px; border-radius: 3px; background: var(--border); display: inline-block; } .hm-on_time { background: var(--success, #4f9e78); } .hm-late { background: var(--accent, #c79a4e); } .hm-overdue { background: var(--danger, #d96b6b); } .hm-pending { background: var(--border); border: 1px dashed var(--muted); } .hm-legend { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .78rem; flex-wrap: wrap; } .hm-legend .hm-cell { width: 11px; height: 11px; margin-left: 8px; } .cmp-table { border-collapse: collapse; width: 100%; font-size: .9rem; } .cmp-table th, .cmp-table td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; } .cmp-table td.cmp-c { text-align: center; } .cmp-table th.cmp-cur, .cmp-table td.cmp-cur { background: var(--accent-soft, rgba(94,131,179,.10)); } .cmp-yes { color: var(--success, #4f9e78); font-weight: 700; } .cmp-no { color: var(--muted); } .int-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; } .int-row form { margin: 0; } /* ── Головна «Сьогодні»: fintech-стиль (Revolut/monobank) ── */ .hero { border-radius: 16px; padding: 16px 18px; color: #fff; background: radial-gradient(135% 140% at 0% 0%, #1e293b 0%, #0b1220 72%); box-shadow: 0 10px 26px -6px rgba(2, 6, 23, .32); margin: 4px 0 12px; } .hero-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: rgba(255, 255, 255, .58); font-weight: 600; } .hero-amount { font-size: 1.95rem; font-weight: 800; letter-spacing: -.03em; margin: 4px 0 3px; line-height: 1.05; } .hero.debt .hero-amount { color: #fda4af; } .hero.ok .hero-amount { color: #4ade80; } .hero-hint { color: rgba(255, 255, 255, .72); font-size: .92rem; } .hero-cta { margin-top: 16px; } .hero-cta .btn { background: #fff; color: #0b1220; } .hero-cta .btn:hover { background: #e5e7eb; } /* Майстер швидкого старту: завжди біла кнопка на початку hero-блоку (будь-який стан) */ .hero-wizard { background: #fff; color: #0b1220; border-color: #fff; margin-bottom: 12px; } .hero-wizard:hover { background: #e5e7eb; border-color: #e5e7eb; color: #0b1220; } /* онбординг: чек-лист першого запуску */ .setup { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); margin: 6px 0 16px; } .setup-title { font-size: 1.2rem; font-weight: 750; letter-spacing: -.02em; } .steps { list-style: none; padding: 0; margin: 12px 0 0; } .steps li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); } .steps li:first-child { border-top: none; } .step-ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--hover); color: var(--muted); font-weight: 700; font-size: .85rem; } .steps li.done .step-ic { background: var(--accent-soft); color: var(--accent-ink); } .step-label { flex: 1; font-weight: 550; } .steps li.done .step-label { color: var(--muted); text-decoration: line-through; } .step-go { margin-left: auto; color: var(--link); font-weight: 650; white-space: nowrap; background: none; border: none; font: inherit; cursor: pointer; padding: 0; } .step-go:hover { text-decoration: underline; } .step-go-form { margin: 0; } /* швидкі дії (як шорткати в банк-застосунку) */ .quick { display: flex; gap: 10px; margin: 0 0 14px; overflow-x: auto; padding-bottom: 2px; } .quick form { margin: 0; flex: none; } .qbtn { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; min-width: 66px; width: auto; color: var(--text); font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); text-align: center; } .qbtn:hover { background: var(--hover); text-decoration: none; } .qbtn .ico { font-size: 1.3rem; line-height: 1; } .qbtn svg.ico { width: 20px; height: 20px; color: var(--accent-ink); } /* збір цього місяця */ .collect { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 13px 15px; margin: 0 0 8px; box-shadow: var(--shadow); } .collect-top { display: flex; justify-content: space-between; align-items: baseline; } .collect-label { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 650; } .collect-pct { font-weight: 760; color: var(--accent-ink); } .collect-sum { font-size: 1.5rem; font-weight: 780; letter-spacing: -.02em; margin: 4px 0 10px; } .bar { height: 10px; background: var(--hover); border-radius: 999px; overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; } .collect-sub { color: var(--muted); font-size: .85rem; margin-top: 8px; } /* графік збору за 6 місяців (чисті CSS-стовпці, без JS) */ .chartcard { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; margin: 8px 0; box-shadow: var(--shadow); } .chart { display: flex; gap: 10px; align-items: flex-end; height: 140px; margin-top: 12px; } .chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .chart .track { width: 62%; max-width: 34px; margin: 0 auto; background: var(--hover); border-radius: 8px 8px 0 0; position: relative; min-height: 3px; } .chart .fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); border-radius: 8px 8px 0 0; min-height: 2px; } .chart .col-lbl { text-align: center; font-size: .72rem; color: var(--muted); margin-top: 6px; flex: none; } /* Горизонтальні proportion-бари (структура витрат за категоріями — part-to-whole). Значення й % підписані текстом поряд — графік доступний без кольору. */ .catbar { margin: 11px 0; } .catbar:first-child { margin-top: 2px; } .catbar:last-child { margin-bottom: 2px; } .catbar-top { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; margin-bottom: 5px; } .catbar-label { font-weight: 600; } .catbar-val { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .catbar-track { height: 8px; background: var(--hover); border-radius: 999px; overflow: hidden; } .catbar-track > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; min-width: 2px; transition: width .4s ease; } /* Лише для скрінрідерів — текстовий fallback графіків (a11y) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Фото об'єкта: галерея на деталях + обкладинка в каталозі ── */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 4px 0 12px; } .photo-cell { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--hover); cursor: grab; } .photo-cell.dragging { opacity: .5; outline: 2px dashed var(--primary); cursor: grabbing; } .photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-cell form { margin: 0; } .photo-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: none; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; font-size: .85rem; line-height: 1; display: grid; place-items: center; } .photo-del:hover { background: var(--danger); } .photo-cover-badge { position: absolute; left: 6px; top: 6px; background: var(--accent); color: #fff; font-size: .64rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .photo-cover-form { position: absolute; left: 6px; bottom: 6px; margin: 0; } .photo-cover-btn { background: rgba(0, 0, 0, .55); color: #fff; border: none; border-radius: 999px; padding: 3px 9px; font: inherit; font-size: .66rem; font-weight: 600; cursor: pointer; } .photo-cover-btn:hover { background: var(--accent); } .photo-upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; } .photo-upload input[type="file"] { flex: 1; min-width: 200px; margin: 0; } /* завантажувач документів (тип + файл) */ .doc-upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; } .doc-upload select { width: auto; margin: 0; min-width: 140px; } .doc-upload input[type="file"] { flex: 1; min-width: 200px; margin: 0; } /* обкладинка-мініатюра в рядку каталогу */ .prow-thumb { width: 46px; height: 46px; flex: none; border-radius: 9px; overflow: hidden; background: var(--hover); } .prow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* велика обкладинка + стрічка мініатюр на сторінці оголошення */ .listing-cover { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); margin: 4px 0 8px; aspect-ratio: 16 / 9; background: var(--hover); } .listing-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .thumb-strip { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 10px; padding-bottom: 2px; } .thumb-strip img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; border: 1px solid var(--border); } /* ── Адмін-панель: плашки-плитки + згортувані картки налаштувань ── */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 10px 0 18px; align-items: start; } .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; transition: border-color .15s ease, box-shadow .15s ease; } /* плитки однакові; виділення (акцентна рамка) — лише при наведенні */ .tile:hover { border-color: var(--accent); box-shadow: var(--shadow-md); } .tile-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 9px; } .tile-ic .ic { width: 20px; height: 20px; } .tile-t { font-weight: 700; letter-spacing: -.01em; } .tile-s { font-size: .8rem; color: var(--muted); margin-top: 2px; } .tile-foot { margin-top: 10px; } /* плитка-розворот (details): закрита = компактна плашка, відкрита = повні налаштування */ details.tile > summary { list-style: none; cursor: pointer; } details.tile > summary::-webkit-details-marker { display: none; } details.tile[open] { grid-column: 1 / -1; } /* відкрита плитка займає весь рядок під налаштування */ /* картка-об'єкт у підрозділах кабінету орендаря (лічильники/реквізити/ремонт по об'єктах) */ .obj-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; margin: 0 0 14px; } .obj-card-h { font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .obj-card-h .ic { width: 18px; height: 18px; color: var(--accent-ink, var(--accent)); } .obj-card .prow:last-child { margin-bottom: 0; } /* конструктор модулів: інструменти + сітка-плейсхолдери */ .modtools { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 16px; } .modtools .setcard { flex: 1; min-width: 240px; margin: 0; } .module-tile > summary { display: flex; flex-direction: column; gap: 3px; } .module-tile.archived { opacity: .62; } .module-badges { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 3px; } .plan-modsum { margin: 8px 0; padding: 9px 12px; background: var(--accent-soft); color: var(--accent-ink); border-radius: var(--radius-md); font-size: .88rem; } /* кабінет орендаря: підключення Telegram + доказова стрічка */ .tg-steps { margin: 4px 0 10px; padding-left: 18px; font-size: .86rem; } .tg-steps li { margin: 2px 0; } .ev-feed { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 4px; } .ev-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); } .ev-ic { color: var(--accent); display: inline-flex; } .ev-ic .ic { width: 16px; height: 16px; } .ev-text { flex: 1; font-size: .9rem; } .ev-date { font-size: .78rem; white-space: nowrap; } /* рейтинг орендодавця + відгуки в каталозі */ .ll-rating { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--radius-full); padding: 2px 10px; font-weight: 700; text-decoration: none; margin-top: 4px; } .review-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; } .review-item .int-row { gap: 8px; align-items: center; } .review-form summary { cursor: pointer; color: var(--primary); font-size: .85rem; } /* лічильники: підсвітка непідтвердженої передачі від орендаря */ .prow-pending { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); } .meter-pending { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--warn-soft); border-radius: var(--radius-sm); padding: 6px 10px; } /* редагування активу (техніка/меблі) */ .asset-edit > summary { cursor: pointer; color: var(--primary); font-size: .82rem; margin-top: 6px; } .asset-edit[open] > summary { margin-bottom: 4px; } /* згортувана картка налаштування (тариф/шаблон/оплата) */ .setcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin: 10px 0; } .setcard > summary { display: flex; align-items: center; gap: 12px; padding: 13px 15px; cursor: pointer; list-style: none; font-weight: 650; } .setcard > summary::-webkit-details-marker { display: none; } .setcard > summary .chev { margin-left: auto; transition: transform .15s ease; color: var(--muted); width: 16px; height: 16px; } .setcard[open] > summary .chev { transform: rotate(180deg); } .setcard .set-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; } .setcard .set-ic .ic { width: 20px; height: 20px; } .setcard-body { padding: 4px 15px 15px; } .setcard-body input, .setcard-body select, .setcard-body textarea { margin: 4px 0 10px; } .set-meta { margin-left: auto; font-size: .8rem; color: var(--muted); font-weight: 600; } .tbl-head { display: flex; gap: 12px; padding: 4px 15px 2px; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; } .tbl-head span:first-child { flex: 1; } .chk-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 12px; } .chk-row .chk { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; } .chk-row .chk input { width: auto; margin: 0; } /* предперегляд тарифу в адмінці */ .plan-preview { border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 14px; margin: 4px 0 12px; background: var(--bg); } .plan-preview .pp-price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; } .plan-preview .pp-name { font-weight: 700; } /* ── Фільтр каталогу за параметрами ── */ .filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 16px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .filterbar select, .filterbar input[type="number"] { width: auto; margin: 0; flex: 1; min-width: 130px; } .filterbar .chk { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; white-space: nowrap; } .filterbar .chk input { width: auto; margin: 0; } .filterbar .btn { margin: 0; } .tiles { display: flex; gap: 12px; margin: 0 0 6px; } .tile { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; box-shadow: var(--shadow); } .tile-n { font-size: 1.3rem; font-weight: 780; letter-spacing: -.02em; } .tile-l { color: var(--muted); font-size: .78rem; margin-top: 1px; } .section-title { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin: 16px 0 7px; } /* детальні сторінки */ .back { display: inline-block; color: var(--muted); font-size: .9rem; margin-bottom: 4px; } .back:hover { color: var(--text); text-decoration: none; } .detail-head { display: flex; align-items: center; gap: 14px; margin: 2px 0 6px; } .detail-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--hover); border-radius: 12px; font-size: 1.3rem; color: var(--muted); } .detail-ic .ic { width: 21px; height: 21px; } .detail-head h1 { margin: 0; } .pills-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; } .event { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 12px 14px; margin: 8px 0; box-shadow: var(--shadow); } /* рядок платежу як транзакція у банк-застосунку */ .prow { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; margin: 7px 0; box-shadow: var(--shadow); transition: box-shadow .15s ease; } .prow:hover { box-shadow: var(--shadow-md); } .prow-as-link { display: block; text-decoration: none; color: inherit; } .prow-as-link:hover { text-decoration: none; } .prow.is-paid { opacity: .66; } .prow-head { display: flex; align-items: center; gap: 10px; } .prow-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: var(--hover); border-radius: 10px; font-size: 1.05rem; color: var(--muted); } .prow-ic .ic { width: 17px; height: 17px; } .prow.is-overdue .prow-ic { background: var(--danger-soft); color: var(--danger); } .prow.is-paid .prow-ic { color: var(--accent); } .prow-info { flex: 1; min-width: 0; } .prow-title { font-weight: 650; letter-spacing: -.01em; } .prow-title a { color: var(--text); } .prow-title a:hover { color: var(--link); text-decoration: none; } .prow-sub { color: var(--muted); font-size: .84rem; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prow-amt { text-align: right; flex: none; } .prow-sum { font-weight: 760; letter-spacing: -.02em; } .prow.is-overdue .prow-sum { color: var(--danger); } .pill { display: inline-block; margin-top: 4px; background: var(--hover); color: var(--muted); border-radius: 999px; padding: 2px 9px; font-size: .72rem; font-weight: 650; } .pill.ok { background: var(--accent-soft); color: var(--accent-ink); } .pill.bad { background: var(--danger-soft); color: var(--danger-ink); } .pill.accent { background: var(--accent); color: #fff; } .prow-err { color: var(--danger); font-size: .85rem; margin-top: 8px; } /* інлайн-форма додавання кімнати (юніта) на картці об'єкта */ .unit-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 4px; } .unit-add input { flex: 1 1 140px; min-width: 0; } .unit-add button { flex: none; } /* нотатки з тегами */ .note-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 7px 0; box-shadow: var(--shadow); } .note-body { white-space: pre-wrap; } .note-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .note-del { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 6px; border-radius: 6px; } .note-del:hover { background: var(--danger-soft); color: var(--danger); } .note-add { margin: 10px 0 4px; } .note-add textarea { width: 100%; } .note-add-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; } .note-add-row input { flex: 1 1 200px; min-width: 0; } .note-add-row button { flex: none; } .tag-cloud { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; } .tag-cloud .pill { margin-top: 0; } /* ненав'язливий бейдж «Powered by Орендо» на публічних сторінках каталогу */ .powered-by { text-align: center; margin: 28px 0 8px; font-size: .8rem; } .powered-by a { color: var(--muted); text-decoration: none; } .powered-by a:hover { color: var(--primary); } /* перемикач режиму каталогу + плитка */ .view-switch { display: inline-flex; gap: 2px; margin: 0 0 14px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .vs-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; color: var(--muted); text-decoration: none; font-size: .9rem; background: var(--surface); } .vs-btn:hover { background: var(--hover); text-decoration: none; } .vs-btn.on { background: var(--primary); color: var(--primary-contrast, #fff); } .vs-btn .ic { width: 1em; height: 1em; } .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .cat-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: box-shadow .15s ease, transform .15s ease; } .cat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; } .cat-cover { aspect-ratio: 4/3; background: var(--hover); display: grid; place-items: center; overflow: hidden; } .cat-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .cat-noimg { font-size: 1.6rem; font-weight: 700; color: var(--muted); } .cat-body { padding: 10px 12px; } .cat-title { font-weight: 650; letter-spacing: -.01em; } .cat-sub { font-size: .82rem; margin: 2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cat-price { font-weight: 760; letter-spacing: -.02em; } /* вибір фото у формі об'єкта (галерея / камера) */ .photo-pick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .photo-pick-btn { cursor: pointer; margin: 0; } .photo-pick-hint { font-size: .85rem; } .prow-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .chip { background: var(--btn-bg); color: var(--btn-fg); border: 1px solid transparent; border-radius: 999px; padding: 4px 11px; font: inherit; font-weight: 650; font-size: .76rem; cursor: pointer; } .chip:hover { background: var(--btn-bg-h); } .chip.ghost { background: transparent; color: var(--text); border-color: var(--border); } .chip.ghost:hover { background: var(--hover); border-color: var(--muted); } /* лічильник усередині чипа-фільтра */ .chip-n { display: inline-block; min-width: 1.3em; margin-left: 4px; padding: 0 5px; border-radius: 999px; font-size: .85em; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; background: rgba(255,255,255,.25); color: var(--btn-fg); } .chip.ghost .chip-n { background: var(--border); color: var(--muted); } .chip-form { display: flex; gap: 6px; margin: 0; align-items: center; } .chip-form input { width: 96px; margin: 0; padding: 7px 11px; border-radius: 999px; font-size: .85rem; } .prow-link { margin-left: auto; color: var(--link); font-weight: 600; font-size: .85rem; white-space: nowrap; } .nudge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 14px; margin: 6px 0 10px; font-size: .92rem; } .nudge a { color: var(--accent-ink); font-weight: 650; white-space: nowrap; } .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 16px 0; } /* тарифні картки — навмисно темні (преміум-секція), emerald-акцент на активному */ .plan-card { background: #1b1e23; color: #e6e8ec; border: 1px solid #333841; border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; } .plan-card.current { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(5,150,105,.45), var(--shadow-md); } .plan-head { display: flex; align-items: center; gap: 8px; } .plan-head strong { color: #fff; font-size: 1.06rem; } .plan-price { font-size: 1.7rem; font-weight: 750; letter-spacing: -.02em; margin: 8px 0; color: #fff; } .plan-price .muted, .plan-card .muted { font-size: .9rem; font-weight: 500; color: #9aa3af; } .plan-feats { list-style: none; padding: 0; margin: 10px 0 16px; flex: 1; } .plan-feats li { padding: 4px 0 4px 24px; position: relative; font-size: .94rem; } .plan-feats li.yes::before { content: "✓"; color: #34d399; position: absolute; left: 0; font-weight: 700; } .plan-feats li.no { color: #6b7280; } .plan-feats li.no::before { content: "✕"; color: #6b7280; position: absolute; left: 0; } .plan-card .btn[disabled] { background: #2c313a; color: #9aa3af; cursor: default; box-shadow: none; } .plan-card .btn.ghost { background: transparent; color: #e6e8ec; border-color: #3a4150; } .plan-card .btn.ghost:hover { background: rgba(255,255,255,.06); border-color: #4a5160; } .plan-card form { margin: 0; } .summary { display: flex; gap: 10px; margin: 10px 0 14px; flex-wrap: wrap; } .stat { flex: 1; min-width: 90px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 13px; box-shadow: var(--shadow); } .stat .num { font-size: 1.3rem; font-weight: 750; letter-spacing: -.02em; } .stat .muted { display: block; margin-top: 2px; } a.stat { text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; } a.stat:hover { border-color: var(--accent); box-shadow: var(--shadow-md); } a.pill { text-decoration: none; transition: background .15s ease, color .15s ease; } a.pill:hover { background: var(--accent-soft); color: var(--accent-ink); } /* клікабельні плашки-метрики Огляду — підсвічення лише при наведенні */ a.stat { text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; } a.stat:hover { border-color: var(--accent); box-shadow: var(--shadow-md); } /* дружній розклад Процесів: групи полів, що зʼявляються за обраною частотою */ .freq-opt { margin: 6px 0; } /* акуратні плашки задач: однаковий розмір, опис у 2 рядки, клік -> сторінка управління */ /* Компактні плашки процесів: увесь блок зелений (увімкнено) / червоний (вимкнено), клікабельний */ .tile-grid-compact { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; } a.jobtile { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; } .jobtile strong { font-size: .9rem; letter-spacing: -.01em; } .jobtile-sched { font-size: .74rem; opacity: .8; } .jobtile.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); } .jobtile.off { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-ink); } .jobtile.on:hover { border-color: var(--accent); box-shadow: var(--shadow-md); } .jobtile.off:hover { border-color: var(--danger); box-shadow: var(--shadow-md); } /* версія застосунку у футері меню */ .side-ver { font-size: .7rem; color: var(--muted); padding: 4px 12px; letter-spacing: .02em; } /* лого-мітка в меню/хедері — реальний знак бренду (мітка з logo.png) */ .brand-logo { height: 24px; width: auto; display: block; flex: none; } /* «Впіймай баг»: плаваюча кнопка-репорт (видно лише коли систему ввімкнено) */ .bughunt-btn { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); text-decoration: none; font-size: 1.4rem; } .bughunt-btn:hover { border-color: var(--accent); transform: translateY(-2px); } /* кнопка встановлення додатку — над баг-кнопкою (та сама плаваюча гільза) */ .appinstall-btn { position: fixed; right: 16px; bottom: 72px; z-index: 50; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); text-decoration: none; font-size: 1.4rem; } .appinstall-btn:hover { border-color: var(--accent); transform: translateY(-2px); } /* оплата банківським переказом: реквізити + QR */ .pay-grid { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; } .pay-details { flex: 1; min-width: 260px; } .pay-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; flex-wrap: wrap; } .pay-k { min-width: 92px; color: var(--muted); font-size: .85rem; } .pay-row .copyrow { flex: 1; min-width: 180px; } .pay-ref { margin-top: 12px; font-size: 1.05rem; } .pay-ref strong { font-family: var(--font-mono, monospace); letter-spacing: .04em; background: var(--accent-soft); color: var(--accent-ink); padding: 2px 8px; border-radius: 6px; } .pay-qr { text-align: center; flex: none; max-width: 220px; } .pay-qr img { border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 6px; } /* хлібні крихти — тонкий ряд над контентом (авто з URL, контекст-процесор) */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 16px; font-size: .8rem; color: var(--muted); } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--text); text-decoration: underline; } .crumb-sep { color: var(--muted); opacity: .6; } .crumb-cur { color: var(--text); font-weight: 650; } /* ── Мікровзаємодії та анімації (чистий CSS, без JS) ── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* плавна поява головних блоків на завантаженні сторінки */ .hero, .tiles, .collect, .chartcard, .quick, .menu, .formcard, .detail-head { animation: fadeInUp .32s ease both; } /* прес-стан: легке «втискання» при тапі/кліку (мобільний відгук) */ .btn:active, .chip:active, .qbtn:active, .tab:active, .menu-row:active { transform: scale(.97); } .btn, .chip, .qbtn, .tab, .menu-row, .prow, .card { transition: transform .08s ease, box-shadow .15s ease, background .15s ease; } .prow:active { transform: scale(.995); } /* активна вкладка: підкреслення-індикатор */ .tab { position: relative; } .tab.on::after { content: ""; position: absolute; top: -1px; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary); } /* HTMX: елемент, що шле запит (напр. кнопка «Оплачено»), тьмяніє — миттєвий відгук */ .htmx-request { opacity: .55; pointer-events: none; } .htmx-request.prow, .prow.htmx-request { opacity: .55; } /* підміна вмісту: коротке проявлення нового рядка/картки/пункту меню */ .htmx-settling .prow, .prow.htmx-added, .htmx-settling .card, .card.htmx-added, .htmx-settling .menu-row, .menu-row.htmx-added { animation: fadeInUp .25s ease both; } /* інлайн-спінер для кнопок із hx-* — показується лише поки летить запит */ @keyframes spin { to { transform: rotate(360deg); } } .spinner { display: inline-block; width: .95em; height: .95em; margin-left: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: -.12em; } .htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; } [aria-busy="true"] { cursor: progress; } /* скелетон-заглушка для контенту, що вантажиться (shimmer) */ @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .skeleton { background: linear-gradient(90deg, var(--hover) 25%, var(--border) 37%, var(--hover) 63%); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; border-radius: 8px; color: transparent !important; user-select: none; } .skeleton-line { height: 1em; margin: 6px 0; } /* Тости — підтвердження/помилка дій (стан як напрям, не мовчазний збій) */ .toast-wrap { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column-reverse; gap: 8px; align-items: center; pointer-events: none; padding: 0 12px; } .toast { display: flex; align-items: center; gap: 8px; max-width: min(92vw, 440px); padding: 10px 15px; border-radius: 12px; font-size: .9rem; font-weight: 600; box-shadow: var(--shadow-md); background: var(--danger-soft); color: var(--danger-ink); border: 1px solid var(--danger); animation: fadeInUp .2s ease both; transition: opacity .25s ease; } .toast.ok { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); } .toast .ic { width: 18px; height: 18px; flex: none; } /* ── Візуальний рефреш: чистіше (рівні лінії замість тіней) + більше ієрархії ── */ /* статичні поверхні тримаються на рамці; тінь — лише як легкий ховер-лифт */ .card, .tile, .stat, .collect, .qbtn, .chartcard, .formcard, .setup, .plan-card, .funnel-step, .prow, .menu-row, .event { box-shadow: none; } .card:hover, .prow:hover, .menu-row:hover { box-shadow: var(--shadow); } /* іконка-бейдж заголовка сторінки — брендовий тон (емералд як акцент головних UI). */ .detail-ic { background: var(--accent-soft); color: var(--accent-ink); } /* іконка в рядку платежу кодується статусом: green=оплачено ЛИШЕ, amber=очікується, red=прострочено */ .prow.is-due .prow-ic { background: var(--warn-soft); color: var(--warn-ink); } .pill.due { background: var(--warn-soft); color: var(--warn-ink); } .badge.due { background: var(--warn-soft); color: var(--warn-ink); } /* наголос на сумах — головному в рядку платежу */ .prow-sum { font-size: .98rem; font-weight: 750; } .prow-title { font-weight: 680; } /* аватарка-гліф об'єкта: круглий бейдж з ініціалами — візуальний якір у списках (бренд-бук §3.3) */ .prow-ic.avatar { border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: -.01em; } /* журнал подій: активна плашка-фільтр — акцентна рамка (це вибір фільтра, не статус) */ /* ПРАВИЛО: усі плашки-категорії однакового розміру; підпис в один рядок з усіканням (…), повна назва розділу — у підказці при наведенні (title). Розмір не «пливе». */ .log-cat { text-decoration: none; color: inherit; display: flex; align-items: center; min-height: 62px; } .log-cat.on { border-color: var(--accent); box-shadow: var(--shadow-md); } .log-cat .int-row { width: 100%; min-width: 0; } .log-cat strong { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .log-cat .badge { flex: none; } /* таблиця журналу — щільна, моноширинний час, рядки розділені тонкою лінією */ .logt { width: 100%; border-collapse: collapse; font-size: .85rem; } .logt thead th { text-align: left; padding: 6px 12px; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--border); } .logt td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .logt tbody tr:hover { background: var(--hover); } .logt .nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; } .logt code { font-size: .8rem; } /* --- Шаблони швидких відповідей у чаті --- */ .tpl-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .tpl-chip { display: inline-flex; align-items: center; background: var(--hover); border-radius: 999px; overflow: hidden; } .tpl-ins { background: none; border: none; padding: 4px 6px 4px 11px; font: inherit; font-size: .8rem; color: var(--text); cursor: pointer; } .tpl-del { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 8px 0 2px; font-size: 1rem; line-height: 1; } .tpl-del:hover { color: var(--danger-ink); } /* --- Командна палітра (Ctrl+K) --- */ .cmdk-open { background: none; border: none; font-size: 1.1rem; cursor: pointer; margin-left: auto; padding: 4px 8px; } /* конект-іконки в топбарі поряд із пошуком (Telegram, далі Viber) */ .topbar-link { display: inline-grid; place-items: center; color: var(--text); padding: 4px 8px; text-decoration: none; } button.topbar-link { background: none; border: none; font: inherit; cursor: pointer; } .topbar-link .ic { width: 20px; height: 20px; } .topbar-link.ok { color: var(--success, #4f9e78); } .topbar-link:hover { color: var(--accent); } .cmdk { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; } .cmdk[hidden] { display: none; } /* інакше display:flex перебиває браузерний [hidden] і вікно «залипає» */ .cmdk-box { width: min(560px, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, .35); overflow: hidden; } .cmdk-box input { width: 100%; border: none; border-bottom: 1px solid var(--border); padding: 14px 16px; font-size: 1rem; background: var(--surface); color: var(--text); outline: none; } #cmdk-results { max-height: 50vh; overflow-y: auto; } .cmdk-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); } .cmdk-row:hover, .cmdk-row:focus { background: var(--hover); } .cmdk-label { font-weight: 600; } .cmdk-sub { color: var(--muted); font-size: .82rem; margin-left: auto; } .cmdk-empty { padding: 16px; color: var(--muted); font-size: .9rem; } .cmdk-hint { padding: 8px 16px; color: var(--muted); font-size: .72rem; border-top: 1px solid var(--border); } /* ── Доказова стрічка (append-only журнал у кабінеті) ── */ .journal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow); } .journal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .journal-head h2 { font-size: 1rem; font-weight: 700; margin: 0; } .journal .lock { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--warn-ink); background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 999px; padding: 4px 9px; } .journal .lock .ic { width: 12px; height: 12px; } .rail { position: relative; padding-left: 22px; } .rail::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--border), transparent); } .entry { position: relative; padding-bottom: 16px; } .entry:last-child { padding-bottom: 0; } .entry::before { content: ""; position: absolute; left: -22px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); } .entry.you::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .entry .act { font-size: .92rem; line-height: 1.4; color: var(--text); } .entry .stamp { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--muted); } .entry .stamp .hash { opacity: .7; } .journal-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); text-align: center; } .journal-foot a { font-size: .9rem; font-weight: 600; color: var(--accent-ink); } /* дашборд: плитки переносяться на вузькому екрані; лінк налаштування */ .tiles-wrap { flex-wrap: wrap; } .tiles-wrap .tile { flex: 1 1 96px; min-width: 96px; } .dash-cfg { text-align: right; margin: 2px 0 12px; } .dash-cfg a { color: var(--muted); font-size: .84rem; } .dash-cfg a:hover { color: var(--accent-ink); } .nbu-line { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; margin: 4px 0 0; } .cfg-list { list-style: none; padding: 0; margin: 8px 0 14px; display: flex; flex-direction: column; gap: 6px; } .cfg-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; } .cfg-row.drag { opacity: .5; border-color: var(--accent); } .cfg-handle { cursor: grab; color: var(--muted); font-size: 1.1rem; line-height: 1; user-select: none; touch-action: none; } .cfg-item { display: flex; align-items: center; gap: 9px; font-size: .94rem; flex: 1; cursor: default; } .cfg-item input { width: auto; margin: 0; flex: none; } .cfg-move { display: flex; gap: 4px; flex: none; } .cfg-move button { border: 1px solid var(--border); background: var(--bg); color: var(--muted); border-radius: 7px; width: 28px; height: 28px; cursor: pointer; font-size: 1rem; line-height: 1; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .cfg-move button:hover, .cfg-move button:focus-visible { color: var(--text); border-color: var(--accent); } /* --- Календар-вигляд (місячна сітка) --- */ .cal { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .cal-head, .cal-row { display: grid; grid-template-columns: repeat(7, 1fr); } .cal-hcell { padding: 8px; text-align: center; font-size: .72rem; font-weight: 650; color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--border); } .cal-cell { min-height: 84px; padding: 5px 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; } .cal-cell:nth-child(7n) { border-right: none; } .cal-out { background: var(--bg); } .cal-out .cal-day { color: var(--border); } .cal-today { box-shadow: inset 0 0 0 2px var(--accent); } .cal-day { font-size: .78rem; font-weight: 650; color: var(--muted); } .cal-ev { display: block; font-size: .68rem; font-weight: 600; padding: 2px 5px; border-radius: 5px; background: var(--hover); color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-ev.ok { background: var(--accent-soft); color: var(--accent-ink); } .cal-ev.due, .cal-ev.warn { background: var(--warn-soft); color: var(--warn-ink); } .cal-ev.bad { background: var(--danger-soft); color: var(--danger-ink); } @media (max-width: 640px) { .cal-cell { min-height: 58px; } .cal-ev { font-size: .58rem; } } /* --- Банер пробного періоду --- */ .trial-banner { display: block; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent-ink); font-weight: 600; font-size: .9rem; text-decoration: none; } .trial-banner:hover { text-decoration: none; filter: brightness(.98); } /* --- Графік споживання лічильника (CSS-стовпці) --- */ .cchart { display: flex; align-items: flex-end; gap: 6px; height: 130px; margin: 8px 0 16px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .cbar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 16px; } .cbar-fill { width: 68%; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; transition: height var(--dur, .2s) ease; } .cbar-lbl { font-size: .62rem; color: var(--muted); margin-top: 5px; white-space: nowrap; } /* --- Продуктові метрики (/manage/): когортна heatmap + тони активації --- */ .heat-wrap { overflow-x: auto; margin: 4px 0 12px; } .heat-table { border-collapse: collapse; width: 100%; font-size: .85rem; } .heat-table th, .heat-table td { padding: 7px 10px; text-align: center; border: 1px solid var(--border); white-space: nowrap; } .heat-table th { font-weight: 650; color: var(--muted); } .heat-table td:first-child, .heat-table th:first-child { text-align: left; } .heat.hi { background: var(--accent); color: var(--on-primary); font-weight: 700; } .heat.mid { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; } .heat.lo { background: var(--hover); color: var(--text); } .heat.zero { color: var(--muted); } .heat.future { color: var(--border); } .stat.heat { background: var(--surface); border: 1px solid var(--border); } .stat.heat.hi { background: var(--accent-soft); border-color: var(--accent); } .stat.heat.hi .num { color: var(--accent-ink); } /* --- Оплата оренди орендарем (§8): реквізити + QR + чек у кабінеті --- */ .pay-how { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .pay-how > summary { cursor: pointer; padding: 9px 12px; font-weight: 650; list-style: none; } .pay-how > summary::-webkit-details-marker { display: none; } .pay-how[open] > summary { border-bottom: 1px solid var(--border); } .pay-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; } .pay-method { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .pay-method-h { flex: 1 1 100%; font-weight: 600; font-size: .9rem; } .pay-val { background: var(--hover); border-radius: 7px; padding: 4px 8px; font-size: .85rem; word-break: break-all; } .pay-qr { border: 1px solid var(--border); border-radius: 7px; background: #fff; } .pay-purpose { font-size: .8rem; } .pay-claim { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .pay-claim .chip.ghost.has-file { border-color: var(--accent); color: var(--accent-ink); } /* --- Утиліти (щоб не плодити inline-стилі) --- */ .card-narrow { max-width: 560px; } .row-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; } .muted-sm { color: var(--muted); font-size: .8rem; } .input-inline { width: auto; margin: 0; } /* поле/селект природної ширини (не на всю) */ .mla { margin-left: auto; } /* відсунути елемент праворуч у flex-рядку */ /* --- Мобільний поліш: дії та поля в рядках не тиснуться на вузьких екранах --- */ @media (max-width: 480px) { .prow-foot { gap: 6px; } .prow-foot input[type="number"], .prow-foot input[type="text"], .prow-foot select { flex: 1 1 100%; } .cal-ev { font-size: .62rem; } .cal-cell { min-height: 52px; padding: 4px; } } @media (prefers-reduced-motion: reduce) { *, *::after, *::before { animation: none !important; transition: none !important; } } /* Командний доступ: банер делегованого входу */ .actas-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--accent, #b45309); color: #fff; border-radius: var(--radius-md, 10px); padding: 8px 14px; margin: 0 0 14px; font-size: var(--text-sm, .875rem); } .actas-banner strong { font-weight: 700; } .actas-exit { font: inherit; font-weight: 600; cursor: pointer; background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; padding: 5px 12px; } .actas-exit:hover { background: rgba(255,255,255,.3); }