body {
    font-family: Helvetica, Tahoma, Arial;
    color: #444;
    height: auto !important;
    min-height: 100%;
    position: relative;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

.container {
    max-width: 1280px;
    width: auto;
}

h1, h2, h3, h4, h5 {
    text-align: center;
    line-height: 1.2em;
}

h1 {
    font-size: 30px;
    font-weight: 200;
}

h2 {
    font-size: 32px;
    margin-bottom: 15px;
    font-weight: 400;
}

h3 {
    font-size: 24px;
    margin-top: 15px;
    margin-bottom: 15px;

}

label {
    font-size: 12px;
}

#main-wrapper {
    min-height: 100%;
    padding-bottom: 100px;
    position: relative;
}

.landing-text {
    font-size: 16px;
}

table p {
    text-align: left;
}

.right-align {
    text-align: right;
}

.left-align {
    text-align: left;
}

.center-align {
    text-align: center;
}

div.form {
    max-width: 460px;
}

ul.no-padding {
    padding-left: 10px;
}

#header {

}

.wrap > .container, .wrap > .container-fluid {
    padding: 70px 15px 20px;
}

.form-container-limited-width {
    max-width: 500px;
    margin: 0 auto;
}

.form-white-wrapper {
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: #666 0px 0px 5px;
}

.inside {
    padding: 10px;
}

.margin-top-block {
    margin-top: 150px;
}

div.vert-margins {
    padding: 40px 0;
}

.vert-margin20 {
    margin-bottom: 20px;
}

.vert-margin30 {
    margin-bottom: 30px;
}

.vert-margin35 {
    margin-bottom: 35px;
}

.vert-margin40 {
    margin-bottom: 40px;
}

.vert-margin50 {
    margin-bottom: 50px;
}

.td-limited {
    max-width: 300px;
}

.clickable {
    cursor: pointer;
}

.muted {
    color: #999;
}

.header-phone {
    font-size: 20px;
    line-height: 85px;
}

.header-text {
    font-size: 30px;
    line-height: 85px;
}

.left-bar {
    background: #f8f8f8;
    border: #e7e7e7 1px solid;
    border-radius: 7px;
    padding: 10px;
    margin-bottom: 20px;
}

ul#left-menu, ul#left-menu ul {
    list-style: none;
    padding-left: 10px;
}

ul#left-menu > li {
    padding: 5px 0;
}

ul#left-menu > li ul li {
    padding: 1px 0;
}

ul#left-menu a {
    color: #666;
}

ul#left-menu a.btn {
    color: #fff;
}

ul#left-menu a:hover {
    color: #ff0000;
    text-decoration: none;
}

ul#left-menu a.btn:hover {
    color: #fff;
}

.content-header > .breadcrumb {
    position: static;
    float: none;
}

button.btn-link {
    color: #aaa;
    padding: 0;
}

.box {
    padding: 10px;
}

.login-form {
    max-width: 480px;
    margin: 0 auto;
}

.errorMessage, .errorSummary {
    padding: 5px;
    margin: 5px 0;
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

.description {
    font-size: 1.3em;
    line-height: 1.4em;
    margin-bottom: 1em;
}

.error.description {
    text-align: center;
}

div.pager {
    margin: 10px 0;
}

tr.calendar td {
    padding: 8px 0 !important;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-color-muted);
    text-transform: uppercase;
}

/* ---------- Календарь: месячная и недельная сетка ---------- */

table.calendar-table {
    margin: 0;
    table-layout: fixed;
}

table.calendar-table,
table.calendar-table > tbody > tr > td {
    border-color: var(--crm-color-border) !important;
}

table.calendar-table > tbody > tr > td {
    height: 92px;
    padding: 0;
    vertical-align: top;
}

table.calendar-table > tbody > tr > td.calendar-nav-cell,
table.calendar-table tr.calendar td {
    height: auto;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
}

table.calendar-table a {
    display: block;
    height: 100%;
    min-height: 90px;
    padding: 6px 8px;
    color: var(--crm-color-text);
}

table.calendar-table a:hover {
    text-decoration: none;
    background: var(--crm-color-surface-alt);
}

.calendar-weekend {
    background: #fafbfc;
}

.calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    border-radius: 13px;
    font-weight: 600;
}

/* сегодня - число в кружке */
td.calendar-today .calendar-day-number {
    background: var(--crm-color-accent);
    color: #fff;
}

/* выбранный день - рамка */
td.calendar-selected {
    box-shadow: inset 0 0 0 2px var(--crm-color-accent);
}

