/**
 * B2W CRM — shared UI (filters, badges, tables, toolbar avatars)
 * Loaded from Admin.master on all admin pages.
 */

/* ===================== No zebra striping (all CRM data tables) ===================== */
.wrapper .content-wrapper table.table > tbody > tr:nth-of-type(odd) > td,
.wrapper .content-wrapper table.table > tbody > tr:nth-of-type(odd) > th,
.wrapper .box-body table.table > tbody > tr:nth-of-type(odd) > td,
.wrapper .box-body table.table > tbody > tr:nth-of-type(odd) > th,
.wrapper table.footable > tbody > tr.footable-odd > td,
.wrapper table.footable > tbody > tr.footable-even > td,
.wrapper table.footable > tbody > tr:nth-child(odd) > td,
.wrapper table.footable > tbody > tr:nth-child(even) > td,
.modal table.table > tbody > tr:nth-of-type(odd) > td,
.modal table.table > tbody > tr:nth-of-type(odd) > th,
.modal table.footable > tbody > tr.footable-odd > td,
.modal table.footable > tbody > tr.footable-even > td,
.modal table.footable > tbody > tr:nth-child(odd) > td,
.modal table.footable > tbody > tr:nth-child(even) > td {
    background-color: #fff;
}

.wrapper .content-wrapper table.table.table-hover > tbody > tr:hover > td,
.wrapper .box-body table.table.table-hover > tbody > tr:hover > td,
.wrapper table.footable.table-hover > tbody > tr:hover > td,
.modal table.table.table-hover > tbody > tr:hover > td,
.modal table.footable.table-hover > tbody > tr:hover > td {
    background-color: #f5f5f5;
}

/* ===================== Status badges in tables ===================== */
.wrapper table.table .label,
.wrapper table.footable .label {
    display: flex;
    padding: 0.2em 0.6em 0.3em;
    align-items: center;
    justify-content: center;
}

/* ===================== Filters toolbar (Leads, Projects, …) ===================== */
.main-filters-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.box-header.with-border {
    overflow: visible;
}

.filters-toggle-btn {
    transition: all 0.2s;
}

.filters-toggle-btn.active {
    background-color: #3c8dbc;
    border-color: #357ebd;
    color: #fff;
}

.filters-toggle-btn.active:hover {
    background-color: #357ebd;
    border-color: #2968a3;
}

/* 30px — same as .form-control.input-sm in the filter toolbar row */
.filters-toggle-btn-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    color: #666;
    transition: all 0.2s;
    box-sizing: border-box;
    line-height: 1;
}

.filters-toggle-btn-icon:hover {
    background-color: #e8e8e8;
    border-color: #ccc;
    color: #333;
}

.filters-toggle-btn-icon.active {
    background-color: #3c8dbc;
    border-color: #3c8dbc;
    color: #fff;
}

.filters-toggle-btn-icon i {
    font-size: 14px;
    margin: 0;
}

.filters-dropdown-container {
    position: relative;
}

.filters-dropdown-container.open .filters-dropdown-panel {
    display: flex;
}

/* меню selectpicker из панели фильтров (container: body) */
.bootstrap-select.bs-container .dropdown-menu {
    z-index: 1070 !important;
}

.filters-dropdown-panel {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    z-index: 1065;
    min-width: 280px;
    max-width: 320px;
    max-height: calc(100vh - 80px);
    padding: 0;
    margin-top: 5px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    background-color: #fff;
    border: 1px solid #ddd;
    overflow: hidden;
}

.filters-panel-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 15px 15px 0;
}

/*
 * Always-visible thin scrollbar — для списков/таблиц с max-height,
 * где иначе неочевидно, что есть ещё строки (модалки, picker’ы, @mention).
 */
.crm-scrollbar-visible,
#modal-department-employees .dept-emp-list-wrap,
#modal-update-department .dept-mgr-list-wrap,
#modal-update-data-view .pm-view-fields-scroll,
.managers-selector-popup .popup-list,
.departments-selector-popup .popup-list,
#modal-department-employees .dept-emp-manager-picker .popup-list,
.project-update-mention-list,
#modalRowDetails .modal-body,
.pm-table-columns-scroll,
.dashboard-agent-picker .agent-list,
.searchable-select-options,
.pm-workspace-menu-tree-scroll,
.pm-collapsible-filters-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.06);
}

