/* ===== Оболонка як у Creatio Freedom UI (геометрія виміряна з udc.creatio.com при 1440×900) ===== */
:root { --c-font: 'Montserrat', sans-serif; --c-ink: #0d2e4e; --c-text: #444; --c-head: #606060; --c-link: #004fd6; --c-primary: #004fd6; --c-line: #e8e8e8; }
html, body { font-family: var(--c-font); }
body { background: #1b1640; }
.shell { position: fixed; inset: 0; overflow: hidden; color: var(--c-text); font: 400 14px/20px var(--c-font); background: #1b1640; }
.shell-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.shell-vignette { position: absolute; inset: 0; background: radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,.32)); pointer-events: none; }
/* верхня панель: 56px, відступи 8 8 8 16 */
.tb { position: absolute; left: 0; right: 0; top: 0; height: 56px; padding: 8px 8px 8px 16px; display: flex; align-items: center; color: #fff; z-index: 30; }
.tb .sp { flex: 1; }
.tb-rel { position: relative; }
.tb-apps { width: 40px; height: 40px; border: 0; border-radius: 8px; background: rgba(255,255,255,.2); display: grid; place-items: center; cursor: pointer; }
.tb-apps:hover { background: rgba(255,255,255,.3); }
.tb-logo { width: 80px; height: 32px; margin-left: 16px; display: flex; align-items: baseline; gap: 3px; font: 700 21px/32px var(--c-font); color: #fff; cursor: pointer; letter-spacing: -.5px; }
.tb-logo span { font-weight: 400; font-size: 19px; opacity: .9; }
/* логотип Inflame (білий, з брендбука): висота 22, без полів SVG */
.tb-logo { width: auto; align-items: center; }
.tb-logo img { display: block; height: 22px; width: auto; }
.tb-round { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); margin-left: 16px; display: grid; place-items: center; cursor: pointer; }
.tb-round:hover { background: rgba(255,255,255,.2); }
/* глобальний пошук у шапці (crt-global-search → .crt-search-container: 204×32, фон .1, радіус 4, іконка 16, поле 500 13px/20px Montserrat) */
.tb-search { margin: 0 12px 0 16px; width: 204px; height: 32px; box-sizing: border-box; border-radius: 4px; background: rgba(255,255,255,.1); display: flex; align-items: center; gap: 8px; padding: 0 10px; color: #fff; }
.tb-search > svg { flex: none; }
.tb-search input { flex: 1; min-width: 0; height: 24px; border: 0; outline: none; background: transparent; color: #fff; caret-color: #fff; font: 500 13px/20px var(--c-font); padding: 2px 0; }
.tb-search input::placeholder { color: rgb(171,178,187); }
.tb-clear { flex: none; width: 16px; height: 16px; margin-left: 1px; visibility: hidden; cursor: pointer; display: flex; }
.tb-clear.on { visibility: visible; }
.tb-status { margin-left: 18px; height: 24px; border-radius: 12px; border: 0; background: rgba(255,255,255,.1); color: #fff; font: 500 12px var(--c-font); padding: 0 10px 0 8px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tb-status .dot { width: 10px; height: 10px; border-radius: 50%; background: #4caf50; }
.tb-status .dot.busy { background: #ffac07; }
.tb-status .caret, .caret { font-size: 10px; opacity: .85; }
.tb-icon { width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; margin-left: 16px; display: grid; place-items: center; cursor: pointer; position: relative; }
.tb-icon:hover { background: rgba(255,255,255,.12); }
.tb-avatar { width: 24px; height: 24px; margin: 0 6px 0 17px; border-radius: 50%; background: #c2185b; color: #fff; font: 500 14px/24px var(--c-font); text-align: center; cursor: pointer; }
.bell-badge { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #ff6534; }
.topdrop { top: 44px !important; min-width: 220px; color: var(--c-text); }
/* панель навігації: 258px */
.nv { position: absolute; left: 0; top: 56px; bottom: 0; width: 258px; color: #fff; display: flex; flex-direction: column; z-index: 20; }
.nv-top { display: flex; align-items: center; gap: 8px; padding: 8px 8px 0 16px; }
.nv-search { flex: 1; height: 32px; border-radius: 8px; background: rgba(255,255,255,.2); display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.nv-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #fff; font: 400 13px var(--c-font); }
.nv-search input::placeholder { color: rgba(255,255,255,.85); }
.nv-collapse { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #fff; font-size: 22px; cursor: pointer; }
.nv-collapse:hover { background: rgba(255,255,255,.12); }
.nv-wp-wrap { padding: 14px 16px 6px; }
.nv-wp { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; background: transparent; color: #fff; font: 500 16px/20px var(--c-font); padding: 0; cursor: pointer; }
.nv-list { flex: 1; overflow: auto; padding-top: 4px; }
.nv-list::-webkit-scrollbar { width: 6px; } .nv-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
.nv-item { height: 64px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; color: #fff; cursor: pointer; border-left: 1px solid transparent; text-decoration: none !important; }
.nv-item:hover { background: rgba(255,255,255,.1); }
.nv-item.active { background: rgba(255,255,255,.2); border-left-color: #fff; }
.nv-ico { width: 32px; height: 32px; border-radius: 4px; display: grid; place-items: center; flex: none; overflow: hidden; }
.nv-ico img { width: 24px; height: 24px; }
.nv-ico b { font: 600 14px var(--c-font); }
.nv-cap { font: 500 16px/20px var(--c-font); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* робоча область: від краю навігації до правого відступу 8px */
.mn { position: absolute; top: 56px; right: 8px; bottom: 0; left: 8px; background: rgba(255,255,255,.9); overflow: auto; z-index: 10; }
.shell.navopen .mn { left: 258px; }
.shell:not(.navopen) .mn { left: 64px; }
/* згорнута навігація (Creatio: рейка 64px) */
.nv.collapsed { width: 64px; }
.nv-rail-top { height: 64px; padding: 16px 0 0 16px; box-sizing: border-box; }
.nv-expand { width: 32px; height: 32px; border: 0; border-radius: 4px; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.nv-expand:hover, .nv-bento:hover { background: rgba(255,255,255,.12); }
.nv-rail-wp { padding: 0 0 0 4px; height: 50px; box-sizing: border-box; }
.nv-bento { width: 60px; height: 32px; border: 0; border-radius: 4px; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.nv.collapsed .nv-list { padding-top: 0; }
.nv.collapsed .nv-item { padding: 0 0 0 15px; gap: 0; }
.nv.collapsed .nv-item.active { border-left-color: #fff; }
.nv.collapsed .nv-list::-webkit-scrollbar { width: 0; }
/* Робочий стіл (SalesEnterpriseDesktop): кореневий grid 1fr + 8×8vw + 1fr з проміжком 8, вміст по вертикалі по центру (align-content), слот із відступом знизу 38px — звірено з Creatio 25.10 */
.mn.desktop { background: transparent; padding: 0; }
.mn.desktop > div, .mn.desktop .home-dash.desk { height: 100%; }
.home-dash.desk [data-n="Main"] { height: 100%; grid-template-columns: minmax(0, 1fr) repeat(8, minmax(35px, 8vw)) minmax(0, 1fr) !important; grid-auto-rows: auto; align-content: center; }
.home-dash.desk [data-n="Main"] > * { padding-bottom: 38px; }
/* сторінка реєстру */
.lp { min-height: 100%; display: flex; flex-direction: column; }
.lp-head { display: flex; align-items: center; gap: 16px; padding: 24px 24px 8px; }
.lp-head h1 { margin: 0; font: 600 24px/32px var(--c-font); color: var(--c-ink); }
.lp-head .sp, .lp-tools .sp { flex: 1; }
.rel { position: relative; }
.cbtn { height: 32px; border-radius: 4px; border: 0; padding: 0 16px; font: 500 14px var(--c-font); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: transparent; color: var(--c-ink); }
.cbtn.primary { background: var(--c-primary); color: #fff; padding: 0 16px 0 12px; }
.cbtn.primary span { font-size: 18px; line-height: 1; }
.cbtn.primary:hover { background: #0042b5; }
.cbtn.flat:hover { background: rgba(13,46,78,.06); }
.cbtn.icon { width: 32px; padding: 0; justify-content: center; font-size: 18px; }
.cbtn .ico { font-size: 15px; }
.lp-tools { display: flex; align-items: center; gap: 4px; padding: 8px 16px 0 18px; min-height: 40px; }
.tool { height: 32px; border: 0; background: transparent; color: var(--c-ink); font: 500 12px/16px var(--c-font); display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.tool:hover { background: rgba(13,46,78,.06); }
.tool.on { color: var(--c-primary); }
.tool.icon { width: 32px; padding: 0; justify-content: center; }
.tool.search { cursor: text; color: #757575; }
.tool.search input { border: 0; outline: none; background: transparent; font: 400 13px var(--c-font); width: 180px; color: var(--c-text); }
.lp-tools .count { font: 500 12px var(--c-font); color: #757575; margin-right: 6px; }
.dropdown.menu { position: absolute; top: 100%; z-index: 90; background: #fff; border-radius: 4px; box-shadow: 0 2px 4px #bababa; padding: 8px 0; max-height: 420px; overflow: auto; } /* як mat-menu Creatio */
.dropdown.menu .opt { padding: 10px 16px; font: 500 13px/20px var(--c-font); color: #181818; cursor: pointer; white-space: nowrap; } /* пункт 40px, 500 13/20 */
.dropdown.menu .sep { height: 1px; background: #dfdfdf; margin: 8px 0; }
.dropdown.menu .opt:hover { background: #f1f4f9; }
.dropdown.menu .opt.sel { color: var(--c-primary); font-weight: 500; }
.dropdown.menu .opt.dis { color: #aaa; pointer-events: none; }
.lp-gwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; } /* crt-data-table: заглушка «немає даних» поза прокручуваним контейнером */
.lp-gwrap .lp-loading { position: absolute; top: 40px; left: 0; }
.lp-grid { flex: 1; overflow: auto; background: #fff; border-radius: 8px; margin: 0; min-height: 0; position: relative; }
.mn > .lp { height: 100%; }
.dt { border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 400 14px/20px var(--c-font); color: var(--c-text); }
.dt th { position: sticky; top: 0; z-index: 2; height: 40px; background: #fff; text-align: left; font: 500 12px/16px var(--c-font); color: var(--c-head); padding: 0 8px; border-bottom: 1px solid var(--c-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; user-select: none; }
.dt th .srt { color: var(--c-ink); font-weight: 600; }
.dt td { height: 40px; padding: 0 8px; font: 500 13px/20px var(--c-font); border-bottom: 1px solid #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt tr:hover td { background: #eff4fb; } /* --crt-data-table-row-background-active-color */
.dt .num { text-align: right; }
.dt .rn { width: 48px; text-align: right; padding: 0 4px 0 0; color: #606060; font: 500 12px/16px var(--c-font); position: sticky; left: 0; background: #fff; z-index: 1; } /* як crt-data-table-row-index: праворуч, відступ 4 */
.dt th.rn { z-index: 3; }
.dt .rn .chk { display: inline-block; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid #606060; border-radius: 4px; vertical-align: middle; }
.dt th.plus { color: var(--c-ink); font-size: 18px; text-align: center; }
.dt .lnk { color: var(--c-link); font: 500 13px var(--c-font); cursor: pointer; }
.dt .lnk.ref { font: 400 14px var(--c-font); }
.dt .stg { display: block; min-width: 0; }
.dt .stg .nm { font: 500 13px/20px var(--c-font); color: #181818; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt .stg .bar { margin-top: 4px; height: 6px; box-sizing: border-box; padding: 2px; border-radius: 50px; }
.dt .stg .bar i { display: block; height: 2px; border-radius: 50px; background-repeat: no-repeat; }
.lp-loading { padding: 10px 24px; color: #757575; font-size: 12px; }
.lp .filters { padding: 0 24px 6px; }
/* ===== Сторінка запису як у Creatio ===== */
.mn .freedom-page { padding: 0; }
.mn .btn { height: 32px; border-radius: 4px; font: 500 14px/16px var(--c-font); color: var(--c-ink); border: 0; background: transparent; padding: 0 16px; gap: 4px; } /* .crt-button .btn-reversible-content { gap: 4px } — для всіх розмірів */
.mn .btn:hover { background: rgba(13,46,78,.06); }
.mn .btn.primary { background: var(--c-primary); color: #fff; }
.mn .btn.primary:hover { background: #0042b5; }
.mn .btn.icon-only { width: 40px; padding: 0; justify-content: center; }
.mn .btn .bi { display: inline-flex; color: var(--c-ink); }
.mn .btn.primary .bi { color: #fff; }
.mn .btn .caret { font-size: 10px; }
.mn .freedom-page [data-n="MainHeader"] .label-h, .mn .freedom-page h1 { font: 600 24px/32px var(--c-font) !important; color: var(--c-ink); }
/* поля */
.mn .field > label { font: 500 12px/16px var(--c-font); color: #444; }
.mn .field input[type=text], .mn .field input[type=number], .mn .field input[type=date], .mn .field input[type=datetime-local], .mn .field input[type=time], .mn .field textarea, .mn .field select, .mn .lk input {
  font: 500 13px/20px var(--c-font); color: #181818; border: 0; border-bottom: 1px solid #e0e0e0; border-radius: 0; height: 32px; padding: 0 4px; background: transparent; }
.mn .field textarea { height: auto; padding: 6px 4px; }
/* як у Creatio (mdc-line-ripple): під значенням — пунктир 1px #dfdfdf, при фокусі — суцільна синя лінія */
.mn .field input[type=text], .mn .field input[type=number], .mn .field textarea, .mn .lk .val { border-bottom: 1px dotted #dfdfdf !important; }
.mn .field input[type=text]:hover, .mn .field textarea:hover, .mn .lk:hover .val { border-bottom-color: #9e9e9e !important; }
.mn .field input:focus, .mn .field textarea:focus, .mn .lk input:focus { border-bottom: 1px solid var(--c-primary) !important; }
.mn .field.vertical > label { color: #606060; }
.mn .field.vertical { gap: 0; padding: 8px 0 8px; min-height: 0; }
.mn .field.vertical > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* горизонтальне поле Creatio: підпис 136px праворуч (12/500 #606060, до 2 рядків), значення з x=146, висота 40 */
.mn .field.auto { grid-template-columns: 136px minmax(0, 1fr); column-gap: 10px; align-items: start; min-height: 39.5px; padding: 15px 0 4.5px; box-sizing: border-box; }
.mn .field.auto > label { color: #606060; margin-top: 2px; margin-bottom: .5px; /* 2 рядки: 54 = 8 + 9 + 32 + 4 + 1, як crt-input */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn .field.auto input[type=text], .mn .field.auto .lk .val, .mn .field.auto .lk input { height: 20px; padding: 0; }
.mn .field.vertical input[type=text], .mn .field.vertical .lk .val, .mn .field.vertical .lk input { height: 20px; padding: 0; }
.mn .field.vertical input[type=checkbox] { width: 16px; height: 16px; margin: 4px 0 0; accent-color: var(--c-primary); }
.mn .field input:focus, .mn .field textarea:focus, .mn .lk input:focus { border-bottom: 2px solid var(--c-primary); background: transparent; }
.mn .field.dirty input, .mn .field.dirty textarea { background: transparent; }
.mn .field input[readonly] { color: #181818; }
.mn .lk .val { border-bottom: 1px solid #e0e0e0; height: 32px; padding: 0 4px; font: 500 13px/20px var(--c-font); color: #181818; }
.mn .lk .val a { color: var(--c-link); font-weight: 500; }
.mn .lk .x { visibility: hidden; font-size: 12px; color: #757575; }
.mn .lk:hover .x, .mn .lk:focus-within .x { visibility: visible; }
.mn .field .req { color: #d32f2f; }
/* індикатор стадій */
.mn .stages { display: flex; gap: 0; padding: 4px 0 8px; overflow: visible; }
/* як у Creatio: поточна стадія і наступна за нею — за шириною тексту (до 34%), решта 50px…28%; сусідні накладаються на 7px */
.mn .stage-wrap { flex: 1 1 0; min-width: 50px; max-width: 28%; position: relative; margin-left: -7px; }
.mn .stage-wrap:first-child { margin-left: 0; }
.mn .stage-wrap.sel, .mn .stage-wrap.after-sel, .mn .stage-wrap.hov { min-width: auto; max-width: 34%; }
.mn .stage-wrap.sel .stage.current { cursor: not-allowed; }
.mn .stage { height: 28px; display: flex; align-items: center; gap: 4px; padding: 0 16px 0 23px; background: #d1d1d1; color: #000; font: 500 12px/16px var(--c-font); cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%); border-radius: 0; }
.mn .stage-wrap:first-child .stage { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); border-radius: 8px 0 0 8px; padding-left: 16px; }
.mn .stage-wrap:last-child .stage { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%); border-radius: 0 8px 8px 0; }
.mn .stage .sn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn .stage.current, .mn .stage.done { color: #fff; }
.mn .stage.done { opacity: 1; }
.mn .stage.lost { background: #d32f2f; color: #fff; }
.mn .stage-menu { left: 0; right: auto; min-width: 220px; top: 30px; }
/* картки і вкладки */
.mn .panel { border: 1px solid rgba(0,0,0,.1); box-shadow: none; border-radius: 8px; }
.mn .tabs .tab { font: 500 14px var(--c-font); text-transform: uppercase; color: var(--c-link); }
.mn .tabs .tab.active { color: var(--c-ink); border-bottom-color: #ff4013; }
.mn .section-title { font: 500 14px/20px var(--c-font); color: var(--c-ink); }
.mn .section-title .chev { background: #ff4013; border-radius: 4px; }
/* віджети-індикатори Freedom UI (full-fill: градієнт 224°, заголовок 14/500, значення 28/600) */
/* індикатор (crt-indicator-widget): заголовок 500 14/18 з відступом 8 зверху/знизу, значення 600 28/36 по центру решти площі (+9px полів);
   full-fill — біла рамка 1px #e6e6e6 навколо градієнта 224°; glassmorphism — rgba(24,24,24,.8), blur 10 */
.mn .widget.fill { border: 1px solid #e6e6e6; background-clip: padding-box; border-radius: 8px; padding: 8px 16px 0 16px; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; }
.mn .widget.fill .t { font: 500 14px/18px var(--c-font); opacity: 1; }
.mn .widget.fill .v { font: 600 28px/36px var(--c-font); margin: 0 0 0 1px; padding: 9px 0; flex: 1; display: flex; align-items: center; }
.mn .widget.glass { background: rgba(24,24,24,.8); border: 0; border-radius: 8px; backdrop-filter: blur(10px); padding: 8px 16px 0 16px; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; color: #fff; }
.mn .widget.glass .t { font: 500 14px/18px var(--c-font); opacity: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mn .widget.glass .v { font: 600 28px/36px var(--c-font); margin: 0 0 0 1px; padding: 9px 0; flex: 1; display: flex; align-items: center; }
.mn .chart-widget.glass { background: rgba(24,24,24,.8); border: 0; backdrop-filter: blur(10px); }
.mn .chart-widget.glass .cw-title { color: #fff !important; }
.mn .widget.fill.fs-small .v { font-size: 20px; line-height: 28px; margin-top: 8px; }
.mn .widget.fill.fs-large .v { font-size: 40px; line-height: 48px; }
.mn .widget.plain { background: #fff; color: var(--c-text); border-radius: 8px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; min-height: 0; box-sizing: border-box; }
.mn .widget.plain .ic { width: 40px; height: 40px; border-radius: 8px; color: #fff; display: grid; place-items: center; flex: none; }
.mn .widget.plain .t { font: 500 12px/16px var(--c-font); color: var(--c-head); }
.mn .widget.plain .v { font: 600 20px/28px var(--c-font); margin: 0; }
/* перемикач панелей картки (crt.ButtonToggleGroup): 24px, 12/500, іконка 16 */
.tgl-group { display: flex; gap: 4px; margin-left: auto; }
.tgl { height: 24px; border: 0; border-radius: 8px; padding: 0 12px; background: transparent; color: var(--c-ink); font: 500 12px/16px var(--c-font); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.tgl:hover { background: rgba(13,46,78,.06); }
.tgl.on { background: rgba(0,79,214,.1); color: var(--c-primary); }
.tgl-ic { display: inline-flex; width: 16px; height: 16px; }
/* crt.ButtonToggleGroup toggleViewMode: dropdown — кнопка 24px (padding 0 12, радіус 4, 500 12/16) і меню crt-menu 232px */
.tgl-dd { position: relative; display: inline-flex; }
.tgl-ddb { height: 24px; border: 0; border-radius: 4px; padding: 0 12px; background: transparent; color: var(--c-ink); font: 500 12px/16px var(--c-font); display: inline-flex; align-items: center; cursor: pointer; }
.tgl-ddb:hover { background: rgba(13,46,78,.06); }
.tgl-ddb .tgl-cap { padding-right: 8px; }
.tgl-ddb .ar { display: inline-flex; width: 16px; height: 16px; }
.tgl-ddm { position: absolute; right: 0; top: 24px; z-index: 50; width: 232px; box-sizing: border-box; padding: 8px 0; background: #fff; border-radius: 4px; box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px rgba(0,0,0,.14), 0 1px 10px rgba(0,0,0,.12); }
.tgl-ddi { position: relative; display: block; width: calc(100% - 18px); margin: 0 9px; height: 40px; border: 0; border-radius: 4px; background: transparent; text-align: left; padding: 8px 16px 8px 40px; font: 500 13px/20px var(--c-font); color: #181818; cursor: pointer; }
.tgl-ddi:hover { background: rgba(13,46,78,.04); }
.tgl-ddi.on { background: #e3ebfa; }
.tgl-ddi .ck { position: absolute; left: 14px; top: 12px; display: inline-flex; color: var(--c-primary); }
.mn .toggle-inline { min-width: 0; padding: 5px 24px; } /* crt-toggle-container-item-content: поля 24 з боків, 5 зверху/знизу */
/* домашня сторінка робочого місця (crt-home-page): фон області .9 білий, шапка 72px, тіло — сітка з полями 8 */
.mn.homepg { padding: 0; }
.mn .hp-head { background: #fff; padding: 24px 24px 16px; }
.mn .hp-title { font: 600 24px/32px var(--c-font); color: #0d2e4e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn .hp-body { padding: 8px 8px 0; }
.mn .toggle-inline.stretch { align-self: stretch; flex: 1 1 auto; }
.mn .toggle-inline.fit { padding-bottom: 10px; } /* fitContent: crt-toggle-container-item.fit-content — ще 5 знизу (SalesHome «Відкриті продажі за етапом»: 571 = 5 + 556 + 10) */
/* теги (crt.TagSelect) */
.tagsel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag-add { height: 18px; border: 0; background: transparent; color: var(--c-ink); font: 500 12px/16px var(--c-font); display: inline-flex; align-items: center; gap: 7px; padding: 0 3px; border-radius: 4px; cursor: pointer; }
.tag-add:hover { background: rgba(13,46,78,.06); }
.tag-chip { height: 20px; border-radius: 4px; padding: 0 8px; font: 500 12px/20px var(--c-font); color: #0d2e4e; cursor: pointer; }
.tag-menu { min-width: 220px; }
.tag-search { padding: 4px 8px 6px; } .tag-search input { width: 100%; height: 28px; border: 1px solid #ddd; border-radius: 4px; padding: 0 8px; font: 400 13px var(--c-font); }
.tag-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; }
/* чип значення довідника з кольором (crt-chip): 20px, 13/500, відступ 8 */
.lk .chip { display: inline-block; height: 20px; padding: 0 8px; border-radius: 16px; font: 500 13px/20px var(--c-font); cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* вузькі поля з labelPosition:auto (бокова панель) — як вертикальні: підпис 12/500 #606060 на y=8, значення 13/500 на y=24, висота 52 */
@container (width <= 320px) {
  .mn .field.auto { grid-template-columns: 1fr; gap: 0; padding: 8px 0 8px; min-height: 0; }
  .mn .field.auto > label { display: block; color: #606060; text-align: left; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mn .field.auto:has(input[type=checkbox]) { min-height: 60px; box-sizing: border-box; }
  .mn .field.auto:has(input[type=checkbox]) > label { white-space: normal; }
  .mn .field.auto input[type=text], .mn .field.auto .lk .val, .mn .field.auto .lk input { height: 20px; padding: 0; }
  .mn .field.auto input[type=checkbox] { width: 16px; height: 16px; margin: 4px 0 0; accent-color: var(--c-primary); justify-self: start; }
}
.mn .field input[type=checkbox] { justify-self: start; }
/* сторінка Freedom UI на всю висоту: заголовок закріплений, MainContainer прокручується (смуга 8px) */
.mn > div:has(> .freedom-page), .mn .freedom-page { height: 100%; display: flex; flex-direction: column; }
.mn .freedom-page > [data-n] { flex: 1 1 0; min-height: 0; }
.mn .freedom-page ::-webkit-scrollbar { width: 8px; height: 8px; }
.mn .freedom-page ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 4px; }
/* вкладки crt.TabPanel: шапка 40px біла з лінією #dfdfdf, вкладки 14/500 великими, відступ 12, підкреслення 2px #ff4013; тіло — біле, 5px 24px */
.mn .tabpanel { flex: 1; min-width: 0; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.mn .tabpanel > .tab-body { flex: 1 1 auto; }
/* розтягнута панель (stretch): тіло вкладки — flex-full-height, розтягнуті контейнер і таблиця заповнюють решту висоти,
   рядки прокручуються всередині crt-data-table-container (шапка закріплена), як у Creatio */
.mn .tabpanel.stretch > .tab-body { display: flex; flex-direction: column; min-height: 0; }
.mn .fgrid-wrap.fg-stretch, .mn div[style*="flex-flow: column"][style*="flex: 1 1 auto"] > .fgrid-wrap:not(.in-grid) { flex: 1 1 auto; align-self: stretch; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
.mn .fgrid-wrap.fg-stretch > .fgrid-scroll, .mn div[style*="flex-flow: column"][style*="flex: 1 1 auto"] > .fgrid-wrap:not(.in-grid) > .fgrid-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 1px; }
/* crt-data-grid { height: 100% }: таблиця в розтягнутому контейнері-колонці (VwSysCspViolation_FormPage) займає решту висоти й прокручується всередині */
.mn .tabpanel > .tabs { flex: none; height: 40px; box-sizing: border-box; background: #fff; border-bottom: 1px solid #dfdfdf; padding: 0 8px; gap: 0; display: flex; align-items: flex-end; overflow-x: auto; }
.mn .tabpanel > .tabs .tab { height: 36px; box-sizing: border-box; margin: 0 12px; padding: 4px 4px 0; display: flex; align-items: center; font: 500 14px/18px var(--c-font); text-transform: uppercase; border-bottom: 2px solid transparent; } /* підпис з y = верх вкладки + 10 (tab-header 16px зверху в mdc-tab__content з padding-top 2), як у Creatio */
.mn .tabpanel > .tabs .tab.active { border-bottom-color: #ff4013; }
.mn .tabpanel > .tab-body { background: #fff; padding: 5px 24px 10px; } /* + crt-toggle-container-item padding-bottom 5 */
.mn .label-h { margin: 0; }
.mn .btn.icon-only, .mn .btn.icon-only.sz-large { width: 32px; height: 32px; padding: 0; }
.mn .btn.icon-only.sz-medium { width: 28px; height: 24px; padding: 0; } /* button-size-medium: 28×24 (padding 0 6) */
.mn .stages { padding-bottom: 0; }
/* індикатор (як analytics-widget-container Creatio): заголовок 14/18 з y=9 (до 2 рядків), значення 28/36 через 9px, низ 8px — 80px + рамка */
.mn .widget.fill .t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* багаторядкові поля ростуть за вмістом (у Creatio — 1 рядок, висота поля 40) */
.mn .field textarea { field-sizing: content; min-height: 20px; height: auto; padding: 0; resize: none; line-height: 20px; border-top: 0; border-left: 0; border-right: 0; box-sizing: content-box; margin-bottom: -1px; }
/* crt.ExpansionPanel: шапка 32px з y=8, перемикач 16×16 #ff4013 r4, заголовок 14/500 #0D2E4E з x=32, тіло з y=48 */
.mn .xpanel { margin: 0; padding-top: 8px; }
.mn .xp-head { height: 32px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px; cursor: pointer; background: #fff; border-radius: 8px; }
.mn .xp-tg { width: 16px; height: 16px; border-radius: 4px; background: #8e8e8e; color: #fff; display: grid; place-items: center; }
.mn .xp-tg > svg { transform: rotate(180deg); border-radius: 2px; }
.mn .xp-tg:hover { background: #757575; }
.mn .xp-tg.open { background: #ff4013; }
.mn .xp-tg.open > svg { transform: none; }
.mn .xp-tg.open:hover { background: #d42d00; }
.mn .xp-title { font: 500 14px/20px var(--c-font); color: #0d2e4e; }
/* компактний профіль контакту/контрагента */
.mn .cprofile { display: flex; gap: 10px; align-items: flex-start; height: 80px; }
.mn .cp-photo { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; flex: none; box-sizing: border-box; border: 1px solid #dfdfdf; }
.mn .cp-photo.ph { background: #e3ebfa; border: 1px solid #dfdfdf; display: grid; place-items: center; }
.mn .cp-name { font: 500 16px/20px var(--c-font); color: #0d2e4e; margin-top: 2px; }
.mn .cp-name a { color: #0d2e4e; }
.mn .cp-name a:hover { text-decoration: underline; }

.mn .field.vertical:has(input[type=checkbox]) { min-height: 60px; box-sizing: border-box; }
.mn .field.vertical:has(input[type=checkbox]) > label { white-space: normal; }
.mn .field.vertical input[type=checkbox] { justify-self: start; }
/* інструменти в шапці розгорнутої панелі (+, оновити, ⋮, пошук) */
.mn .xp-tools { display: flex; align-items: center; gap: 0; margin-left: -11px; } /* панель інструментів одразу за заголовком, перша кнопка через 5px (як у Creatio) */
.mn .xp-tools .btn.icon-only { width: 28px; height: 24px; }
.mn .xp-tools .btn .bi svg { width: 16px; height: 16px; }
.mn .xp-head .xp-tg, .mn .xp-head .xp-title { cursor: pointer; }
.mn .sfilter { display: flex; align-items: center; gap: 4px; }
.mn .xp-tools .sfilter > .btn.icon-only { width: 24px; } /* crt-search-filter minify-search — 24px */
.mn .sfilter.sf-full { position: relative; display: flex; align-items: center; gap: 0; width: 204px; height: 32px; padding-bottom: 1px; margin: 0 3px; box-sizing: border-box; } /* crt-search-input-container 31px */
.mn .sf-full .sf-ic { display: inline-flex; width: 16px; height: 16px; margin-right: 4px; color: #0d2e4e; }
.mn .sf-full .sf-min { display: flex; align-items: center; width: 180px; height: 24px; margin-left: 4px; }
.mn .sf-full .sf-in { flex: 1 1 auto; min-width: 0; height: 24px; box-sizing: border-box; padding: 2px 0; border: 0; outline: none; background: transparent; font: 500 13px/20px var(--c-font); color: #181818; }
.mn .sf-full .sf-in::placeholder { color: #606060; }
.mn .sf-full .sf-x { display: inline-flex; flex: none; width: 16px; height: 16px; margin-right: 4px; color: #0d2e4e; cursor: pointer; }
.mn .sf-full .sf-tt { flex: none; width: 20px; height: 20px; margin-right: 4px; }
.mn .sf-full .sf-cg { flex: none; width: 16px; height: 16px; margin-right: 1.5px; }
.mn .sf-full .sf-ul { position: absolute; left: 0; right: 0; top: 29px; border-bottom: 1px solid #dfdfdf; visibility: hidden; }
.mn .sf-full:focus-within .sf-ul { visibility: visible; }
.mn .sf-input { height: 24px; border: 0; border-bottom: 1px solid #9e9e9e; outline: none; font: 400 13px var(--c-font); width: 160px; background: transparent; }
/* таблиця деталі Freedom UI */
.mn .fgrid-wrap { margin: 0 0 8px; width: 100%; min-width: 0; } /* ширина — як у контейнера; горизонтальна прокрутка всередині таблиці, шапка «+ ⋮» закріплена праворуч */
.mn .fgrid-scroll { overflow-x: auto; }
.mn .dt.fgrid { display: table; table-layout: fixed; }
.mn .dt.fgrid th.tools { width: 56px; text-align: left; padding: 0; color: #606060; white-space: nowrap; } /* кнопки «+ ⋮» 24×24 від лівого краю колонки, #606060 — як у Creatio */
.mn .dt.fgrid th.tools .ti { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; vertical-align: middle; }
.mn .fgrid-new { height: 40px; display: flex; align-items: center; gap: 4px; padding-left: 54px; color: var(--c-ink); font: 500 12px var(--c-font); cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.mn .fgrid-new:hover { background: #f6f8fc; }
.mn .cp-text { min-width: 0; }
.mn .cp-sub { font: 500 12px/16px var(--c-font); color: #181818; margin-top: 4px; display: flow-root; white-space: pre-wrap; } /* .profile-block { margin-top: 4px } (flow-root): порожній перший рядок теж дає 4px, як у Creatio */
/* засоби зв'язку */
.mn .comm-row { padding: 8px 0 8px; }
.mn .comm-row > label { display: block; font: 500 12px/16px var(--c-font); color: #606060; }
.mn .comm-val { min-width: 0; display: flex; align-items: center; gap: 6px; height: 20px; color: var(--c-link); border-bottom: 1px dotted #dfdfdf; }
.mn .comm-ic { display: inline-flex; width: 20px; height: 20px; flex: none; align-items: center; justify-content: center; }
.mn .comm-val a { min-width: 0; font: 500 13px/20px var(--c-font); color: var(--c-link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* хронологія (crt.Timeline) */
.mn .timeline { padding: 16px 0; }
.mn .tl-composer { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.mn .tl-input { flex: 1; min-height: 40px; box-sizing: border-box; border: 1px solid #dfdfdf; border-radius: 8px; padding: 10px 12px; font: 400 14px/20px var(--c-font); resize: vertical; field-sizing: content; }
.mn .tl-input:focus { outline: none; border-color: var(--c-primary); }
.mn .tl-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.mn .tl-chip { height: 24px; border: 1px solid #dfdfdf; background: #fff; border-radius: 12px; padding: 0 10px; font: 500 12px var(--c-font); color: var(--c-ink); cursor: pointer; }
.mn .tl-chip.on { background: rgba(0,79,214,.1); border-color: transparent; color: var(--c-primary); }
.mn .tl-day { font: 600 12px/16px var(--c-font); color: #606060; text-transform: uppercase; margin: 16px 0 8px 44px; }
.mn .tl-item { display: flex; gap: 12px; margin-bottom: 8px; position: relative; }
.mn .tl-ic { width: 32px; height: 32px; border-radius: 50%; color: #fff; display: grid; place-items: center; flex: none; }
.mn .tl-card { flex: 1; min-width: 0; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; padding: 10px 16px; background: #fff; }
.mn .tl-head { display: flex; align-items: center; gap: 8px; font: 500 13px/20px var(--c-font); }
.mn .tl-kind { color: #606060; font-size: 12px; }
.mn .tl-title { color: var(--c-link); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn .tl-head .sp { flex: 1; }
.mn .tl-date { color: #757575; font-size: 12px; white-space: nowrap; }
.mn .tl-owner { font: 400 12px/16px var(--c-font); color: #606060; }
.mn .tl-text { font: 400 14px/20px var(--c-font); color: #181818; white-space: pre-wrap; margin-top: 6px; }
.mn .tl-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px 16px; margin-top: 8px; }
.mn .tl-f { grid-column: span 4; min-width: 0; }
.mn .tl-f label { display: block; font: 500 12px/16px var(--c-font); color: #606060; }
.mn .tl-f div { font: 500 13px/20px var(--c-font); color: #181818; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* бокова панель картки (CardToggleTabPanel, режим toggle) */
.mn .toggle-panel { flex: none; align-self: flex-start; margin-left: 0; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; box-sizing: border-box; min-height: 200px; }
.mn .tp-head { display: flex; align-items: center; gap: 4px; padding: 12px 8px 8px 16px; }
.mn .tp-head .sp { flex: 1; }
.mn .tp-head .label-h { font-size: 16px !important; line-height: 20px; }
.mn .tp-body { padding: 0 16px 16px; }
.mn .ns-empty { padding: 24px 0; color: #757575; font: 400 13px var(--c-font); text-align: center; }
.mn .ns-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.mn .ns-check { width: 18px; height: 18px; border: 2px solid #8a8a8a; border-radius: 50%; background: #fff; cursor: pointer; flex: none; margin-top: 1px; }
.mn .ns-check:hover { border-color: #20a959; background: #e8f7ee; }
.mn .ns-main { min-width: 0; }
.mn .ns-title { font: 500 13px/20px var(--c-font); color: var(--c-link); }
.mn .ns-meta { font: 400 12px/16px var(--c-font); color: #606060; }
.mn .ns-meta.overdue { color: #d32f2f; }
.mn .feed-item { padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.mn .pb-notes { font: 400 13px/20px var(--c-font); color: #181818; margin-top: 6px; }
/* реєстр: активна група, чипи довідників, посилання телефон/email */
.folder-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; white-space: nowrap; padding: 0 4px 0 8px; margin-right: 8px; font: 500 12px var(--c-font); color: var(--c-ink); }
.folder-chip a { cursor: pointer; }
.folder-chip button { border: 0; background: transparent; cursor: pointer; color: #757575; font-size: 11px; }
.dt .lchip { display: inline-block; height: 20px; padding: 0 8px; border-radius: 16px; font: 500 13px/20px var(--c-font); max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.dt .cell-link { display: inline-flex; align-items: center; gap: 6px; font: 400 14px var(--c-font); }
.dt .ci { display: inline-flex; }
.dt .ci.phone { color: #20a959; } .dt .ci.email { color: #ff8800; } .dt .ci.web { color: #0058ef; }
.qf-check { display: inline-block; width: 12px; height: 12px; border: 2px solid #8a8a8a; border-radius: 2px; vertical-align: middle; box-sizing: border-box; }
.qf-check.on { background: var(--c-primary); border-color: var(--c-primary); box-shadow: inset 0 0 0 2px #fff; }
.qf-search { padding: 4px 8px 6px; } .qf-search input { width: 100%; height: 28px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; padding: 0 8px; font: 400 13px var(--c-font); }
/* ===== Календар (crt.Calendar на FullCalendar 6) — значення з udc.creatio.com ===== */
.cal-scroll { background: #fff; border-radius: 0; }
.crt-calendar { position: relative; }
.crt-calendar .cal-err { padding: 12px 24px; color: #a11818; font-size: 13px; }
.crt-calendar .fc { --fc-border-color: #dfdfdf; --fc-now-indicator-color: #ff4013; --fc-today-bg-color: rgba(255,220,40,.15); --fc-non-business-color: rgb(217 217 217 / 15%); --fc-neutral-bg-color: hsla(0,0%,82%,.3); --fc-page-bg-color: #fff; --fc-event-border-color: #dfdfdf; font: 10px var(--c-font); color: #444; }
.crt-calendar .fc .fc-scrollgrid { border-color: transparent; }
.crt-calendar .fc th.fc-col-header-cell.fc-day { border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; color: #181818; }
.crt-calendar .fc .fc-col-header-cell-cushion, .crt-calendar .fc .fc-timegrid-slot-label-cushion, .crt-calendar .fc .fc-timegrid-axis-cushion { font: 500 12px/15px var(--c-font); color: #606060; text-decoration: none; }
.crt-calendar .fc .fc-col-header-cell-cushion { padding: 2px 4px; }
.crt-calendar .fc .fc-timegrid-slot-label-cushion, .crt-calendar .fc .fc-timegrid-axis-cushion { padding: 0 4px; }
.crt-calendar .fc .fc-timegrid-slot { height: 25px; }
.crt-calendar .fc td.fc-timegrid-slot.fc-timegrid-slot-minor { border-top: unset; }
.crt-calendar .fc .fc-day:not(.fc-day-today) { color: #181818; }
.crt-calendar .fc tr:has(.fc-daygrid-body) { position: sticky; top: 20px; z-index: 3; background: #fff; }
.crt-calendar .fc .fc-scrollgrid-section-sticky > * { top: 0; }
.crt-calendar .fc .fc-v-event, .crt-calendar .fc .fc-h-event { border: unset; background: transparent; }
.crt-calendar .fc .fc-timegrid-event-harness-inset .fc-timegrid-event { box-shadow: unset; }
.crt-calendar .fc .fc-timegrid-now-indicator-arrow { border: unset; margin-top: unset; height: 1px; width: 105%; background: var(--fc-now-indicator-color); }
.crt-calendar .fc .fc-timegrid-now-indicator-line:before { position: absolute; content: ""; margin-top: -4px; left: -3px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #fff; background: var(--fc-now-indicator-color); }
.crt-calendar .fc .fc-timegrid-bg-harness .fc-highlight { background: unset; }
.crt-calendar .fc .fc-highlight { background: #bce8f1cc; }
.crt-calendar .fc .fc-daygrid-day-number { font-size: 12px; font-weight: 600; line-height: 13px; color: inherit; text-decoration: none; }
.crt-calendar .fc .fc-multimonth-title { font-size: 16px; font-weight: 500; color: #181818; }
.crt-calendar .calendar-tile { container-type: inline-size; width: 100%; height: 100%; overflow: hidden; padding: 4px; border-radius: 4px; cursor: pointer; }
.crt-calendar .calendar-tile.default.present { border-left: 3px solid #2457e6; background-color: #d3ddfacc; }
.crt-calendar .calendar-tile.default.future { border-left: 3px solid #c6d3f8; background-color: #eff9fdcc; box-shadow: 1px 1px #2457e63d; }
.crt-calendar .calendar-tile.default.past { border: 1px solid #e7e7e7; background-color: #fffc; box-shadow: 1px 1px #0000000a; padding-left: 7px; }
.crt-calendar .fc-daygrid-event-harness .calendar-tile { max-height: 36px; white-space: pre-wrap; }
.crt-calendar .fc-daygrid-block-event .calendar-tile { max-height: 24px; }
.crt-calendar .ct-flex { display: flex; flex-direction: column; align-content: flex-start; column-gap: 5px; overflow: hidden; padding-top: 2px; }
.crt-calendar .ct-label { display: block; font: 400 12px/16px var(--c-font); color: #0d2e4e; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crt-calendar .ct-label.b { font-weight: 600; white-space: normal; }
.crt-calendar .calendar-system-input { border: none; background: transparent; color: #606060; outline: none; font: 600 12px var(--c-font); width: 100%; position: relative; z-index: 5; }
.cal-menu { min-width: 280px; overflow: visible !important; }
.cal-menu .opt { display: flex; align-items: center; gap: 12px; position: relative; }
.cal-menu .opt .caret { margin-left: auto; }
.cal-menu .mi-ico { display: inline-flex; color: #0d2e4e; }
.cal-sub { right: 100%; left: auto !important; top: -4px !important; min-width: 160px; }
/* діалог підтвердження Creatio */
.cdlg-bg { z-index: 120; }
.cdlg { width: 450px; background: #fff; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,.25); padding: 24px 32px 32px; box-sizing: border-box; }
.cdlg-text { font: 500 16px/24px var(--c-font); color: #0d2e4e; white-space: pre-line; }
.cdlg-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.cdlg-btns .cbtn.primary { padding: 0 16px; }
.cbtn.outline { border: 1px solid #0d2e4e33; }
/* міні-сторінка (BaseMiniPageTemplate): 420px, радіус 8, відступи 16/24/24/24 */
.mini-bg { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0,0,0,.32); }
.mini-bg.positioned { display: block; background: transparent; }
.mini-box { width: 420px; max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.24); }
.mini-bg.positioned .mini-box { position: fixed; }
.mini-page .freedom-page { padding: 0; }
.lp-tools.cal { padding: 8px 16px 16px 18px; min-height: 0; }
.mn .mini-page .freedom-page, .mini-page .freedom-page { height: auto; display: block; }
.mini-page .freedom-page > [data-n], .mini-page [data-n="Main"], .mini-page [data-n="MainContainer"] { flex: none !important; min-height: 0; overflow: visible !important; height: auto !important; }
.freedom-page .field.right { display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 37px; padding-top: 8px; }
.freedom-page .field.right > label { font: 500 12px/16px var(--c-font); color: #606060; margin: 0; }
.mn .mini-page .freedom-page h1, .mini-page .freedom-page [data-n="MainHeader"] .label-h { font: 500 18px/24px var(--c-font) !important; color: #0d2e4e; }
.mn .mini-page .btn.icon-only.sz-medium { width: 28px; height: 24px; }
/* дашборди розділу (crt.Dashboards) — виміряно на udc.creatio.com 1440×900 */
.lp-dash { flex: 1; min-height: 0; overflow: auto; background: #fff; padding: 0 24px 24px; }
.dash-head { display: flex; align-items: center; gap: 8px; height: 45px; }
.dash-star { color: #0d2e4e; font-size: 18px; width: 24px; text-align: center; }
.dash-sel { border: 0; background: transparent; font: 500 16px/20px var(--c-font); color: #0d2e4e; cursor: pointer; padding: 6px 4px; display: inline-flex; gap: 8px; align-items: center; }
.dash-empty { padding: 40px; text-align: center; color: #757575; }
.lp-dash .dash-body { padding: 0; }
.tool.tgl-v.on { background: #e8f0ff; color: var(--c-primary); }
.chart-widget { background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.chart-widget.nob { border-color: transparent; }
.chart-widget .cw-title { height: 38px; padding: 0 16px; font: 500 16px/38px var(--c-font); color: #0d2e4e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.chart-widget .cw-body { flex: 1; min-height: 0; position: relative; padding: 0 6px 6px; }
.chart-widget.full .cw-title { height: 46px; color: #fff; border-radius: 7px 7px 0 0; }
.chart-widget.full .cw-body { margin-top: -8px; background: #fff; border-radius: 4px; padding: 6px; }
.chart-widget .cw-empty, .chart-widget .muted { position: absolute; inset: 0; display: grid; place-items: center; color: #757575; font-size: 13px; }
/* crt-indicator-widget без заливки: рамка 1 #e6e6e6, заголовок (padding 8, 14/18, усі рядки), далі .content (margin -8 + рамка 1 + 5 + 3 = 9)
   зі значенням по центру решти висоти (рядок сітки max-content — висота від найвищого віджета ряду), знизу 3 + 5 + 1 = 9 */
.mn .widget.plain.lp-above-under { display: flex; flex-direction: column; align-items: stretch; gap: 0; border: 1px solid #e6e6e6; padding: 8px 16px 0; }
.mn .widget.plain.lp-above-under .t { font: 500 14px/18px var(--c-font); color: #0d2e4e; overflow: hidden; flex: none; } /* без обмеження рядків (title-block: display block) — «Середній відкритий продаж» у 3 рядки, плитка 118 (SalesHome) */
.mn .widget.plain.lp-above-under .row { display: flex; align-items: center; gap: 8px; flex: 1 0 auto; margin: 9px 0 9px 1px; }
.mn .widget.plain.lp-above-under.fs-large .t { font-size: 16px; line-height: 20px; }
.mn .widget.plain.lp-above-under .ic24 { display: inline-flex; width: 24px; height: 24px; }
.mn .widget.plain.lp-above-under .v { font: 600 28px/36px var(--c-font); }
.mn .widget.plain.lp-above-under.fs-small .v { font-size: 20px; line-height: 28px; }
.mn .widget.plain.lp-above-under.fs-large .v { font-size: 36px; line-height: 44px; }
/* заглушка порожнього реєстру (crt-placeholder): анімація 100×100, заголовок 500 13/20 #181818, підзаголовок 500 12/16 #606060 */
.lp-gwrap .crt-placeholder { position: absolute; left: 50%; transform: translateX(-50%); top: 25%; height: 160px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; padding: 0 24px; pointer-events: none; }
.crt-placeholder .ph-title { margin-top: 8px; font: 500 13px/20px var(--c-font); color: #181818; text-align: center; }
.crt-placeholder .ph-sub { margin-top: 16px; font: 500 12px/16px var(--c-font); color: #606060; text-align: center; }
/* інструменти вкладки реєстру (TabContainer.tools): біла шапка 12px 24px над таблицею (Чати: індикатори) */
.lp-list-tools { background: #fff; padding: 12px 24px; flex: none; }
.lp-list-tools > .crt-grid, .lp-list-tools > div { padding-bottom: 16px; }
.mn .lp-list-tools.freedom-page { height: auto; min-height: 0; flex: none; overflow: visible; display: block; padding: 12px 24px; }
/* малий розмір (fontSizeMode small, виміряно на Чатах): значення 500 20/26, іконка 16px, відступ від заголовка 9px */
.mn .widget.plain.lp-above-under.fs-small .ic24 { width: 16px; height: 16px; }
.mn .widget.plain.lp-above-under.fs-small .v { font: 500 20px/26px var(--c-font); }
/* шапка таблиці як у Creatio: колонка-заповнювач (auto) і панель 56px з «+» (додати колонки) та «⋮» (дії списку) */
.dt th.plus { padding: 0 8px 0 0; text-align: left; white-space: nowrap; cursor: default; }
.dt th.plus { right: 0; z-index: 101; background: #fff; } /* crt-data-table-cell-horizontally-sticky: «+ ⋮» лишається біля правого краю широкої таблиці */
.dt .dt-tb { width: 24px; height: 24px; border: 0; padding: 0; border-radius: 4px; background: transparent; color: var(--c-ink); display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle; }
.dt .dt-tb:hover { background: rgba(13,46,78,.06); }
.dt th.fill { cursor: default; }
/* панель фільтрів: ліва частина переноситься (gap 16 як у Creatio), права — підсумки, оновлення, перемикач вигляду */
.lp-tools { align-items: flex-start; }
.lp-tools .lp-left { flex: 0 1 calc((100% + 16px) * 2 / 3 - 16px); min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 4px; } /* LeftFilterContainer Creatio: 2 з 3 колонок MainFilterContainer (проміжок 16px), рядки фільтрів через 16px */
.lp-tools .lp-right { margin-left: auto; }
.tool .qf-clear { display: inline-flex; width: 16px; height: 16px; margin: -4px 0 0 1.6px; }
.lp-tools .lp-right { flex: none; display: flex; align-items: center; gap: 4px; }
.sum-item { font: 500 13px/18px var(--c-font); color: #606060; white-space: nowrap; }
.sum-item .sum-v { font-weight: 600; color: #0d2e4e; }
/* crt-summaries: елементи «Підпис: значення» (padding 1 8, підпис padding-right 4) + кнопка меню 16×18, проміжок 2 */
.lp .lp-right .lpt-sums { display: inline-flex; align-items: center; gap: 2px; height: 18px; }
.lp .lp-right .lpt-sums .sum-item { display: inline-flex; padding: 0 8px; }
.lp .lp-right .lpt-sums .sum-l { padding-right: 4px; }
.lp .lp-right .tool.lpt-suma { width: 16px; height: 18px; padding: 1px 0; color: #0d2e4e; }
.lp .lp-right .tool.lpt-suma > span { display: block; width: 16px; height: 16px; }
/* ===== панель «Фільтрація» (crt-filter-builder): 400px зліва від таблиці, виміряно на Контактах ===== */
.lp-body { flex: 1; min-height: 0; display: flex; }
.lp-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.fb-panel { width: 400px; flex: none; background: #fff; position: relative; overflow: auto; padding: 4px 16px 16px; border-right: 1px solid #ececec; }
.fb-empty { display: flex; flex-direction: column; align-items: center; padding-top: 111px; }
.fb-empty .ph-title { margin-top: 8px; font: 500 13px/20px var(--c-font); color: #181818; }
.fb-empty .ph-sub { margin-top: 16px; font: 500 12px/16px var(--c-font); color: #606060; }
.fb-empty .fb-btn.sec { margin-top: 16px; height: 32px; padding: 0 16px; font-size: 14px; }
.fb-empty .fb-btn.txt { margin-top: 8px; height: 32px; padding: 0 16px; font-size: 14px; }
.fb-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; cursor: pointer; border-radius: 4px; font: 500 14px/16px var(--c-font); color: #0d2e4e; padding: 0 12px; height: 24px; white-space: nowrap; }
.fb-btn.pri { background: #004fd6; color: #fff; }
.fb-btn.pri:disabled { opacity: .5; cursor: default; }
.fb-btn.sec { background: #f7f8fb; border: 1px solid rgba(0, 28, 90, .1); color: #001c5a; }
.fb-btn.txt.sm { font-size: 12px; height: 18px; padding: 0; }
.fb-btn:not(.pri):not(:disabled):hover { background: rgba(13, 46, 78, .06); }
.fb-actions { display: flex; align-items: center; gap: 8px; height: 32px; }
.fb-actions .sp, .fb-row .sp, .fb-ghead .sp { flex: 1; }
.fb-x { width: 16px; height: 32px; border: 0; background: transparent; color: #0d2e4e; cursor: pointer; padding: 0; display: grid; place-items: center; }
.fb-x.sm, .fb-x.row-x { width: 24px; height: 18px; }
.fb-cond .row-x { opacity: 0; }
.fb-cond:hover .row-x, .fb-cond.active .row-x { opacity: 1; }
.fb-group { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.fb-group.nested { border: 1px solid #e6e6e6; border-radius: 8px; padding: 4px 8px 8px; }
.fb-gcap { font: 500 13px/20px var(--c-font); color: #0d2e4e; }
.fb-ghead { display: flex; align-items: center; }
.fb-ghead:empty { display: none; }
.fb-logic { font: 500 13px/20px var(--c-font); color: #444; padding: 4px 0 12px; }
.fb-chip { display: inline-flex; align-items: center; height: 24px; box-sizing: border-box; padding: 1px 8px; border-radius: 8px; font: 500 13px/19.5px var(--c-font); border: 1px solid #dfdfdf; background: transparent; color: #444; white-space: nowrap; cursor: default; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.fb-chip.ter { color: #0a6892; background: #f0fafe; border-color: #b2e2f7; cursor: pointer; }
.fb-chip.sec { color: #0a3e99; background: #f0f5fe; border-color: #b2cdfa; cursor: pointer; }
.fb-cond { border-radius: 8px; padding: 4px; cursor: pointer; }
.fb-cond:hover { background: #f7f8fb; }
.fb-cond.active { background: #f3f6fc; cursor: default; }
.fb-row, .fb-row2 { display: flex; align-items: center; gap: 4px; min-height: 24px; }
.fb-row2 { margin-top: 4px; flex-wrap: wrap; }
.fb-any { font: 500 13px var(--c-font); color: #757575; }
.fb-word { font: 500 13px/20px var(--c-font); color: #444; }
.fb-val { font: 500 13px/20px var(--c-font); color: #181818; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-input { border: 0; outline: none; background: transparent; font: 500 13px/20px var(--c-font); color: #181818; min-width: 60px; flex: 1; }
.fb-input.date { flex: none; width: 130px; }
.fb-add { display: flex; gap: 8px; padding: 6px 3px 0; }
.fb-lk { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1; }
.fb-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border-radius: 6px; background: #e8eef9; font: 500 12px var(--c-font); color: #0d2e4e; }
.fb-tag b { cursor: pointer; font-weight: 600; }
.fb-menu { min-width: 180px; z-index: 120; }
.fb-backdrop { position: fixed; inset: 0; z-index: 110; }
.fb-pick { z-index: 120; width: 320px; padding: 0; max-height: 452px; display: flex; flex-direction: column; overflow: hidden; }
.fb-search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid #ececec; color: #757575; }
.fb-search input { border: 0; outline: none; flex: 1; font: 400 14px var(--c-font); }
.fb-grp-h { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border: 0; background: transparent; font: 500 12px var(--c-font); color: #606060; cursor: pointer; text-align: left; }
.fb-grp-h .chev { display: inline-flex; transition: transform .15s; }
.fb-grp-h .chev.closed { transform: rotate(-90deg); }
.fb-list { overflow: auto; flex: 1; }
.fb-item { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px 0 18px; cursor: pointer; font: 400 14px/20px var(--c-font); color: #181818; }
.fb-item:hover { background: #f1f4f9; }
.fb-item .ti { display: inline-flex; color: #757575; }
.fb-item .cap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-foot { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-top: 1px solid #ececec; font: 400 14px var(--c-font); color: #181818; }
.tool.fb-on { color: var(--c-primary); }
.tool .fb-badge { width: 6px; height: 6px; border-radius: 50%; background: #ff6534; margin-left: 2px; }
.fb-pick.dropdown.menu { z-index: 120; padding: 0; max-height: 452px; display: flex; flex-direction: column; overflow: hidden; width: 320px; }
.fb-pick .fb-search { box-sizing: border-box; height: 44px; min-height: 44px; margin: 0; flex: none; }
.dropdown.menu.fb-menu { z-index: 125; }
.fb-row .fb-input { flex: 10 1 auto; width: 40px; }
/* ===== панель груп (crt-folder-tree): 328px, вузли 40px, відступ 24 + 16 на рівень, вибраний #E3EBFA ===== */
.ft-panel { width: 328px; flex: none; background: #fff; display: flex; flex-direction: column; border-right: 1px solid #ececec; position: relative; }
.ft-head { display: flex; align-items: center; height: 40px; padding: 0 8px 0 24px; gap: 16px; flex: none; }
.ft-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: #757575; }
.ft-search .ic { display: inline-flex; width: 16px; height: 16px; }
.ft-search input { border: 0; outline: none; flex: 1; min-width: 0; font: 500 13px/20px var(--c-font); color: #181818; background: transparent; }
.ft-search .ic-btn { border: 0; background: transparent; padding: 0; cursor: pointer; display: inline-flex; color: #757575; }
.ft-new { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; cursor: pointer; font: 500 12px/16px var(--c-font); color: #181818; padding: 0; }
.ft-new .ic { display: inline-flex; color: #0d2e4e; }
.ft-close { border: 0; background: transparent; cursor: pointer; padding: 0; width: 16px; height: 16px; display: inline-flex; color: #0d2e4e; }
.ft-list { flex: 1; overflow: auto; }
.ft-node { position: relative; display: flex; align-items: center; height: 40px; cursor: pointer; font: 500 13px/20px var(--c-font); color: #181818; padding-right: 8px; }
.ft-node:hover { background: #f4f7fd; }
.ft-node.sel { background: #e3ebfa; }
.ft-tog { width: 16px; height: 16px; display: inline-flex; color: #0d2e4e; transform: rotate(-90deg); transition: transform .12s; flex: none; }
.ft-tog.open { transform: none; }
.ft-tog.hidden { visibility: hidden; }
.ft-ico { width: 16px; height: 16px; display: inline-flex; color: #0d2e4e; flex: none; }
.ft-text { padding-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.ft-rename { margin-left: 8px; flex: 1; min-width: 0; font: 500 13px/20px var(--c-font); border: 1px solid #004fd6; border-radius: 4px; padding: 0 4px; outline: none; }
.ft-acts { display: none; gap: 8px; align-items: center; padding-left: 8px; position: relative; }
.ft-node:hover .ft-acts, .ft-acts.on { display: inline-flex; }
.ft-acts button { width: 16px; height: 16px; border: 0; background: transparent; padding: 0; cursor: pointer; color: #0d2e4e; display: inline-flex; }
.ft-acts button.fav { color: #ffac07; }
.ft-menu.dropdown.menu { right: 0; left: auto; top: 20px; min-width: 260px; z-index: 125; }
.ft-menu .opt, .ft-move-list .opt { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; font: 400 14px var(--c-font); }
.ft-menu .opt .mi, .ft-move-list .mi { display: inline-flex; width: 16px; height: 16px; color: #0d2e4e; }
.ft-backdrop { position: fixed; inset: 0; z-index: 110; }
.ft-move-list { max-height: 320px; overflow: auto; margin-top: 12px; border: 1px solid #ececec; border-radius: 4px; }
.ft-move-list .opt { cursor: pointer; }
.ft-move-list .opt:hover { background: #f1f4f9; }
.fb-ftitle { font: 600 14px/20px var(--c-font); color: #0d2e4e; padding: 8px 0 4px; }
/* кнопка кольору «accent» (Надіслати на затвердження): #0B8500 */
.mn .btn.accent { background: #0b8500; color: #fff; }
.mn .btn.accent:hover { background: #097200; }
.mn .btn.accent .bi { color: #fff; }
/* іконка підказки поля (tooltip) */
.mn .f-tipwrap { display: flex; align-items: center; gap: 0; min-width: 0; flex: 1; }
.mn .f-tipwrap > :first-child { flex: 1; min-width: 0; }
.mn .f-tip { display: inline-flex; color: #0d2e4e; cursor: help; flex: none; width: 24px; justify-content: center; margin-right: 4px; } /* як у Creatio: icon-container 24 (mat-icon 20 з полями 0 2) і 4 до краю поля */
.mn .fgrid-nodata { text-align: center; font: 500 12px/16px var(--c-font); color: #606060; padding: 10px 0 23px; }
.mn .fgrid-wrap.in-grid { margin: 0; } /* таблиця в сітці (max-height = rowSpan × 32): без нижнього відступу; «Немає даних» — рядок 40 + 1, як у Creatio */
.mn .fgrid-wrap.in-grid .fgrid-nodata { padding: 10px 0 14px; }
.mn .fgrid-wrap.in-grid .fgrid-scroll { padding-bottom: 1px; } /* +1 під таблицею, як crt-data-table-container (16 рядків: 680 → 681) */

/* таблиця деталі: закріплені колонки, індикатор сортування, панель «+ ⋮» праворуч (як crt.DataGrid) */
.mn .dt.fgrid th, .mn .dt.fgrid td { padding: 0 8px; } /* текст з відступом 8 від межі колонки (комірка 6 + 2), як у Creatio */
.mn .dt.fgrid td { color: #181818; border-top: 1px solid transparent; border-bottom-color: #dfdfdf; } /* mat-mdc-cell: рамка 1px прозора зверху, #dfdfdf знизу */
/* числові колонки як у Creatio: підпис шапки — праворуч з резервом 33px (панель колонки й роздільник), іконка сортування ліворуч від підпису;
   значення — праворуч з резервом 32px (кнопка редагування в рядку) */
.mn .dt.fgrid th.num { text-align: right; padding: 0 33px 0 16px; }
.mn .dt.fgrid th.num .hc { max-width: 100%; }
.mn .dt.fgrid th.num .srt { margin: 0 4px 0 0; }
.mn .dt.fgrid th.num .srt:empty { display: none; }
.mn .dt.fgrid td.num { text-align: right; }
.mn .dt.fgrid.ed td.num { padding-right: 32px; }
.dt td a.lnk { font: inherit; }
.mn .dt.fgrid td.rn { color: #606060; font: 500 12px/16px var(--c-font); }
.mn .dt.fgrid .rn { padding: 0 4px 0 0; }
.mn .dt.fgrid td.rn { padding-top: 1px; } /* crt-data-table-row-index: padding-top 1px */
.mn .dt.fgrid .stk { position: sticky; z-index: 1; background: #fff; }
.mn .dt.fgrid th.stk { z-index: 3; }
.mn .dt.fgrid .stk-last { border-right: 1px solid #dfdfdf; }
.mn .dt.fgrid th .hc { overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; max-width: calc(100% - 45px); } /* як у Creatio: праворуч від назви резерв під іконку сортування 16+4, панель колонки 24 і роздільник 6 (115 → «Створ…») */
.mn .dt.fgrid th .srt { display: inline-flex; vertical-align: middle; color: #0d2e4e; margin-left: 4px; }
.mn .dt.fgrid th.tools { position: sticky; right: 0; background: #fff; z-index: 2; } /* як у Creatio: закріплена лише шапка «+ ⋮», комірки рядків прокручуються */
.mn .dt.fgrid tr:hover td.stk, .mn .dt.fgrid tr:hover td.rn, .mn .dt.fgrid tr.rm-row td { background: #eff4fb; }
/* кнопка з текстом розміру medium (crt.Button size medium): 24px, відступи 0 12px, іконка 16 + 4px (як «Кваліфікувати») */
.mn .btn.sz-medium:not(.icon-only) { height: 24px; padding: 0 12px; gap: 4px; }
.tag-add { padding: 0; gap: 4px; }
/* stretch (crt.TabPanel / бокова панель картки): на всю висоту області картки, як у Creatio */
.mn .tabpanel.stretch { display: flex; flex-direction: column; align-self: stretch; }
.mn .tabpanel.stretch > .tab-body { flex: 1 1 auto; }
.mn .toggle-panel.stretch { align-self: stretch; }
/* віджет прямо у flex-контейнері (не в комірці сітки) — висота за вмістом (Сума договору: 82px, як у Creatio) */
.mn [data-n] > .widget { height: auto !important; }
/* смуги прокрутки таблиці деталі, як у Creatio: місце 8px зарезервоване завжди (висота таблиці +8 при ширшій за панель),
   повзунок прозорий і з'являється лише при наведенні на таблицю */
.mn .fgrid-scroll::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
.mn .fgrid-scroll::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; min-height: 40px; min-width: 40px; }
.mn .fgrid-scroll:hover::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .2); }
.mn .fgrid-scroll::-webkit-scrollbar-corner { display: none; }
/* crt.FileList: галерея (плитка 144×200, картка 120×120 з рамкою 1px #DFDFDF r8), назва 12/16 500 #004FD6, дата й розмір 12/16 #606060 */
.mn .fl { position: relative; min-height: 100%; display: flex; flex-direction: column; box-sizing: border-box; padding: 3px; }
.mn .fl.drag { outline: 1px dashed #004fd6; outline-offset: -1px; border-radius: 8px; }
.mn .fl-gallery { display: flex; flex-wrap: wrap; gap: 24px 16px; }
.mn .fl-tile { width: 144px; height: 200px; box-sizing: border-box; padding: 12px; border-radius: 8px; }
.mn .fl-tile:hover { background: #f4f6fa; }
.mn .fl-img { width: 120px; height: 120px; box-sizing: border-box; border: 1px solid #dfdfdf; border-radius: 8px; background: #fff; display: grid; place-items: center; }
.mn .fl-img svg { width: 36px; height: 48px; }
.mn .fl-info { padding-top: 16px; }
.mn .fl-row { display: flex; align-items: center; gap: 8px; height: 16px; }
.mn .fl-name { flex: 1; min-width: 0; font: 500 12px/16px var(--c-font); color: #004fd6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.mn .fl-name:hover { text-decoration: underline; }
.mn .fl-acts { position: relative; flex: none; }
.mn .fl-menu { width: 16px; height: 16px; padding: 0; border: 0; background: transparent; color: #0d2e4e; cursor: pointer; display: grid; place-items: center; border-radius: 4px; }
.mn .fl-dd { right: 0; left: auto; top: auto; bottom: 20px; min-width: 186px; z-index: 120; }
.mn .fl-dd .opt { display: flex; align-items: center; gap: 8px; }
.mn .fl-dd .mi { display: inline-flex; color: #0d2e4e; }
.mn .fl-backdrop { position: fixed; inset: 0; z-index: 110; }
.mn .fl-props { display: flex; gap: 10px; height: 24px; align-items: center; font: 500 12px/16px var(--c-font); color: #606060; white-space: nowrap; overflow: hidden; }
.mn .fl-list { display: flex; flex-direction: column; }
.mn .fl-line { display: flex; align-items: center; gap: 8px; height: 40px; border-bottom: 1px solid #f0f0f0; }
.mn .fl-line .fl-ic { display: inline-flex; flex: none; }
.mn .fl-line .fl-ic svg { width: 24px; height: 24px; }
/* порожній список: зона перетягування з рамкою 1px dashed #DFDFDF r8, анімація 100×100 з y=52, текст і кнопка «Завантажити» */
.mn .fl-empty { flex: 1 1 auto; min-height: 300px; box-sizing: border-box; border: 1px dashed #dfdfdf; border-radius: 8px; padding: 44px 8px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mn .fl-e1 { margin-top: 8px; font: 500 13px/20px var(--c-font); color: #181818; }
.mn .fl-e2 { margin-top: 16px; font: 500 12px/16px var(--c-font); color: #606060; }
.mn .fl-up { margin-top: 24px; height: 32px; padding: 0 16px; gap: 8px; }
.mn .tp-body:has(> .fl), .mn .tp-body:has(.fl-empty) { flex: 1; }
.mn .toggle-panel.stretch { display: flex; flex-direction: column; }
.mn .fl-tile:not(:hover) .fl-acts:not(:has(.fl-dd)) .fl-menu { visibility: hidden; }
/* placeholder порожнього поля — як у Creatio (400 13px rgba(0,0,0,.6)) */
.mn .field input::placeholder, .mn .field textarea::placeholder { color: rgba(0,0,0,.6); font: 400 13px var(--c-font); opacity: 1; }
.mn .field .lk .val .ph { color: rgba(0,0,0,.6); font: 400 13px/20px var(--c-font); }
/* crt.Timeline як у Creatio: панель швидких фільтрів (12/16 500), місяці 14/20 500 #0D2E4E, плитки з іконкою 32px і вмістом з x=48 */
.mn .tl2 > .tl-list { margin-right: 72px; } /* плитки — з відступом праворуч; панель фільтрів — на всю ширину, як у Creatio */
.mn .tl-bar { display: flex; align-items: center; gap: 16px; height: 32px; margin-bottom: 18px; flex-wrap: wrap; padding-right: 11px; }
.mn .tl-bar .sp { flex: 1; }
.mn .tl-rel { position: relative; display: flex; align-items: center; }
.mn .tl-qf { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 2px; border: 0; background: transparent; font: 500 12px/16px var(--c-font); color: #0d2e4e; cursor: pointer; border-radius: 4px; white-space: nowrap; height: 16px; }
.mn .tl-qf .tl-qi { display: inline-flex; }
.mn .tl-qf.tl-per label { color: #606060; cursor: pointer; }
.mn .tl-qf.on, .mn .tl-qf.tl-per.on label { color: #004fd6; }
.mn .tl-qi.up svg { transform: rotate(180deg); }
.mn .tl-sys { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/16px var(--c-font); color: #606060; cursor: pointer; }
.mn .tl-sys input { width: 16px; height: 16px; margin: 0 0 0 6px; accent-color: var(--c-primary); }
.mn .tl-ib { width: 24px; height: 24px; border: 0; background: transparent; color: #0d2e4e; cursor: pointer; display: grid; place-items: center; border-radius: 4px; margin-right: 13px; }
.mn .tl-search { height: 24px; border: 0; border-bottom: 1px solid #dfdfdf; outline: none; font: 400 13px var(--c-font); width: 200px; }
.mn .tl-dd { top: 22px; left: 0; min-width: 240px; z-index: 120; }
.mn .tl-dd .opt { display: flex; align-items: center; gap: 8px; }
.mn .tl-dd .mi { display: inline-flex; color: #0d2e4e; }
.mn .tl-chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--c-primary); }
.mn .tl-ddsep { height: 1px; background: #e8e8e8; margin: 4px 0; }
.mn .tl-pd label { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font: 400 13px var(--c-font); }
.mn .tl-ownq { margin: 4px 12px 6px; width: calc(100% - 24px); box-sizing: border-box; height: 28px; border: 0; border-bottom: 1px solid #dfdfdf; outline: none; font: 400 13px var(--c-font); }
.mn .tl-month { font: 500 14px/20px var(--c-font); color: #0d2e4e; margin-bottom: 26px; }
.mn .tl-tile { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; margin-bottom: 38px; }
.mn .tl-tile.tl-email, .mn .tl-tile.tl-feed { column-gap: 15px; }
.mn .tl-ic { width: 32px; height: 32px; }
.mn .tl-ic svg { width: 32px; height: 32px; display: block; }
.mn .tl-av { position: relative; width: 32px; height: 32px; border-radius: 16px; color: #fff; font: 500 14px/18px var(--c-font); display: grid; place-items: center; }
.mn .tl-badge { position: absolute; left: 20px; top: 20px; width: 16px; height: 16px; display: grid; place-items: center; }
.mn .tl-body { min-width: 0; }
.mn .tl-l1, .mn .tl-l2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 16px; font: 500 13px/20px var(--c-font); color: #181818; }
.mn .tl-l2 { color: #606060; gap: 0 8px; }
.mn .tl-a { color: #004fd6; text-decoration: underline; font: 500 13px/20px var(--c-font); }
.mn .tl-to { color: #0d2e4e; text-decoration: underline; }
.mn .tl-sep { color: #606060; }
.mn .tl-act { color: #181818; }
.mn .tl-det { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; border: 0; background: transparent; font: 500 12px/16px var(--c-font); color: #0d2e4e; cursor: pointer; }
.mn .tl-di { display: inline-flex; }
.mn .tl-dets { font: 400 12px/16px var(--c-font); color: #606060; padding: 4px 0; }
.mn .tl-fields { margin-top: 9px; display: flex; flex-direction: column; gap: 9px; }
.mn .tl-fields.grid { display: grid; column-gap: 24px; row-gap: 9px; }
.mn .tl-f label { display: block; font: 500 12px/16px var(--c-font); color: #606060; }
.mn .tl-v { margin-top: 3px; font: 500 13px/20px var(--c-font); color: #181818; min-height: 0; }
.mn .tl-v:empty { display: none; }
.mn .tl-file { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding-left: 1px; height: 32px; }
.mn .tl-fic svg { width: 32px; height: 32px; display: block; }
.mn .tl-fname { font: 500 12px/16px var(--c-font); color: #004fd6; text-decoration: underline; }
.mn .tl-subj { margin-top: 8px; }
.mn .tl-mail { margin-top: 8px; max-height: 92px; overflow: hidden; font-size: 16px; line-height: 20px; color: #000; }
.mn .tl-mail.open { max-height: none; }
.mn .tl-more { margin-top: 8px; border: 0; background: transparent; padding: 0; font: 500 13px/20px var(--c-font); color: #004fd6; cursor: pointer; }
.mn .tl-msg { margin-top: 8px; font: 500 13px/20px var(--c-font); color: #181818; }
.mn .tl-acts { display: flex; align-items: center; gap: 16px; margin-top: 12px; font: 500 12px/16px var(--c-font); color: #0d2e4e; }
.mn .tl-cm { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.mn .tl-like { cursor: pointer; color: #181818; }
.mn .tl-none { display: flex; flex-direction: column; align-items: center; padding-top: 192px; margin-top: -2px; } /* no-data-by-filter-container: 192 зверху, заглушка по центру */
.mn .crt-ph { display: flex; flex-direction: column; align-items: center; padding: 0 24px; text-align: center; }
.mn .crt-ph-ic { width: 56px; height: 50px; color: #0d2e4e; }
.mn .crt-ph-t { margin-top: 8px; font: 500 13px/20px var(--c-font); color: #181818; }
.mn .crt-ph-s { margin-top: 16px; font: 500 12px/16px var(--c-font); color: #606060; }
.mn .link-edit { min-width: 0; }
.mn .link-edit.with-ic { display: flex; align-items: center; gap: 6px; } /* порожнє веб-поле: глобус 20 + поле з x=26 */
.mn .link-edit.with-ic > :last-child { flex: 1; min-width: 0; }
/* «Додати засіб зв'язку»: кнопка-меню 12/16 500 #0D2E4E з іконкою «+» і стрілкою, меню типів з підменю */
.mn .comm-add { position: relative; }
.mn .comm-add-btn { height: 40px; padding: 0; gap: 4px; font: 500 12px/16px var(--c-font); color: #0d2e4e; }
.mn .comm-add-btn .bi { display: inline-flex; }
.mn .comm-dd { top: 40px; left: 0; min-width: 250px; z-index: 120; overflow: visible; }
.mn .comm-dd .opt { position: relative; display: flex; align-items: center; justify-content: space-between; }
.mn .comm-sub { left: 100%; top: 0; min-width: 220px; z-index: 121; }
.mn .comm-new .comm-input { width: 100%; box-sizing: border-box; height: 20px; border: 0; border-bottom: 1px solid #004fd6; outline: none; font: 500 13px/20px var(--c-font); padding: 0; background: transparent; }
.mn .comm-val > span:not(.comm-ic) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 13px/20px var(--c-font); color: #181818; }
/* crt.Approval: біла картка r8, «Візи» 18/24 500, підписи 12/16 #606060, значення 20/26 500 (позитивна #0B8500, негативна #D2310D, очікує #606060) */
.mn .appr-empty { height: 0; }
.mn .appr { background: #fff; border-radius: 8px; padding: 21px 24px 16px; box-sizing: border-box; }
.mn .appr-h { font: 500 18px/24px var(--c-font); color: #181818; }
.mn .appr-obj { font: 500 13px/20px var(--c-font); color: #181818; padding-top: 11px; }
.mn .appr-obj:empty { height: 0; }
.mn .appr-ms { display: flex; gap: 18px; margin-top: 17px; }
.mn .appr-m label { display: block; font: 500 12px/16px var(--c-font); color: #606060; white-space: nowrap; }
.mn .appr-v { display: flex; align-items: center; gap: 3px; margin-top: 1px; height: 26px; font: 500 20px/26px var(--c-font); }
.mn .appr-ic { display: inline-flex; }
.mn .appr-v.pos { color: #0b8500; } .mn .appr-v.neg { color: #d2310d; } .mn .appr-v.wait { color: #606060; }
.mn .appr-v.wait .appr-ic { color: #444; }
/* значення довідника: посилання займає ширину поля мінус 72px (місце для «очистити» й «пошук», як link-wrap Creatio), текст — мінус 48px */
.mn .field .lk .val > a { align-self: flex-start; /* по центру — на 0,5px вище, ніж у Creatio */ max-width: calc(100% - 72px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.mn .field .lk .val > span:not(.ph):not(.chip) { max-width: calc(100% - 50px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* кнопки «очистити» / «вибрати» поверх правого краю поля (як іконки Creatio), щоб значення мало всю ширину поля */
.mn .field .lk { position: relative; }
.mn .field .lk > .x { position: absolute; top: 50%; transform: translateY(-50%); width: 20px; padding: 0; text-align: center; }
.mn .field .lk > .x:last-of-type { right: 2px; }
.mn .field .lk > .x:nth-last-of-type(2) { right: 26px; }
.mn .f-tipwrap .lk .val > a { max-width: calc(100% - 48px); }

/* шапка колонки реєстру як у Creatio: підпис + піктограма сортування (на наведення — «arrows-vertical»), праворуч «⋮» меню колонки;
   у числових колонках підпис праворуч, піктограма — ліворуч від нього */
.lp .dt th { padding: 0 8px 0 7px; } /* crt-header-cell: сортування 1042 (+7), панель 24 і роздільник 6 — праворуч від них 2px */
.lp .dt th .hcell { display: flex; align-items: center; justify-content: space-between; min-width: 0; }
.lp .dt th .hsort { display: inline-flex; align-items: center; gap: 4px; min-width: 0; border: 0; background: none; padding: 0 1px; height: 24px; font: inherit; color: inherit; cursor: pointer; }
.lp .dt th .hsort .hc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp .dt th .hsort .srt { display: inline-flex; flex: none; width: 16px; color: #606060; visibility: hidden; }
.lp .dt th .hsort.on .srt { visibility: visible; color: var(--c-ink); }
.lp .dt th:hover .hsort .srt { visibility: visible; }
.lp .dt th .htool { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: 4px; color: var(--c-ink); cursor: pointer; visibility: hidden; }
.lp .dt th:hover .htool, .lp .dt th.mon .htool { visibility: visible; }
.lp .dt th .htool:hover { background: rgba(0,0,0,.04); }
.lp .dt th.num .hcell { flex-direction: row; }
.lp .dt th.num .hsort { flex-direction: row-reverse; margin-left: auto; }
.lp .dt th.num .hsort .srt { width: 0; overflow: hidden; }
.lp .dt th.num .hsort.on .srt, .lp .dt th.num:hover .hsort .srt { width: 16px; }
.lp .dt .stk { position: sticky; z-index: 1; background: #fff; }
.lp .dt th.stk { z-index: 3; }
.lp .dt .stk-last { border-right: 1px solid #dfdfdf; }
.lp .dt tr:hover td.stk { background: #eff4fb; }
.col-bd { position: fixed; inset: 0; z-index: 40; }
.dropdown.colmenu { position: fixed; z-index: 41; right: auto; width: max-content; min-width: 199px; }
.dropdown.colmenu .opt { display: flex; align-items: center; gap: 8px; padding-right: 24px; }
.dropdown.colmenu .opt .mi { display: inline-flex; color: var(--c-ink); }

/* ===== Бічні панелі оболонки (як у Creatio: 424px, відступ 8px, верх 56px) ===== */
.tb-icon.on { background: rgba(255,255,255,.2); }
.tb-icon > svg, .tb-icon > span > svg { color: #fff; }
.sp-left, .sp-right { position: absolute; top: 56px; bottom: 0; width: 424px; z-index: 15; }
.sp-left { left: 64px; } .shell.navopen .sp-left { left: 258px; }
.sp-right { right: 8px; }
.shell.sp-l .mn { left: 496px; } .shell.navopen.sp-l .mn { left: 690px; }
.shell.sp-r .mn { right: 440px; }
.sp-card { height: 100%; box-sizing: border-box; background: #fff; border-radius: 8px; display: flex; flex-direction: column; color: #181818; font: 500 13px/20px var(--c-font); overflow: hidden; }
.sp-head { display: flex; align-items: center; min-height: 24px; padding: 16px 24px 0 24px; flex: none; }
.sp-title { flex: 1; min-width: 0; font: 500 16px/20px var(--c-font); color: #121212; padding-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-tools { display: inline-flex; gap: 8px; margin-left: auto; }
.sp-hbtn { width: 28px; height: 24px; border: 0; background: none; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: #0d2e4e; cursor: pointer; padding: 0; }
.sp-hbtn:hover { background: rgba(0,0,0,.04); }
.sp-empty { text-align: center; padding: 60px 24px 0; }
.sp-empty img { width: 135px; height: 139px; }
.sp-empty-t { font: 17px/23px 'Bpmonline Open Sans Light', var(--c-font); color: #999; margin: 50px 16px 0; text-align: center; }
.sp-empty-d { font: 18px/26px 'Bpmonline Open Sans Light', var(--c-font); color: #999; margin: 32px 0 0 50px; padding-left: 16px; border-left: 2px solid #e4e4e4; text-align: left; }
.sp-empty-d a, .ch-empty-d a, .cl-empty-d a { color: #4e7bd8; text-decoration: none; cursor: pointer; }
/* вхідні агента */
.ib-tabs { display: flex; gap: 8px; padding: 16px 16px 8px; }
.ib-tabs button { height: 24px; border: 0; border-radius: 4px; background: none; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; font: 500 12px/16px var(--c-font); color: #0d2e4e; cursor: pointer; }
.ib-tabs button.on { background: #e3ebfa; }
.ib-body { flex: 1; display: grid; place-items: center; padding-bottom: 16px; }
.ph-box { text-align: center; }
.ph-ic { display: block; width: 100px; height: 100px; margin: 0 auto; color: #0d2e4e; }
.ph-ic > svg { display: block; }
.ph-t { font: 500 13px/20px var(--c-font); color: #181818; margin-top: 8px; }
/* група з вертикальною смугою кнопок (комунікаційна панель, сповіщення) */
.sp-group { flex-direction: row; background: transparent; border-radius: 8px; }
.sp-strip { width: 41px; flex: none; box-sizing: border-box; background: rgba(24,24,24,.6); border: 1px solid rgba(255,255,255,.2); border-right: 0; border-radius: 8px 0 0 8px; display: flex; flex-direction: column; gap: 4px; }
.sp-strip button { position: relative; width: 40px; height: 40px; border: 0; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.sp-strip button.on { background: rgba(255,255,255,.2); }
.sp-strip button:hover { background: rgba(255,255,255,.12); }
.sp-strip .sp-badge { position: absolute; left: 27px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #ff7659; }
.sp-body { flex: 1; min-width: 0; background: #fff; border-radius: 0 8px 8px 0; overflow: auto; }
/* класичні панелі Creatio (Open Sans) */
.sp-body .sp-head { padding-bottom: 14px; }
.cl-caret { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #4d6a98; vertical-align: middle; margin-left: 8px; }
.ch-top, .cl-top, .em-top { display: flex; align-items: center; margin: 0 24px; height: 34px; border-bottom: 1px solid #e3e6ec; font: 14px/18px 'Bpmonline Open Sans', var(--c-font); color: #444; }
.ch-active { font: 16px/22px 'Bpmonline Open Sans', var(--c-font); color: #006ce0; }
.ch-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #45b649; margin-right: 6px; }
.ch-empty, .cl-empty { text-align: center; padding: 100px 24px 0; }
.ch-empty img { width: 134px; height: 139px; }
.ch-empty-t, .cl-empty-t { font: 18px/25px 'Bpmonline Open Sans Light', var(--c-font); color: #999; margin-top: 60px; }
.ch-empty-d, .cl-empty-d { font: 18px/26px 'Bpmonline Open Sans Light', var(--c-font); color: #999; text-align: left; margin: 50px 0 0 45px; padding-left: 16px; border-left: 2px solid #e4e4e4; }
.cl-top { border: 0; height: 28px; }
.cl-status { cursor: pointer; }
.cl-search { display: flex; align-items: center; margin: 16px 24px 0; height: 28px; border: 1px solid #c8c8c8; box-sizing: border-box; padding: 0 8px 0 10px; }
.cl-search input { flex: 1; border: 0; outline: 0; font: 14px 'Bpmonline Open Sans', var(--c-font); color: #444; }
.cl-warn { margin: 10px 24px 0; padding: 10px 12px; background: #ffeae7; font: 14px/19px 'Bpmonline Open Sans', var(--c-font); color: #444; }
.cl-empty img { width: 100px; }
.em-top { gap: 4px; border: 0; height: 34px; }
.em-mode { color: #4d7ad7; cursor: pointer; margin-right: 10px; }
.em-mode.on { font-weight: 600; }
.em-tbtn { width: 32px; height: 28px; border: 1px solid #b4c1d2; background: #fff; border-radius: 2px; display: grid; place-items: center; margin-left: 10px; cursor: pointer; }
.em-err { display: flex; gap: 12px; margin: 10px 21px 8px 24px; padding: 10px 14px; background: #ffede9; border: 1px solid #df1f26; border-radius: 2px; font: 14px/20px 'Bpmonline Open Sans', var(--c-font); color: #444; }
.em-err img { width: 16px; height: 16px; margin-top: 2px; }
.em-reconnect { display: inline-block; margin-top: 6px; color: #006ce0; cursor: pointer; }
.em-item { display: flex; gap: 10px; margin: 0 21px 0 24px; padding: 10px 15px 10px 15px; border-bottom: 1px solid #e6e6e6; }
.em-ava { width: 32px; height: 32px; border-radius: 50%; background: #9bb3e8; flex: none; }
.em-main { min-width: 0; flex: 1; }
.em-from { font: 14px/19px 'Bpmonline Open Sans', var(--c-font); color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-meta { display: flex; gap: 5px; font: 12px/17px 'Bpmonline Open Sans', var(--c-font); color: #999; white-space: nowrap; overflow: hidden; }
.em-subj { display: block; margin: 2px 0 0 -42px; font: 15px/21px 'Bpmonline Open Sans', var(--c-font); color: #4e7bd8; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-prev { margin: 2px 0 0 -42px; font: 12px/16px 'Bpmonline Open Sans', var(--c-font); color: #444; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
/* стрічка (Freedom) */
.fd-list { padding: 0 16px 16px 19px; }
.fd-item { display: flex; gap: 15px; padding: 8px 5px 24px; }
.fd-ava { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font: 500 12px/16px var(--c-font); }
.fd-ava.sm { width: 24px; height: 24px; font-size: 11px; }
.fd-main { min-width: 0; flex: 1; padding-top: 8px; }
.fd-head { font: 500 14px/20px var(--c-font); color: #444; }
.fd-link { color: #004fd6; text-decoration: none; }
.fd-link:hover { text-decoration: underline; }
.fd-date { font: 500 13px/20px var(--c-font); color: #606060; margin-left: 4px; white-space: nowrap; }
.fd-text { margin-top: 8px; font: 500 13px/20px var(--c-font); color: #444; white-space: pre-wrap; word-break: break-word; }
.fd-text.clip { max-height: 160px; overflow: hidden; }
.fd-more span { font: 500 13px/20px var(--c-font); color: #004fd6; cursor: pointer; }
.fd-files { margin-top: 8px; border-radius: 8px; }
.fd-files-h { display: flex; align-items: center; gap: 16px; height: 32px; font: 500 14px/20px var(--c-font); color: #0d2e4e; cursor: pointer; }
.fd-tg { display: inline-flex; color: #0d2e4e; transform: rotate(180deg); }
.fd-files.open .fd-tg { transform: none; }
.fd-files-b { padding: 4px 0 8px; display: flex; flex-direction: column; gap: 4px; }
.fd-file { color: #004fd6; font: 500 13px/20px var(--c-font); text-decoration: none; }
.fd-nofiles { color: #606060; font: 500 12px/16px var(--c-font); }
.fd-acts { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.fd-act { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0; border: 0; background: none; font: 500 12px/16px var(--c-font); color: #0d2e4e; cursor: pointer; }
.fd-react { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border: 0; border-radius: 4px; background: none; font: 500 12px/16px var(--c-font); color: #181818; cursor: pointer; }
.fd-react:hover { background: rgba(0,0,0,.04); }
.fd-react.on { color: #e5004c; }
.fd-comments { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.fd-comment { display: flex; gap: 10px; }
.fd-cedit textarea { width: 100%; box-sizing: border-box; min-height: 60px; margin-top: 8px; border: 1px solid #dfdfdf; border-radius: 8px; padding: 8px 12px; font: 500 13px/20px var(--c-font); resize: vertical; outline: 0; }
.fd-cbtns { display: flex; gap: 8px; margin-top: 8px; }
.fd-cbtn { height: 32px; padding: 0 16px; border: 0; border-radius: 4px; background: none; font: 500 14px var(--c-font); color: #0d2e4e; cursor: pointer; }
.fd-cbtn.primary { background: #004fd6; color: #fff; }
/* сповіщення */
.nt-bar { display: flex; align-items: center; gap: 2px; margin: 0 8px; height: 40px; border-bottom: 1px solid #e1e8f2; padding: 0 12px; font: 14px/17px 'Bpmonline Open Sans', var(--c-font); color: #444; }
.nt-menu { position: relative; cursor: pointer; padding-right: 8px; }
.nt-btn { cursor: pointer; padding: 4px 10px; }
.nt-dd { top: 24px; left: 0; min-width: 140px; }
.nt-check { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 14px/20px 'Bpmonline Open Sans', var(--c-font); color: #999; cursor: pointer; }
.nt-cb { width: 14px; height: 14px; border: 1px solid #b4c1d2; border-radius: 2px; box-sizing: border-box; background: #fff; display: inline-block; }
.nt-cb.on { background: #4d7ad7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7l3 3 5-6' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat; border-color: #4d7ad7; }
.nt-filters { display: flex; align-items: flex-start; justify-content: flex-start; margin: 0 8px; height: 40px; box-sizing: border-box; border-bottom: 1px solid #e1e8f2; padding-right: 0; }
.nt-filters .nt-check { margin-left: 13px; padding-top: 3px; }
.nt-sel { display: inline-flex; align-items: center; justify-content: space-between; width: 127px; height: 28px; box-sizing: border-box; border-bottom: 1px dotted #c8c8c8; padding: 4px 11px; font: 14px/18px 'Bpmonline Open Sans', var(--c-font); color: #444; cursor: pointer; }
.nt-task { display: grid; grid-template-columns: 24px 1fr; column-gap: 8px; row-gap: 3px; margin: 0 8px; padding: 10px 26px 13px 10px; border-bottom: 1px solid #e1e8f2; font: 14px/21px 'Bpmonline Open Sans', var(--c-font); }
.nt-task .nt-sub { grid-column: 2; }
.nt-task-d { color: #444; }
.nt-ic { width: 24px; height: 24px; }
.nt-link { color: #4e7bd8; text-decoration: none; cursor: pointer; word-break: break-word; }
.nt-link:hover { text-decoration: underline; }
.nt-sub { color: #999; font: 14px/19px 'Bpmonline Open Sans', var(--c-font); }
.nt-item { display: flex; gap: 10px; margin: 0 8px; padding: 10px; border-bottom: 1px solid #e1e8f2; font: 14px/20px 'Bpmonline Open Sans', var(--c-font); }
.nt-item.unread { background: #f4f8fe; }
.nt-main { min-width: 0; flex: 1; }
.nt-date { color: #444; }
.nt-sys { position: relative; margin: 0 16px 0 8px; padding: 15px 10px 18px 55px; border-bottom: 1px solid #e1e8f2; font: 14px/16px 'Bpmonline Open Sans', var(--c-font); }
.nt-sys-ic { position: absolute; left: 10px; top: 19px; width: 32px; height: 32px; }
.nt-sys-h { color: #999; display: flex; flex-direction: column; gap: 5px; }
.nt-sys-t { display: block; margin: 15px 0 0 -45px; color: #4e7bd8; line-height: 17px; text-decoration: none; }
/* Creatio.ai */
.sp-copilot { padding: 16px; }
.cp-head { display: flex; align-items: center; }
.cp-head .sp-tools { gap: 8px; }
.cp-search { display: flex; align-items: center; gap: 8px; height: 24px; margin: 20px 3px 0 9px; color: #0d2e4e; }
.cp-search input { flex: 1; border: 0; outline: 0; font: 500 13px/20px var(--c-font); color: #181818; background: none; }
.cp-none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 500 13px/20px var(--c-font); }
.cp-none img { width: 100px; height: 100px; }
.cp-newbtn { margin-top: 24px; height: 32px; border: 0; background: none; display: inline-flex; align-items: center; gap: 8px; font: 500 14px/16px var(--c-font); color: #0d2e4e; cursor: pointer; }
.cp-sessions { margin-top: 16px; overflow: auto; }
.cp-sess { padding: 8px 9px; border-radius: 4px; cursor: pointer; }
.cp-sess:hover { background: #f1f4f9; }
.cp-sess-t { font: 500 14px/20px var(--c-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-sess-d { font: 500 12px/16px var(--c-font); color: #606060; }
.cp-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 19px; }
.cp-bar { display: flex; align-items: center; gap: 10px; height: 24px; padding: 0 3px; }
.cp-bar-t { font: 500 14px/20px var(--c-font); color: #181818; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-div { height: 1px; background: #dfdfdf; margin: 16px 3px 0; }
.cp-msgs { flex: 1; min-height: 0; overflow: auto; padding: 32px 3px 16px; display: flex; flex-direction: column; gap: 12px; }
.cp-hello { text-align: center; }
.cp-logo { display: inline-block; width: 80px; height: 80px; color: #0d2e4e; }
.cp-greet { margin: 20px 31px 0; font: 500 13px/20px var(--c-font); color: #181818; }
.cp-quick { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; }
.cp-qbtn { height: 32px; padding: 0 16px; background: #f7f8fb; border: 1px solid rgba(0,28,90,.1); border-radius: 4px; font: 500 14px/16px var(--c-font); color: #001c5a; cursor: pointer; }
.cp-qbtn:hover { background: #eef1f8; }
.cp-msg { max-width: 85%; padding: 8px 12px; border-radius: 8px; font: 500 13px/20px var(--c-font); white-space: pre-wrap; word-break: break-word; }
.cp-msg.user { align-self: flex-end; background: #e3ebfa; color: #0d2e4e; }
.cp-msg.assistant { align-self: flex-start; background: #f7f8fb; color: #181818; }
.cp-msg.err { background: #ffeae7; }
.cp-msg.busy { display: inline-flex; gap: 4px; }
.cp-msg.busy i { width: 6px; height: 6px; border-radius: 50%; background: #8e8e8e; animation: cpdot 1s infinite; }
.cp-msg.busy i:nth-child(2) { animation-delay: .2s; } .cp-msg.busy i:nth-child(3) { animation-delay: .4s; }
@keyframes cpdot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.cp-editor { flex: none; margin: 0 3px 3px; border: 1px solid #dfdfdf; border-radius: 8px; height: 81px; box-sizing: border-box; display: flex; flex-direction: column; }
.cp-editor.focus { border-color: #002877; }
.cp-editor textarea { flex: 1; border: 0; outline: 0; resize: none; padding: 12px 12px 0; font: 500 13px/20px var(--c-font); color: #181818; background: none; }
.cp-etools { display: flex; align-items: flex-start; padding: 1px 7px 0 4px; height: 25px; box-sizing: border-box; flex: none; }
.cp-etools .sp { flex: 1; }
.sp-ebtn { width: 24px; height: 18px; border: 0; background: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #0d2e4e; cursor: pointer; border-radius: 4px; }
.sp-ebtn.send { width: 26px; color: #757575; margin-top: 2px; } .sp-ebtn.send.on { color: #004fd6; }

/* булева колонка реєстру Freedom (crt-data-table-boolean-cell): вимкнений прапорець 16×16 — сірий фон #c4c4c4 і біла позначка, порожній — рамка */
.dt .dt-bool { display: inline-block; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid #c4c4c4; border-radius: 2px; vertical-align: middle; position: relative; top: -1px; }
.dt .dt-bool.on { background: #c4c4c4; border-color: #c4c4c4; }
.dt .dt-bool svg { position: absolute; left: 0; top: 0; width: 12px; height: 12px; }
.dt .dt-bool path { stroke: #fff; stroke-width: 3.12; }
.dt .dt-bool.fg { border-radius: 4px; border-color: #dfdfdf; top: 0; }
.dt .dt-bool.fg.on { background: #c4c4c4; border-color: transparent; }
.dt .dt-bool.fg.ed { border-color: #606060; cursor: pointer; } /* таблиця з редагуванням: активний прапорець (рамка #606060) */
.dt .dt-bool.fg.ed.on { background: var(--c-primary); border-color: transparent; }
.mn .dt.fgrid .fg-phone { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.mn .dt.fgrid .fg-call { display: inline-flex; width: 16px; height: 16px; flex: none; }
.mn .dt.fgrid .fg-phone a { overflow: hidden; text-overflow: ellipsis; }
/* сторінка списку з кнопкою «Назад» і правою панеллю «Довідка» (TechnicalUsers_ListPage), розміри — з udc.creatio.com */
.lp-head .lp-back { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #0d2e4e; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-right: 8px; flex: none; }
.lp-head .lp-back:hover { background: rgba(13,46,78,.06); }
.lp-rlabel { font: 500 13px/20px Montserrat, sans-serif; color: #181818; white-space: nowrap; }
.lp-rlabel.b { font-weight: 700; color: #0d2e4e; margin-left: 16px; }
.lp-rbtn { margin-left: 8px; }
.lp-help-tgl { height: 24px; border: 0; border-radius: 8px; padding: 0 12px; display: inline-flex; align-items: center; gap: 4px; background: transparent; color: #0d2e4e; font: 500 12px/16px Montserrat, sans-serif; cursor: pointer; margin-left: 8px; }
.lp-help-tgl.on { background: #e3ebfa; }
.lp-help { width: 368px; flex: none; margin-left: 9px; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.lp-help-h { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font: 500 16px/19.5px Montserrat, sans-serif; color: #0d2e4e; }
.lp-help-h button { width: 28px; height: 24px; border: 0; background: transparent; color: #0d2e4e; cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.lp-help-b { flex: 1; overflow: auto; padding: 7px 24px 16px; font: 500 13px/20px Montserrat, sans-serif; color: #181818; }
.lp-help-b p { margin: 0 0 8px; } /* підписи mat-body: n×20−4 px і проміжок 12px → 8px від повного рядка */
.lp-help-b p.lnk { margin-bottom: 2px; }
.lp-help-b a { display: inline-block; line-height: 20px; }
.lp-help-b a { color: #004fd6; text-decoration: underline; }

/* ListPageV2Template (TechnicalUsers_ListPage): рядок фільтрів одразу під заголовком (MainFilterContainer у MainHeader), реєстр — картка з полями 8px */
.lp.v2 .lp-head .lp-back { margin-right: -8px; }
.lp.v2 .lp-tools { padding: 0 24px 8px 16px; min-height: 0; } /* MainHeader: поля large (24px); перша кнопка фільтра має власний відступ 8px */
.lp.v2 .lp-tools .lp-right { gap: 16px; align-self: flex-start; padding-top: 8px; height: 32px; box-sizing: border-box; align-items: center; }
.lp.v2 .lp-tools .lp-rlabel.b { margin-left: 0; }
.lp.v2 .lp-tools .lp-rbtn { width: 26px; height: 18px; margin-left: 0; }
.lp.v2 .lp-tools .lp-help-tgl { margin-left: 0; }
.lp.v2 .lp-body { padding: 8px; background: transparent; }
.lp.v2 .lp-main { border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, .1); } /* SectionContentWrapper: borderRadius medium → container-border-area */
/* поле з прихованою назвою (labelPosition: hidden): Creatio лишає місце контейнера назви — висота 39.5, текст з y=14.5 («Запропоновані продукти» контрагента) */
.mn .field.vertical.lbl-hidden { padding: 14.5px 0 5px; }
/* crt.ExpansionPanel material/after: шеврон праворуч (16, #0D2E4E), повернутий донизу у згорнутій панелі */
.mn .xpanel.mat .xp-head { gap: 0; }
.mn .xpanel.mat .xp-tools { margin-left: 5px; }
.mn .xp-mat { margin-left: auto; width: 16px; height: 16px; display: inline-flex; color: #0d2e4e; cursor: pointer; transform: rotate(180deg); }
.mn .xp-mat.open { transform: none; }
/* поле-посилання (телефон/e-mail/веб) як у Creatio: іконка 16 у кнопці 20×20 (на 2px нижче рядка), посилання 13/16 з відступом 4 */
.mn .comm-val { align-items: flex-start; gap: 4px; }
.mn .comm-val .comm-ic { margin-top: 2px; align-items: center; justify-content: center; }
.mn .comm-ic svg { width: 16px; height: 16px; }
.mn .comm-val a { line-height: 16px; margin-top: 2px; }
/* комірка сітки з alignItems: stretch — вміст на всю висоту рядка */
.mn .gcs { display: flex; flex-direction: column; min-width: 0; }
.mn .gcs > * { flex: 1 1 auto; }
/* crt.QuickFilter custom на панелі деталі: прапорець 16 (рамка #606060) + підпис 12/16 #606060 з відступом 4 */
.mn .qf-custom { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 2px 0 6px; font: 500 12px/16px var(--c-font); color: #606060; cursor: pointer; white-space: nowrap; }
.mn .qf-custom input { width: 16px; height: 16px; margin: 0; accent-color: var(--c-primary); }
/* crt.FolderTreeActions: «Групи» 12/16 500 #0d2e4e, іконка папки 16, відступ 4, контейнер з padding 1 */
.mn .fta { display: flex; gap: 4px; padding: 1px; font: 500 12px/16px var(--c-font); color: #0d2e4e; }
.mn .fta-btn { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.mn .fta-ic { display: inline-flex; width: 16px; height: 16px; }
.mn .ft-inline { flex: none; align-self: stretch; min-height: 0; }
.mn .ft-panel.ft-inline { border-right: 0; }
.mn .ft-inline .ft-head { box-sizing: border-box; border-bottom: 1px solid #dfdfdf; }

/* дії й вибір рядка таблиці Freedom: «⋮» 24×24 (іконка 16, #0d2e4e) від лівого краю комірки, прапорець 16 через 4px; вибраний рядок #e3ebfa */
.mn .dt.fgrid td.rn .rn-hov { display: none; align-items: center; gap: 4px; }
.mn .dt.fgrid tr:hover td.rn .rn-hov, .mn .dt.fgrid tr.picked td.rn .rn-hov, .mn .dt.fgrid td.rn.rm-on .rn-hov { display: inline-flex; }
.mn .dt.fgrid tr:hover td.rn:has(.rn-hov) .rn-num, .mn .dt.fgrid tr.picked td.rn .rn-num, .mn .dt.fgrid td.rn.rm-on .rn-num { display: none; }
.mn .dt.fgrid tr:hover td.rn:has(.rn-hov), .mn .dt.fgrid tr.picked td.rn, .mn .dt.fgrid td.rn.rm-on { text-align: left; padding: 0; }
.mn .dt.fgrid .rtb { width: 24px; height: 24px; border: 0; padding: 0; background: transparent; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: #0d2e4e; cursor: pointer; vertical-align: middle; }
.mn .dt.fgrid .rtb:hover { background: rgba(0, 0, 0, .04); }
.mn .dt.fgrid td.rn .chk { cursor: pointer; }
.mn .dt.fgrid td.rn .chk.on { background: #004fd6; border-color: #004fd6; }
.mn .dt.fgrid tr.picked:not(:hover) td { background: #e3ebfa; }
.rtm-bd { position: fixed; inset: 0; z-index: 89; }
.dropdown.menu.rtm { position: fixed; top: auto; right: auto; width: max-content; border: 1px solid transparent; }
.dropdown.menu.rtm .opt { position: relative; margin: 0 8px; padding: 10px 16px 10px 40px; }
.dropdown.menu.rtm .opt .mi { position: absolute; left: 16px; top: 12px; display: inline-flex; width: 16px; height: 16px; color: #0d2e4e; }
.mn .cp-dot { color: #606060; }
/* ---- реєстр: шапка й панель фільтрів як у Creatio (crt-button large: іконка 16 + 4, поля 16; кнопки через 8) ---- */
.lp-head .cbtn { gap: 4px; }
.lp-head .cbtn.primary { padding: 0 16px; }
.lp-head .ico16 { display: inline-flex; width: 16px; height: 16px; }
.lp-head > .cbtn ~ .cbtn, .lp-head > .cbtn ~ .rel, .lp-head > .rel ~ .rel, .lp-head > .rel ~ .cbtn { margin-left: -8px; }
/* MainFilterContainer: звичайний реєстр — від краю MainContainer (x 8), відступи — зі схеми; V2 — у шапці (поля 24) */
.lp:not(.v2) .lp-tools { padding-left: 0; padding-right: 0; }
.lp.v2 .lp-tools { padding-left: 24px; }
.lp .lp-tools .lp-left { row-gap: 12px; }
.lp .fta { display: flex; gap: 4px; padding: 1px; font: 500 12px/16px var(--c-font); color: #0d2e4e; }
.lp .fta-btn { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.lp .fta-ic { display: inline-flex; width: 16px; height: 16px; }
/* crt.FilterBuilderToggler — кнопка 32 без полів; швидкі фільтри (довідник, тег, період) — 28 з полями 2; прапорець — 16 через 4, підпис #606060 */
.lp .lp-left .tool.lpt-filter { padding: 0; gap: 4px; }
.lp .lp-left .tool.lpt-qf { height: 28px; padding: 0 2px; gap: 4px; }
.lp .lp-left .tool.lpt-chk { height: 28px; padding: 0 2px; gap: 0; color: #606060; }
.lp .lp-left .tool.lpt-chk .qf-check { width: 16px; height: 16px; border: 2px solid #606060; border-radius: 4px; margin: 0 4px; }
.lp .lp-left .tool.lpt-chk .qf-check.on { background: var(--c-primary); border-color: var(--c-primary); box-shadow: none; }
/* crt-search-filter: 210 (поля 3), іконка 16, поле з +24 шириною 118,5 (+ місце під приховані «×», підказку й групи колонок) */
.lp .lp-left .tool.lpt-search { flex: 1 1 0%; min-width: 156px; max-width: 210px; width: auto; height: 32px; padding: 0 3px; gap: 8px; box-sizing: border-box; color: #0d2e4e; }
.lp .lp-left .tool.lpt-search input { width: 0; min-width: 0; flex: 1 1 auto; margin-right: 61.5px; /* clear 20 + tooltip 24 + groups 17.5 */ font: 500 13px/20px var(--c-font); color: #181818; padding: 2px 0; height: 24px; box-sizing: border-box; }
.lp .lp-left .tool.lpt-search input::placeholder { color: #606060; }
/* праворуч: «Підсумки» 18 (іконка + 4 + підпис, далі 8 і стрілка 16), «Оновити» й перемикач подання — 26×18 (поля 5) */
.lp .lp-right .tool.lpt-sum { height: 18px; padding: 0; gap: 4px; }
.lp .lp-right .tool.lpt-sum .lpt-arrow { display: inline-flex; width: 16px; height: 16px; margin-left: 4px; }
.lp .lp-right .tool.lpt-ico { width: 26px; height: 18px; padding: 0 5px; border-radius: 4px; }
.lp .lp-right .lpt-tg { display: inline-flex; gap: 4px; }
.lp .lp-right .lpt-tg .tool.lpt-ico { border-radius: 8px; }
.lp .lp-right .lpt-tg .tool.tgl-v.on { background: #e3ebfa; color: #0d2e4e; }
.lp:not(.v2) .lp-tools .lp-right { align-self: flex-start; padding-top: 8px; align-items: flex-start; }
/* іконки кнопок реєстру — блоком 16×16 по центру кнопки (у рядку з line-height зсувалися на 2px угору) */
.lp .tool > span > svg, .lp-head .cbtn > span > svg { display: block; }
.lp .lp-left .tool.lpt-search { padding-bottom: 1px; } /* crt-search-input-container 31px */
/* реєстр (crt-data-table): комірки з рамкою 1px прозорою зверху й #dfdfdf знизу, текст #181818, посилання 13/20 500; номер рядка з padding-top 1 */
.lp .dt th, .lp .dt td { border-top: 1px solid transparent; border-bottom: 1px solid #dfdfdf; }
.lp .dt td { color: #181818; }
.lp .dt td a, .lp .dt td a.lnk.ref { font: 500 13px/20px var(--c-font); } /* посилання довідника — 13/20 500, як crt-link у Creatio (було 400 14) */
.lp .dt td.rn { padding-top: 1px; color: #606060; }
/* числова колонка реєстру: значення праворуч із резервом 32 (cell 6 + панель редагування 24 + 2); іконка сортування з полями 0 4 */
.lp .dt.ed td.num { padding-right: 32px; } /* лише з редагуванням у рядку (features.editable.enable ≠ false): + панель 24 */
.lp .dt th.num .hsort .srt { margin: 0 4px; } /* menu-icon з полями 0 4 — і прихована (ширина 0) лишає 8px перед підписом */
.lp .dt th.num .hsort { gap: 0; }
.lp .fta-wrap { display: flex; align-items: center; gap: 4px; }
.lp .fta-clr { display: inline-flex; width: 16px; height: 16px; cursor: pointer; }
.lp-head .cbtn .cb-arrow { margin-left: 4px; } /* меню: після підпису 8px до стрілки (btn-reversible-content padding-right 8) */
.lp:not(.v2) .lp-body { gap: 8px; } /* ContentContainer: gap small між панеллю фільтрів/груп і реєстром */
.lp:not(.v2) .lp-main { padding-bottom: 5px; box-sizing: border-box; } /* crt-toggle-container-item: padding-bottom 5px */
.lp .fb-panel { border-right-color: #e1e5e9; }
/* телефон / e-mail у реєстрі: іконка 16 (поля 2 0), посилання з відступом 8, 13/20 500; веб — без іконки */
.lp .dt .cell-link { gap: 8px; font: 500 13px/20px var(--c-font); }
.lp .dt .ci { width: 16px; height: 16px; margin: 2px 0; }
.lp .dt .ci > svg { display: block; }
.lp .dt .cell-link { display: flex; width: fit-content; max-width: 100%; } /* по центру комірки (inline-flex за базовою лінією — на 1,5px вище) */
.lp .dt .lchip { vertical-align: top; } /* рядок 20px: чип від верху рядка, текст на +2, як у Creatio */
/* смуги прокрутки як у Creatio (body:not([disable-custom-scroll]) ::-webkit-scrollbar): 8px, повзунок видно лише при наведенні на елемент */
body { --scrollbar-color: transparent; --scrollbar-thumb-color: rgb(24 24 24 / 20%); --scrollbar-track-color: rgb(24 24 24 / 5%); }
body ::-webkit-scrollbar { background-color: var(--scrollbar-color); width: 8px; height: 8px; }
body ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); border-radius: 8px; border: 2px solid transparent; min-height: 40px; min-width: 40px; background-clip: content-box; }
body :not(body):not(html)::-webkit-scrollbar-thumb { background-color: transparent; }
body :not(body):not(html):hover::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); }
body ::-webkit-scrollbar-thumb:hover { border: 1px solid transparent; }
body ::-webkit-scrollbar-button { height: 0; width: 0; }
body ::-webkit-scrollbar-track { background-color: transparent; border-radius: 8px; }
body ::-webkit-scrollbar-track:hover { background-color: var(--scrollbar-track-color); }
body ::-webkit-scrollbar-corner { display: none; }
/* швидкий фільтр періоду: іконка 16, підпис із відступом 3 (crt-date-range-caption-container) */
.lp .lp-left .tool.lpt-qf.lpt-dr { gap: 3px; }
/* «+ ⋮» у шапці реєстру: crt-header-toolbar 56×26 з y = верх + 7, кнопки 24 від лівого краю */
.lp .dt th.plus { padding: 0; vertical-align: top; }
.lp .dt th.plus .dt-tb { margin-top: 6px; vertical-align: top; } /* 160 + 1 (рамка) + 6 = 167 */
.lp .dt th.plus .dt-tb > span > svg, .lp .dt th.plus .dt-tb > svg { display: block; }
.lp .tools-row, .lp .lp-tools .lp-left { row-gap: 16px; } /* LeftFilterContainerInner gap medium: рядки фільтрів через 16 (крок 48) */
.lp .lpt-drv { display: inline-flex; gap: 4px; }
.lp .lpt-drv .lpt-po { color: #606060; }
.lp .lp-left .tool.lpt-dr .qf-clear { margin: 0; }
.lp .lp-left .tool.lpt-chk .qf-check { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.lp .lp-left .tool.lpt-chk .qf-check > svg { display: block; flex: none; }
/* чипи вибраних значень швидкого фільтра-довідника (crt-chip): 20px, поля 1 8, радіус 16, фон rgba(139,159,218,.2), 13/20 500 #46506d, «×» 16 з відступом 1,5 */
.lp .lpt-chips { display: inline-flex; gap: 4px; }
.lp .lpt-chip { display: inline-flex; align-items: center; height: 20px; box-sizing: border-box; padding: 1px 8px; border-radius: 16px; background: rgba(139, 159, 218, .2); font: 500 13px/20px var(--c-font); color: rgb(70, 80, 109); white-space: nowrap; }
.lp .lpt-chip-x { display: inline-flex; width: 16px; height: 16px; margin-left: 1.5px; cursor: pointer; }
.lp .lpt-chip-x > svg { display: block; }
/* панель груп (crt-folder-tree): 328 без рамки праворуч, шапка 40 з лінією #dfdfdf знизу; пошук — crt-search-filter (контейнер 31) */
.ft-panel { border-right: 0; }
.ft-head { box-sizing: border-box; border-bottom: 1px solid #dfdfdf; }
.ft-search { margin-top: -1px; }

/* заглушка crt.DataGrid на сторінці (Customer communication hub): поверх таблиці, top 25%; section-data-grid із заглушкою — min-height 280 */
.mn .fgrid-wrap.has-ph { position: relative; }
.mn .fgrid-wrap.section-data-grid.has-ph { min-height: 280px; }
.mn .fgrid-wrap .fg-ph { position: absolute; left: 50%; top: 25%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; padding: 0 24px; z-index: 1; white-space: nowrap; }
.mn .fgrid-wrap .fg-ph .ph-sub.no-title { margin-top: 8px; }
/* розтягнута TabPanel: tab-body (padding 5 24 5) → прокручуваний вміст з відступом 5 знизу (crt-toggle-container-item) */
.mn .tabpanel.stretch > .tab-body { padding-bottom: 5px; }
.mn .tabpanel.stretch > .tab-body > .tb-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; margin-bottom: 5px; }
/* швидкі фільтри сторінки Freedom UI: розмітка і стилі як на панелі реєстру (.lp .lp-left .tool.lpt-qf) */
.mn .lp.pqf, .mn .lp.pqf > .lp-left { display: contents; }
.mn .fgrid-new .fn-ic { display: block; width: 16px; height: 16px; }
.mn .fgrid-new .fn-ic > svg { display: block; }
/* crt-search-filter лише з іконкою: блок 24×32, іконка на +3 / +7.5 (по центру рядка — +3.5 від кнопки 24) */
.mn .btn.icon-only.sf-io { width: 24px; height: 24px; justify-content: flex-start; padding: 3.5px 5px 4.5px 3px; }
.mn .btn.icon-only.sf-io .bi { margin: 0; }
/* бокова панель без шапки вкладки: tab-body padding 5 24 5, вміст прокручується з відступом 5 знизу */
.mn .toggle-panel.no-head { border: 0; display: flex; flex-direction: column; }
.mn .toggle-panel.no-head > .tp-body { flex: 1 1 auto; min-height: 0; padding: 5px 24px; display: flex; flex-direction: column; }
.mn .toggle-panel.no-head > .tp-body > .tb-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; margin-bottom: 5px; }
/* crt-button у колонці не розтягується (ширина за вмістом, max-width 100%) */
.mn .fx-col > .btn:not(.icon-only), .mn .fx-col > .rel > .btn:not(.icon-only) { width: fit-content; max-width: 100%; }
/* кнопка-іконка розміру small (button-size-small): 26×18, padding 0 5 */
.mn .btn.icon-only.sz-small { width: 26px; height: 18px; padding: 0 5px; }
/* кнопка з меню (clickMode menu): стрілка menu-arrow 16 через 8 після підпису */
.mn .btn .mb-arrow { display: inline-flex; width: 16px; height: 16px; margin-left: 4px; }
.mn .btn .mb-arrow > svg { display: block; }
.mn .fx-col > .mbtn { width: fit-content; max-width: 100%; }
/* засоби зв'язку: веб-адреса — іконка 16×16 на +2/+2, посилання з x=26 (crt-input-control padding-left 26) */
.mn .comm-val.web { gap: 0; }
.mn .comm-val.web .comm-ic { width: 16px; height: 16px; margin: 2px 8px 0 2px; }
/* «Додати засіб зв'язку ▾»: стрілка через 8 після підпису */
.mn .comm-add-btn .caret { margin-left: 4px; }
/* посилання довідника в таблицях сторінок (crt-data-table-crt-link): 500 13/20, як у реєстрах */
.mn .dt.fgrid td a.lnk.ref, .mn .dt.fgrid td a.lnk { font: 500 13px/20px var(--c-font); }
/* реєстр без колонки вибору/нумерації (rcW 16): перша колонка — ще +6 зліва (crt-cell padding-left 6), «Журнал активності конфігурації» */
.lp .dt.notb thead th:nth-child(2) { padding-left: 13px; }
.lp .dt.notb tbody td:nth-child(2) { padding-left: 14px; }
/* RightFilterContainer з пошуком («Автопарк»): третя колонка MainFilterContainer (ширина 1/3, проміжок 16), вміст праворуч,
   пошук 156…210 (flex 1 1 0), кнопка оновлення 28×24, по центру рядка 32 */
.lp:not(.v2) .lp-tools .lp-right.rc-search { flex: 0 1 calc((100% + 16px) / 3 - 16px); justify-content: flex-end; align-items: center; height: 32px; padding-top: 0; box-sizing: border-box; min-width: 0; }
.lp:not(.v2) .lp-tools .lp-left { min-height: 32px; } /* LeftFilterContainer — рядок 32 (елементи по центру) */
.lp .lp-right.rc-search .tool.lpt-search { flex: 1 1 0%; min-width: 156px; max-width: 210px; width: auto; height: 32px; padding: 0 3px 1px; gap: 8px; box-sizing: border-box; color: #0d2e4e; }
.lp .lp-right.rc-search .tool.lpt-search input { width: 0; min-width: 0; flex: 1 1 auto; margin-right: 61.5px; font: 500 13px/20px var(--c-font); color: #181818; padding: 2px 0; height: 24px; box-sizing: border-box; }
.lp .lp-right.rc-search .tool.lpt-search input::placeholder { color: #606060; }
.lp .lp-right.rc-search .lp-rbtn { width: 28px; height: 24px; margin-left: 0; padding: 0 6px; }
/* «+ Новий» у реєстрі: рядок 40, іконка 16 + 4, підпис 500 12/16 */
.lp .dt tr.lp-newrow td { height: 40px; padding: 0 0 0 8px; border-bottom: 0; }
.lp .dt tr.lp-newrow:hover td { background: transparent; }
.lp .lp-new { display: inline-flex; align-items: center; gap: 4px; height: 24px; color: var(--c-ink); font: 500 12px/16px var(--c-font); cursor: pointer; }
.lp .lp-new .fn-ic { display: block; width: 16px; height: 16px; }
.lp .lp-new .fn-ic > svg { display: block; }
/* кнопки-іконки RightFilterContainer за розміром Creatio: medium 28×24 (padding 0 6), small 26×18 (padding 0 5) */
.lp .lp-tools .lp-right .tool.lp-rbtn.sz-medium { width: 28px; height: 24px; padding: 0 6px; margin-left: 0; }
.lp .lp-tools .lp-right .tool.lp-rbtn.sz-small { width: 26px; height: 18px; padding: 0 5px; margin-left: 0; }
/* реєстр без заглушки (placeholder): «Немає даних» 500 12/16 #606060 по центру, як crt-data-table без даних (Published MCP servers) */
.lp .dt tr.lp-nodata td { text-align: center; font: 500 12px/16px var(--c-font); color: #606060; padding: 9px 0 15px; border-bottom: 0; height: auto; }
.lp .dt tr.lp-nodata:hover td { background: transparent; }
.mn .toggle-panel.no-head.full { flex: 1 1 auto; width: auto; min-width: 0; align-self: stretch; }
/* ButtonToggleGroup у колонці (шапка «Управління інтерфейсом»): ліворуч, а не праворуч */
.mn .fx-col > .tgl-group { margin-left: 0; }
/* crt-button: ширина за вмістом і в клітинці сітки; розмір small з текстом — 18px, padding 0 4, радіус 4, 500 14/16 */
.mn .gc > .btn:not(.icon-only), .mn .gc > .mbtn { width: fit-content; max-width: 100%; }
.mn .btn.sz-small:not(.icon-only) { height: 18px; padding: 0 4px; border-radius: 4px; gap: 4px; font: 500 14px/16px var(--c-font); }
.mn .gcs > .btn:not(.icon-only), .mn .gcs > .mbtn { flex: none; align-self: flex-start; }
.mn .gc.gfx { display: flex; flex-direction: column; min-width: 0; }
.mn .gc.gfx > div { flex: 1 1 auto; }

/* таблиця форми без колонки керування рядками (без вибору, номерів і панелі дій): перша колонка з відступом 14, як у Creatio */
.mn .dt.fgrid.norc .rn { padding: 0; overflow: hidden; }
.mn .dt.fgrid.norc th:nth-child(2), .mn .dt.fgrid.norc td:nth-child(2) { padding-left: 14px; }
/* columns.toolbar: false — без резерву під панель колонки (24) */
.mn .dt.fgrid.nocoltb th.num { padding-right: 9px; }
.mn .dt.fgrid.nocoltb th .hc { max-width: calc(100% - 21px); }
/* кнопка extra-large (crt-button): висота 40, поля 0 16, радіус 4, 500 14/16, іконка 16 + 4 */
.mn .btn.sz-extra-large:not(.icon-only) { height: 40px; padding: 0 16px; border-radius: 4px; gap: 4px; font: 500 14px/16px var(--c-font); width: fit-content; }
/* таблиця в клітинці сітки (rowSpan 1): без нижнього поля 8, +1 під таблицею, як crt-data-table-container (Управління інтерфейсом: 120 → 121) */
.mn .gc > .fgrid-wrap:not(.in-grid) { margin-bottom: 0; }
.mn .gc > .fgrid-wrap:not(.in-grid) > .fgrid-scroll { padding-bottom: 1px; }
/* crt.Link */
.mn .crt-link-host { display: flex; min-width: 0; }
.mn a.crt-link { display: block; color: #004fd6; text-decoration: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn a.crt-link.und-always, .mn a.crt-link.und-hover:hover { text-decoration: underline; }
/* вкладки сторінки без stretch (mode tab): панель росте за вмістом, прокручується MainContainer (смуга 8px), як у Creatio
   (AISkills_FormPage: CenterContainer 2423 у MainContainer 900 з overflow auto); раніше flex 1 1 0 обрізав довгий вміст */
.mn .tabpanel:not(.stretch) { flex: 1 0 auto; }
.mn .xpanel.closed .xp-head { margin-bottom: 0; } /* згорнута панель: 8 + заголовок 32 + 8 = 48, як у Creatio */
/* crt.IFrame */
.mn .crt-iframe { display: flex; flex-direction: column; min-width: 0; }
.mn .crt-iframe .iframe-container { flex: 1 1 auto; display: flex; min-height: 0; }
.mn .crt-iframe iframe.responsive-iframe { flex: 1 1 auto; width: 100%; height: 100%; border: 0; display: block; }
.mn .crt-iframe.empty { align-items: center; justify-content: center; }
.mn .crt-iframe .ifr-ph { text-align: center; }
.mn .crt-iframe .ifr-ph-t { font: 500 14px/20px var(--c-font); color: #181818; }
.mn .crt-iframe .ifr-ph-s { font: 400 12px/16px var(--c-font); color: #606060; margin-top: 8px; }
/* вкладка з розтягнутим iFrame (EmailFormPage: тіло листа) — вміст стовпцем, iFrame займає решту висоти (як tab-body flex-full-height) */
.mn .tabpanel > .tab-body:has(> .crt-iframe) { display: flex; flex-direction: column; }
.mn .f-tipwrap.pw .pw-eye { cursor: pointer; }
.mn .f-tipwrap.pw input { height: 20px; padding: 0; border: 0; outline: none; background: transparent; font: 500 13px/20px var(--c-font); color: #181818; min-width: 0; flex: 1; }
.mn .f-tipwrap.pw .pw-eye { align-self: flex-start; margin-top: 2px; }
/* багаторядкове поле: іконка підказки біля першого рядка (зверху + 2), як у Creatio (Опис моделі LLM) */
.mn .f-tipwrap:has(> textarea) { align-items: flex-start; }
.mn .f-tipwrap:has(> textarea) > .f-tip { margin-top: 2px; }
/* хронологія як у Creatio: crt-timeline margin 0 1px; панель фільтрів + 16; місяць 20 + 28 до плитки;
   роздільник автора й дати — div.separator: лінія 1×12 #606060 (border-left), margin-top 4, проміжки 8 */
.mn .tl2 { margin: 0 1px; }
.mn .tl2 > .tl-filters, .mn .tl2 > .tl-bar { margin-bottom: 16px; }
.mn .tl-month { margin-bottom: 28px; }
.mn .tl-sep { width: 0; height: 12px; border-left: 1px solid #606060; margin-top: 4px; flex: none; align-self: flex-start; }
.mn .tl-l2 { align-items: flex-start; }

/* Хронологія: поля плитки (+48 від заголовка, рядок 16+4+20, проміжок 8), між плитками 40 */
.mn .tl-fields { margin-top: 8px; gap: 8px; }
.mn .tl-fields.grid { row-gap: 8px; }
.mn .tl-v { margin-top: 4px; }
.mn .tl-tile { margin-bottom: 40px; }
.mn .tl-month { text-transform: capitalize; }
.mn .comm-val.email { gap: 6px; }
.mn .comm-val.email .comm-ic { margin-top: 0; }
/* панель фільтрів хронології: «Вибрати період» на 1px ближче до іконки; праві кнопки +1px і на 0,5px вище (як у Creatio) */
.mn .tl-qf.tl-per label { margin-left: -1px; }
.mn .tl-bar { padding-right: 10px; }
.mn .tl-bar > .tl-ib, .mn .tl-bar > .tl-sort { position: relative; top: -0.5px; }
/* crt-indicator-widget з заливкою, підпис над значенням: analytics-widget 82 = рамка 1 + 8 + заголовок 18 + (9 + 36 + 9) + 1; значення з x+18 (заголовок +17) */
.mn .widget.fill.lpau .v { margin-left: 1px; }
.mn .stage .caret.ic { display: inline-flex; width: 16px; height: 16px; opacity: 1; flex: none; }
/* crt.Checkbox, підпис над прапорцем (label-position-above): підпис +8, прапорець одразу під ним (+24), без вертикального центрування */
.mn .field.vertical:has(> input[type=checkbox]) { grid-template-rows: 16px 16px; align-items: start; align-content: start; }
.mn .field.vertical > input[type=checkbox] { margin: 0; }
/* бокова панель картки (crt-toggle-container): шапка 48 (padding 12 24, інструменти розтягуються, «закрити» 28×24 з іконкою 16 одразу за ними), вміст tab-body padding 5 24 */
.mn .tp-head { padding: 12px 24px; gap: 0; }
.mn .tp-head > .sp { display: none; }
.mn .tp-head > button:last-child { margin-left: auto; flex: none; }
.mn .tp-body { padding: 5px 24px 10px; }
/* файл у галереї: властивості з відступом 8 зверху; розмір — решта рядка (margin 8 + padding 8), праворуч; задовгий виходить за край */
.mn .fl-props { align-items: flex-start; padding-top: 8px; box-sizing: border-box; gap: 0; }
.mn .fl-props > span + span { flex: 1 1 0; min-width: 0; margin-left: 8px; padding-left: 8px; text-align: right; overflow: visible; }
.mn .field .req { color: #d2310d; }
.mn .field.auto > label.lbl-req { position: relative; padding-right: 8px; box-sizing: border-box; }
.mn .field.auto > label.lbl-req > .req.abs { position: absolute; right: 0; top: -2px; font: 500 12px/16px var(--c-font); }
/* crt.ImageInput (зображення запису) */
.mn .crt-imgin { position: relative; flex: none; }
.mn .crt-imgin > .ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #e3ebfa; color: #fff; box-sizing: border-box; }
.mn .crt-imgin > .im { display: block; width: 100%; height: 100%; }
.mn .crt-imgin > .acts { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: rgba(255,255,255,.9); opacity: 0; transition: opacity .15s; }
.mn .crt-imgin:hover > .acts { opacity: 1; }
.mn .crt-imgin .ib { width: 26px; height: 18px; padding: 0 5px; border: 0; border-radius: 4px; background: transparent; color: #0d2e4e; cursor: pointer; display: grid; place-items: center; }
.mn .crt-imgin .ib:hover { background: rgba(0,79,214,.08); }
/* crt.AllowedResults: підпис (12/16, margin 8 0 4, ellipsis), пункти body-2 13/20 500, іконка 15×15 + 10, наведення — колір посилання */
.mn .allowed-results { display: flex; flex-direction: column; }
.mn .allowed-results .ar-lc { display: flex; min-width: 0; }
.mn .allowed-results .ar-l { font: 500 12px/16px var(--c-font); color: #606060; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 8px 0 4px; padding-right: 8px; position: relative; }
.mn .allowed-results .ar-l.req::after { content: "*"; position: absolute; right: 0; top: 0; color: #d2310d; }
.mn .allowed-results .ar-item { display: flex; align-items: center; cursor: pointer; font: 500 13px/20px var(--c-font); color: #181818; outline: none; }
.mn .allowed-results .ar-item:hover, .mn .allowed-results .ar-item:focus-visible { color: #004fd6; }
.mn .allowed-results .ar-ic { width: 15px; height: 15px; margin-inline-end: 10px; display: inline-flex; flex: none; }
/* crt.ColorPicker */
.mn .cp-wrap { padding-top: 8px; display: flex; flex-direction: row; align-items: baseline; position: relative; min-height: 32px; box-sizing: border-box; }
.mn .cp-wrap.lp-above { flex-direction: column; min-height: 52px; align-items: stretch; }
.mn .cp-wrap.lp-above .cp-lc { width: 100%; display: flex; text-align: left; }
.mn .cp-wrap:not(.lp-above) .cp-lc { text-align: right; width: 136px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 9px 10px 4px 0; }
.mn .cp-l { font: 500 12px/16px var(--c-font); color: #606060; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; display: block; }
.mn .cp-base { position: relative; flex-shrink: 0; height: 16px; }
.mn .cp-base::before { content: "|"; color: transparent; display: inline-block; }
.mn .cp-cc { display: flex; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.mn .cp-box { display: block; box-sizing: border-box; width: 16px; height: 16px; border-radius: 4px; border: 2px solid #606060; cursor: pointer; }
.mn .cp-btn { width: 16px; height: 16px; margin-left: 5px; padding: 0; border: 0; background: transparent; color: #0d2e4e; cursor: pointer; display: grid; place-items: center; }
.mn .cp-wrap.ro .cp-box, .mn .cp-wrap.ro .cp-btn, .mn .cp-wrap.ro .cp-l { cursor: default; }
.cp-tr { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) 0 0 / 10px; }
.cp-ovl { position: fixed; inset: 0; z-index: 2000; }
.cp-github { position: fixed; display: flex; flex-wrap: wrap; padding: 5px; box-sizing: content-box; background: #fff; border: 1px solid rgba(0,0,0,.2); border-radius: 4px; box-shadow: 0 3px 12px rgba(0,0,0,.15); }
.cp-github .cp-sw { width: 25px; height: 25px; margin: 2px; box-sizing: border-box; cursor: pointer; }
.cp-github .cp-sw:hover { outline: 2px solid #fff; box-shadow: 0 0 5px 2px rgba(0,0,0,.25); position: relative; z-index: 1; }
.cp-sketch { position: fixed; width: 200px; padding: 10px 10px 0; box-sizing: initial; background: #fff; border-radius: 4px; box-shadow: rgba(0,0,0,.15) 0 0 0 1px, rgba(0,0,0,.15) 0 8px 16px; font-family: var(--c-font); }
.cp-sat { width: 100%; padding-bottom: 75%; position: relative; overflow: hidden; cursor: crosshair; }
.cp-sat-w, .cp-sat-b { position: absolute; inset: 0; }
.cp-sat-w { background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.cp-sat-b { background: linear-gradient(to top, #000, rgba(0,0,0,0)); }
.cp-sat-p { position: absolute; width: 4px; height: 4px; border-radius: 50%; transform: translate(-2px, -2px); box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4); pointer-events: none; }
.cp-ctrl { display: flex; }
.cp-sliders { padding: 4px 0; flex: 1; }
.cp-hue, .cp-alpha { position: relative; height: 10px; overflow: visible; cursor: pointer; }
.cp-hue { background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
.cp-alpha { margin-top: 4px; }
.cp-alpha-g { position: absolute; inset: 0; }
.cp-ptr { position: absolute; top: 1px; width: 4px; height: 8px; margin-left: -2px; border-radius: 1px; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.6); pointer-events: none; }
.cp-prev { width: 24px; height: 24px; position: relative; margin-top: 4px; margin-left: 4px; border-radius: 3px; overflow: hidden; }
.cp-prev > div { position: absolute; inset: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25); }
.cp-fields { display: flex; padding-top: 4px; }
.cp-f { flex: 1; padding-left: 6px; display: flex; flex-direction: column; align-items: center; }
.cp-f.cp-hex { flex: 2; padding-left: 0; }
.cp-f input { width: 80%; padding: 4px 10% 3px; border: 0; box-shadow: inset 0 0 0 1px #ccc; font-size: 11px; text-align: left; font-family: inherit; }
.cp-f span { display: block; text-align: center; font-size: 11px; color: #222; padding-top: 3px; padding-bottom: 4px; text-transform: capitalize; }
.cp-presets { display: flex; flex-wrap: wrap; margin: 0 -10px; padding: 10px 0 0 10px; border-top: 1px solid #eee; }
.cp-pre { width: 16px; height: 16px; margin: 0 10px 10px 0; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); cursor: pointer; }
/* crt.MessageComposerSelector над хронологією: поле (рамка 1 #dfdfdf, радіус 8, padding 16 0 16 16, мін. 52), вибір «Стрічка»/«Email» (outline), «Надіслати» (зелена) */
.mn .mcs { padding: 8px 0 8px; }
.mn .mcs-in { padding-bottom: 11px; }
.mn .mcs-ed { min-height: 52px; max-height: 547px; overflow-y: auto; box-sizing: border-box; padding: 16px 0 16px 16px; border: 1px solid #dfdfdf; border-radius: 8px; font: 500 13px/20px var(--c-font); color: #181818; outline: none; position: relative; white-space: pre-wrap; word-break: break-word; min-height: 64px; }
.mn .mcs-ed:focus { border-color: #004fd6; }
.mn .mcs-ed.empty::before { content: attr(data-ph); position: absolute; left: 16px; top: 16px; color: #919191; font: 13px/20px var(--c-font); pointer-events: none; }
.mn .mcs-foot { display: flex; align-items: center; height: 32px; margin-top: 7px; }
.mn .mcs-foot > .sp { flex: 1; }
.mn .mcs-sel { height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid rgba(13,46,78,.12); border-radius: 4px; background: #f7f8fb; color: #001c5a; font: 500 14px/16px var(--c-font); cursor: pointer; margin-right: 4px; }
.mn .mcs-sel:hover { background: #eef1f8; }
.mn .mcs-ic { display: inline-flex; width: 16px; height: 16px; }
.mn .mcs-sel .mcs-cap { margin-left: 4px; padding-right: 8px; }
.mn .mcs-sel .mcs-ar { display: inline-flex; width: 16px; height: 16px; }
.mn .mcs-send { height: 32px; padding: 0 16px; margin-left: 8px; border: 0; border-radius: 4px; background: #0b8500; color: #fff; font: 500 14px/16px var(--c-font); cursor: pointer; }
.mn .mcs-send:hover { background: #097300; }
.mn .mcs-send:disabled { opacity: .6; cursor: default; }
.mn .mcs-dd .opt { display: flex; align-items: center; gap: 8px; }
/* Хронологія: блок інструментів (поле повідомлення) — відступ 20, лінія #dfdfdf, ще 20 до фільтрів; чип довідника з кольором */
.mn .tl-tools { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #dfdfdf; }
.mn .tl-lchip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 16px; font: 500 13px/20px var(--c-font); max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* crt.FunnelWidget */
.chart-widget.funnel-w { display: flex; flex-direction: column; }
.chart-widget.funnel-w .fw-body { display: flex; flex-direction: column; padding: 0 5px 5px; }
.chart-widget.funnel-w .fw-btns { display: flex; justify-content: center; padding-top: 28px; flex: none; }
.chart-widget.funnel-w .fw-btn { height: 32px; padding: 0 12px; border: 0; border-radius: 2px; background: transparent; color: #004fd6; font: 500 13px/32px var(--c-font); text-transform: uppercase; cursor: pointer; }
.chart-widget.funnel-w .fw-btn.on { background: #004fd6; color: #fff; }
.chart-widget.funnel-w .fw-btn:not(.on):hover { background: rgba(0,79,214,.06); }
.chart-widget.funnel-w .fw-chart { position: relative; flex: 1; min-height: 0; margin-top: 10px; }
.chart-widget.funnel-w .fw-chart canvas { display: block; width: 100%; height: 100%; }
.chart-widget.funnel-w .fw-tip { position: absolute; z-index: 5; background: #fff; border: 1px solid; border-radius: 4px; box-shadow: 0 3px 6px #00000029; display: grid; grid-gap: 8px; min-width: 112px; padding: 8px 12px; pointer-events: none; font: 500 12px/16px var(--c-font); color: #181818; }
.chart-widget.funnel-w .fw-ti { display: flex; justify-content: space-between; gap: 12px; }
.chart-widget.funnel-w .fw-ti .t { color: #606060; }
/* crt.NextBestOffer / crt.ListWidget */
.mn .crt-nbo .nbo-tb { display: flex; align-items: center; min-height: 24px; }
.mn .crt-nbo .nbo-car { padding: 8px 0; }
.mn .crt-nbo .blank-slate-wrap { display: flex; align-items: center; justify-content: center; min-height: 80px; }
.mn .crt-nbo .blank-slate-label { font: 500 13px/20px var(--c-font); color: #606060; }
.chart-widget.list-widget { display: flex; flex-direction: column; }
.chart-widget.list-widget .lw-body { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
/* crt.ChipList, crt.AiCapabilitiesTree, crt.ChannelChatPreview, crt.Conversation */
.mn .crt-chiplist { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.mn .crt-chiplist.nowrap { flex-wrap: nowrap; overflow: hidden; }
.mn .crt-chip { display: inline-flex; align-items: center; height: 20px; padding: 1px 8px; border-radius: 16px; background: rgba(13,46,78,.12); color: #0d2e4e; font: 500 13px/20px var(--c-font); white-space: nowrap; box-sizing: border-box; }
.mn .crt-chip-x { margin-left: 6px; cursor: pointer; opacity: .7; }
.mn .ai-cap-tree { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 8px 0; }
.mn .ai-cap-empty, .mn .chat-preview-empty, .mn .conv-empty { font: 500 13px/20px var(--c-font); color: #606060; }
.mn .chat-preview { display: flex; align-items: center; justify-content: center; border: 1px dashed #dfdfdf; border-radius: 8px; }
.mn .crt-conversation { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; min-height: 120px; }
.mn .conv-msg { max-width: 70%; padding: 8px 12px; border-radius: 12px; background: #f4f6fa; font: 500 13px/20px var(--c-font); color: #181818; align-self: flex-start; }
.mn .conv-msg.out { align-self: flex-end; background: #e8f0ff; }
.mn .conv-date { font: 500 11px/16px var(--c-font); color: #606060; margin-top: 2px; }
.fb-btn > span > svg { display: block; } /* іконка кнопки по центру рядка 32px, як mat-icon у Creatio */
/* Календар: права панель як crt-search-filter (розгорнутий пошук 210: іконка 16+4, поле 24, «×» 16+4, підказка 20+4, колонки 16, лінія знизу) і кнопки 32×32 з відступом 8 */
.lp:not(.v2) .lp-tools.cal { padding-right: 16px; }
/* «×», підказка та вибір колонок з'являються лише при введенні/фокусі (у Creatio за замовчуванням видно тільки лупу) */
.lp-tools.cal .cal-search:not(:focus-within):not(.has-val) .cs-x, .lp-tools.cal .cal-search:not(:focus-within):not(.has-val) .cs-tip, .lp-tools.cal .cal-search:not(:focus-within):not(.has-val) .cs-cols { visibility: hidden; }
.lp:not(.v2) .lp-tools.cal .lp-right { padding-top: 0; height: 32px; align-items: center; gap: 8px; }
.lp-tools.cal .cal-search { width: 210px; height: 32px; box-sizing: border-box; padding: 0 3px; display: flex; align-items: center; gap: 0; position: relative; color: #0d2e4e; border: 0; background: transparent; }
.lp-tools.cal .cal-search::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 2px; height: 1px; background: #dfdfdf; }
.lp-tools.cal .cal-search .cs-ic { display: inline-flex; width: 16px; height: 16px; margin-right: 4px; }
.lp-tools.cal .cal-search input { flex: 1 1 0; min-width: 0; height: 24px; box-sizing: border-box; padding: 2px 0; margin-left: 4px; border: 0; background: transparent; font: 500 13px/20px var(--c-font); color: #181818; outline: none; }
.lp-tools.cal .cal-search input::placeholder { color: #606060; }
.lp-tools.cal .cal-search .cs-x { display: inline-flex; width: 16px; height: 16px; margin-right: 4px; cursor: pointer; color: #606060; }
.lp-tools.cal .cal-search .cs-tip { display: inline-flex; width: 20px; height: 20px; margin-right: 4px; color: #0d2e4e; }
.lp-tools.cal .cal-search .cs-cols { display: inline-flex; width: 16px; height: 16px; margin-right: 1.5px; cursor: pointer; }
.lp-tools.cal .tool.icon.cal-ib { width: 32px; height: 32px; padding: 0 8px; margin: 0; display: grid; place-items: center; }
.lp-tools.cal .tool.icon.cal-ib > span { width: 16px; height: 16px; display: block; }
/* Панель дій рядка списку (crt-toolbar-cell): при наведенні або виборі — «⋮» 24×24 і прапорець 16 (замість номера);
   рядок у фокусі/обраний — фон #eff4fb; «+» між рядками (crt-insert-item-button) при наведенні на комірку номера */
.lp .dt td.rn { position: relative; }
.lp .dt td.rn .rn-hov { display: none; align-items: center; height: 24px; }
.lp .dt tr:hover td.rn .rn-hov, .lp .dt tr.picked td.rn .rn-hov, .lp .dt td.rn.rm-on .rn-hov { display: inline-flex; }
.lp .dt tr:hover td.rn:has(.rn-hov) .rn-num, .lp .dt tr.picked td.rn .rn-num, .lp .dt td.rn.rm-on .rn-num { display: none; }
.lp .dt tr:hover td.rn:has(.rn-hov), .lp .dt tr.picked td.rn, .lp .dt td.rn.rm-on { text-align: left; padding: 0; vertical-align: top; }
.lp .dt td.rn .rn-hov { position: absolute; left: 0; top: 7px; }
.lp .dt .rtb { width: 24px; height: 24px; border: 0; padding: 0; background: transparent; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: #0d2e4e; cursor: pointer; flex: none; }
.lp .dt .rtb:hover { background: rgba(0, 0, 0, .04); }
.lp .dt .rtb svg { display: block; }
.lp .dt td.rn .rn-hov .chk { margin-left: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lp .dt .chk.on { background: #004fd6; border-color: #004fd6; }
.lp .dt th.rn .chk.hchk { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lp .dt th.rn .chk.mixed { background: #004fd6; border-color: #004fd6; }
.lp .dt th.rn .chk .mix { display: block; width: 9.5px; height: 2px; background: #fff; }
.lp .dt tr.picked td, .lp .dt tr.rm-row td { background: #eff4fb; }
.lp .dt td.rn .rn-ins { display: none; position: absolute; left: 0; bottom: -9px; width: 48px; height: 16px; z-index: 2; cursor: pointer; }
.lp .dt td.rn .rn-ins > span { position: absolute; left: 6px; top: 1px; width: 12px; height: 12px; color: #004fd6; }
.lp .dt td.rn .rn-ins > span svg { display: block; width: 12px; height: 12px; }
.lp .dt td.rn:hover .rn-ins { display: block; }
.dropdown.menu.rtm.lp-rtm { min-width: 232px; box-sizing: border-box; }
/* Панель масових дій (crt-bulk-actions): bottom 20, по центру, фон rgba(24,24,24,.8), рамка 1px rgba(24,24,24,.1), радіус 4, тінь 0 2px 4px;
   ручка 16, лічильник і «обрано» 14/16 білий 60%, дії — кнопки 24 з іконкою 16 і підписом 14/16 білим, контейнер дій з бічними лініями */
.bulk-panel { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; pointer-events: none; z-index: 5; }
.bulk { pointer-events: auto; max-width: 80%; box-sizing: border-box; display: flex; align-items: center; height: 42px; padding: 8px 8px 8px 0; background: rgba(24, 24, 24, .8); border: 1px solid rgba(24, 24, 24, .1); border-radius: 4px; box-shadow: 0 2px 4px rgba(24, 24, 24, .1); color: #fff; font: 500 14px/16px var(--c-font); }
.bulk .bk-drag { display: inline-flex; width: 16px; height: 16px; cursor: move; flex: none; }
.bulk .bk-drag svg { display: block; }
.bulk .bk-n { min-width: 18px; text-align: right; margin-right: 4px; color: rgba(255, 255, 255, .6); white-space: nowrap; flex: none; }
.bulk .bk-l.resp { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bulk .bk-stub-c { width: 0; display: flex; overflow: hidden; }
.bulk .bk-stub { display: flex; }
.bulk .bk-l { padding-right: 6px; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.bulk .bk-acts { display: flex; align-items: center; height: 24px; margin: 0 8px; padding: 0 8px; border-left: 1px solid rgba(255, 255, 255, .1); border-right: 1px solid rgba(255, 255, 255, .1); min-width: 0; }
.bulk .bk-btn { height: 24px; border: 0; background: transparent; color: #fff; border-radius: 4px; padding: 0 8px 0 16px; box-sizing: border-box; display: inline-flex; align-items: center; font: inherit; cursor: pointer; white-space: nowrap; flex: none; }
.bulk .bk-btn:hover, .bulk .bk-arr:hover, .bulk .bk-btn.on, .bulk .bk-arr.on { background: rgba(255, 255, 255, .1); }
.bulk .bk-ic { display: inline-flex; width: 16px; height: 16px; margin-right: 4px; }
.bulk .bk-ic:empty { display: none; }
.bulk .bk-ic svg, .bulk .bk-more svg, .bulk .bk-close svg, .bulk .bk-arr svg { display: block; width: 16px; height: 16px; }
.bulk .bk-cap { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.bulk .bk-split { display: inline-flex; align-items: center; height: 24px; flex: none; }
.bulk .bk-split .bk-btn { border-radius: 4px 0 0 4px; }
.bulk .bk-dv { width: 0; height: 16px; border-right: 1px solid rgba(255, 255, 255, .7); }
.bulk .bk-arr { height: 24px; width: 32px; border: 0; background: transparent; color: #fff; border-radius: 0 4px 4px 0; padding: 0 8px; display: inline-flex; align-items: center; cursor: pointer; }
.bulk .bk-more { width: 28px; padding: 0 6px; }
.bulk .bk-close { width: 28px; padding: 0 6px; }
.dropdown.menu.rtm.bk-menu { transform: translateY(-100%); min-width: 232px; box-sizing: border-box; }
/* вибір тегу / статичної групи для масової дії */
.cdlg.bk-pick { width: 450px; padding: 24px 32px; }
.bkp-h { font: 500 16px/24px var(--c-font); color: #0d2e4e; margin-bottom: 12px; }
.bkp-search { display: flex; align-items: center; gap: 8px; height: 32px; border-bottom: 1px solid #dfdfdf; color: #0d2e4e; margin-bottom: 8px; }
.bkp-search svg { width: 16px; height: 16px; }
.bkp-search input { flex: 1; border: 0; outline: none; font: 500 13px/20px var(--c-font); color: #181818; background: transparent; }
.bkp-list { max-height: 320px; overflow: auto; margin: 0 -8px; }
.bkp-it { padding: 10px 8px; font: 500 14px/20px var(--c-font); color: #181818; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.bkp-it:hover { background: #eff4fb; }
.bkp-it.bkp-new { color: #004fd6; }
.bkp-it .bkp-ic { display: inline-flex; width: 16px; height: 16px; }
.bkp-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.bkp-empty { padding: 10px 8px; font: 500 12px/16px var(--c-font); color: #606060; }
.lp .dt th.rn .chk.hchk { margin-right: -4px; } /* crt-data-table-all-rows-selection-indicator: 4px від правого краю комірки */

/* «Задачі за бізнес-процесами»: список режимів (Terrasoft.ListView: 125+, рядки 38 + рамка 2, підсвітка #e4ebfa), «Дії» групової задачі */
.nt-mode { position: relative; flex: none; }
.nt-listview { position: absolute; left: 1px; top: 29px; min-width: 125px; box-sizing: border-box; background: #fff; border-radius: 2px; z-index: 10000; text-align: left;
  box-shadow: rgba(0,0,0,.12) 0 0 2px, rgba(0,0,0,.24) 0 2px 4px; }
.nt-listview ul { margin: 0; padding: 0; list-style: none; overflow: hidden; }
.nt-listview li { border: 2px solid transparent; padding: 0 24px 0 8px; font: 14px/38px 'Bpmonline Open Sans', var(--c-font); color: #444; white-space: nowrap; cursor: pointer; }
.nt-listview li.listview-selected { background: #e4ebfa; }
.nt-lv-bd { position: fixed; inset: 0; z-index: 9999; }
.nt-task { position: relative; }
.nt-act { position: absolute; right: 0; top: 7px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font: 14px/20px 'Bpmonline Open Sans', var(--c-font); color: #4e7bd8; cursor: pointer; visibility: hidden; opacity: 0; }
.nt-task:hover .nt-act, .nt-task.nt-sel-item .nt-act { visibility: visible; opacity: 1; transition: opacity .2s .1s; }
.nt-act-dd { top: 100%; right: 0; left: auto; min-width: 180px; color: #444; }
.nt-pick { width: 420px; }
.nt-pick-h { font: 500 18px/24px var(--c-font); color: #0d2e4e; margin-bottom: 12px; }
.nt-pick-q { width: 100%; box-sizing: border-box; height: 32px; border: 0; border-bottom: 1px solid #d3d3d3; outline: none; font: 14px 'Bpmonline Open Sans', var(--c-font); margin-bottom: 8px; }
.nt-pick-l { max-height: 320px; overflow: auto; }
.nt-pick-i { padding: 8px 4px; font: 14px/20px 'Bpmonline Open Sans', var(--c-font); color: #4e7bd8; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.nt-pick-i:hover { background: #f1f4f9; }