/* Оформление центральных панелей по изображениям в School CRM / FigJam.
   HolliHop: 1:648, 1202:2737. Параплан: 45:542, 55:565.
   Цвета крупных поверхностей взяты из растров; точные токены шрифтов в доске
   отсутствуют. Arial/локальный Roboto — близкие доступные гарнитуры.
   Скриншоты не показывают боковую навигацию: её геометрия остаётся штатной.
   Этот файл не содержит правил для оформления Via. */
body[data-demo-skin="hollihop"] {
    --demo-accent: #4aa9e9;
    --demo-accent-dark: #368ece;
    --demo-accent-soft: #eaeef3;
    --demo-ink: #454b50;
    --demo-line: #d4dbe2;
    --demo-muted: #7a8086;
    --bs-body-font-family: Arial, sans-serif;
    --skin-panel-bg: #ffffff;
    --skin-table-well: #eaeef3;
    --skin-table-row: #f7f7f7;
    --skin-row-hover: #edf5fc;
    --skin-rule: #e1e1e1;
    --skin-control-height: 31px;
    --skin-control-radius: 3px;
    --skin-row-padding: 10px 12px;
    --skin-header-color: #6d7074;
    --skin-heading-bg: #eaeef3;
    --skin-heading-size: 18px;
    color: var(--demo-ink);
    font-family: var(--bs-body-font-family);
}
body[data-demo-skin="proplan"] {
    --demo-accent: #3938a2;
    --demo-accent-dark: #2d2c88;
    --demo-accent-soft: #f4f5f7;
    --demo-ink: #73797e;
    --demo-line: #e1e2e4;
    --demo-muted: #8a9096;
    --bs-body-font-family: Roboto, Arial, sans-serif;
    --skin-panel-bg: #ffffff;
    --skin-table-well: #f4f5f7;
    --skin-table-row: #ffffff;
    --skin-row-hover: #fafafe;
    --skin-rule: #eceef0;
    --skin-control-height: 42px;
    --skin-control-radius: 4px;
    --skin-row-padding: 20px 22px;
    --skin-header-color: #888d91;
    --skin-heading-bg: #ffffff;
    --skin-heading-size: 21px;
    color: var(--demo-ink);
    font-family: var(--bs-body-font-family);
}

/* Штатные таблицы и элементы формы. Внешние таблицы компоновки не меняются. */
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase {
    color: var(--demo-ink);
    font-family: var(--bs-body-font-family);
}
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .page-content {
    color: var(--demo-ink);
    background: var(--skin-table-well);
}
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .container-fluid > div:has(> .head-table) {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0;
}
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .head-table + div { min-width: 0; }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .head-table + div:has(> .demo-skin-filter-grid) { flex-direction: column; }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .head-table + div > div:last-child { min-width: 0; }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .head-table {
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--skin-panel-bg);
    border-bottom: 1px solid var(--skin-rule);
}
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .table {
    --bs-table-bg: var(--skin-table-row);
    --bs-table-hover-bg: var(--skin-row-hover);
    --bs-table-hover-color: var(--demo-ink);
    color: var(--demo-ink);
    background: var(--skin-table-row);
    border-color: var(--skin-rule);
    font-family: inherit;
    font-size: 13px;
}
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .table > :not(caption) > * > * {
    padding: var(--skin-row-padding);
    border-color: var(--skin-rule);
    vertical-align: middle;
}
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .table > thead > tr > th {
    --bs-table-bg: #ffffff;
    color: var(--skin-header-color);
    background: #ffffff;
    font-weight: 500;
}
body[data-demo-skin="hollihop"] #workSpase .table > thead > tr > th { font-weight: 600; }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .table-responsive { background: var(--skin-table-well); }
body[data-demo-skin="proplan"] #workSpase .table-responsive > .table { margin: 0; border: 1px solid var(--skin-rule); }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase :is(.form-control,.form-select) {
    min-height: var(--skin-control-height);
    border: 1px solid var(--demo-line);
    border-radius: var(--skin-control-radius);
    background-color: #ffffff;
    color: var(--demo-ink);
    font-family: inherit;
    font-size: 13px;
    box-shadow: none;
}
body[data-demo-skin="hollihop"] #workSpase :is(.form-control,.form-select) { padding-top: 5px; padding-bottom: 5px; }
body[data-demo-skin="proplan"] #workSpase :is(.form-control,.form-select) { padding-top: 10px; padding-bottom: 10px; }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase :is(.form-control,.form-select):focus {
    border-color: var(--demo-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb,var(--demo-accent) 15%,transparent);
}
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase :is(.btn-primary,.btn-light,.btn-secondary) {
    min-height: var(--skin-control-height);
    border-radius: var(--skin-control-radius);
    font-family: inherit;
    font-size: 13px;
    box-shadow: none;
}
body[data-demo-skin="hollihop"] #workSpase .btn-primary {
    border-color: #4aa9e9;
    background: #4aa9e9;
    color: #ffffff;
}
body[data-demo-skin="proplan"] #workSpase .btn-primary {
    border: 1px solid var(--demo-line);
    background: #ffffff;
    color: #3938a2;
    font-weight: 600;
    box-shadow: 0 2px 3px rgba(30,34,45,.04);
}
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .btn-primary:hover {
    border-color: var(--demo-accent);
    background: var(--demo-accent-dark);
    color: #ffffff;
}
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase :is(.btn-light,.btn-secondary) {
    border: 1px solid var(--demo-line);
    background: #ffffff;
    color: var(--demo-muted);
}
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase :is(a:not(.btn),.text-primary) { color: var(--demo-accent); }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase input:is([type="checkbox"],[type="radio"]) { accent-color: var(--demo-accent); }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .bg-primary { background-color: var(--demo-accent) !important; }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .page-item.active .page-link { background: var(--demo-accent); border-color: var(--demo-accent); color: #ffffff; }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .page-link { color: var(--demo-accent); border-color: var(--demo-line); background: #ffffff; }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase td.square {
    min-width: 34px;
    width: 34px;
    padding: 6px !important;
    background: var(--skin-table-row) !important;
    color: var(--demo-muted);
}
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase td.square span { color: var(--demo-muted); }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase td.square:hover { background: var(--skin-row-hover) !important; }