.crm-scrollbar-visible::-webkit-scrollbar,
#modal-department-employees .dept-emp-list-wrap::-webkit-scrollbar,
#modal-update-department .dept-mgr-list-wrap::-webkit-scrollbar,
#modal-update-data-view .pm-view-fields-scroll::-webkit-scrollbar,
.managers-selector-popup .popup-list::-webkit-scrollbar,
.departments-selector-popup .popup-list::-webkit-scrollbar,
#modal-department-employees .dept-emp-manager-picker .popup-list::-webkit-scrollbar,
.project-update-mention-list::-webkit-scrollbar,
#modalRowDetails .modal-body::-webkit-scrollbar,
.pm-table-columns-scroll::-webkit-scrollbar,
.dashboard-agent-picker .agent-list::-webkit-scrollbar,
.searchable-select-options::-webkit-scrollbar,
.pm-workspace-menu-tree-scroll::-webkit-scrollbar,
.pm-collapsible-filters-panel::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.crm-scrollbar-visible::-webkit-scrollbar-thumb,
#modal-department-employees .dept-emp-list-wrap::-webkit-scrollbar-thumb,
#modal-update-department .dept-mgr-list-wrap::-webkit-scrollbar-thumb,
#modal-update-data-view .pm-view-fields-scroll::-webkit-scrollbar-thumb,
.managers-selector-popup .popup-list::-webkit-scrollbar-thumb,
.departments-selector-popup .popup-list::-webkit-scrollbar-thumb,
#modal-department-employees .dept-emp-manager-picker .popup-list::-webkit-scrollbar-thumb,
.project-update-mention-list::-webkit-scrollbar-thumb,
#modalRowDetails .modal-body::-webkit-scrollbar-thumb,
.pm-table-columns-scroll::-webkit-scrollbar-thumb,
.dashboard-agent-picker .agent-list::-webkit-scrollbar-thumb,
.searchable-select-options::-webkit-scrollbar-thumb,
.pm-workspace-menu-tree-scroll::-webkit-scrollbar-thumb,
.pm-collapsible-filters-panel::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.28);
    border-radius: 4px;
}

.crm-scrollbar-visible::-webkit-scrollbar-track,
#modal-department-employees .dept-emp-list-wrap::-webkit-scrollbar-track,
#modal-update-department .dept-mgr-list-wrap::-webkit-scrollbar-track,
#modal-update-data-view .pm-view-fields-scroll::-webkit-scrollbar-track,
.managers-selector-popup .popup-list::-webkit-scrollbar-track,
.departments-selector-popup .popup-list::-webkit-scrollbar-track,
#modal-department-employees .dept-emp-manager-picker .popup-list::-webkit-scrollbar-track,
.project-update-mention-list::-webkit-scrollbar-track,
#modalRowDetails .modal-body::-webkit-scrollbar-track,
.pm-table-columns-scroll::-webkit-scrollbar-track,
.dashboard-agent-picker .agent-list::-webkit-scrollbar-track,
.searchable-select-options::-webkit-scrollbar-track,
.pm-workspace-menu-tree-scroll::-webkit-scrollbar-track,
.pm-collapsible-filters-panel::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.06);
}

/* Тонкая полоса прокрутки только при наведении / фокусе (эталон — projects.aspx). */
.crm-scrollbar-on-hover,
.filters-panel-content,
#projectsDashboardSection #projectDashboardWorkloadBox .box-body {
    scrollbar-width: none;
}

.crm-scrollbar-on-hover::-webkit-scrollbar,
.filters-panel-content::-webkit-scrollbar,
#projectsDashboardSection #projectDashboardWorkloadBox .box-body::-webkit-scrollbar {
    width: 0;
}

.crm-scrollbar-on-hover:hover,
.crm-scrollbar-on-hover:focus-within,
.filters-panel-content:hover,
.filters-panel-content:focus-within,
#projectsDashboardSection #projectDashboardWorkloadBox .box-body:hover,
#projectsDashboardSection #projectDashboardWorkloadBox .box-body:focus-within {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.06);
}

.crm-scrollbar-on-hover:hover::-webkit-scrollbar,
.crm-scrollbar-on-hover:focus-within::-webkit-scrollbar,
.filters-panel-content:hover::-webkit-scrollbar,
.filters-panel-content:focus-within::-webkit-scrollbar,
#projectsDashboardSection #projectDashboardWorkloadBox .box-body:hover::-webkit-scrollbar,
#projectsDashboardSection #projectDashboardWorkloadBox .box-body:focus-within::-webkit-scrollbar {
    width: 8px;
}