.calendar-chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin-top: 4px;
}

.calendar-chips .crm-badge {
    font-size: 11px;
    line-height: 16px;
}

/* на телефоне в ячейке дня только цветные чипы с числами, без названий типов */
@media (max-width: 767px) {
    table.calendar-table a {
        min-height: 64px;
        padding: 4px 2px;
        text-align: center;
    }

    table.calendar-table > tbody > tr > td {
        height: 64px;
    }

    .calendar-chips {
        align-items: center;
    }

    .calendar-chips .crm-badge {
        min-width: 22px;
        padding: 0 5px;
        text-align: center;
    }

    .calendar-chip__label {
        display: none;
    }

    .calendar-day-number {
        min-width: 24px;
        height: 24px;
        font-size: 13px;
    }
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 12px;
}

.calendar-nav__title {
    font-size: 20px;
    font-weight: 400;
}

a.calendar-nav__arrow,
table.calendar-table a.calendar-nav__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-height: 0;
    padding: 0;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius);
    font-size: 22px;
    line-height: 1;
    color: var(--crm-color-text);
}

a.calendar-nav__arrow:hover {
    background: var(--crm-color-surface-alt);
    text-decoration: none;
}

.calendar-event-manage-btn {
    display: inline-block;
    margin: 2px 0 2px 4px;
}

.widget-list-item {
    margin-bottom: 15px;
}

/*----------------- blog -------------------------*/

.category-description {
    font-size: 16px;
    line-height: 1.4em;
    color: #666;
}

table.categories-list td {
    padding: 10px 0;
}

.category-post-categories {
    margin-bottom: 20px;
}

.category-post-categories a {
    color: #888;
}

.category-post-header {
    margin: 30px 0;
}

.category-post-header h1, .category-post-header h2 {
    margin: 12px 0;

}

.category-post-header h2 a {
    color: #333;
}

.post-text p {
    font-size: 15px;
    line-height: 1.4em;
}

.post-preview {
    font-size: 20px;
    line-height: 1.4em;
    color: #999;
    padding: 10px 0;
    margin: 30px 0;
    font-style: italic;
}

.post-stats {
    margin: 10px 0 10px;
}

.post-comments-list {
    margin-bottom: 40px;
}

.post-comment {
    margin-bottom: 20px;
}

.post-comment-body > p {
    margin-bottom: 10px;
}

.post-related-list {
    margin-bottom: 40px;
}

.category-post {
    border-bottom: #999 1px solid;
}

.category-post .category-post-header {
    margin: 15px 0;
}

.category-post-header h3 {
    text-align: left;
    margin-top: 0;
}

.progress {
    margin-bottom: 7px;
}

/* contact statuses */
.contact-nabrak {
    border-left: #FFDF8C 10px solid;
}

.contact-lead {
    border-left: #eee 10px solid;
}

.contact-otkaz {
    border-left: #F9B5B5 10px solid;
}

.contact-consult {
    border-left: #B5D6FF 10px solid;
}

.contact-brak {
    border-left: #fbff92 10px solid;
}

.contact-book {
    border-left: #cad3de 10px solid;
}

.contact-client {
    border-left: #b0ffa6 10px solid;
}

a.add-event {
    display: block;
    height: 20px;
    text-align: center;
}

td.add-event-cell:hover {
    background: #e3e3e3;
}

#contact-search-form label {
    display: block;
}

.status-history-block {
    display: inline-block;
    margin-right: 5px;
    padding: 3px 10px;
}

#smsId input[type=radio], #smsId label {
    display: inline;
}

.search-form .form-group {
    margin-bottom: 5px;
}

#Question_categories label {
    font-weight: 400;
    margin-bottom: 0;
}

#selected-categories {
    margin-top: 30px;
}

#footer {
    background: #333;
    color: #eee;
    padding: 30px 0;
    margin-top: 25px;
    height: 50px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

.carousel-control.left, .carousel-control.right {
    background-image: none;
}

.carousel-control, .carousel-control:hover, .carousel-control:focus {
    color: #000;
    font-size: 60px;
    padding-top: 25%;
    width: 5%;
}

.carousel-wrapper {
    max-width: 800px;
    margin: 30px auto;
}

.carousel-caption {
    background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
    .tariff-item h3 {
        min-height: 30px;
    }

    .tariff-item {
        margin-bottom: 40px;
    }
}

.progress-bar-grey {
    background-color: #aaa;
}

#contact-search .row {
    margin-left: -5px;
    margin-right: -5px;
}

#contact-search .row > div {
    padding-left: 5px;
    padding-right: 5px;
}