/* Группировка фильтров включается адаптером без замены ID и обработчиков. */
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .table-filters {
    padding: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--skin-rule);
    background: #ffffff;
    color: var(--demo-muted);
}
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .demo-skin-filter-grid:not(.displayNone) {
    display: grid;
    grid-template-columns: repeat(3,minmax(140px,1fr));
    gap: 16px 24px;
    width: 100%;
}
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .demo-skin-filter-item { min-width: 0; }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .demo-skin-filter-item > div:first-child {
    margin: 0 0 7px;
    padding-top: 0 !important;
    font-size: 12px;
    font-weight: 400;
}
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .demo-skin-filter-item :is(.form-control,.form-select) { width: 100%; max-width: none !important; }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .demo-skin-filter-actions { grid-column: 1 / -1; display: flex; gap: 12px; }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .demo-skin-panel-heading {
    margin: 0;
    padding: 16px;
    border-bottom: 1px solid var(--skin-rule);
    background: var(--skin-heading-bg);
    color: #40455d;
    font-size: var(--skin-heading-size);
    font-weight: 400;
    line-height: 1.4;
}
body[data-demo-skin="hollihop"] #workSpase .demo-skin-panel-heading { color: #454b50; }

/* Дополнительный обзор использует ту же палитру; его композиции нет в FigJam. */
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) .via-dashboard { color: var(--demo-ink); font-family: var(--bs-body-font-family); }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) :is(.vd-card,.vd-tag,.vm-grid textarea,.vm-channels label) { border-color: var(--demo-line); border-radius: var(--skin-control-radius); }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) :is(.vd-button,.vd-text-button,.vd-icon,.vd-drill) { color: var(--demo-accent); }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) :is(.vd-tag,.vm-note) { background: var(--demo-accent-soft); color: var(--demo-accent-dark); }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) .vd-metric:hover { border-color: var(--demo-accent); }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) .vd-donut { background: conic-gradient(var(--demo-accent) var(--vd-ratio),var(--demo-accent-soft) 0); }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) .vd-dot { background: var(--demo-accent); }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) .vd-dot-light { background: var(--demo-muted); }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) .vd-payments :is(th,td) { border-color: var(--skin-rule); }
body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) .vd-chart svg text { font-family: var(--bs-body-font-family); }

@media (max-width: 800px) {
    body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .demo-skin-filter-grid:not(.displayNone) { grid-template-columns: repeat(2,minmax(120px,1fr)); gap: 14px; }
    body[data-demo-skin="proplan"] { --skin-row-padding: 14px 12px; }
}
@media (max-width: 480px) {
    body:is([data-demo-skin="hollihop"],[data-demo-skin="proplan"]) #workSpase .demo-skin-filter-grid:not(.displayNone) { grid-template-columns: minmax(0,1fr); }
}