.crm-scrollbar-on-hover:hover::-webkit-scrollbar-thumb,
.crm-scrollbar-on-hover:focus-within::-webkit-scrollbar-thumb,
.filters-panel-content:hover::-webkit-scrollbar-thumb,
.filters-panel-content:focus-within::-webkit-scrollbar-thumb,
#projectsDashboardSection #projectDashboardWorkloadBox .box-body:hover::-webkit-scrollbar-thumb,
#projectsDashboardSection #projectDashboardWorkloadBox .box-body:focus-within::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.28);
    border-radius: 4px;
}

.crm-scrollbar-on-hover:hover::-webkit-scrollbar-track,
.crm-scrollbar-on-hover:focus-within::-webkit-scrollbar-track,
.filters-panel-content:hover::-webkit-scrollbar-track,
.filters-panel-content:focus-within::-webkit-scrollbar-track,
#projectsDashboardSection #projectDashboardWorkloadBox .box-body:hover::-webkit-scrollbar-track,
#projectsDashboardSection #projectDashboardWorkloadBox .box-body:focus-within::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.06);
}

.filters-panel-content .form-group {
    margin-bottom: 15px;
}

.filters-panel-content .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 12px;
    color: #555;
}

.filters-panel-content .form-group:last-child {
    margin-bottom: 15px;
}

.filters-panel-footer {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    gap: 10px;
    margin-top: 0;
    padding: 15px;
    border-top: 1px solid #e5e5e5;
    background-color: #fff;
}

.filters-panel-footer .btn {
    flex: 1;
    box-sizing: border-box;
    min-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.filters-dropdown-panel .has-feedback .form-control {
    direction: rtl;
    text-align: right;
    padding-right: 10px;
    padding-left: 30px;
}

.filters-dropdown-panel .has-feedback .form-control-feedback {
    left: 8px;
    right: auto;
}

[dir="rtl"] .filters-dropdown-panel {
    right: 0;
    left: auto;
}

[dir="rtl"] .filters-panel-footer {
    flex-direction: row-reverse;
}

.filters-search-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    flex-direction: row;
}

.filters-search-row .has-feedback {
    flex: 1;
    min-width: 200px;
}

.filters-search-row #table_search {
    direction: rtl;
    text-align: right;
}

/* Toolbar “my tasks” / filter user bubble (32px — forms/toolbar; tables use crm-tables.css 26px) */
.user-avatar-bubble {
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.user-avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.user-avatar-circle img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
}

.user-avatar-circle > span {
    position: relative;
    z-index: 0;
    line-height: 1;
}

.user-avatar-bubble.active .user-avatar-circle {
    border-color: #3c8dbc;
    box-shadow: 0 0 0 2px rgba(60, 141, 188, 0.3);
}

.user-avatar-bubble:hover .user-avatar-circle {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Managers column inline editor (Leads / Clients) */
.managers-cell {
    position: relative;
}

.managers-cell .field {
    position: relative;
}

.managers-cell .managers-display {
    cursor: pointer;
}

.managers-cell .managers-avatars-inline > .manager-avatar-bubble:hover {
    transform: scale(1.1);
    z-index: 10;
    cursor: pointer;
}

.managers-cell .field-form.managers-popup {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1050;
    margin-top: 5px;
    display: none;
}

.managers-cell .field-form.managers-popup[style*="display: block"],
.managers-cell .field-form.managers-popup[style*="display:block"] {
    display: block !important;
}

.managers-cell .field-form.managers-popup[style*="display: block"] .managers-selector-popup,
.managers-cell .field-form.managers-popup[style*="display:block"] .managers-selector-popup {
    display: block;
}

.managers-cell .field-form.managers-popup[style*="display: block"] .managers-selector-popup.show,
.managers-cell .field-form.managers-popup[style*="display:block"] .managers-selector-popup.show {
    display: block !important;
}

[dir="rtl"] .managers-cell .field-form.managers-popup {
    right: auto;
    left: 0;
}

.manager-avatar-bubble:hover::before,
.manager-avatar-bubble:hover::after {
    opacity: 0 !important;
}

/* ===================== Settings list pages ===================== */
.admins-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.admins-tools #roleFilter {
    min-width: 140px;
    width: 140px;
}