.navbar-inverse .navbar-nav > li > a.btn {
    color: #333;
    border-radius: 0;
    border: none;
    background-color: #e8ba77;
}

.navbar-inverse .navbar-nav > li > a.btn:hover,
.navbar-inverse .navbar-nav > li > a.btn:focus,
.navbar-inverse .navbar-nav > .active > a.btn,
.navbar-inverse .navbar-nav > .active > a.btn:hover,
.navbar-inverse .navbar-nav > .active > a.btn:focus {
    color: #333;
    background-color: #e8ba77;
}

.navbar-fixed-top {
    border: 0;
}

.skin-blue .main-header .navbar {
    background-color: #222c32;
}

.skin-blue .main-header .logo {
    background-color: #000000;
}

/* на телефоне шапка в одну полосу: меню, название, «Поддержка» (у AdminLTE — две полосы по 50px) */
@media (max-width: 767px) {
    .main-header {
        position: relative;
    }

    .skin-blue .main-header .logo {
        position: absolute;
        top: 0;
        left: 48px;
        z-index: 1040;
        width: auto;
        height: 50px;
        padding: 0 8px;
        background-color: transparent;
        font-size: 18px;
        line-height: 50px;
        text-align: left;
    }

    .skin-blue .main-header .logo:hover {
        background-color: transparent;
    }
}

.text-page.table {
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #dddddd;
    border-collapse: collapse;
}

.text-page.table th {
    font-weight: bold;
    padding: 5px;
    background: #efefef;
    border: 1px solid #dddddd;
}

.text-page.table td {
    border: 1px solid #dddddd;
    padding: 5px;
}

.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
    border: 1px solid #d0d0d0;
}

.table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td {
    border-top: 1px;
    border: 1px solid #d0d0d0;
}

/*---------------------- tariffs ---------------------*/

.tariffs-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.tariff-column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    padding: 5px;
    max-width: 200px;
    border-radius: 5px;
}

.tariff-column.active {
    background-color: #bbd4fc;
}

.tariff-item h3 {
    min-height: 60px;
    font-size: 20px;
}

.tariff-item .tariff-description {
    min-height: 70px;
}

.price-wrapper {
    box-shadow: #ddd 1px 1px 2px;
    padding: 5px 10px;
    background-color: #fff;
    margin: 10px auto;
    width: auto;
}

.price-number {
    font-size: 24px;
}

/*
 * Переиспользуемые компоненты интерфейса (префикс crm-).
 * Не привязаны к конкретной странице: собирать из них формы и карточки в любом разделе.
 * Основа - Bootstrap 3 + AdminLTE; значения цветов и отступов вынесены в переменные,
 * чтобы при общем редизайне менять их в одном месте.
 */

:root {
    --crm-color-text: #333;
    --crm-color-muted: #8a8f98;
    --crm-color-border: #e3e6ea;
    --crm-color-surface: #fff;
    --crm-color-surface-alt: #f7f8fa;
    --crm-color-accent: #3c8dbc;
    --crm-color-accent-soft: #eaf3f9;
    --crm-radius: 6px;
    --crm-gap: 16px;
}

/* ---------- Страница: заголовок слева, под ним подзаголовок ---------- */

.crm-page {
    max-width: 960px;
}

.crm-page-header {
    margin: 0 0 var(--crm-gap);
}

.crm-page-header h1 {
    margin: 0;
    text-align: left;
    font-size: 26px;
    font-weight: 400;
}

.crm-page-header__subtitle {
    margin-top: 4px;
    color: var(--crm-color-muted);
}

/* ---------- Карточка-секция формы или страницы ---------- */

.crm-card {
    background: var(--crm-color-surface);
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius);
    padding: 20px;
    margin-bottom: var(--crm-gap);
}

.crm-card__header {
    margin-bottom: 14px;
}

.crm-card__title {
    margin: 0;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: var(--crm-color-text);
}

.crm-card__hint {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--crm-color-muted);
}

.crm-card .form-group:last-child {
    margin-bottom: 0;
}

/* подсказка под полем формы (ActiveField hint) */
.crm-card .hint-block {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--crm-color-muted);
}

/* ---------- Сводка «ключ - значение» в одну строку (например, данные клиента) ---------- */

.crm-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin: 0;
}

.crm-summary__item {
    min-width: 120px;
}

.crm-summary__label {
    font-size: 12px;
    color: var(--crm-color-muted);
}

.crm-summary__value {
    font-size: 15px;
    color: var(--crm-color-text);
}

