1276 lines
93 KiB
CSS
1276 lines
93 KiB
CSS
/* Админка DANA в визуальном языке референса BioTrack: воздушная оболочка на молочно-розовом
|
||
градиенте, белые карточки с большими скруглениями, органическая лента навигации. */
|
||
|
||
@font-face { font-family: 'Montserrat Alternates'; font-weight: 300; font-display: swap;
|
||
src: url(fonts/montserrat-alternates-cyrillic-300-normal.woff2) format('woff2');
|
||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
|
||
@font-face { font-family: 'Montserrat Alternates'; font-weight: 300; font-display: swap;
|
||
src: url(fonts/montserrat-alternates-latin-300-normal.woff2) format('woff2'); }
|
||
@font-face { font-family: 'Montserrat Alternates'; font-weight: 400; font-display: swap;
|
||
src: url(fonts/montserrat-alternates-cyrillic-400-normal.woff2) format('woff2');
|
||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
|
||
@font-face { font-family: 'Montserrat Alternates'; font-weight: 400; font-display: swap;
|
||
src: url(fonts/montserrat-alternates-latin-400-normal.woff2) format('woff2'); }
|
||
@font-face { font-family: 'Montserrat Alternates'; font-weight: 500; font-display: swap;
|
||
src: url(fonts/montserrat-alternates-cyrillic-500-normal.woff2) format('woff2');
|
||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
|
||
@font-face { font-family: 'Montserrat Alternates'; font-weight: 500; font-display: swap;
|
||
src: url(fonts/montserrat-alternates-latin-500-normal.woff2) format('woff2'); }
|
||
@font-face { font-family: 'Montserrat Alternates'; font-weight: 600; font-display: swap;
|
||
src: url(fonts/montserrat-alternates-cyrillic-600-normal.woff2) format('woff2');
|
||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
|
||
@font-face { font-family: 'Montserrat Alternates'; font-weight: 600; font-display: swap;
|
||
src: url(fonts/montserrat-alternates-latin-600-normal.woff2) format('woff2'); }
|
||
|
||
:root {
|
||
--bg-milk: #f6f6f5;
|
||
--bg-cool: #eeeeef;
|
||
--bg-powder: #efcfd2;
|
||
--card: #ffffff;
|
||
--text: #33393b;
|
||
--muted: #929793;
|
||
--muted-2: #b5b8b6;
|
||
--line: #efefec;
|
||
--field: #f6f6f4;
|
||
--blue: #8dcbe9;
|
||
--blue-deep: #6cacED;
|
||
--logo-blue: #a7c9ed;
|
||
--mint: #bfe8d6;
|
||
--mint-text: #3f8f6d;
|
||
--rose: #e78c9f;
|
||
--rose-soft: #fbe3e8;
|
||
--rose-text: #b8566c;
|
||
--sky-soft: #dff0f8;
|
||
--sky-text: #3f86a8;
|
||
--butter: #f4e9b2;
|
||
--sage: #eaeef0;
|
||
--danger: #c2495d;
|
||
--warn: #b7813a;
|
||
--shadow: 0 10px 30px rgba(51, 57, 59, 0.05), 0 1px 2px rgba(51, 57, 59, 0.03);
|
||
--shadow-lift: 0 16px 40px rgba(51, 57, 59, 0.08);
|
||
--r-card: 26px;
|
||
--r-field: 14px;
|
||
/* Montserrat Alternates (шрифт сайта DANA) — для крупного: заголовки, цифры, логотип.
|
||
У него стилизованные кириллические «т» и «д», в мелком тексте они читаются плохо. */
|
||
--font-display: 'Montserrat Alternates', 'Segoe UI', system-ui, sans-serif;
|
||
--font: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
|
||
--ease: cubic-bezier(.22, .8, .24, 1);
|
||
/* совместимость с классами, которые использует код разделов */
|
||
--accent: var(--text);
|
||
--accent-dark: #1f2426;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
/* hidden должен побеждать display: grid/flex у бейджей, подсказок и выпадающих окон */
|
||
[hidden] { display: none !important; }
|
||
html { -webkit-text-size-adjust: 100%; }
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
font: 400 14px/1.5 var(--font);
|
||
color: var(--text);
|
||
background:
|
||
radial-gradient(1200px 900px at 100% 0%, rgba(239, 207, 210, .95), transparent 62%),
|
||
radial-gradient(900px 700px at 105% 100%, rgba(240, 214, 216, .7), transparent 60%),
|
||
linear-gradient(115deg, #f9f9f8 0%, #f1f1f1 38%, #f1e6e6 70%, #efd3d5 100%);
|
||
background-attachment: fixed;
|
||
}
|
||
button, input, select, textarea { font: inherit; color: inherit; }
|
||
a { color: inherit; }
|
||
:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
|
||
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
||
|
||
/* ---------- вход ---------- */
|
||
#login {
|
||
max-width: 380px; margin: 12vh auto 0; padding: 34px 32px 28px;
|
||
background: var(--card); border-radius: 30px; box-shadow: var(--shadow);
|
||
}
|
||
#login h2 { margin: 18px 0 20px; font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: -0.03em; }
|
||
#login label { display: block; margin-bottom: 14px; }
|
||
#login span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
|
||
.err { color: var(--danger); margin-top: 10px; min-height: 20px; font-size: 13px; }
|
||
|
||
/* ---------- каркас ---------- */
|
||
#app { display: flex; min-height: 100vh; padding: 18px 22px 18px 16px; gap: 22px; }
|
||
.shell { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
||
|
||
/* органическая лента навигации: белая форма с плавными «перетяжками» по контуру */
|
||
.side {
|
||
position: sticky; top: 18px; align-self: flex-start;
|
||
/* Keep tooltip descendants above the adjacent page's stacking contexts. */
|
||
z-index: 50;
|
||
width: 76px; height: calc(100vh - 36px); min-height: 560px; flex-shrink: 0;
|
||
display: flex; flex-direction: column; align-items: center;
|
||
padding: 22px 0 18px;
|
||
filter: drop-shadow(0 12px 28px rgba(51, 57, 59, 0.06));
|
||
}
|
||
.side__shape { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
|
||
.side__logo {
|
||
font-family: var(--font-display);
|
||
display: flex; flex-direction: column; align-items: center; line-height: .92;
|
||
font-weight: 600; font-size: 17px; letter-spacing: -0.04em; text-decoration: none;
|
||
}
|
||
.side__logo b { color: var(--logo-blue); font-weight: 600; }
|
||
.side__logo span { color: var(--text); font-size: 13px; font-weight: 500; letter-spacing: -0.02em; }
|
||
.side__nav { display: flex; flex-direction: column; gap: 14px; margin-top: 78px; }
|
||
.side__foot { margin-top: auto; padding-top: 60px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
|
||
.side__btn {
|
||
position: relative; width: 46px; height: 46px; border: 0; border-radius: 16px;
|
||
display: grid; place-items: center; background: transparent; color: #7e8481; cursor: pointer;
|
||
transition: background-color .25s var(--ease), color .25s var(--ease);
|
||
}
|
||
.side__btn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
|
||
.side__btn:hover { color: var(--text); background: #f3f5f5; }
|
||
.side__btn[aria-current="page"] { background: var(--sage); color: var(--text); }
|
||
.side__badge {
|
||
position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px;
|
||
border-radius: 8px; background: var(--rose); color: #fff; font-size: 9px; font-weight: 600;
|
||
display: grid; place-items: center; line-height: 1;
|
||
}
|
||
.side__btn .tip {
|
||
position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%);
|
||
padding: 7px 12px; border-radius: 12px; background: var(--card); color: var(--text);
|
||
font-size: 12px; white-space: nowrap; box-shadow: var(--shadow-lift);
|
||
opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease); z-index: 30;
|
||
}
|
||
.side__btn:hover .tip, .side__btn:focus-visible .tip { opacity: 1; transform: translate(0, -50%); }
|
||
.switch {
|
||
position: relative; width: 46px; height: 26px; border: 0; border-radius: 13px; padding: 0;
|
||
background: #e3e6e5; cursor: pointer; transition: background-color .25s;
|
||
}
|
||
.switch::after {
|
||
content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
|
||
background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: transform .25s var(--ease);
|
||
}
|
||
.switch[aria-checked="true"] { background: var(--blue-deep); }
|
||
.switch[aria-checked="true"]::after { transform: translateX(20px); }
|
||
.switch .tip { left: calc(100% + 12px); }
|
||
.switch:hover .tip, .switch:focus-visible .tip { opacity: 1; transform: translate(0, -50%); }
|
||
.switch .tip {
|
||
position: absolute; top: 50%; transform: translate(-4px, -50%); padding: 7px 12px; border-radius: 12px;
|
||
background: var(--card); color: var(--text); font-size: 12px; white-space: nowrap; box-shadow: var(--shadow-lift);
|
||
opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease); z-index: 30;
|
||
}
|
||
|
||
/* ---------- верхняя панель ---------- */
|
||
.top { display: flex; align-items: center; gap: 12px; min-height: 58px; padding-left: 4px; position: relative; z-index: 20; }
|
||
.search { position: relative; width: min(330px, 40vw); }
|
||
.search__shape { display: flex; align-items: center; }
|
||
.search input {
|
||
flex: 1; height: 42px; border: 0; border-radius: 21px 0 0 21px; padding: 0 18px;
|
||
background: var(--card); font-size: 12px; outline: none; min-width: 0;
|
||
}
|
||
.search input::placeholder { color: var(--muted); }
|
||
/* «перетяжка» между полем и кругом с лупой, как у капсулы поиска в референсе */
|
||
.search__neck { width: 22px; height: 42px; flex-shrink: 0; display: block; }
|
||
.search__btn {
|
||
width: 46px; height: 46px; margin-left: -4px; border-radius: 50%; border: 0; cursor: pointer;
|
||
background: var(--card); display: grid; place-items: center; flex-shrink: 0;
|
||
}
|
||
.search__btn span { width: 34px; height: 34px; border-radius: 50%; background: var(--sage); display: grid; place-items: center; }
|
||
.search__btn svg, .round svg { width: 17px; height: 17px; stroke: var(--text); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
|
||
.search__results {
|
||
position: absolute; left: 0; top: calc(100% + 8px); width: min(460px, 86vw); max-height: 60vh; overflow: auto;
|
||
background: var(--card); border-radius: 20px; box-shadow: var(--shadow-lift); padding: 8px;
|
||
}
|
||
.search__results button {
|
||
display: flex; width: 100%; gap: 10px; align-items: baseline; text-align: left;
|
||
border: 0; background: none; padding: 9px 12px; border-radius: 12px; cursor: pointer;
|
||
}
|
||
.search__results button:hover, .search__results button:focus-visible { background: var(--field); }
|
||
.search__results small { color: var(--muted); font-size: 11px; margin-left: auto; white-space: nowrap; }
|
||
.search__empty { padding: 12px; color: var(--muted); font-size: 12px; }
|
||
.top__spacer { flex: 1; }
|
||
.round {
|
||
position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
|
||
background: var(--card); display: grid; place-items: center; transition: box-shadow .25s, transform .25s var(--ease);
|
||
}
|
||
.round:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
|
||
.round__dot { position: absolute; top: 10px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 2px #fff; }
|
||
.who { display: flex; align-items: center; gap: 12px; margin-left: 18px; }
|
||
.who__avatar {
|
||
width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
|
||
background: linear-gradient(135deg, #dcebf5, #f4d9de); color: var(--text); font-weight: 500; font-size: 14px;
|
||
box-shadow: 0 0 0 3px #fff;
|
||
}
|
||
.who__name { font-weight: 500; font-size: 14px; line-height: 1.2; }
|
||
.who__meta { color: var(--muted); font-size: 11px; margin-top: 3px; display: flex; gap: 10px; }
|
||
.popover {
|
||
position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-height: 70vh; overflow: auto;
|
||
background: var(--card); border-radius: 22px; box-shadow: var(--shadow-lift); padding: 16px; z-index: 40;
|
||
}
|
||
.popover h4 { margin: 2px 4px 10px; font-weight: 500; font-size: 13px; }
|
||
.popover__item {
|
||
display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px; border: 0; background: none;
|
||
border-radius: 14px; text-align: left; cursor: pointer;
|
||
}
|
||
.popover__item:hover { background: var(--field); }
|
||
.popover__item b { font-family: var(--font-display); font-weight: 500; font-size: 18px; min-width: 32px; letter-spacing: -0.02em; }
|
||
.popover__item span { font-size: 12px; color: var(--text); }
|
||
.popover__item small { display: block; color: var(--muted); font-size: 11px; }
|
||
.popover__empty { color: var(--muted); font-size: 12px; padding: 8px 4px; }
|
||
|
||
/* ---------- переключатель подразделов ---------- */
|
||
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; padding: 5px; width: fit-content; max-width: 100%;
|
||
background: rgba(255, 255, 255, .6); border-radius: 18px; backdrop-filter: blur(6px); }
|
||
.subtabs:empty { display: none; }
|
||
.subtabs button { border: 0; background: none; padding: 8px 16px; border-radius: 14px; cursor: pointer; color: var(--muted); font-size: 13px; }
|
||
.subtabs button:hover { color: var(--text); }
|
||
.subtabs button[aria-current="page"] { background: linear-gradient(100deg, #f08a3c, #f6a45e); color: #fff; box-shadow: 0 6px 16px rgba(240, 138, 60, .28); }
|
||
.page-title { margin: 10px 0 4px; font-family: var(--font-display); font-weight: 500; font-size: 40px; letter-spacing: -0.04em; line-height: 1.05; }
|
||
main { flex: 1; min-width: 0; }
|
||
|
||
/* ---------- карточки, таблицы, формы (все разделы) ---------- */
|
||
.card {
|
||
background: var(--card); border-radius: var(--r-card); padding: 22px 24px; margin-bottom: 18px;
|
||
box-shadow: var(--shadow); border: 0;
|
||
}
|
||
table { width: 100%; border-collapse: collapse; }
|
||
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
|
||
th { white-space: nowrap; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; text-transform: none; }
|
||
tr:last-child td { border-bottom: 0; }
|
||
tbody tr { transition: background-color .2s; }
|
||
tbody tr:hover { background: #fafaf8; }
|
||
input, select, textarea {
|
||
padding: 9px 13px; border: 1px solid #ebebe7; border-radius: var(--r-field); background: #fff; width: 100%;
|
||
transition: border-color .2s, box-shadow .2s;
|
||
}
|
||
input:focus, select:focus, textarea:focus { outline: none; border-color: #d3d7d5; box-shadow: 0 0 0 4px rgba(141, 203, 233, .22); }
|
||
/* Native controls retain keyboard/form behaviour; only their presentation changes. */
|
||
input[type=checkbox], .rp-source-opt input[type=radio] {
|
||
appearance: none; width: 20px; min-width: 20px; height: 20px; flex: 0 0 20px;
|
||
padding: 0; margin: 0; border: 1.5px solid #c7d3df; border-radius: 6px;
|
||
background: #fff center / 14px 14px no-repeat; vertical-align: middle;
|
||
cursor: pointer; transition: background-color .18s, border-color .18s, box-shadow .18s;
|
||
}
|
||
.rp-source-opt input[type=radio] { border-radius: 50%; }
|
||
input[type=checkbox]:checked, .rp-source-opt input[type=radio]:checked {
|
||
border-color: #4389e9; background-color: #4389e9;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8 3 3 6-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||
}
|
||
input[type=checkbox]:indeterminate {
|
||
border-color: #4389e9; background-color: #4389e9;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
|
||
}
|
||
input[type=checkbox]:not(:disabled):hover, .rp-source-opt input[type=radio]:not(:disabled):hover { border-color: #4389e9; }
|
||
input[type=checkbox]:focus-visible, .rp-source-opt input[type=radio]:focus-visible {
|
||
outline: 2px solid #4389e9; outline-offset: 3px; box-shadow: 0 0 0 4px #e9f2ff;
|
||
}
|
||
input[type=checkbox]:disabled, .rp-source-opt input[type=radio]:disabled { opacity: .45; cursor: not-allowed; }
|
||
@media (forced-colors: active) {
|
||
input[type=checkbox], .rp-source-opt input[type=radio] { appearance: auto; background: none; accent-color: auto; }
|
||
}
|
||
|
||
button.btn {
|
||
background: var(--text); color: #fff; border: 0; padding: 9px 18px; border-radius: 999px; cursor: pointer;
|
||
font-size: 13px; transition: background-color .2s, transform .2s var(--ease), box-shadow .2s;
|
||
}
|
||
button.btn:hover { background: var(--accent-dark); box-shadow: 0 6px 16px rgba(51, 57, 59, .16); }
|
||
button.btn:active { transform: translateY(1px); }
|
||
button.btn.ghost { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px #e7e8e4; }
|
||
button.btn.ghost:hover { background: var(--field); box-shadow: inset 0 0 0 1px #dcddd9; }
|
||
button.btn.danger { background: #fff; color: var(--danger); box-shadow: inset 0 0 0 1px #f0dfe2; }
|
||
button.btn.danger:hover { background: var(--rose-soft); }
|
||
button.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
|
||
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
|
||
.toolbar input[type=search] { max-width: 320px; }
|
||
.toolbar select { max-width: 280px; }
|
||
.spacer { flex: 1; }
|
||
.muted { color: var(--muted); }
|
||
.right { text-align: right; white-space: nowrap; }
|
||
.pill {
|
||
display: inline-block; white-space: nowrap; font-size: 11px; padding: 3px 10px; border-radius: 999px;
|
||
background: #e6f6ee; color: var(--mint-text);
|
||
}
|
||
.pill.off { background: var(--rose-soft); color: var(--rose-text); }
|
||
.pill.wait { background: #fbf3d9; color: var(--warn); }
|
||
.pill.sky { background: var(--sky-soft); color: var(--sky-text); }
|
||
.pill.grey { background: #eeefed; color: var(--muted); }
|
||
.dir-row td { background: #fafaf7; font-weight: 500; }
|
||
.note { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
|
||
.warn { color: var(--warn); font-size: 12px; }
|
||
h3.sub { font-weight: 500; font-size: 15px; margin: 2px 0 12px; }
|
||
.pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 14px; }
|
||
.num { width: 110px; } .sortnum { width: 70px; }
|
||
.toast {
|
||
position: fixed; bottom: 22px; right: 22px; background: var(--text); color: #fff; padding: 12px 18px;
|
||
border-radius: 16px; opacity: 0; transition: .25s; pointer-events: none; z-index: 100; font-size: 13px;
|
||
}
|
||
.toast.show { opacity: 1; }
|
||
.toast.bad { background: var(--danger); }
|
||
|
||
dialog { border: 0; border-radius: 28px; padding: 0; max-width: 580px; width: 92%; box-shadow: 0 30px 80px rgba(51, 57, 59, .18); color: var(--text); }
|
||
dialog.wide { max-width: 940px; }
|
||
dialog::backdrop { background: rgba(240, 230, 231, .55); backdrop-filter: blur(6px); }
|
||
.dlg-head { padding: 22px 26px 8px; font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: -0.02em; }
|
||
.dlg-body { padding: 14px 26px; max-height: 70vh; overflow: auto; }
|
||
.dlg-foot { padding: 16px 26px 22px; display: flex; gap: 10px; justify-content: flex-end; }
|
||
.field { margin-bottom: 14px; }
|
||
.field span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
|
||
.row2 { display: flex; gap: 12px; } .row2 > * { flex: 1; }
|
||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; max-width: 900px; }
|
||
.form-grid .wide { grid-column: 1 / -1; }
|
||
.img-field { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
||
.img-preview { width: 96px; height: 72px; object-fit: cover; border-radius: 14px; background: var(--field); }
|
||
.img-field input[type=file] { width: auto; flex: 1; }
|
||
.file-link { font-size: 13px; word-break: break-all; }
|
||
.rv-text { white-space: pre-line; max-height: 4.6em; overflow: hidden; }
|
||
.logo-cell img { max-width: 90px; max-height: 40px; object-fit: contain; }
|
||
.doc-photo { width: 44px; height: 52px; object-fit: cover; border-radius: 14px; background: var(--field); display: block; }
|
||
.checklist { border: 1px solid #ebebe7; border-radius: var(--r-field); overflow: hidden; }
|
||
.checklist input[type=search] { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
|
||
.checklist-box { max-height: 340px; overflow: auto; padding: 6px 12px; }
|
||
.checklist-group { font-weight: 500; margin: 12px 0 4px; display: flex; align-items: center; gap: 8px; }
|
||
.checklist label { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0 3px 16px; cursor: pointer; }
|
||
.checklist label input { width: auto; margin-top: 3px; }
|
||
.checklist .count { font-weight: 400; color: var(--muted); font-size: 11px; }
|
||
.rte { border: 1px solid #ebebe7; border-radius: var(--r-field); background: #fff; overflow: hidden; }
|
||
.rte-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); background: #fbfbfa; position: sticky; top: -14px; z-index: 1; }
|
||
.rte-bar button { font-size: 12px; padding: 5px 10px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #ebebe7; cursor: pointer; }
|
||
.rte-bar button:hover { box-shadow: inset 0 0 0 1px var(--text); }
|
||
.rte-bar .sep { width: 1px; background: var(--line); margin: 2px 4px; }
|
||
.rte-area { min-height: 320px; padding: 14px 16px; outline: none; line-height: 1.65; font-family: 'Segoe UI', system-ui, sans-serif; }
|
||
.rte-area:focus { box-shadow: inset 0 0 0 2px rgba(141, 203, 233, .5); }
|
||
.rte-area h2 { font-size: 19px; margin: 18px 0 8px; } .rte-area h3 { font-size: 16px; margin: 14px 0 6px; }
|
||
.rte-area p { margin: 0 0 10px; } .rte-area img { max-width: 100%; height: auto; border-radius: 12px; }
|
||
.rte-area a { color: var(--sky-text); }
|
||
.rte-src { display: block; width: 100%; min-height: 320px; border: 0; border-radius: 0; font: 12px/1.5 ui-monospace, Consolas, monospace; }
|
||
|
||
/* ---------- главный экран ---------- */
|
||
.dash { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 10px 26px; align-items: start; }
|
||
.dash__heart { position: relative; min-height: 640px; }
|
||
.dash__right { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
|
||
|
||
.summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 38px 6px 12px; flex-wrap: wrap; }
|
||
.summary__title {
|
||
margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(46px, 5.4vw, 78px); line-height: .94; letter-spacing: -0.065em;
|
||
}
|
||
.summary__stats { display: flex; gap: clamp(18px, 3vw, 40px); padding-bottom: 14px; }
|
||
.stat { background: none; border: 0; padding: 0; text-align: center; cursor: pointer; }
|
||
.stat b { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.1vw, 30px); letter-spacing: -0.04em; line-height: 1.1; }
|
||
.stat span { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
|
||
.stat:hover b { color: #000; }
|
||
|
||
.heart { position: absolute; inset: 0 0 0 0; }
|
||
.heart__img { position: absolute; left: 4%; top: 7%; width: 88%; max-width: 560px; height: auto; object-fit: contain;
|
||
filter: drop-shadow(0 30px 40px rgba(150, 40, 50, .18)); }
|
||
.heart__missing {
|
||
position: absolute; left: 6%; top: 12%; width: 80%; aspect-ratio: 5 / 6; border-radius: 48% 52% 46% 54% / 40% 42% 58% 60%;
|
||
border: 1.5px dashed #dcc4c8; background: radial-gradient(circle at 45% 40%, rgba(255,255,255,.7), rgba(255,255,255,.15) 70%);
|
||
display: grid; place-items: center; text-align: center; padding: 16%; color: var(--muted); font-size: 12px; line-height: 1.5;
|
||
}
|
||
.heart__missing > div { max-width: 52%; margin: 0 22% 8% 0; }
|
||
.heart__missing b { display: block; color: var(--text); font-weight: 500; font-size: 14px; margin-bottom: 6px; }
|
||
.heart__missing code { font-size: 11px; background: #fff; padding: 1px 6px; border-radius: 6px; }
|
||
.marker {
|
||
position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
|
||
background: #fff; box-shadow: 0 0 0 7px rgba(255, 255, 255, .38), 0 2px 8px rgba(0,0,0,.12); z-index: 2;
|
||
}
|
||
.marker::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); animation: pulse 3.2s var(--ease) infinite; }
|
||
.marker__line { position: absolute; height: 1px; background: rgba(255,255,255,.75); transform-origin: 0 50%; z-index: 1; }
|
||
@keyframes pulse { 0% { transform: scale(.8); opacity: .9; } 70% { transform: scale(1.9); opacity: 0; } 100% { opacity: 0; } }
|
||
.vital {
|
||
position: absolute; z-index: 3; min-width: 124px; padding: 14px 18px 13px; border: 0; cursor: pointer;
|
||
background: rgba(255, 255, 255, .94); border-radius: 22px; box-shadow: var(--shadow); text-align: center;
|
||
transition: transform .3s var(--ease), box-shadow .3s;
|
||
}
|
||
.vital:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
|
||
.vital__label { display: block; color: var(--muted); font-size: 11px; }
|
||
.vital__value { display: block; font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: -0.04em; line-height: 1.25; margin-top: 2px; }
|
||
.vital__unit { display: block; font-size: 11px; color: var(--text); }
|
||
|
||
.trends { padding: 22px 26px 14px; }
|
||
.trends__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
|
||
.trends__head h2 { margin: 0; font-weight: 500; font-size: 13px; }
|
||
.trends__demo { font-size: 11px; color: var(--warn); background: #fbf3d9; border-radius: 999px; padding: 2px 10px; }
|
||
.trends__legend { margin-left: auto; display: flex; gap: 14px; font-size: 11px; color: var(--muted); }
|
||
.trends__legend i { display: inline-block; width: 18px; height: 8px; border-radius: 4px; margin-right: 6px; vertical-align: middle; }
|
||
.chart { position: relative; margin-top: 10px; }
|
||
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
|
||
.chart__line { fill: none; stroke: #8b8f8d; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
|
||
.chart__axis { font-size: 15px; fill: #a9ada9; font-family: var(--font); }
|
||
.chart__frame { fill: none; stroke: #e2e3e0; stroke-width: 1; stroke-dasharray: 3 4; }
|
||
.chart__label { font-size: 10px; fill: var(--muted); font-family: var(--font); }
|
||
.chart__hit { fill: transparent; cursor: crosshair; }
|
||
.chart__dot { fill: #fff; stroke: var(--text); stroke-width: 1.5; }
|
||
.chart__guide { stroke: #d9dad7; stroke-width: 1; stroke-dasharray: 2 3; }
|
||
.tooltip {
|
||
position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); white-space: nowrap;
|
||
background: var(--card); border-radius: 14px; padding: 8px 12px; font-size: 11px; box-shadow: var(--shadow-lift); z-index: 5;
|
||
}
|
||
.tooltip b { display: block; font-weight: 500; font-size: 13px; }
|
||
|
||
.leads-card { padding: 20px 22px 10px; overflow-x: auto; }
|
||
.leads-table th { padding-top: 4px; }
|
||
.leads-table td { font-size: 12.5px; padding: 12px; }
|
||
.leads-table tbody tr { cursor: pointer; }
|
||
.leads-table td small { display: block; font-size: 10px; color: var(--muted); }
|
||
.leads-table .strong { font-weight: 500; }
|
||
.leads-table .soft { color: var(--muted); }
|
||
.card-link { border: 0; background: none; padding: 0; color: var(--muted); font-size: 12px; cursor: pointer; margin-left: auto; }
|
||
.card-link:hover { color: var(--text); }
|
||
.lead-detail dt { color: var(--muted); font-size: 11px; margin-top: 10px; }
|
||
.lead-detail dd { margin: 2px 0 0; }
|
||
.lead-detail { margin: 0 0 14px; }
|
||
|
||
/* ---------- шапка: дата у календаря, подзаголовок раздела ---------- */
|
||
.round--date { width: auto; border-radius: 22px; padding: 0 16px 0 14px; gap: 10px; grid-auto-flow: column; }
|
||
.round--date svg { width: 19px; height: 19px; }
|
||
.cal-date { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
|
||
.cal-date b { font-weight: 500; font-size: 13px; white-space: nowrap; }
|
||
.cal-date small { color: var(--muted); font-size: 11px; }
|
||
.page-sub { margin: 2px 0 18px; color: var(--muted); font-size: 15px; }
|
||
|
||
/* ---------- раздел «Врачи» ---------- */
|
||
.dr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
|
||
.dr-card { padding: 18px 18px 8px; }
|
||
.dr-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
|
||
.dr-search { position: relative; flex: 1 1 280px; max-width: 400px; }
|
||
.dr-search > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; pointer-events: none; }
|
||
.dr-search svg { width: 17px; height: 17px; stroke: var(--muted); fill: none; stroke-width: 1.6; stroke-linecap: round; }
|
||
.dr-search input { height: 44px; padding-left: 40px; border-radius: 14px; }
|
||
#dr-filter { height: 44px; width: auto; min-width: 220px; border-radius: 14px; }
|
||
.dr-count { color: var(--muted); font-size: 14px; }
|
||
.dr-note {
|
||
display: flex; gap: 12px; align-items: center; margin-bottom: 10px; padding: 10px 12px 10px 14px;
|
||
background: #eef5fc; border-radius: 14px; color: #5b6b78; font-size: 12px; line-height: 1.5;
|
||
}
|
||
.dr-note p { margin: 0; flex: 1; }
|
||
.dr-note__icon { display: grid; flex-shrink: 0; }
|
||
.dr-note__icon svg { width: 20px; height: 20px; fill: #5b9cf0; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
|
||
.dr-note__close { border: 0; background: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
|
||
.dr-note__close:hover { background: rgba(255, 255, 255, .8); }
|
||
.dr-note__close svg { width: 16px; height: 16px; stroke: var(--text); fill: none; stroke-width: 1.8; stroke-linecap: round; }
|
||
.dr-scroll { overflow-x: auto; }
|
||
.dr-table { min-width: 860px; }
|
||
.dr-table thead th { background: #f8f9fa; padding-top: 12px; padding-bottom: 12px; font-size: 12px; }
|
||
.dr-table thead th:first-child { border-radius: 12px 0 0 12px; }
|
||
.dr-table thead th:last-child { border-radius: 0 12px 12px 0; }
|
||
.dr-table th button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
|
||
.dr-table th button svg { width: 14px; height: 14px; stroke: var(--muted-2); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
|
||
.dr-table th[aria-sort="ascending"] button, .dr-table th[aria-sort="descending"] button { color: var(--text); }
|
||
.dr-table th[aria-sort="ascending"] svg, .dr-table th[aria-sort="descending"] svg { stroke: var(--text); }
|
||
.dr-table td { padding: 10px; }
|
||
.dr-who { display: flex; gap: 14px; align-items: center; min-width: 240px; }
|
||
.dr-photo { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; object-position: 50% 15%; background: var(--field); flex-shrink: 0; }
|
||
.dr-photo--empty { display: grid; place-items: center; color: var(--muted); font-size: 13px; font-weight: 500; }
|
||
.dr-name { border: 0; background: none; padding: 0; text-align: left; font-weight: 500; font-size: 14px; cursor: pointer; }
|
||
.dr-name:hover { color: #3a7bd5; }
|
||
.dr-pos { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
|
||
.chip { display: inline-block; white-space: nowrap; padding: 6px 12px; border-radius: 10px; background: #f3f4f5; font-size: 12px; }
|
||
.dr-num { font-weight: 500; }
|
||
.dr-branches { font-size: 12px; color: var(--muted); display: inline-block; max-width: 200px; }
|
||
.pill.warn-pill { background: #fdf0e3; color: #d0772b; padding: 5px 12px; }
|
||
.pill.dot { padding: 5px 12px 5px 10px; }
|
||
.pill.dot::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 1px; }
|
||
.dr-actions { white-space: nowrap; text-align: right; }
|
||
.dr-actions > * { vertical-align: middle; }
|
||
.soft-btn {
|
||
display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 12px;
|
||
background: #edf4fd; color: #3a6fb7; font-size: 12.5px; cursor: pointer; transition: background-color .2s;
|
||
}
|
||
.soft-btn:hover { background: #e0ecfb; }
|
||
.soft-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
|
||
.icon-btn {
|
||
width: 38px; height: 38px; margin-left: 6px; border-radius: 50%; border: 1px solid #ebecea; background: #fff; cursor: pointer;
|
||
display: inline-grid; place-items: center; transition: background-color .2s, border-color .2s;
|
||
}
|
||
.icon-btn:hover { background: var(--field); border-color: #dcddd9; }
|
||
.icon-btn svg { width: 16px; height: 16px; stroke: var(--text); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
|
||
.icon-btn svg circle { fill: var(--text); stroke: none; }
|
||
.dr-empty { padding: 28px 12px; text-align: center; }
|
||
.menu { position: absolute; z-index: 60; min-width: 230px; padding: 6px; background: var(--card); border-radius: 16px; box-shadow: var(--shadow-lift); }
|
||
.menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 10px; cursor: pointer; font-size: 13px; }
|
||
.menu button:hover, .menu button:focus-visible { background: var(--field); outline: none; }
|
||
.menu button.danger { color: var(--danger); }
|
||
|
||
.dr-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 18px; }
|
||
.dr-side .card { margin-bottom: 0; }
|
||
.dr-quick { padding: 20px 18px; }
|
||
.dr-quick h2 { margin: 0 0 14px 4px; font-weight: 600; font-size: 16px; }
|
||
.quick {
|
||
display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 16px; margin-top: 10px;
|
||
border: 1px solid #f0f1ef; border-radius: 14px; background: #fff; cursor: pointer; font-size: 14px; text-align: left;
|
||
transition: background-color .2s, box-shadow .2s, transform .2s var(--ease);
|
||
}
|
||
.quick:first-of-type { margin-top: 0; }
|
||
.quick:hover { background: var(--field); }
|
||
.quick svg { width: 20px; height: 20px; stroke: #3a6fb7; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
|
||
.quick.primary { border: 0; color: #fff; background: linear-gradient(100deg, #3f86f2, #6aa8f5); box-shadow: 0 10px 22px rgba(63, 134, 242, .28); }
|
||
.quick.primary:hover { box-shadow: 0 14px 26px rgba(63, 134, 242, .36); transform: translateY(-1px); }
|
||
.quick.primary svg { stroke: #fff; }
|
||
.dr-summary { padding: 20px 18px 18px; }
|
||
.dr-summary__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||
.dr-summary__head span { font-size: 14px; }
|
||
.dr-summary__head b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 32px; letter-spacing: -0.04em; line-height: 1.1; }
|
||
.dr-summary__icon { width: 56px; height: 56px; border-radius: 50%; background: #eaf2fd; display: grid; place-items: center; }
|
||
.dr-summary__icon svg { width: 28px; height: 28px; fill: #5b9cf0; stroke: #5b9cf0; stroke-width: 1; }
|
||
.dr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
||
.mini-stat { border: 0; border-radius: 14px; padding: 10px 10px 8px; text-align: left; cursor: pointer; transition: box-shadow .2s, transform .2s var(--ease); }
|
||
.mini-stat span { display: flex; align-items: center; gap: 5px; font-size: 11px; white-space: nowrap; }
|
||
.mini-stat i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
|
||
.mini-stat b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.03em; margin-top: 4px; color: var(--text); }
|
||
.mini-stat:hover { transform: translateY(-1px); }
|
||
.mini-stat[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px currentColor; }
|
||
.mini-stat.ok { background: #eaf7f0; color: #2f7d5a; } .mini-stat.ok i { background: #3fb27f; }
|
||
.mini-stat.warn { background: #fdf2e6; color: #b76a24; } .mini-stat.warn i { background: #f0913a; }
|
||
.mini-stat.rose { background: #fdeef1; color: #b8566c; } .mini-stat.rose i { background: #e8708a; }
|
||
|
||
.sp-dlg { max-width: 620px; }
|
||
.sp-row { display: flex; align-items: center; gap: 8px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
|
||
.sp-row:last-child { border-bottom: 0; }
|
||
.sp-row > div { flex: 1; min-width: 0; }
|
||
.sp-row b { font-weight: 500; display: block; }
|
||
.sp-row small { color: var(--muted); font-size: 11.5px; }
|
||
.sp-row .icon-btn { margin-left: 0; }
|
||
|
||
@media (max-width: 1280px) {
|
||
.dr-layout { grid-template-columns: minmax(0, 1fr); }
|
||
.dr-side { position: static; display: grid; grid-template-columns: 1fr 1fr; order: -1; }
|
||
}
|
||
@media (max-width: 760px) {
|
||
.dr-side { grid-template-columns: 1fr; }
|
||
.round--date .cal-date { display: none; }
|
||
.round--date { width: 44px; padding: 0; }
|
||
}
|
||
|
||
/* ---------- «Слайды на главной» ---------- */
|
||
.bn-hero {
|
||
position: relative; overflow: hidden; min-height: 260px; margin: 4px 0 -34px; padding: 34px 28px 64px;
|
||
border-radius: 30px 30px 0 0;
|
||
background: linear-gradient(100deg, rgba(246, 248, 252, 1) 0%, rgba(233, 241, 250, .9) 45%, rgba(214, 229, 246, .7) 100%);
|
||
}
|
||
.bn-hero.has-photo { background: url(assets/hall.webp) right 42% / 68% auto no-repeat, #f5f7fa; }
|
||
.bn-hero--services.has-photo { background: url(assets/lobby.webp) right 48% / 68% auto no-repeat, #f5f7fa; }
|
||
/* левая часть остаётся светлой: текст читается поверх фото */
|
||
.bn-hero::before {
|
||
content: ""; position: absolute; inset: 0; pointer-events: none;
|
||
background: linear-gradient(90deg, rgba(245, 247, 250, 1) 0%, rgba(245, 247, 250, 1) 32%, rgba(245, 247, 250, .6) 40%, rgba(245, 247, 250, 0) 50%);
|
||
}
|
||
.bn-hero::after {
|
||
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; pointer-events: none;
|
||
background: linear-gradient(to bottom, rgba(247, 248, 250, 0), rgba(247, 248, 250, .9));
|
||
}
|
||
.bn-hero > * { position: relative; z-index: 1; }
|
||
.bn-hero__text { max-width: 520px; }
|
||
.bn-hero h1 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 3.6vw, 52px); letter-spacing: -0.05em; line-height: 1.02; }
|
||
.bn-hero__sub { margin: 6px 0 14px; font-size: clamp(16px, 1.4vw, 20px); color: #4d5558; }
|
||
.bn-hero__note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
|
||
.bn-add {
|
||
position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 26px 0 22px;
|
||
border: 0; border-radius: 0 0 0 22px; color: #fff; font-size: 14px; cursor: pointer;
|
||
background: linear-gradient(100deg, #3f86f2, #6aa8f5); box-shadow: 0 10px 22px rgba(63, 134, 242, .28);
|
||
transition: box-shadow .2s, filter .2s;
|
||
}
|
||
.bn-add:hover { box-shadow: 0 14px 26px rgba(63, 134, 242, .36); filter: brightness(1.04); }
|
||
.bn-add svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; }
|
||
.bn-card { position: relative; z-index: 2; padding: 18px 18px 10px; }
|
||
.bn-toolbar { display: flex; align-items: center; gap: 12px; margin: 0 4px 12px; flex-wrap: wrap; }
|
||
.bn-toolbar b { font-weight: 500; font-size: 15px; }
|
||
.bn-toolbar span { font-size: 12px; }
|
||
#bn-filter { width: auto; min-width: 220px; height: 42px; border-radius: 14px; }
|
||
.bn-table { min-width: 1000px; }
|
||
.bn-table thead th { font-size: 12px; }
|
||
.bn-table td { padding: 10px 8px; }
|
||
.bn-table tbody tr.dragging { opacity: .45; }
|
||
.bn-table tbody tr.drop td { box-shadow: inset 0 2px 0 var(--blue-deep); }
|
||
.grip { border: 0; background: none; width: 28px; height: 36px; border-radius: 8px; cursor: grab; display: grid; place-items: center; color: var(--muted); }
|
||
.grip:hover { background: var(--field); color: var(--text); }
|
||
.grip svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }
|
||
.bn-thumb { width: 220px; aspect-ratio: 20 / 7; border-radius: 12px; overflow: hidden; background: var(--field); position: relative; }
|
||
.bn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.bn-thumb--made { color: #fff; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; }
|
||
.bn-thumb--made b { font-weight: 600; font-size: 13px; line-height: 1.15; max-width: 62%; }
|
||
.bn-thumb--made small { font-size: 10px; opacity: .85; margin-top: 4px; max-width: 62%; }
|
||
.bn-thumb__doc { position: absolute; right: 0; bottom: 0; width: 40% !important; height: 100% !important; object-fit: cover; object-position: 50% 20%; }
|
||
.bn-title b { font-weight: 500; font-size: 13.5px; display: block; max-width: 220px; }
|
||
.bn-small { font-size: 12.5px; }
|
||
.bn-link { max-width: 170px; word-break: break-all; }
|
||
.bn-dates { white-space: pre-line; }
|
||
.bn-sort { display: inline-grid; place-items: center; min-width: 40px; height: 34px; padding: 0 8px; border-radius: 10px; background: #f3f4f5; font-size: 13px; }
|
||
.pill.bn-pill { padding: 7px 14px; font-size: 12px; }
|
||
.bn-edit {
|
||
display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid #e7e8e4;
|
||
background: #fff; cursor: pointer; font-size: 13px; transition: background-color .2s;
|
||
}
|
||
.bn-edit:hover { background: var(--field); }
|
||
.bn-edit svg { width: 16px; height: 16px; stroke: var(--text); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
|
||
|
||
@media (max-width: 900px) {
|
||
.bn-hero { padding: 26px 20px 60px; }
|
||
.bn-hero::before { background: linear-gradient(90deg, rgba(247, 248, 250, 1) 0%, rgba(247, 248, 250, .9) 55%, rgba(247, 248, 250, .4) 100%); }
|
||
.bn-thumb { width: 170px; }
|
||
}
|
||
@media (max-width: 760px) {
|
||
.bn-add { position: relative; border-radius: 999px; margin-top: 18px; }
|
||
.bn-hero { border-radius: 24px 24px 0 0; }
|
||
}
|
||
|
||
/* ---------- «Услуги»: направления-аккордеон ---------- */
|
||
.hero-subtabs .subtabs { margin: 18px 0 0; background: rgba(255, 255, 255, .75); }
|
||
.bn-hero--services { padding-bottom: 58px; }
|
||
/* общие шапки с фото у разделов с вкладками («Контент сайта», «Отзывы», «Настройки») */
|
||
.bn-hero--group { padding-bottom: 58px; }
|
||
.bn-hero--lobby.has-photo { background: url(assets/lobby.webp) right 48% / 68% auto no-repeat, #f5f7fa; }
|
||
.hero-body > .card:first-child { position: relative; z-index: 2; }
|
||
.sv-card { padding: 18px 18px 14px; }
|
||
.sv-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
|
||
.sv-toolbar select { height: 44px; width: auto; min-width: 190px; border-radius: 14px; }
|
||
.sv-count { color: var(--muted); font-size: 13px; }
|
||
.sv-count u { text-decoration-color: #c9ccc8; text-underline-offset: 3px; color: var(--text); }
|
||
.sv-toolbar .bn-edit svg { width: 17px; height: 17px; }
|
||
.sv-group { border: 1px solid #f0f1ef; border-radius: 20px; margin-bottom: 10px; background: #fcfcfc; transition: box-shadow .2s, background-color .2s; }
|
||
.sv-group.open { background: #fff; box-shadow: 0 8px 22px rgba(51, 57, 59, .05); padding-bottom: 8px; }
|
||
.sv-top { display: flex; align-items: center; gap: 6px; padding-right: 12px; }
|
||
.sv-head { flex: 1; display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 10px; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 20px; min-width: 0; }
|
||
.sv-icon { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0; }
|
||
.sv-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
|
||
.sv-head__text { flex: 1; min-width: 0; }
|
||
.sv-head__text b { display: block; font-weight: 600; font-size: 16px; }
|
||
.sv-head__text small { color: var(--muted); font-size: 12.5px; }
|
||
.sv-chev { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
|
||
.sv-chev svg { width: 18px; height: 18px; stroke: var(--text); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
|
||
.sv-group.open .sv-chev svg { transform: rotate(180deg); }
|
||
.sv-head:hover .sv-chev { background: var(--field); }
|
||
.sv-dir-edit { margin-left: 0; opacity: 0; transition: opacity .2s; }
|
||
.sv-group:hover .sv-dir-edit, .sv-dir-edit:focus-visible { opacity: 1; }
|
||
.sv-table { min-width: 900px; }
|
||
.sv-table thead th { background: #f8f9fa; padding-top: 10px; padding-bottom: 10px; font-size: 12px; }
|
||
.sv-table td { padding: 8px 8px; font-size: 13px; }
|
||
.sv-table .sv-name { font-weight: 500; }
|
||
.sv-path { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.sv-table .bn-edit { height: 36px; }
|
||
.sv-table .icon-btn { width: 36px; height: 36px; }
|
||
.sv-table tbody tr.dragging { opacity: .45; }
|
||
.sv-table tbody tr.drop td { box-shadow: inset 0 2px 0 var(--blue-deep); }
|
||
.sv-table, .sv-group .dr-scroll { margin: 0 8px; width: calc(100% - 16px); }
|
||
|
||
@media (max-width: 760px) {
|
||
.sv-toolbar .dr-search { flex-basis: 100%; max-width: none; }
|
||
.sv-toolbar select { flex: 1 1 40%; min-width: 0; }
|
||
.sv-icon { width: 46px; height: 46px; }
|
||
.sv-dir-edit { opacity: 1; }
|
||
}
|
||
|
||
.legal-row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
|
||
.legal-row:last-child { border-bottom: 0; }
|
||
.legal-row > div { flex: 1; min-width: 0; }
|
||
.legal-row b { display: block; font-weight: 500; }
|
||
.legal-row small { color: var(--muted); font-size: 12px; }
|
||
.legal-row small a { color: var(--sky-text); }
|
||
|
||
/* ---------- «Статистика» ---------- */
|
||
.bn-hero--stats.has-photo { background: url(assets/hall.webp) right 40% / 62% auto no-repeat, #f5f7fa; }
|
||
.bn-hero--stats { padding-bottom: 28px; margin-bottom: 18px; border-radius: 30px; }
|
||
.bn-hero--stats::after { display: none; }
|
||
.st-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
|
||
.st-presets { display: flex; gap: 4px; padding: 5px; background: rgba(255, 255, 255, .8); border-radius: 18px; backdrop-filter: blur(6px); }
|
||
.st-presets button { border: 0; background: none; padding: 9px 16px; border-radius: 14px; cursor: pointer; color: var(--muted); font-size: 13px; }
|
||
.st-presets button:hover { color: var(--text); }
|
||
.st-presets button[aria-pressed="true"] { background: linear-gradient(100deg, #3f86f2, #6aa8f5); color: #fff; box-shadow: 0 6px 16px rgba(63, 134, 242, .28); }
|
||
.st-dates { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 48px; background: rgba(255, 255, 255, .9); border-radius: 16px; }
|
||
.st-dates svg { width: 18px; height: 18px; stroke: var(--text); fill: none; stroke-width: 1.6; stroke-linecap: round; display: block; }
|
||
.st-dates input { border: 0; padding: 4px; width: 132px; background: transparent; }
|
||
#st-branch { width: auto; min-width: 200px; height: 48px; border-radius: 16px; margin-left: auto; background: rgba(255, 255, 255, .92); }
|
||
.st-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
|
||
.kpi { display: flex; gap: 14px; align-items: flex-start; padding: 18px; margin: 0; }
|
||
.kpi__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; }
|
||
.kpi__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
|
||
.kpi__label { display: block; font-size: 13px; }
|
||
.kpi__value { font-family: var(--font-display); font-weight: 500; font-size: 30px; letter-spacing: -0.04em; line-height: 1.2; margin-right: 8px; }
|
||
.kpi__delta { font-size: 12px; color: var(--muted); white-space: nowrap; }
|
||
.kpi__delta.up { color: #2f9a6a; } .kpi__delta.down { color: var(--danger); }
|
||
.kpi small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
|
||
.st-grid2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; }
|
||
.st-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
|
||
.st-card { margin-bottom: 14px; padding: 20px 22px; min-width: 0; }
|
||
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
|
||
.st-head h2 { margin: 0; font-weight: 600; font-size: 16px; }
|
||
.st-head select { width: auto; height: 38px; border-radius: 12px; }
|
||
.st-chart svg { display: block; width: 100%; height: auto; }
|
||
.st-grid { stroke: #eef0f1; stroke-width: 1; }
|
||
.st-axis { font-size: 11px; fill: #a3a8ac; font-family: var(--font); }
|
||
.st-line { fill: none; stroke: #4f8ff0; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
|
||
.st-guide { stroke: #c9d3dd; stroke-dasharray: 3 3; }
|
||
.st-dot { fill: #fff; stroke: #4f8ff0; stroke-width: 2.4; }
|
||
.st-donut { display: flex; align-items: center; gap: 22px; }
|
||
.st-donut svg { width: 170px; height: 170px; flex-shrink: 0; }
|
||
.st-donut__n { font-family: var(--font-display); font-weight: 500; font-size: 26px; fill: var(--text); }
|
||
.st-donut__u { font-size: 11px; fill: var(--muted); }
|
||
.st-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
|
||
.st-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) 44px 36px; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; }
|
||
.st-legend i { width: 11px; height: 11px; border-radius: 50%; }
|
||
.st-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.st-legend em, .st-bar em { font-style: normal; color: var(--muted); text-align: right; font-size: 12.5px; }
|
||
.st-legend b, .st-bar b { font-weight: 500; text-align: right; }
|
||
.st-bar { display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(60px, 1.3fr) 40px 32px; gap: 10px; align-items: center; padding: 8px 0; font-size: 13px; }
|
||
.st-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.st-bar__track { height: 12px; border-radius: 6px; background: #eef1f4; overflow: hidden; }
|
||
.st-bar__track i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #4f8ff0, #8bbaf5); }
|
||
.st-top th { background: #f8f9fa; font-size: 12px; }
|
||
.st-top td { font-size: 13px; padding: 9px 10px; }
|
||
.st-empty { color: var(--muted); font-size: 13px; padding: 24px 0; text-align: center; margin: 0; }
|
||
.st-note { color: var(--muted); font-size: 11.5px; margin: 10px 0 0; line-height: 1.5; }
|
||
.st-footnote { margin: 4px 6px 20px; }
|
||
.st-tip { pointer-events: none; }
|
||
|
||
@media (max-width: 1280px) {
|
||
.st-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||
.st-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
}
|
||
@media (max-width: 1024px) {
|
||
.st-grid2 { grid-template-columns: minmax(0, 1fr); }
|
||
#st-branch { margin-left: 0; }
|
||
}
|
||
@media (max-width: 760px) {
|
||
.st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
||
.kpi { flex-direction: column; gap: 8px; padding: 14px; }
|
||
.st-grid3 { grid-template-columns: minmax(0, 1fr); }
|
||
.st-donut { flex-direction: column; align-items: stretch; }
|
||
.st-donut svg { margin: 0 auto; }
|
||
.st-presets { overflow-x: auto; max-width: 100%; }
|
||
.st-dates input { width: 118px; }
|
||
}
|
||
|
||
/* ---------- «Чек-апы» ---------- */
|
||
.ck-card { padding: 18px 18px 10px; }
|
||
.ck-table { min-width: 860px; }
|
||
.ck-table thead th { background: #f8f9fa; padding-top: 12px; padding-bottom: 12px; font-size: 12px; }
|
||
.ck-table thead th:first-child { border-radius: 12px 0 0 12px; } .ck-table thead th:last-child { border-radius: 0 12px 12px 0; }
|
||
.ck-table td { padding: 8px 10px; font-size: 13.5px; }
|
||
.ck-prog { display: flex; align-items: center; gap: 16px; min-width: 300px; }
|
||
.ck-thumb { width: 112px; height: 62px; border-radius: 12px; object-fit: cover; object-position: 80% 70%; background: var(--field); flex-shrink: 0; display: block; }
|
||
.ck-thumb--empty { display: grid; place-items: center; color: var(--muted); font-size: 11px; }
|
||
.ck-price { font-weight: 500; display: block; }
|
||
.ck-old { font-size: 12px; }
|
||
#ck-sort, #ck-aud { height: 44px; width: auto; min-width: 180px; border-radius: 14px; }
|
||
|
||
/* ---------- «Дашборд врачей»: пастель — голубой, мятный, персиковый, пудровый ---------- */
|
||
#tab-doctors-dash { --dd-ink: #243a5e; --dd-soft: #7d8aa3; --dd-line: #e6ecf5; }
|
||
.dd-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 6px 0 16px; }
|
||
.dd-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 30px; letter-spacing: -0.04em; color: var(--dd-ink); }
|
||
.dd-top [data-subtabs-slot] .subtabs { margin: 0; }
|
||
#dd-spec { width: auto; min-width: 230px; height: 44px; border-radius: 16px; border-color: var(--dd-line); background: rgba(255, 255, 255, .9); }
|
||
.dd-board {
|
||
display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 0; margin-bottom: 18px;
|
||
border-radius: 34px; overflow: hidden; box-shadow: 0 18px 50px rgba(64, 98, 150, .08);
|
||
background: linear-gradient(135deg, #f6f9fe 0%, #eef4fc 55%, #fbf2f2 100%);
|
||
border: 1px solid rgba(255, 255, 255, .9);
|
||
}
|
||
.dd-intro { padding: 34px 34px 30px; border-right: 1px solid var(--dd-line); }
|
||
.dd-intro h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 3.4vw, 50px); letter-spacing: -0.05em; line-height: 1.02; color: var(--dd-ink); }
|
||
.dd-desc { margin: 16px 0 28px; max-width: 420px; color: var(--dd-soft); font-size: 13.5px; line-height: 1.6; }
|
||
.dd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
|
||
.dd-stat { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: var(--dd-ink); }
|
||
.dd-stat__icon { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; box-shadow: 0 8px 18px rgba(64, 98, 150, .08); transition: transform .25s var(--ease); }
|
||
.dd-stat:hover .dd-stat__icon { transform: translateY(-2px); }
|
||
.dd-stat__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
|
||
.dd-stat b { font-family: var(--font-display); font-weight: 500; font-size: 26px; letter-spacing: -0.04em; }
|
||
.dd-stat__of { font-size: 11px; color: var(--dd-soft); margin-left: 4px; }
|
||
.dd-stat__label { display: block; font-size: 12px; color: var(--dd-soft); margin-top: 4px; line-height: 1.35; }
|
||
.dd-overview { padding: 30px 30px 22px; min-width: 0; background: rgba(255, 255, 255, .55); }
|
||
.dd-overview__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
|
||
.dd-overview h2 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.03em; color: var(--dd-ink); }
|
||
.dd-overview #dd-spec { height: 34px; min-width: 0; padding: 4px 30px 4px 12px; font-size: 12px; border-radius: 12px; }
|
||
.dd-total { padding: 10px 16px; border-radius: 18px; background: rgba(255, 255, 255, .85); box-shadow: 0 6px 18px rgba(64, 98, 150, .06); }
|
||
.dd-total b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.03em; color: var(--dd-ink); line-height: 1.15; }
|
||
.dd-total span { font-size: 11.5px; color: var(--dd-soft); }
|
||
.dd-chart { position: relative; margin-top: 8px; }
|
||
.dd-chart svg { display: block; width: 100%; height: auto; }
|
||
.dd-grid { stroke: #e7edf5; stroke-width: 1; }
|
||
.dd-axis { font-size: 10.5px; fill: #a0abbf; font-family: var(--font); }
|
||
.dd-cat { font-size: 11.5px; fill: #3d4f6e; font-family: var(--font); }
|
||
.dd-val { font-size: 11px; fill: #8f9bb2; font-family: var(--font); }
|
||
.dd-guide { stroke: #c4d0e1; stroke-dasharray: 3 3; }
|
||
.dd-hill { transition: opacity .2s; }
|
||
.dd-chart svg:hover .dd-hill { opacity: .55; }
|
||
.dd-chart svg:hover .dd-hill.on { opacity: 1; }
|
||
.dd-tip { transform: translate(-50%, calc(-100% - 10px)); }
|
||
.dd-tip__row { display: block; font-size: 11px; color: var(--muted); }
|
||
.dd-attention { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; margin-top: 6px; }
|
||
.dd-attention > div { display: contents; }
|
||
.dd-attention h3 { margin: 0 6px 0 0; font-size: 13px; font-weight: 600; color: var(--dd-ink); }
|
||
.dd-att { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; width: 100%; text-align: left;
|
||
border: 0; background: rgba(255, 255, 255, .85); border-radius: 18px; padding: 10px 12px; margin-bottom: 0; cursor: pointer;
|
||
box-shadow: 0 6px 16px rgba(64, 98, 150, .06); transition: transform .2s var(--ease), box-shadow .2s; }
|
||
.dd-att:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(64, 98, 150, .1); }
|
||
.dd-att__icon { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: #fdeee2; color: #c9803f; display: grid; place-items: center; }
|
||
.dd-att__icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
|
||
.dd-att b { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--dd-ink); line-height: 1.1; }
|
||
.dd-att span:last-child { font-size: 11.5px; color: var(--dd-soft); line-height: 1.3; }
|
||
.dd-details-card { border-radius: 30px; padding: 26px 28px 18px; }
|
||
.dd-h2 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.03em; color: #243a5e; }
|
||
.dd-row { display: grid; grid-template-columns: minmax(170px, 1.35fr) minmax(120px, 1.2fr) minmax(170px, 1.5fr) 44px 130px; gap: 16px; align-items: center;
|
||
width: 100%; padding: 13px 6px; border: 0; border-bottom: 1px solid #eef2f7; background: none; text-align: left; font-size: 13px; color: #243a5e; }
|
||
button.dd-row { cursor: pointer; border-radius: 12px; }
|
||
button.dd-row:hover { background: #f7f9fd; }
|
||
.dd-row:last-child { border-bottom: 0; }
|
||
.dd-row__label { font-weight: 500; }
|
||
.dd-row__bar { height: 8px; border-radius: 4px; background: #edf2f8; overflow: hidden; }
|
||
.dd-row__bar i { display: block; height: 100%; border-radius: 4px; }
|
||
.dd-row__text { color: #7d8aa3; }
|
||
.dd-row__pct { text-align: right; color: #7d8aa3; font-variant-numeric: tabular-nums; }
|
||
.dd-row__st { justify-self: start; font-size: 11.5px; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
|
||
.dd-row.ok .dd-row__bar i { background: linear-gradient(90deg, #8fd8b8, #6cc59f); }
|
||
.dd-row.ok .dd-row__st { background: #e3f5ec; color: #2f8a62; }
|
||
.dd-row.warn .dd-row__bar i { background: linear-gradient(90deg, #f7c9a0, #f0ad78); }
|
||
.dd-row.warn .dd-row__st { background: #fdeee1; color: #b86f32; }
|
||
.dd-row.empty .dd-row__st { background: #eef2f8; color: #8f9bb2; }
|
||
.dd-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 24px; padding: 12px; border-radius: 26px;
|
||
background: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(64, 98, 150, .06); }
|
||
.dd-act { flex: 1 1 150px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border: 0; border-radius: 16px;
|
||
background: #fff; color: #243a5e; font-size: 13px; cursor: pointer; transition: background-color .2s, transform .2s var(--ease); }
|
||
.dd-act:hover { background: #eef4fc; transform: translateY(-1px); }
|
||
.dd-act svg { width: 18px; height: 18px; stroke: #4a7fc4; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
|
||
|
||
@media (max-width: 1280px) {
|
||
.dd-board { grid-template-columns: minmax(0, 1fr); }
|
||
.dd-intro { border-right: 0; border-bottom: 1px solid var(--dd-line); }
|
||
}
|
||
@media (max-width: 900px) {
|
||
.dd-attention { grid-template-columns: minmax(0, 1fr); }
|
||
.dd-row { grid-template-columns: minmax(0, 1fr) 44px; gap: 6px 12px; }
|
||
.dd-row__bar { grid-column: 1 / -1; grid-row: 2; }
|
||
.dd-row__text { grid-column: 1; grid-row: 3; }
|
||
.dd-row__st { grid-column: 2; grid-row: 3; justify-self: end; }
|
||
}
|
||
@media (max-width: 760px) {
|
||
.dd-intro, .dd-overview { padding: 22px 18px; }
|
||
.dd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
|
||
.dd-board { border-radius: 26px; }
|
||
.dd-details-card { padding: 20px 16px; }
|
||
}
|
||
|
||
/* ---------- «Отчёты» ---------- */
|
||
#tab-reports { --rp-ink: #1f3558; --rp-soft: #7a879d; --rp-line: #e4eaf3; --rp-blue: #3f8df0; }
|
||
.rp-head { position: relative; margin: 8px 0 18px; }
|
||
.rp-head h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 38px; letter-spacing: -0.04em; color: var(--rp-ink); }
|
||
#tab-reports { position: relative; isolation: isolate; }
|
||
/* атмосферные ленты: правый верхний угол, за карточками, не ловят клики */
|
||
.rp-waves { position: absolute; top: -84px; right: -22px; width: min(820px, 64%); height: 420px; z-index: -1; pointer-events: none; }
|
||
#tab-reports > :not(.rp-waves) { position: relative; z-index: 1; }
|
||
.rp-tabs { display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 18px; background: #fff; border-radius: 18px; box-shadow: var(--shadow); }
|
||
.rp-tabs button { border: 0; background: none; padding: 10px 22px; border-radius: 14px; cursor: pointer; font-size: 13.5px; color: var(--rp-ink); }
|
||
.rp-tabs button:hover { background: #f4f7fb; }
|
||
.rp-tabs button[aria-selected="true"] { background: #e3eefc; color: #2f6fd0; }
|
||
/* клиника отчётов: у DANA и «Очевидно» свои звонки, отчёты и дашборд */
|
||
.rp-head:has(.rp-clinic) { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
|
||
.rp-clinic { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border-radius: 14px; box-shadow: var(--shadow); }
|
||
.rp-clinic button { border: 0; background: none; padding: 8px 16px; border-radius: 10px; cursor: pointer; font-size: 13.5px; color: var(--rp-ink); }
|
||
.rp-clinic button:hover { background: #f4f7fb; }
|
||
.rp-clinic button[aria-pressed="true"] { background: #e3eefc; color: #2f6fd0; font-weight: 600; }
|
||
.rp-share { width: min(560px, calc(100vw - 32px)); border: 0; border-radius: 20px; padding: 24px; box-shadow: var(--shadow); color: var(--rp-ink); }
|
||
.rp-share::backdrop { background: rgba(20, 30, 50, .35); }
|
||
.rp-share h2 { margin: 0 0 8px; font-size: 20px; }
|
||
.rp-share__state { font-weight: 600; }
|
||
.rp-share__out { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
|
||
.rp-share__url { flex: 1 1 260px; min-width: 0; padding: 9px 12px; border: 1px solid #d6deea; border-radius: 10px; font: inherit; font-size: 13px; }
|
||
.rp-share__out p { flex-basis: 100%; margin: 0; }
|
||
.rp-share__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
|
||
.rp-grid { display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); gap: 18px; align-items: stretch; margin-bottom: 18px; }
|
||
.rp-grid .card { margin: 0; border-radius: 26px; }
|
||
.rp-upload { display: flex; flex-direction: column; gap: 12px; padding: 22px; align-self: start; }
|
||
.rp-drop { min-height: 230px; border: 1.5px dashed #b9d0f0; border-radius: 20px; background: linear-gradient(180deg, #f8fbff, #f3f7fd);
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px; text-align: center; cursor: pointer;
|
||
color: var(--rp-ink); transition: border-color .2s, background-color .2s; }
|
||
.rp-drop:hover, .rp-drop.over { border-color: var(--rp-blue); background: #eef5ff; }
|
||
.rp-drop__icon svg { width: 44px; height: 44px; stroke: var(--rp-blue); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
|
||
.rp-drop b { font-size: 17px; font-weight: 600; margin-top: 6px; }
|
||
.rp-drop small { color: var(--rp-soft); font-size: 12.5px; }
|
||
.rp-drop__name { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; word-break: break-all; }
|
||
.rp-ok { width: 24px; height: 24px; border-radius: 50%; background: #3fbd82; display: inline-grid; place-items: center; flex-shrink: 0; }
|
||
.rp-ok svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
|
||
.rp-link { align-self: center; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: #2f7be0; cursor: pointer; font-size: 13.5px; padding: 4px 8px; border-radius: 10px; }
|
||
.rp-link:hover { background: #eef5ff; }
|
||
.rp-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
|
||
.rp-partners { display: flex; flex-direction: column; gap: 10px; width: 100%; }
|
||
.rp-partner { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid #e4ecf7; border-radius: 12px; background: #fafcff; }
|
||
.rp-partner__head { display: flex; flex-direction: column; gap: 2px; }
|
||
.rp-partner__head b { font-size: 13.5px; font-weight: 600; }
|
||
.rp-partner__head small { color: var(--rp-soft); font-size: 12px; line-height: 1.4; }
|
||
.rp-partner__files { display: flex; flex-direction: column; gap: 4px; }
|
||
.rp-partner__file { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
|
||
.rp-partner__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.rp-partner__file button { border: 0; background: none; color: var(--rp-soft); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; }
|
||
.rp-partner .rp-link { align-self: flex-start; padding-left: 0; }
|
||
.rp-hint { margin: 0; color: var(--rp-soft); font-size: 12px; line-height: 1.5; text-align: center; }
|
||
.rp-start { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border: 0; border-radius: 18px; cursor: pointer; color: #fff; font-size: 15px;
|
||
background: linear-gradient(95deg, #2f7fe8 0%, #4aa0f3 60%, #8fb9f0 82%, #f2b58e 100%); box-shadow: 0 14px 26px rgba(47, 127, 232, .28); transition: transform .2s var(--ease), box-shadow .2s, opacity .2s; }
|
||
.rp-start:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 18px 32px rgba(47, 127, 232, .34); }
|
||
.rp-start:disabled { opacity: .45; cursor: default; box-shadow: none; }
|
||
.rp-start svg { width: 16px; height: 16px; fill: #fff; }
|
||
.rp-progress { padding: 24px 26px 22px; display: flex; flex-direction: column; gap: 16px;
|
||
background: linear-gradient(135deg, #ffffff 0%, #fbfcff 55%, #fdf5f7 100%); }
|
||
.rp-progress__head { display: flex; justify-content: space-between; gap: 14px; }
|
||
.rp-progress h2 { margin: 0; font-size: 19px; font-weight: 600; color: var(--rp-ink); }
|
||
.rp-progress__head p { margin: 4px 0 0; color: var(--rp-soft); font-size: 13px; }
|
||
.rp-clock { display: inline-flex; align-items: center; gap: 8px; color: var(--rp-soft); font-size: 14px; white-space: nowrap; height: 24px; }
|
||
.rp-clock svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }
|
||
.rp-progress__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; align-items: center; }
|
||
.rp-ring { position: relative; width: 190px; height: 190px; }
|
||
.rp-ring svg { width: 100%; height: 100%; }
|
||
#rp-ring-bar { transition: stroke-dasharray .45s var(--ease); }
|
||
.rp-ring__text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||
.rp-ring__text b { font-family: var(--font-display); font-weight: 600; font-size: 34px; letter-spacing: -0.03em; color: var(--rp-ink); }
|
||
.rp-ring__text span { font-size: 13px; color: var(--rp-soft); }
|
||
.rp-stages { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 1px solid var(--rp-line); display: flex; flex-direction: column; gap: 14px; }
|
||
.rp-stage { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
|
||
.rp-stage b { display: block; font-weight: 500; font-size: 14px; color: var(--rp-ink); }
|
||
.rp-stage small { display: block; font-size: 12px; color: var(--rp-soft); min-height: 1em; }
|
||
.rp-stage time { font-size: 13px; color: var(--rp-soft); font-variant-numeric: tabular-nums; }
|
||
.rp-stage__mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cfd6e0; display: grid; place-items: center; margin-top: 1px; background: #fff; }
|
||
.rp-stage.done .rp-stage__mark { background: #3fbd82; border-color: #3fbd82; }
|
||
.rp-stage.done .rp-stage__mark svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
|
||
.rp-stage.now .rp-stage__mark { border: 5px solid var(--rp-blue); animation: rp-pulse 1.4s ease-in-out infinite; }
|
||
.rp-stage.stop .rp-stage__mark { border-color: var(--rose); }
|
||
.rp-stage.wait b { color: #5d6b82; }
|
||
@keyframes rp-pulse { 50% { box-shadow: 0 0 0 6px rgba(63, 141, 240, .15); } }
|
||
.rp-result { display: flex; flex-direction: column; gap: 12px; }
|
||
.rp-download { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 11px 18px; border-radius: 14px; text-decoration: none;
|
||
background: #e8f6ee; color: #227a52; font-size: 13.5px; }
|
||
.rp-download:hover { background: #dcf1e5; }
|
||
.rp-download svg, .rp-btn-ghost svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
|
||
.rp-btn-ghost { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid #e3e7ee; background: #fff; cursor: pointer; font-size: 13px; color: var(--rp-ink); }
|
||
.rp-btn-ghost:hover { background: #f6f8fb; }
|
||
.rp-sum { font-size: 12.5px; }
|
||
.rp-sum th { font-size: 11.5px; background: #f7f9fc; padding: 8px 10px; }
|
||
.rp-sum td { padding: 7px 10px; }
|
||
.rp-sum__total td { color: var(--rp-soft); }
|
||
.rp-note { margin: 0; font-size: 13px; color: var(--rp-soft); line-height: 1.5; }
|
||
.rp-control { margin: 0; font-size: 12.5px; padding: 8px 12px; border-radius: 12px; background: #f4f6fa; color: var(--rp-soft); }
|
||
.rp-control.ok { background: #e8f6ee; color: #227a52; }
|
||
.rp-control.bad { background: var(--rose-soft); color: var(--rose-text); }
|
||
.rp-sum__total td { font-weight: 500; }
|
||
.rp-info { display: flex; gap: 14px; align-items: center; margin-top: auto; padding: 14px 18px; border-radius: 18px; background: linear-gradient(90deg, #fdeef3, #fbeff6); }
|
||
.rp-info svg { width: 28px; height: 28px; stroke: #7065d8; fill: none; stroke-width: 1.5; stroke-linecap: round; display: block; }
|
||
.rp-info p { margin: 0; font-size: 12.5px; color: #6f6680; line-height: 1.5; }
|
||
.rp-info b { display: block; font-weight: 500; font-size: 13.5px; color: var(--rp-ink); }
|
||
.rp-recent { border-radius: 26px; padding: 20px 22px 12px; }
|
||
.rp-recent__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
|
||
.rp-recent h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--rp-ink); }
|
||
.rp-table { min-width: 760px; }
|
||
.rp-table thead th { background: #f4f7fb; font-size: 12px; padding-top: 11px; padding-bottom: 11px; }
|
||
.rp-table thead th:first-child { border-radius: 12px 0 0 12px; } .rp-table thead th:last-child { border-radius: 0 12px 12px 0; }
|
||
.rp-table td { font-size: 13.5px; padding: 10px 12px; }
|
||
.rp-file { color: var(--rp-soft); }
|
||
.rp-file svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.5; vertical-align: -3px; margin-right: 8px; }
|
||
.rp-table .bn-edit { height: 36px; text-decoration: none; color: var(--rp-ink); }
|
||
.rp-table .bn-edit svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
|
||
.rp-table .icon-btn svg circle { fill: var(--text); }
|
||
|
||
@media (max-width: 1100px) {
|
||
.rp-grid { grid-template-columns: minmax(0, 1fr); }
|
||
}
|
||
@media (max-width: 640px) {
|
||
.rp-progress__body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
|
||
.rp-stages { width: 100%; border-left: 0; padding-left: 0; }
|
||
.rp-waves { width: 100%; top: -70px; right: -12px; opacity: .7; }
|
||
.rp-tabs { display: flex; overflow-x: auto; }
|
||
.rp-tabs button { padding: 10px 14px; white-space: nowrap; }
|
||
.rp-head h1 { font-size: 30px; }
|
||
}
|
||
|
||
/* нижнее меню телефона: 9 разделов и выход должны помещаться в ширину 360 px */
|
||
@media (max-width: 460px) {
|
||
#app .side { left: 6px; right: 6px; padding: 0 6px; }
|
||
#app .side__nav { gap: 0; min-width: 0; }
|
||
#app .side .side__btn { width: 32px; height: 40px; border-radius: 12px; flex-shrink: 1; }
|
||
#app .side .side__btn svg { width: 19px; height: 19px; }
|
||
#app .side__foot { margin-left: 0; }
|
||
}
|
||
|
||
/* ---------- «Звонки АТС» ---------- */
|
||
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
||
.px-card { border-radius: 26px; padding: 22px 24px 16px; }
|
||
.px-card h2 { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: #1f3558; }
|
||
.px-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
|
||
.px-head h2 { margin: 0; }
|
||
.px-bad { color: var(--rose-text) !important; }
|
||
/* карточка АТС */
|
||
.px-ats { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 20px; align-items: center; padding: 20px 24px; }
|
||
.px-ats__icon { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: #e3f6ec; color: #1f9d63; }
|
||
.px-ats__icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
|
||
.px-ats__body h2 { margin: 0 0 6px; font-size: 19px; }
|
||
.px-conn { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; color: #33475f; }
|
||
.px-dot { width: 9px; height: 9px; border-radius: 50%; background: #22b07d; box-shadow: 0 0 0 3px rgba(34, 176, 125, .16); }
|
||
.px-conn.off .px-dot { background: #c9ced6; box-shadow: none; }
|
||
.px-copy { border: 0; background: none; padding: 4px; border-radius: 8px; color: #6f7f94; cursor: pointer; display: grid; }
|
||
.px-copy:hover { background: #eef3fa; color: #1f3558; }
|
||
.px-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
|
||
.px-state { margin: 0; font-size: 12.5px; line-height: 1.55; max-width: 780px; }
|
||
.px-ats #px-check { align-self: start; }
|
||
.px-ats .px-setup { grid-column: 1 / -1; margin: 10px 0 0; }
|
||
.px-setup { background: #f4f8fe; border-radius: 16px; padding: 14px 18px; font-size: 13px; line-height: 1.55; }
|
||
.px-setup p { margin: 0 0 8px; }
|
||
.px-setup pre { margin: 0 0 8px; padding: 10px 14px; background: #fff; border-radius: 12px; font-size: 12.5px; overflow-x: auto; }
|
||
/* загрузка звонков */
|
||
.px-syncbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 22px; font-size: 13px; color: #33475f; }
|
||
.px-note { font-size: 12px; }
|
||
.px-btn { height: 44px; padding: 0 26px; border: 0; border-radius: 14px; color: #fff; font-size: 14px; cursor: pointer;
|
||
background: linear-gradient(100deg, #2f76f0, #4f95f6); box-shadow: 0 8px 18px rgba(47, 118, 240, .25); transition: filter .2s, box-shadow .2s; }
|
||
.px-btn:hover { filter: brightness(1.05); box-shadow: 0 10px 22px rgba(47, 118, 240, .32); }
|
||
.px-btn:disabled { opacity: .55; cursor: default; }
|
||
.px-show { height: 44px; padding: 0 20px; border: 1px solid #e3eaf5; border-radius: 14px; background: #f4f8fe; color: #2f76f0; font-size: 14px; cursor: pointer; }
|
||
.px-show:hover { background: #e9f1fd; }
|
||
.px-period { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||
/* поля периода и календарь */
|
||
.px-range { position: relative; display: flex; align-items: center; gap: 8px; }
|
||
.px-dash { color: #8b98aa; }
|
||
.px-date { display: inline-flex; align-items: center; gap: 10px; height: 44px; min-width: 150px; padding: 0 14px; border: 1px solid #e3e8ef;
|
||
border-radius: 14px; background: #fff; color: #1f3558; font-size: 14px; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
|
||
.px-date:hover, .px-range.open .px-date.active { border-color: #b9d0f4; box-shadow: 0 0 0 3px rgba(63, 134, 242, .1); }
|
||
.px-date.empty span { color: #9aa6b6; }
|
||
.px-date svg { width: 17px; height: 17px; fill: none; stroke: #5b6b80; stroke-width: 1.7; stroke-linecap: round; }
|
||
.dp { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 380px; max-width: calc(100vw - 32px); padding: 18px 18px 14px;
|
||
border-radius: 22px; background: #fff; box-shadow: 0 22px 50px rgba(31, 53, 88, .16), 0 2px 8px rgba(31, 53, 88, .06); }
|
||
.px-syncbar .dp { left: 0; right: auto; }
|
||
.dp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
||
.dp__head b { font-size: 17px; font-weight: 600; color: #1f3558; }
|
||
.dp__nav { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #eef4fd; color: #2f76f0; display: grid; place-items: center; cursor: pointer; }
|
||
.dp__nav:hover { background: #e0ebfb; }
|
||
.dp__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
||
.dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 4px; }
|
||
.dp__wd { display: grid; place-items: center; height: 34px; border-radius: 10px; font-size: 13px; color: #3b4a5e; font-weight: 500; }
|
||
.dp__day { height: 40px; border: 0; border-radius: 12px; background: none; color: #1f3558; font-size: 14.5px; cursor: pointer; transition: background-color .15s, color .15s; }
|
||
.dp__day:hover { background: #eef4fd; }
|
||
/* выходные — серые (Сб, Вс) */
|
||
.dp__wd.dp__we { background: #f0f1f3; color: #6b7280; }
|
||
.dp__day.dp__we { background: #f4f5f7; color: #6b7280; }
|
||
.dp__day.dp__we:hover { background: #e7e9ec; }
|
||
.dp__day.dp__out { color: #b3bcc8; }
|
||
.dp__day.dp__today { box-shadow: inset 0 0 0 1.5px #b9d0f4; }
|
||
.dp__day.dp__in { background: #dfeafc; color: #1f3558; }
|
||
.dp__day.dp__start, .dp__day.dp__end { background: #1565e6; color: #fff; font-weight: 600; box-shadow: 0 6px 14px rgba(21, 101, 230, .28); }
|
||
.dp__day.dp__end:not(.dp__start) { background: #3f86f2; }
|
||
.dp__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
|
||
.dp__link { border: 0; background: none; color: #2f76f0; font-size: 14px; cursor: pointer; padding: 8px 4px; }
|
||
.dp__today-btn { border: 0; border-radius: 999px; padding: 9px 22px; background: #e6effc; color: #2f76f0; font-size: 14px; cursor: pointer; }
|
||
.dp__today-btn:hover { background: #d9e7fb; }
|
||
/* карточки показателей */
|
||
.px-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 4px 0 16px; }
|
||
.px-kpi { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px 16px 8px; border: 1px solid #edf1f6; border-radius: 20px; background: #fff; overflow: hidden; }
|
||
.px-kpi__top { display: flex; align-items: flex-start; gap: 10px; }
|
||
.px-kpi__row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
|
||
.px-kpi__icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--c);
|
||
background: color-mix(in srgb, var(--c) 13%, #fff); }
|
||
.px-kpi__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
|
||
.px-kpi__main { min-width: 0; flex: 1; }
|
||
.px-kpi__value { display: block; font-size: 25px; font-weight: 600; letter-spacing: -.02em; color: #14233a; line-height: 1.15; }
|
||
.px-kpi__label { display: block; font-size: 13px; color: #33475f; margin-top: 2px; }
|
||
.px-kpi__hint { display: block; margin: 10px 0 6px; font-size: 11.5px; color: #6f7f94; line-height: 1.4; min-height: 16px; }
|
||
.px-trend { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: #8b98aa; white-space: nowrap; }
|
||
.px-trend svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
|
||
.px-trend.good { color: #1f9d63; }
|
||
.px-trend.bad { color: #e0485f; }
|
||
.px-kpis:has(+ .px-cmp:not([hidden])) { margin-bottom: 8px; }
|
||
.px-cmp { margin: 0 2px 14px; font-size: 12px; color: #6f7f94; }
|
||
.px-spark { display: block; width: 100%; height: 40px; margin-top: auto; }
|
||
/* таблица каналов */
|
||
.px-table { min-width: 640px; }
|
||
.px-channels { min-width: 900px; }
|
||
.px-table td small { font-size: 11px; }
|
||
.px-lost { color: #e0485f; font-weight: 600; }
|
||
.px-total td { font-weight: 600; background: #f3f6fb; }
|
||
.px-total td:first-child { border-radius: 12px 0 0 12px; }
|
||
.px-total td:last-child { border-radius: 0 12px 12px 0; }
|
||
.px-ch { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--ch-soft);
|
||
color: color-mix(in srgb, var(--ch) 82%, #1f3558); font-weight: 600; font-size: 13px; white-space: nowrap; }
|
||
.px-ch::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ch); }
|
||
.px-menu-cell { position: relative; width: 44px; text-align: right; }
|
||
.px-more { width: 34px; height: 34px; border: 0; border-radius: 10px; background: none; color: #3b4a5e; cursor: pointer; display: inline-grid; place-items: center; }
|
||
.px-more:hover { background: #eef3fa; }
|
||
.px-more svg { width: 20px; height: 20px; fill: currentColor; }
|
||
.px-pop { position: absolute; right: 8px; top: calc(100% - 4px); z-index: 30; min-width: 220px; padding: 6px; border-radius: 14px; background: #fff;
|
||
box-shadow: 0 16px 36px rgba(31, 53, 88, .16); display: flex; flex-direction: column; }
|
||
.px-pop button { border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: #1f3558; cursor: pointer; }
|
||
.px-pop button:hover, .px-pop button:focus-visible { background: #eef4fd; }
|
||
.px-foot { display: flex; align-items: flex-start; gap: 10px; margin: 14px 2px 4px; font-size: 12.5px; color: #6f7f94; line-height: 1.5; }
|
||
.px-foot span { flex-shrink: 0; color: #2f76f0; }
|
||
.px-foot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
|
||
.px-table select { height: 36px; border-radius: 10px; min-width: 180px; }
|
||
.px-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
|
||
.px-grid .card { margin: 0 0 18px; }
|
||
.px-grid .px-head { margin-bottom: 10px; }
|
||
.rp-source-opt { display: grid; gap: 10px; }
|
||
.rp-file-period { margin: 0; padding: 12px 14px; border: 1px solid #dbe9fa; border-radius: 13px; background: #f1f7ff; color: #355e91; font-size: 13px; line-height: 1.5; text-align: center; }
|
||
.rp-file-period[data-state=warning] { border-color: #f1dfbf; background: #fff8ed; color: #8c652d; }
|
||
.rp-pbx-opt {
|
||
--rp-source-color: #4389e9; --rp-source-tint: #eaf3ff;
|
||
--rp-source-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='3' width='8' height='5' rx='1.5'/%3E%3Crect x='2' y='16' width='8' height='5' rx='1.5'/%3E%3Crect x='14' y='16' width='8' height='5' rx='1.5'/%3E%3Cpath d='M12 8v4M6 16v-4h12v4'/%3E%3C/g%3E%3C/svg%3E");
|
||
display: grid; grid-template-columns: 42px minmax(0, 1fr) 20px; align-items: start; gap: 12px;
|
||
padding: 16px; border: 1px solid #e5ebf1; border-radius: 18px; background: #fff;
|
||
cursor: pointer; font-size: 13px; box-shadow: 0 2px 6px rgba(31, 53, 88, .025);
|
||
transition: border-color .18s, background-color .18s, box-shadow .18s;
|
||
}
|
||
.rp-pbx-opt:has(input[value=bitrix]) {
|
||
--rp-source-color: #8973cf; --rp-source-tint: #f0ecfb;
|
||
--rp-source-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20v-2a6 6 0 0 1 12 0v2M16 5a3 3 0 0 1 0 6M18 14a5 5 0 0 1 3 4v2'/%3E%3C/g%3E%3C/svg%3E");
|
||
}
|
||
.rp-pbx-opt:has(input[value=pbx]) {
|
||
--rp-source-color: #4d9c7d; --rp-source-tint: #eaf6ef;
|
||
--rp-source-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 3 3 5-3 2a14 14 0 0 0 6 6l2-3 5 3-1 4c-1 2-6 0-10-4S4 7 4 5l4-2Z' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||
}
|
||
.rp-pbx-opt::before {
|
||
content: ''; grid-column: 1; grid-row: 1; width: 42px; height: 42px; border-radius: 13px;
|
||
background: var(--rp-source-tint) var(--rp-source-icon) center / 23px 23px no-repeat;
|
||
}
|
||
.rp-pbx-opt > span { grid-column: 2; grid-row: 1; min-width: 0; }
|
||
.rp-source-opt .rp-pbx-opt input { grid-column: 3; grid-row: 1; margin-top: 2px; }
|
||
.rp-pbx-opt b { display: block; font-weight: 600; font-size: 14px; color: #24384e; line-height: 1.4; }
|
||
.rp-pbx-opt small { display: block; margin-top: 5px; color: #6f7f90; font-size: 12px; line-height: 1.55; }
|
||
.rp-pbx-opt:hover { border-color: #bfd5ef; background: #fbfdff; }
|
||
.rp-pbx-opt:has(input:checked) { border-color: #83b3ed; background: #f1f7ff; box-shadow: 0 0 0 1px #d7e8fc; }
|
||
.rp-pbx-opt:has(input:focus-visible) { outline: 2px solid #4389e9; outline-offset: 3px; }
|
||
.rp-pbx-opt.px-off, .rp-pbx-opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }
|
||
@media (max-width: 460px) {
|
||
.rp-pbx-opt { padding: 13px; gap: 10px; grid-template-columns: 32px minmax(0, 1fr) 20px; }
|
||
.rp-pbx-opt::before { width: 32px; height: 36px; background-size: 21px 21px; }
|
||
}
|
||
|
||
.rp-pbx-dates { display: flex; align-items: center; gap: 8px; justify-content: center; }
|
||
.rp-pbx-dates input { width: 150px; height: 40px; border-radius: 12px; }
|
||
.card.wk-board { --wk-channel-width: 220px; --wk-metric-width: 205px; margin-top: 12px; padding: 8px; border-radius: 20px; background: #fdfdfc; box-shadow: none; }
|
||
[data-rp-view="weekly"] #wk-status { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 0; padding: 14px 18px; border-radius: 18px; background: #fdfdfc; box-shadow: none; }
|
||
[data-rp-view="weekly"] #wk-status h2 { font-family: var(--font); font-size: 16px; }
|
||
[data-rp-view="weekly"] #wk-status p { max-width: 740px; color: #87919b; font-size: 12px; }
|
||
[data-rp-view="weekly"] #wk-filter { max-width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
|
||
[data-rp-view="weekly"] #wk-filter input { width: 144px; height: 36px; background: #f3f4f4; border-color: transparent; border-radius: 9px; font-size: 13px; }
|
||
.wk-board .dr-scroll { max-height: calc(100vh - 260px); min-height: 280px; overflow: auto; border-radius: 14px; scrollbar-width: thin; scrollbar-color: #d7ddde #f6f6f5; }
|
||
.wk-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: auto; font-family: 'Segoe UI', Arial, sans-serif; }
|
||
.wk-table th, .wk-table td { white-space: nowrap; text-align: right; border: 0; }
|
||
.wk-table tbody tr:hover { background: transparent; }
|
||
.wk-table th { height: 42px; padding: 7px 10px; }
|
||
.wk-table td { height: 32px; padding: 5px 10px; border-radius: 5px; background: linear-gradient(135deg, #f6f6f6, #f2f3f3); color: #263649; font-size: 14px; line-height: 1.2; }
|
||
.wk-table thead th { position: sticky; top: 0; z-index: 8; padding: 7px 10px; background: #f1f2f3; border-radius: 10px; color: #142236; font-size: 14px; font-weight: 600; }
|
||
.wk-table .wk-brand { left: 0; z-index: 10; min-width: calc(var(--wk-channel-width) + var(--wk-metric-width) + 2px); text-align: left; padding: 0 20px 8px; border-radius: 0; background: #fdfdfc; }
|
||
.wk-brand span { display: block; font-size: 24px; font-weight: 400; letter-spacing: -.025em; line-height: 1.1; }
|
||
.wk-brand small { display: block; margin-top: 2px; color: #8b959e; font-size: 13px; font-weight: 400; }
|
||
.wk-table .wk-period { min-width: 110px; text-align: center; }
|
||
.wk-period span { display: block; }
|
||
.wk-table .wk-metric { position: sticky; left: calc(var(--wk-channel-width) + 2px); z-index: 3; width: var(--wk-metric-width); min-width: var(--wk-metric-width); max-width: var(--wk-metric-width); white-space: normal; line-height: 1.25; text-align: left; font-weight: 400; }
|
||
.wk-table .wk-channel { position: sticky; left: 0; z-index: 5; width: var(--wk-channel-width); min-width: var(--wk-channel-width); max-width: var(--wk-channel-width); white-space: normal; vertical-align: middle; text-align: left; padding: 20px; border-radius: 13px; background: linear-gradient(125deg, var(--wk-tint), #fafaf8); color: #17283b; box-shadow: none; }
|
||
.wk-channel--phone { --wk-tint: #eef4f0; --wk-accent: #93bfa7; }
|
||
.wk-channel--pin { --wk-tint: #fbf4eb; --wk-accent: #efb26e; }
|
||
.wk-channel--ya { --wk-tint: #fcf1ed; --wk-accent: #ed6659; }
|
||
.wk-channel--web { --wk-tint: #eff4f1; --wk-accent: #83b8a2; }
|
||
.wk-channel--source { --wk-tint: #f2f4f8; --wk-accent: #6d9de0; }
|
||
.wk-channel__icon { display: grid; width: 48px; height: 48px; margin-bottom: 9px; place-items: center; background: transparent; color: var(--wk-accent); }
|
||
.wk-channel__icon img { display: block; width: 32px; height: 32px; object-fit: contain; }
|
||
.wk-channel__icon svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
|
||
.wk-channel__icon--brand { background: transparent; color: var(--wk-source-color, #637a91); box-shadow: none; }
|
||
.wk-channel__icon--banner svg { width: 32px; height: 32px; }
|
||
.wk-channel__title { display: block; font-size: 18px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
|
||
.wk-channel__hint { display: block; margin-top: 8px; color: #566575; font-size: 13px; line-height: 1.4; }
|
||
.wk-table .wk-value { min-width: 110px; font-variant-numeric: tabular-nums; }
|
||
.wk-table .wk-heat { background: var(--wk-heat); }
|
||
.wk-table .wk-budget { display: block; width: 90px; max-width: 100%; margin-left: auto; height: 22px; border: 1px solid transparent; border-radius: 4px; text-align: right; padding: 0; background: transparent; color: #40546a; font-size: inherit; font-family: inherit; font-variant-numeric: tabular-nums; appearance: textfield; }
|
||
.wk-budget::-webkit-inner-spin-button, .wk-budget::-webkit-outer-spin-button { appearance: none; margin: 0; }
|
||
.wk-budget::placeholder { color: #89949d; text-align: center; opacity: 1; }
|
||
.wk-table .wk-budget:hover, .wk-table .wk-budget:focus { background: #fff; border-color: #d5dfdd; }
|
||
.wk-table .wk-gap td { height: 10px; padding: 0; background: #fdfdfc; }
|
||
.wk-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: 0; background: transparent; color: #9aa6b4; cursor: pointer; font-size: 14px; line-height: 1; padding: 1px; border-radius: 5px; opacity: 0; transition: opacity .15s; }
|
||
.wk-period:hover .wk-del, .wk-del:focus-visible { opacity: 1; }
|
||
.wk-del:hover { background: #fdecea; color: #c0392b; }
|
||
@media (max-width: 760px) {
|
||
.card.wk-board { --wk-channel-width: 112px; --wk-metric-width: 136px; margin: 12px -4px 0; padding: 6px; border-radius: 18px; }
|
||
.wk-board .dr-scroll { max-height: calc(100dvh - 190px); }
|
||
[data-rp-view="weekly"] #wk-filter { width: 100%; }
|
||
[data-rp-view="weekly"] #wk-filter input { flex: 1; min-width: 0; }
|
||
[data-rp-view="weekly"] #wk-filter-reset { flex-basis: 100%; text-align: left; }
|
||
.wk-table .wk-brand { padding: 2px 10px 8px; }
|
||
.wk-brand span { font-size: 20px; }
|
||
.wk-brand small { font-size: 11px; }
|
||
.wk-table .wk-channel { padding: 12px; }
|
||
.wk-table td, .wk-table thead th { font-size: 12px; }
|
||
.wk-channel__icon { width: 38px; height: 38px; }
|
||
.wk-channel__icon svg { width: 21px; height: 21px; }
|
||
.wk-channel__icon img { width: 28px; height: 28px; }
|
||
.wk-channel__title { font-size: 13px; }
|
||
.wk-channel__hint { font-size: 11px; }
|
||
.wk-table .wk-period, .wk-table .wk-value { min-width: 96px; }
|
||
.wk-table .wk-budget { width: 76px; }
|
||
.wk-del { opacity: 1; font-size: 12px; }
|
||
}
|
||
@media (max-width: 1400px) { .px-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
||
@media (max-width: 1100px) { .px-grid { grid-template-columns: 1fr; } }
|
||
@media (max-width: 760px) {
|
||
.px-ats { grid-template-columns: auto 1fr; }
|
||
.px-ats #px-check { grid-column: 1 / -1; justify-self: start; }
|
||
.px-ats__icon { width: 56px; height: 56px; border-radius: 18px; }
|
||
.px-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
||
.px-kpi { padding: 12px 12px 6px; }
|
||
.px-kpi__icon { width: 38px; height: 38px; }
|
||
.px-kpi__value { font-size: 21px; }
|
||
.px-kpi__top { flex-wrap: wrap; }
|
||
.px-range { flex-wrap: nowrap; width: 100%; }
|
||
.px-date { min-width: 0; flex: 1; padding: 0 10px; gap: 6px; font-size: 13px; }
|
||
.px-period { width: 100%; }
|
||
.px-show, .px-btn { width: 100%; }
|
||
.dp, .px-syncbar .dp { left: 0; right: 0; width: auto; max-width: none; padding: 14px 12px 10px; }
|
||
.dp__day { height: 38px; }
|
||
}
|
||
|
||
/* ---------- плавное появление ---------- */
|
||
.reveal { opacity: 0; transform: translateY(10px); animation: reveal .7s var(--ease) forwards; }
|
||
@keyframes reveal { to { opacity: 1; transform: none; } }
|
||
.chart__line.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.4s var(--ease) .2s forwards; }
|
||
@keyframes draw { to { stroke-dashoffset: 0; } }
|
||
|
||
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
|
||
html[data-motion="off"] .reveal { opacity: 1; transform: none; }
|
||
html[data-motion="off"] .chart__line.draw { stroke-dashoffset: 0; }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after { animation: none !important; transition: none !important; }
|
||
.reveal { opacity: 1; transform: none; }
|
||
.chart__line.draw { stroke-dashoffset: 0; }
|
||
}
|
||
|
||
/* ---------- адаптивность ---------- */
|
||
@media (max-width: 1180px) {
|
||
#app { padding: 14px 16px 14px 12px; gap: 16px; }
|
||
.dash { gap: 10px 18px; }
|
||
.dash__heart { min-height: 560px; }
|
||
.summary { padding-top: 22px; }
|
||
.summary__stats { gap: 18px; }
|
||
.who__meta { display: none; }
|
||
.vital { min-width: 110px; padding: 11px 14px; }
|
||
.vital__value { font-size: 21px; }
|
||
/* «Врач или услуга» — второстепенная колонка: на планшете уступает место остальным */
|
||
.leads-table th:nth-child(5), .leads-table td:nth-child(5) { display: none; }
|
||
.leads-table td, .leads-table th { padding-left: 8px; padding-right: 8px; }
|
||
}
|
||
/* одна колонка — только на узких экранах: на планшете композиция референса сохраняется */
|
||
@media (max-width: 900px) {
|
||
.dash { grid-template-columns: minmax(0, 1fr); }
|
||
.dash__heart { min-height: 520px; max-width: 620px; width: 100%; margin: 0 auto; order: 2; }
|
||
.dash__right { display: contents; }
|
||
.summary { order: 1; padding-top: 18px; }
|
||
.trends { order: 3; } .leads-card { order: 4; }
|
||
.who__meta { display: none; }
|
||
}
|
||
@media (max-width: 760px) {
|
||
#app { flex-direction: column; padding: 10px 12px 80px; gap: 10px; }
|
||
.side {
|
||
position: fixed; left: 10px; right: 10px; bottom: 10px; top: auto; width: auto; height: 64px; min-height: 0;
|
||
flex-direction: row; padding: 0 12px; z-index: 50; background: #fff; border-radius: 26px; filter: none; box-shadow: var(--shadow-lift);
|
||
}
|
||
.side__shape, .side__logo, .side .switch { display: none; }
|
||
.side__nav { flex-direction: row; margin: 0; gap: 2px; flex: 1; justify-content: space-between; }
|
||
.side__foot { margin: 0 0 0 4px; padding-top: 0; flex-direction: row; }
|
||
.side__btn { width: 40px; height: 40px; }
|
||
.side__btn .tip { display: none; }
|
||
.top { flex-wrap: wrap; }
|
||
.search { width: 100%; order: 3; }
|
||
.who { margin-left: 4px; }
|
||
.summary__title { font-size: 44px; }
|
||
.summary__stats { width: 100%; justify-content: space-between; }
|
||
.dash__heart { min-height: 440px; }
|
||
.vital { min-width: 104px; padding: 10px 12px; }
|
||
.vital__value { font-size: 20px; }
|
||
.card { padding: 18px 16px; border-radius: 22px; }
|
||
.leads-card, .card { overflow-x: auto; }
|
||
.leads-table { min-width: 640px; }
|
||
.trends__legend { margin-left: 0; width: 100%; }
|
||
.page-title { font-size: 28px; }
|
||
}
|