.admins-tools #table_search {
    min-width: 170px;
    width: 170px;
}

.admins-page .box-tools .admins-search-wrap {
    width: auto;
    min-width: 0;
}

.admins-page .box-tools .admins-search-wrap #table_search {
    min-width: 170px;
    width: 170px;
    direction: rtl;
    text-align: right;
    padding-right: 10px;
    padding-left: 24px;
}

.admins-page .box-tools .admins-search-wrap .form-control-feedback {
    left: 2px;
    right: auto;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #777;
}

[dir="ltr"] .admins-page .box-tools .admins-search-wrap #table_search {
    direction: ltr;
    text-align: left;
    padding-right: 30px;
    padding-left: 10px;
}

[dir="ltr"] .admins-page .box-tools .admins-search-wrap .form-control-feedback {
    left: auto;
    right: 8px;
}

.admins-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto;
}

.admins-table thead th,
.admins-table tbody td {
    text-align: right !important;
    vertical-align: middle !important;
    height: 38px;
    padding: 0 16px !important;
    line-height: 1.2;
}

.admins-table thead th[data-col="adminID"],
.admins-table thead th[data-col="fullName"],
.admins-table thead th[data-col="role"],
.admins-table thead th[data-col="email"],
.admins-table thead th[data-col="phone"],
.admins-table thead th[data-col="enabled"],
.admins-table thead th.admins-col-actions,
.admins-table tbody td:nth-child(-n+5),
.admins-table tbody td.admins-enabled-cell,
.admins-table tbody td.admins-table-actions {
    text-align: center !important;
}

.admins-table .chkbox,
.admins-table span.action-chbx {
    display: inline-block;
    vertical-align: middle;
}

.admins-table th.admins-col-actions,
.admins-table tbody td.admins-table-actions {
    width: 100px;
    min-width: 100px;
    white-space: nowrap;
}

/* Same 38px + line-height: 1.2 cells as admins: FA action icons sit on the baseline. */
.admins-table tbody td.admins-table-actions,
.automations-table tbody td.automations-edit-cell,
.automations-table tbody td.automations-delete-cell,
.whatsapp-templates-table tbody td.whatsapp-actions-col,
.groups-table tbody td.groups-table-actions,
.project-statuses-table tbody td.ps-col-actions,
.project-departments-table tbody td.dept-actions-cell {
    line-height: 0;
}

.admins-table tbody td.admins-table-actions .pm-row-icon-actions,
.automations-table tbody td.automations-edit-cell > a,
.automations-table tbody td.automations-delete-cell > a,
.whatsapp-templates-table tbody td.whatsapp-actions-col > a,
.groups-table tbody td.groups-table-actions .pm-row-icon-actions,
.project-statuses-table tbody td.ps-col-actions .pm-row-icon-actions,
.project-departments-table tbody td.dept-actions-cell .pm-row-icon-actions {
    vertical-align: middle;
    line-height: 1;
}

.admins-table tbody td.admins-table-actions .btn-link {
    padding: 0 6px;
}

.admins-table tbody td.admins-table-actions a {
    padding: 0;
    margin: 0;
    color: #666;
    text-decoration: none;
    vertical-align: middle;
}

.admins-table tbody td.admins-table-actions a:hover {
    color: #333;
}

.admins-table thead th[data-sort-ignore="true"] {
    cursor: default !important;
}

.admins-table thead th[data-sort-ignore="true"].footable-sortable,
.admins-table thead th[data-sort-ignore="true"] {
    pointer-events: none;
}

.admins-table thead th[data-sort-ignore="true"] > span.footable-sort-indicator,
.admins-table thead th[data-sort-ignore="true"] > span.fooicon {
    display: none !important;
}

.admin-form-footer-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.admin-form-footer-actions .btn {
    float: none !important;
}

.automations-tools .has-feedback {
    width: 220px;
    min-width: 170px;
}

.automations-tools #table_search {
    min-width: 170px;
    width: 170px;
}

.automations-page .box-tools .automations-search-wrap {
    width: auto;
    min-width: 0;
}

.automations-page .box-tools .automations-search-wrap #table_search {
    min-width: 170px;
    width: 170px;
    direction: rtl;
    text-align: right;
    padding-right: 10px;
    padding-left: 24px;
}