/* ---------- Сегментный переключатель для radioList ----------
 * Разметка: <div class="crm-segmented"><label><input type="radio"> Текст</label>...</div>
 * Выбранный пункт подсвечивается через :has(), JS не нужен.
 */

.crm-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--crm-color-surface-alt);
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius);
}

.crm-segmented label {
    flex: 1 1 auto;
    margin: 0;
    padding: 7px 14px;
    text-align: center;
    font-weight: 400;
    color: var(--crm-color-text);
    border-radius: calc(var(--crm-radius) - 2px);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.crm-segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* подсветка валидации Bootstrap (has-success/has-error) не должна перекрашивать варианты выбора */
.has-success .crm-segmented label,
.has-error .crm-segmented label,
.has-success .crm-check-tile label,
.has-error .crm-check-tile label {
    color: var(--crm-color-text);
}

.crm-segmented label:hover {
    background: rgba(0, 0, 0, .04);
}

.crm-segmented label:has(input:checked) {
    background: var(--crm-color-surface);
    color: var(--crm-color-accent);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.crm-segmented label:has(input:focus-visible) {
    outline: 2px solid var(--crm-color-accent);
}

/* ---------- Сетка плиток-чекбоксов для checkboxList ----------
 * Разметка: <div class="crm-check-grid"><div class="crm-check-tile"><label><input type="checkbox"> Текст</label></div>...</div>
 */

.crm-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

.crm-check-tile {
    margin: 0;
}

.crm-check-tile label {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    margin: 0;
    padding: 10px 12px;
    font-weight: 400;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius);
    cursor: pointer;
}

.crm-check-tile input {
    margin: 0;
    flex: 0 0 auto;
}

.crm-check-tile label:hover {
    border-color: #c8cdd3;
}

.crm-check-tile label:has(input:checked) {
    border-color: var(--crm-color-accent);
    background: var(--crm-color-accent-soft);
}

/* ---------- Панель действий формы ---------- */

.crm-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.crm-form-actions__hint {
    margin-left: auto;
    font-size: 13px;
    color: var(--crm-color-muted);
}

/* ---------- Поле с единицей измерения справа (₽, %, дни) ---------- */

.crm-input-suffix {
    position: relative;
}

.crm-input-suffix .form-control {
    padding-right: 32px;
}

.crm-input-suffix__unit {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: var(--crm-color-muted);
    pointer-events: none;
}

/* ---------- Уведомление внутри страницы (ошибки формы, предупреждения) ----------
 * Разметка: <div class="crm-alert crm-alert--error"><strong>Заголовок</strong><ul>...</ul></div>
 */

.crm-alert {
    margin-bottom: var(--crm-gap);
    padding: 12px 16px;
    border: 1px solid var(--crm-color-border);
    border-left-width: 4px;
    border-radius: var(--crm-radius);
    background: var(--crm-color-surface);
}

.crm-alert ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.crm-alert--error {
    border-color: #ebccd1;
    border-left-color: #dd4b39;
    background: #fdf3f2;
    color: #a94442;
}

.crm-alert--success {
    border-color: #c9e8d4;
    border-left-color: #00a65a;
    background: #f1faf4;
    color: #2b6a43;
}

/* Цветовые варианты значения в сводке */
.crm-summary__value--success { color: #00a65a; }
.crm-summary__value--warning { color: #e08e0b; font-weight: 600; }
.crm-summary__value--danger { color: #dd4b39; font-weight: 600; }

/* ---------- Таблица внутри карточки ---------- */

.crm-table {
    margin-bottom: 0;
}

.crm-table > thead > tr > th {
    border-bottom: 1px solid var(--crm-color-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-color-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.crm-table > tbody > tr > td,
.crm-table > tfoot > tr > th {
    border-top: 1px solid var(--crm-color-border);
    vertical-align: middle;
}

/* у таблиц в карточках только горизонтальные разделители */
.crm-table > thead > tr > th,
.crm-table > tbody > tr > td,
.crm-table > tfoot > tr > th {
    border-left: 0;
    border-right: 0;
}

.crm-table > thead > tr > th,
.crm-table > thead:first-child > tr:first-child > th {
    border: 0;
    border-bottom: 1px solid var(--crm-color-border);
}

/* ссылка-действие «опасного» типа (удалить) */
.crm-link-danger,
.crm-link-danger:hover,
.crm-link-danger:focus {
    color: #dd4b39;
}

.crm-table--compact > tbody > tr > td,
.crm-table--compact > thead > tr > th,
.crm-table--compact > tfoot > tr > th {
    padding: 4px 8px;
}

/* ---------- Бейдж статуса ---------- */

.crm-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
    border-radius: 10px;
    background: var(--crm-color-surface-alt);
    border: 1px solid var(--crm-color-border);
    color: var(--crm-color-text);
}

.crm-badge--success { background: #eaf7ef; border-color: #c9e8d4; color: #2b6a43; }
.crm-badge--danger { background: #fdf0ee; border-color: #f2c9c3; color: #a94442; }

.crm-badge--info { background: #e8f4fb; border-color: #c3e1f2; color: #1f6f99; }
.crm-badge--primary { background: #eaf0fb; border-color: #c8d6f2; color: #2d55a0; }
.crm-badge--warning { background: #fdf5e6; border-color: #f3dcae; color: #93600a; }

/* ---------- Строки таблицы-реестра ---------- */

.crm-table--hover > tbody > tr:hover > td {
    background: var(--crm-color-surface-alt);
}

/* вторая строка в ячейке: мелкий серый текст под основным значением */
.crm-table__sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--crm-color-muted);
}

/* ---------- Тонкая полоска прогресса с подписью ----------
 * Разметка: <div class="crm-progress"><div class="crm-progress__bar" style="width: 40%"></div></div>
 */

.crm-progress {
    height: 6px;
    min-width: 80px;
    overflow: hidden;
    border-radius: 3px;
    background: #edf0f3;
}

.crm-progress__bar {
    height: 100%;
    border-radius: 3px;
    background: var(--crm-color-accent);
}

.crm-progress__bar--success { background: #00a65a; }

/* ---------- Панель фильтров над списком ---------- */

.crm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: var(--crm-gap);
}

.crm-toolbar__end {
    margin-left: auto;
}

/* Сегментный переключатель из ссылок (фильтры): <div class="crm-segmented crm-segmented--links"><a class="active">...</a></div> */
.crm-segmented--links {
    display: inline-flex;
}

.crm-segmented--links a {
    padding: 5px 12px;
    color: var(--crm-color-text);
    border-radius: calc(var(--crm-radius) - 2px);
    white-space: nowrap;
}

.crm-segmented--links a:hover {
    background: rgba(0, 0, 0, .04);
    text-decoration: none;
}

.crm-segmented--links a.active {
    background: var(--crm-color-surface);
    color: var(--crm-color-accent);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

/* ---------- Карточка, внутри которой только таблица (без внутренних отступов) ---------- */

.crm-card--flush {
    padding: 0;
}

/* скругление шапки таблицы под углы карточки (overflow: hidden не используем - он обрезает выпадающие меню) */
.crm-card--flush .crm-table > thead > tr > th:first-child {
    border-top-left-radius: var(--crm-radius);
}

.crm-card--flush .crm-table > thead > tr > th:last-child {
    border-top-right-radius: var(--crm-radius);
}

/* горизонтальная прокрутка широкой таблицы только на узких экранах:
   на десктопе overflow обрезал бы выпадающие меню в строках */
@media (max-width: 991px) {
    .crm-table-scroll {
        overflow-x: auto;
    }
}

.crm-card--flush .crm-table > thead > tr > th:first-child,
.crm-card--flush .crm-table > tbody > tr > td:first-child {
    padding-left: 20px;
}

.crm-card--flush .crm-table > thead > tr > th:last-child,
.crm-card--flush .crm-table > tbody > tr > td:last-child {
    padding-right: 20px;
}

.crm-card--flush .crm-table > thead > tr > th {
    padding-top: 12px;
    background: var(--crm-color-surface-alt);
}

/* ---------- Таблица-реестр на телефоне: каждая строка становится карточкой ----------
 * Разметка: <table class="table crm-table crm-table--stack">, у ячеек data-label="Подпись".
 * Ячейка без data-label выводится на всю ширину (например, заголовок строки или кнопки).
 */
@media (max-width: 767px) {
    /* карточкам горизонтальная прокрутка не нужна, а overflow обрезал бы меню в строке */
    .crm-table-scroll:has(> .crm-table--stack) {
        overflow: visible;
    }

    .crm-table--stack > thead {
        display: none;
    }

    .crm-table--stack,
    .crm-table--stack > tbody,
    .crm-table--stack > tbody > tr,
    .crm-table--stack > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .crm-table--stack > tbody > tr {
        padding: 10px 16px;
        border-top: 1px solid var(--crm-color-border);
    }

    .crm-table--stack > tbody > tr:first-child {
        border-top: 0;
    }

    .crm-table--stack > tbody > tr > td,
    .crm-card--flush .crm-table--stack > tbody > tr > td:first-child,
    .crm-card--flush .crm-table--stack > tbody > tr > td:last-child {
        position: relative;
        min-width: 0 !important;
        padding: 4px 0;
        border: 0;
        text-align: left;
        white-space: normal !important;
    }

    /* подпись - в левой колонке, содержимое ячейки остается обычным блоком справа */
    .crm-table--stack > tbody > tr > td[data-label],
    .crm-card--flush .crm-table--stack > tbody > tr > td[data-label]:first-child,
    .crm-card--flush .crm-table--stack > tbody > tr > td[data-label]:last-child {
        padding-left: 38%;
    }

    .crm-table--stack > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        position: absolute;
        top: 6px;
        left: 0;
        width: 35%;
        font-size: 12px;
        color: var(--crm-color-muted);
    }

    .crm-table--stack .dropdown-menu-right {
        right: auto;
        left: 0;
    }
}

/* ---------- Компактная форма поиска в панели фильтров ---------- */

.crm-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.crm-search .form-group {
    margin: 0;
}

.crm-search .help-block {
    display: none;
}

/* Bootstrap растягивает поля на всю ширину - в строке фильтров ширина по содержимому */
.crm-search .form-control {
    display: inline-block;
    width: auto;
    max-width: 100%;
}

/* ---------- Шапка страницы с действиями справа ---------- */

.crm-page-header--actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* длинный подзаголовок не выталкивает кнопки на новую строку */
.crm-page-header--actions > :first-child {
    flex: 1 1 320px;
    min-width: 0;
}

.crm-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- Заголовок карточки с кнопками справа ---------- */

.crm-card__header--actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.crm-card__header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* подзаголовок внутри карточки (раздел карточки) */
.crm-card__subtitle {
    margin: 16px 0 6px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--crm-color-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.crm-card__subtitle:first-child {
    margin-top: 0;
}

/* ---------- Список «подпись - значение» в столбик (боковая колонка карточки объекта) ---------- */

.crm-dl {
    margin: 0;
}

.crm-dl > dt {
    font-size: 12px;
    font-weight: 400;
    color: var(--crm-color-muted);
}

.crm-dl > dd {
    margin: 0 0 10px;
    word-break: break-word;
}

.crm-dl > dd:last-child {
    margin-bottom: 0;
}

/* ---------- Список записей: события, договоры, заметки ---------- */

.crm-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-list__item {
    padding: 8px 0;
    border-top: 1px solid var(--crm-color-border);
}

.crm-list__item:first-child {
    border-top: 0;
    padding-top: 0;
}

.crm-list__meta {
    font-size: 12px;
    color: var(--crm-color-muted);
}

.crm-list__empty {
    color: var(--crm-color-muted);
}

.crm-alert--warning {
    border-color: #f3dcae;
    border-left-color: #e08e0b;
    background: #fdf8ef;
    color: #7a5a1d;
}

/* подсказка о смене тарифа, когда все места заняты (views/company/_upgrade.php) */
.crm-upgrade { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.crm-upgrade__text { flex: 1 1 380px; line-height: 1.5; }
.crm-upgrade__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Аватар с инициалами ---------- */

.crm-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--crm-color-accent-soft);
    color: var(--crm-color-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ---------- Заметки и комментарии: лента сообщений ----------
 * Разметка: <ul class="crm-notes"><li class="crm-note"><span class="crm-avatar">АБ</span>
 *           <div class="crm-note__body"><div class="crm-note__meta">...</div><div class="crm-note__text">...</div></div></li></ul>
 */

.crm-note-form {
    margin-bottom: var(--crm-gap);
}

.crm-note-form .form-group {
    margin-bottom: 8px;
}

.crm-note-form textarea {
    resize: vertical;
    min-height: 60px;
}

.crm-notes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-note {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--crm-color-border);
}

.crm-note__body {
    flex: 1 1 auto;
    min-width: 0;
}

.crm-note__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    font-size: 13px;
}

.crm-note__author {
    font-weight: 600;
}

.crm-note__muted {
    color: var(--crm-color-muted);
}

.crm-note__date {
    margin-left: auto;
    font-size: 12px;
    color: var(--crm-color-muted);
    white-space: nowrap;
}

.crm-note__text {
    margin-top: 4px;
    line-height: 1.5;
    word-wrap: break-word;
}

.crm-note__actions {
    margin-top: 4px;
    font-size: 12px;
}

.crm-note__delete {
    color: var(--crm-color-muted);
}

.crm-note__delete:hover,
.crm-note__delete:focus {
    color: #dd4b39;
}

.crm-note__error {
    margin-left: 8px;
    color: #dd4b39;
}

/* только что добавленная заметка коротко подсвечивается */
@keyframes crm-note-appear {
    from { background: var(--crm-color-accent-soft); }
    to { background: transparent; }
}

.crm-note--new {
    animation: crm-note-appear 1.5s ease-out;
}

/* Тёмный бейдж для «закрытых» статусов (брак) и крупный бейдж для шапки страницы */
.crm-badge--dark { background: #4a4f55; border-color: #4a4f55; color: #fff; }

.crm-badge--lg {
    padding: 3px 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

/* Плашка статуса под заголовком: крупнее обычного уведомления, текст в несколько строк */
.crm-alert--status {
    font-size: 15px;
    line-height: 1.5;
}

.crm-alert--dark {
    border-color: #c9ccd0;
    border-left-color: #4a4f55;
    background: #f1f2f4;
    color: #33373b;
}

/* ---------- Сетка тарифов (карточки планов) ---------- */

.crm-plans {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--crm-gap);
}

.crm-plans .crm-card {
    margin-bottom: 0;
}

.crm-plan {
    position: relative;
    display: flex;
    flex-direction: column;
}

.crm-plan--current {
    border-color: var(--crm-color-accent);
    box-shadow: 0 0 0 1px var(--crm-color-accent);
}

.crm-plan__flag {
    position: absolute;
    top: -10px;
    right: 16px;
}

.crm-plan__description {
    min-height: 40px;
}

.crm-plan__price {
    margin: 14px 0 4px;
    font-size: 22px;
    font-weight: 600;
}

.crm-plan__price small {
    font-size: 13px;
    font-weight: 400;
    color: var(--crm-color-muted);
}

.crm-plan__users {
    color: var(--crm-color-muted);
}

.crm-plan__action {
    margin-top: auto;
    padding-top: 16px;
}

/* ---------- Значение с кнопкой «Скопировать» (токены, идентификаторы) ----------
 * Разметка: <div class="crm-copy"><input class="form-control crm-copy__value" readonly value="..."><button class="btn btn-default js-copy">Скопировать</button></div>
 */

.crm-copy {
    display: flex;
    gap: 8px;
}

.crm-copy__value.form-control {
    flex: 1 1 auto;
    min-width: 0;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    background: var(--crm-color-surface-alt);
}

/* ---------- Строка «описание + действие» внутри карточки (экспорт, интеграции) ---------- */

.crm-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    padding: 14px 0;
    border-top: 1px solid var(--crm-color-border);
}

.crm-action-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.crm-action-row:last-child {
    padding-bottom: 0;
}

.crm-action-row__body {
    flex: 1 1 320px;
}

.crm-action-row__title {
    font-weight: 600;
}

/* ---------- Шапка профиля: аватар с инициалами слева от имени ---------- */

.crm-profile-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.crm-profile-head h1 {
    margin: 0;
}

.crm-avatar--lg {
    width: 52px;
    height: 52px;
    font-size: 18px;
}

/* ---------- Аватарка-картинка и размеры ---------- */

.crm-avatar--img {
    padding: 0;
    object-fit: cover;
    background: var(--crm-color-surface-alt);
}

.crm-avatar--sm {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.crm-avatar--xl {
    width: 56px;
    height: 56px;
    font-size: 18px;
}

/* ---------- Выбор аватарки из набора ---------- */

.crm-avatar-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.crm-avatar-picker__item {
    position: relative;
    margin: 0;
    padding: 3px;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
}

.crm-avatar-picker__item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.crm-avatar-picker__item .crm-avatar {
    display: flex;
}

.crm-avatar-picker__item:hover {
    border-color: var(--crm-color-border);
}

.crm-avatar-picker__item:has(input:checked) {
    border-color: var(--crm-color-accent);
}

.crm-avatar-picker__item:has(input:focus-visible) {
    outline: 2px solid var(--crm-color-accent);
    outline-offset: 2px;
}

/* имя с аватаркой в строке таблицы или списка */
.crm-person {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    vertical-align: middle;
}

/* аватарка в боковом меню вместо картинки AdminLTE */
.user-panel > .image .crm-avatar {
    width: 45px;
    height: 45px;
    font-size: 15px;
}

/* ---------- Визуальный редактор писем (CKEditor 5) ---------- */

.mailing-form .ck-editor__editable_inline {
    min-height: 320px;
}

/* ---------- Демо-кабинет посетителя сайта (views/layouts/_demoBanner.php) ---------- */
.crm-demo-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 14px 18px;
    border-radius: var(--crm-radius);
    background: #fff6dc;
    border: 1px solid #ffe082;
}

.crm-demo-banner__text b {
    display: block;
    margin-bottom: 2px;
}

.crm-demo-banner__text span {
    color: var(--crm-color-muted);
}

.crm-demo-banner__form {
    flex: 0 0 auto;
}

.crm-demo-banner .btn-warning {
    background: #ffb300;
    border-color: #ffb300;
    color: #16202f;
    font-weight: 600;
}

@media (max-width: 767px) {
    .crm-demo-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .crm-demo-banner .btn {
        width: 100%;
        white-space: normal;
    }
}

/* ---------- Чек-лист «Первые шаги» на дашборде (views/user/_onboarding.php) ---------- */
.crm-onboarding__progress {
    height: 6px;
    margin: 4px 0 16px;
    border-radius: 3px;
    background: var(--crm-color-surface-alt);
    overflow: hidden;
}

.crm-onboarding__progress span {
    display: block;
    height: 100%;
    background: #ffb300;
}

.crm-onboarding__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.crm-onboarding__steps li {
    position: relative;
    padding: 12px 12px 12px 48px;
    border: 1px solid var(--crm-color-border);
    border-radius: var(--crm-radius);
    counter-increment: step;
}

.crm-onboarding__steps li::before {
    content: counter(step);
    position: absolute;
    left: 12px;
    top: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff6dc;
    color: #16202f;
    font-weight: 700;
    text-align: center;
    line-height: 26px;
}

.crm-onboarding__steps li.is-done {
    opacity: .6;
}

.crm-onboarding__steps li.is-done::before {
    content: "✓";
    background: #ffb300;
}

.crm-onboarding__steps li.is-done b {
    text-decoration: line-through;
}

.crm-onboarding__link {
    font-weight: 600;
}

.crm-onboarding__steps span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--crm-color-muted);
}

/* ---------- Фирменный вид кабинета: цвета сайта vitamin-crm.ru поверх AdminLTE ----------
 * Тёмно-синий — основа (шапка, меню, главные кнопки), оранжевый — акцент (активный пункт, кнопка добавления).
 */
:root {
    --crm-brand-ink: #16202f;
    --crm-brand-ink-2: #1e2a3c;
    --crm-brand-orange: #ffb300;
    --crm-brand-orange-deep: #e69a00;
}

.skin-blue .main-header .navbar,
.skin-blue .main-header .logo,
.skin-blue .main-header .logo:hover {
    background-color: var(--crm-brand-ink);
}

.skin-blue .main-header .logo img {
    vertical-align: middle;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
    background-color: var(--crm-brand-ink-2);
}

.skin-blue .main-sidebar,
.skin-blue .left-side,
.skin-blue .wrapper {
    background-color: var(--crm-brand-ink-2);
}

.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.menu-open > a {
    border-left-color: var(--crm-brand-orange);
    background: var(--crm-brand-ink);
}

.skin-blue .sidebar-menu > li > .treeview-menu {
    background: #18222f;
}

.skin-blue .sidebar-menu .treeview-menu > li.active > a,
.skin-blue .sidebar-menu .treeview-menu > li > a:hover {
    color: var(--crm-brand-orange);
}

/* главная кнопка действия («+ Добавить клиента», «Создать») — оранжевая, как на сайте */
.btn-success {
    background-color: var(--crm-brand-orange);
    border-color: var(--crm-brand-orange);
    color: var(--crm-brand-ink);
    font-weight: 600;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background-color: var(--crm-brand-orange-deep);
    border-color: var(--crm-brand-orange-deep);
    color: var(--crm-brand-ink);
}

/* сохранить / подтвердить — тёмно-синяя */
.btn-primary {
    background-color: var(--crm-brand-ink);
    border-color: var(--crm-brand-ink);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--crm-brand-ink-2);
    border-color: var(--crm-brand-ink-2);
}

.main-footer {
    color: var(--crm-color-muted);
    font-size: 13px;
}

/* история этапов в карточке клиента (views/contact/view.php) */
.crm-stage-history { list-style: none; margin: 0; padding: 0; }
.crm-stage-history li { position: relative; padding: 0 0 12px 18px; border-left: 2px solid #e3e6ea; margin-left: 4px; }
.crm-stage-history li:last-child { padding-bottom: 0; border-left-color: transparent; }
.crm-stage-history li::before { content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--crm-color-accent); }
.crm-stage-history li:first-child::before { background: var(--crm-color-accent); }