.automations-page .box-tools .automations-search-wrap .form-control-feedback {
    left: 2px;
    right: auto;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #777;
}

[dir="ltr"] .automations-page .box-tools .automations-search-wrap #table_search {
    direction: ltr;
    text-align: left;
    padding-right: 30px;
    padding-left: 10px;
}

[dir="ltr"] .automations-page .box-tools .automations-search-wrap .form-control-feedback {
    left: auto;
    right: 8px;
}

.automations-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto;
}

.automations-table thead th,
.automations-table tbody td {
    text-align: right !important;
    vertical-align: middle !important;
    height: 38px;
    padding: 0 16px !important;
    line-height: 1.2;
}

.automations-table thead th.automations-col-edit,
.automations-table thead th.automations-col-delete,
.automations-table tbody td.automations-edit-cell,
.automations-table tbody td.automations-delete-cell {
    text-align: center !important;
    width: 88px;
    min-width: 88px;
    white-space: nowrap;
}

.automations-table thead th[data-sort-ignore="true"] {
    cursor: default !important;
    pointer-events: none;
}

.automations-table thead th[data-sort-ignore="true"] > span.footable-sort-indicator {
    display: none !important;
}

.automations-table thead th.footable-sortable {
    cursor: pointer;
}

.automations-table thead th.footable-sortable > span.footable-sort-indicator {
    opacity: 1 !important;
}

.automations-table tbody td.automations-desc-cell {
    white-space: normal;
}

.automations-table tbody td.automations-edit-cell a,
.automations-table tbody td.automations-delete-cell a {
    padding: 0;
    margin: 0;
    text-decoration: none;
    vertical-align: middle;
}

.automations-table tbody td.automations-edit-cell a .fa-edit,
.automations-table tbody td.automations-edit-cell a:hover .fa-edit,
.automations-table tbody td.automations-delete-cell a .fa-trash-o,
.automations-table tbody td.automations-delete-cell a:hover .fa-trash-o {
    color: #000;
}

.automations-table td.automations-status-cell .label {
    margin: 0;
    font-size: 13px;
    line-height: 1;
}

.whatsapp-templates-tools .has-feedback {
    width: 220px;
    min-width: 170px;
}

.whatsapp-templates-page .box-tools .whatsapp-templates-search-wrap {
    width: auto;
    min-width: 0;
}

.whatsapp-templates-tools #table_search {
    min-width: 170px;
    width: 170px;
}

.whatsapp-templates-page .box-tools .whatsapp-templates-search-wrap #table_search {
    direction: rtl;
    text-align: right;
    padding-right: 10px;
    padding-left: 24px;
}

.whatsapp-templates-page .box-tools .whatsapp-templates-search-wrap .form-control-feedback {
    left: 2px;
    right: auto;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #777;
}

[dir="ltr"] .whatsapp-templates-page .box-tools .whatsapp-templates-search-wrap #table_search {
    direction: ltr;
    text-align: left;
    padding-right: 30px;
    padding-left: 10px;
}

[dir="ltr"] .whatsapp-templates-page .box-tools .whatsapp-templates-search-wrap .form-control-feedback {
    left: auto;
    right: 8px;
}

.whatsapp-templates-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto;
}

.whatsapp-templates-table thead th,
.whatsapp-templates-table tbody td {
    text-align: right !important;
    vertical-align: middle !important;
    height: 38px;
    padding: 0 16px !important;
    line-height: 1.2;
}

.whatsapp-templates-table thead th.whatsapp-ltr-col,
.whatsapp-templates-table tbody td.whatsapp-ltr-col,
.whatsapp-templates-table tbody td.whatsapp-updated-cell {
    text-align: center !important;
}

.whatsapp-templates-table thead th.whatsapp-actions-col,
.whatsapp-templates-table tbody td.whatsapp-actions-col {
    text-align: center !important;
    width: 72px;
    min-width: 72px;
    white-space: nowrap;
}

.whatsapp-templates-table thead th[data-sort-ignore="true"] {
    cursor: default !important;
    pointer-events: none;
}

.whatsapp-templates-table thead th[data-sort-ignore="true"] > span.footable-sort-indicator {
    display: none !important;
}

.whatsapp-templates-table thead th.footable-sortable {
    cursor: pointer;
}

.whatsapp-templates-table thead th.footable-sortable > span.footable-sort-indicator {
    opacity: 1 !important;
}

.whatsapp-templates-table tbody td.whatsapp-name-cell {
    white-space: normal;
    font-family: Consolas, 'Courier New', monospace;
    direction: ltr;
    text-align: right !important;
}

.whatsapp-templates-table tbody td.whatsapp-actions-col a {
    padding: 0;
    margin: 0;
    text-decoration: none;
    vertical-align: middle;
}

.whatsapp-templates-table tbody td.whatsapp-actions-col a .fa-edit,
.whatsapp-templates-table tbody td.whatsapp-actions-col a:hover .fa-edit {
    color: #000;
    font-size: 18px;
    line-height: 19px;
}

/* ===================== Project statuses admin ===================== */
#modal-update-status .modal-dialog {
    width: 550px;
    max-width: 550px;
}

.project-status-page .box-tools .project-status-search-wrap {
    display: inline-block;
    width: auto;
    min-width: 0;
}

.project-status-page .box-tools .project-status-search-wrap #table_search {
    min-width: 170px;
    width: 170px;
    direction: rtl;
    text-align: right;
    padding-right: 10px;
    padding-left: 24px;
}

.project-status-page .box-tools .project-status-search-wrap .form-control-feedback {
    left: 2px;
    right: auto;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #777;
}

[dir="ltr"] .project-status-page .box-tools .project-status-search-wrap #table_search {
    direction: ltr;
    text-align: left;
    padding-right: 30px;
    padding-left: 10px;
}

[dir="ltr"] .project-status-page .box-tools .project-status-search-wrap .form-control-feedback {
    left: auto;
    right: 8px;
}

.project-statuses-table tbody td.ps-col-actions a {
    padding: 0;
    margin: 0;
    color: #666;
    text-decoration: none;
    vertical-align: middle;
}

.project-statuses-table tbody td.ps-col-actions a:hover {
    color: #333;
}

#modal-update-status .status-modal-form {
    max-width: 320px;
    margin: 0 auto;
    text-align: right;
}

#modal-update-status .task-form-group > label {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    font-weight: 600;
    text-align: right;
}

#modal-update-status .task-form-group .form-control {
    display: block;
    width: 100%;
}

#modal-update-status .status-modal-preview.status-cell {
    padding-top: 0;
    text-align: right;
}

#modal-update-status .status-color-group > label {
    text-align: center;
}

#modal-update-status .status-preview-group > label {
    text-align: center;
}

#modal-update-status .status-preview-group .status-modal-preview.status-cell {
    text-align: center;
}

#modal-update-status .status-colorpicker-inline {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

#modal-update-status .status-colorpicker-inline .colorpicker {
    position: static;
    display: inline-block;
    float: none;
    width: auto;
    min-width: 0;
    padding: 10px;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    z-index: auto;
}

#modal-update-status .status-colorpicker-inline .colorpicker:before,
#modal-update-status .status-colorpicker-inline .colorpicker:after {
    display: none;
}

/* Keep in sync with STATUS_COLORPICKER_SIZE in js/projectStatuses.js */
#modal-update-status .status-colorpicker-inline .colorpicker-saturation {
    float: left;
    width: 220px;
    height: 220px;
    background-size: 100% 100%;
}

#modal-update-status .status-colorpicker-inline .colorpicker-saturation i {
    width: 10px;
    height: 10px;
    margin: -6px 0 0 -6px;
}

#modal-update-status .status-colorpicker-inline .colorpicker-saturation i b {
    width: 10px;
    height: 10px;
}

#modal-update-status .status-colorpicker-inline .colorpicker-hue {
    float: left;
    width: 28px;
    height: 220px;
    margin-left: 8px;
    background-size: 100% 100%;
}

#modal-update-status .status-colorpicker-inline .colorpicker-color {
    width: 256px;
    max-width: 256px;
    height: 16px;
    margin-top: 10px;
    box-sizing: border-box;
}

#modal-update-status .status-colorpicker-inline .colorpicker-color div {
    width: 100%;
    height: 16px;
    box-sizing: border-box;
}

#modal-update-status .task-form-group .form-control.status-color-hex {
    display: block;
    width: 7.25em;
    max-width: 100%;
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 8px;
    padding-right: 8px;
    direction: ltr;
    text-align: center;
}

#modal-update-status .task-form-group .form-control.status-color-hex.has-error {
    border-color: #dd4b39;
}

#modal-update-status #statusModalPreview.label {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    display: inline-block !important;
    text-align: center !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    padding: 0.2em 0.6em 0.3em !important;
    vertical-align: middle;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-status-page .box-body.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.project-statuses-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto;
}

.project-statuses-table thead th,
.project-statuses-table tbody td {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 10px 16px !important;
}

.project-statuses-table tbody td.status-cell {
    white-space: nowrap;
}

.project-statuses-table th.ps-col-actions,
.project-statuses-table tbody td.ps-col-actions {
    width: 88px;
    min-width: 88px;
    white-space: nowrap;
}

.project-statuses-table thead th[data-sort-ignore="true"] {
    cursor: default !important;
}

.project-statuses-table thead th[data-sort-ignore="true"].footable-sortable,
.project-statuses-table thead th[data-sort-ignore="true"] {
    pointer-events: none;
}

.project-statuses-table thead th[data-sort-ignore="true"] > span.footable-sort-indicator,
.project-statuses-table thead th[data-sort-ignore="true"] > span.fooicon {
    display: none !important;
}

.project-statuses-table tbody td.ps-col-name,
.project-statuses-table tbody td.ps-col-name strong {
    font-weight: 700;
    color: #333;
}

/* ===================== Groups admin (groups.aspx) ===================== */
.groups-page .box-tools .groups-search-wrap {
    width: auto;
    min-width: 0;
}

.groups-page .box-tools .groups-search-wrap #table_search {
    min-width: 170px;
    width: 170px;
    direction: rtl;
    text-align: right;
    padding-right: 10px;
    padding-left: 24px;
}

.groups-page .box-tools .groups-search-wrap .form-control-feedback {
    left: 2px;
    right: auto;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #777;
}

[dir="ltr"] .groups-page .box-tools .groups-search-wrap #table_search {
    direction: ltr;
    text-align: left;
    padding-right: 30px;
    padding-left: 10px;
}

[dir="ltr"] .groups-page .box-tools .groups-search-wrap .form-control-feedback {
    left: auto;
    right: 8px;
}

.groups-page .box-body.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.groups-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto;
}

.groups-table thead th,
.groups-table tbody td {
    text-align: right !important;
    vertical-align: middle !important;
    height: 38px;
    padding: 0 16px !important;
    line-height: 1.2;
}

.groups-table thead th.groups-col-fields,
.groups-table thead th.groups-col-actions,
.groups-table thead th[data-col="uniqueKey"],
.groups-table tbody td.groups-unique-key-cell,
.groups-table tbody td.groups-table-actions {
    text-align: center !important;
}

.groups-table tbody td.groups-fields-cell {
    text-align: right !important;
}

.groups-table th.groups-col-fields,
.groups-table tbody td.groups-fields-cell {
    width: 200px;
    min-width: 200px;
    white-space: nowrap;
}

.groups-table th.groups-col-actions,
.groups-table tbody td.groups-table-actions {
    width: 88px;
    min-width: 88px;
    white-space: nowrap;
}

.groups-table tbody td.groups-fields-cell a {
    color: #333;
    text-decoration: none;
}

.groups-table tbody td.groups-fields-cell a:hover {
    text-decoration: underline;
}

.groups-table tbody td.groups-url-cell a {
    color: #333;
    text-decoration: none;
}

.groups-table tbody td.groups-url-cell a:hover {
    text-decoration: underline;
}

.groups-table tbody td.groups-table-actions a {
    padding: 0;
    margin: 0;
    color: #666;
    text-decoration: none;
    vertical-align: middle;
}

.groups-table tbody td.groups-table-actions a:hover {
    color: #333;
}

/* ===================== Project departments (projectDepartments.aspx) ===================== */
#modal-department-employees .modal-dialog {
    max-width: 640px;
    width: 96%;
}

#modal-department-employees .dept-emp-section {
    margin-bottom: 20px;
}

/* Список сотрудников/менеджеров в модалке: вертикальный скролл при переполнении */
#modal-department-employees .dept-emp-list-wrap,
#modal-update-department .dept-mgr-list-wrap {
    max-height: 220px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

#modal-department-employees .dept-emp-list-wrap > .table,
#modal-update-department .dept-mgr-list-wrap > .table {
    min-width: 0;
    width: 100%;
    margin-bottom: 0;
}

#modal-department-employees .dept-emp-section-label,
#modal-update-department .dept-emp-section-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    text-align: right;
}

#modal-department-employees .dept-emp-add-picker-wrap {
    position: relative;
}

#modal-department-employees .dept-emp-add-picker-wrap .crm-form-picker-trigger,
#modal-update-department .dept-mgr-add-picker-wrap .crm-form-picker-trigger {
    width: 100%;
}

.managers-selector-popup.js-dept-emp-picker-dropdown,
.managers-selector-popup.js-dept-mgr-picker-dropdown {
    --managers-popup-chrome-height: 120px;
    z-index: 1075;
}

.project-dept-page .box-tools .has-feedback {
    width: 220px;
    min-width: 170px;
}

.project-dept-page .dept-form-hint,
#modal-department-employees .dept-form-hint,
#modal-update-department .dept-form-hint {
    color: #3c8dbc;
    margin-top: 8px;
}

#modal-update-department .modal-dialog {
    max-width: 640px;
    width: 96%;
}

#modal-update-department .dept-edit-mgr-section {
    margin-top: 4px;
}

#modal-update-department .dept-mgr-add-picker-wrap {
    position: relative;
}

#modal-update-department .dept-mgr-remove,
#modal-update-department .dept-mgr-remove i,
#modal-department-employees .dept-emp-remove,
#modal-department-employees .dept-emp-remove i {
    color: #000 !important;
}

#modal-update-department .dept-name-section {
    margin-bottom: 20px;
}

.project-departments-table {
    table-layout: fixed;
    width: 100%;
}

.project-departments-table > colgroup > col {
    width: 25%;
}

.project-departments-table thead th,
.project-departments-table tbody td {
    vertical-align: middle !important;
    height: 38px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-inline: 16px !important;
    line-height: 1.2;
}

.wrapper .project-departments-table tbody tr:has(td .project-responsibles) {
    min-height: 0 !important;
}

.project-departments-table th[data-col],
.project-departments-table td {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

.project-departments-table.table > thead > tr > th[data-col="responsibleFullName"],
.project-departments-table.table > tbody > tr > td.dept-responsible-cell,
.project-departments-table.table > thead > tr > th[data-col="memberCount"],
.project-departments-table.table > tbody > tr > td.dept-emp-td {
    text-align: center !important;
}

.project-departments-table.table > thead > tr > th[data-col="actions"],
.project-departments-table.table > tbody > tr > td.dept-actions-cell {
    text-align: left !important;
}

.project-departments-table td.dept-responsible-cell .project-responsibles.crm-responsible-avatars-stack {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-height: 0;
}

.project-departments-table td.dept-responsible-cell .project-responsible-empty {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.project-departments-table .manager-avatar-bubble::before,
.project-departments-table .manager-avatar-bubble::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

/* Long Hebrew menu labels wrap beside the icon, inside the sidebar. */
.sidebar-menu {
    white-space: normal;
}

.sidebar-menu > li.header,
.main-sidebar .user-panel {
    white-space: nowrap;
}

.sidebar-menu > li > a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: normal;
}

.sidebar-menu .treeview-menu > li > a {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    white-space: normal;
}

.sidebar-menu > li > a > .fa:not(.fa-angle-right):not(.pull-right),
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion {
    flex: 0 0 28px;
    width: 28px;
    min-width: 28px;
    max-width: none;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    overflow: visible;
}

.sidebar-menu .treeview-menu > li > a > .fa:not(.fa-angle-right):not(.pull-right),
.sidebar-menu .treeview-menu > li > a > .glyphicon,
.sidebar-menu .treeview-menu > li > a > .ion {
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
    height: calc(14px * 1.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.sidebar-menu .treeview-menu > li > a > .fa-circle-o {
    font-size: 12px;
}

.sidebar-menu > li > a > span,
.sidebar-menu .treeview-menu > li > a > span {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.sidebar-menu li > a > .pull-right {
    flex: 0 0 auto;
    align-self: center;
}

@media (min-width: 768px) {
    body.sidebar-mini:not(.sidebar-collapse) .sidebar-menu:hover {
        overflow: hidden;
    }

    body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right) {
        display: block !important;
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
        white-space: normal;
    }
}