/**
 * tabler-migration.css
 * Нейтрализует конфликты старых стилей (styles.css, gravity-ui.css)
 * с Tabler UI. Подключается ПОСЛЕ всех остальных CSS.
 *
 * ВАЖНО: НЕ использовать !important на свойстве display у .nav-item,
 * потому что JS-аккордеоны переключают display через inline-стили.
 */

/* ============================================================
   1. САЙДБАР
   ============================================================ */

#sidebar.navbar {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 280px !important;
  height: 100vh !important;
  min-height: 100vh !important;
  z-index: 1030 !important;
  background: #1b2434 !important;
  color: #f8fafc !important;
  border-right: 1px solid rgba(98, 105, 118, 0.16) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: width 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Пока не применены права (RBAC), сайдбар не показываем — только opacity давала «мусор» в углу */
#sidebar.navbar.sidebar-pending-rbac {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#sidebar.navbar:not(.sidebar-pending-rbac) {
  transition: opacity 0.15s ease;
}

/* container-fluid — колонка на всю высоту */
#sidebar.navbar > .container-fluid {
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

/* Брендинг */
#sidebar.navbar .navbar-brand {
  padding: 0.75rem 1rem !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

#sidebar.navbar .navbar-brand a {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  text-decoration: none !important;
  color: inherit !important;
}

#sidebar.navbar .navbar-brand-image {
  height: 32px !important;
  width: auto !important;
  margin: 0 !important;
}

#sidebar.navbar .sidebar-brand-text {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: #fff !important;
}

/* Скрываем старый .sidebar-header если он есть */
#sidebar.navbar .sidebar-header {
  display: none !important;
}

/* Скрываем мобильный toggler Bootstrap — используем свой */
#sidebar.navbar .navbar-toggler {
  display: none !important;
}

/* Навигация — скроллируемая средняя часть */
#sidebar.navbar .navbar-collapse {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* На десктопе collapse всегда открыт */
@media (min-width: 992px) {
  #sidebar.navbar .navbar-collapse {
    display: flex !important;
  }
}

/* Навигационный список */
#sidebar.navbar .navbar-nav {
  flex-direction: column !important;
  width: 100% !important;
  padding: 0.25rem 0 !important;
  margin: 0 !important;
  list-style: none !important;
  gap: 0 !important;
}

/* Пункт навигации — БЕЗ !important на display (JS управляет видимостью) */
#sidebar.navbar .nav-item {
  margin: 0 !important;
  padding: 0 !important;
}

/* Ссылка навигации */
#sidebar.navbar .nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.4375rem 1rem !important;
  margin: 1px 0.5rem !important;
  border-radius: 0.375rem !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
  background: transparent !important;
}

#sidebar.navbar .nav-link:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
}

#sidebar.navbar .nav-link.active {
  background: var(--tblr-primary, #0054a6) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Иконка */
#sidebar.navbar .nav-link-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.5rem !important;
  height: 1.5rem !important;
  color: inherit !important;
  opacity: 0.7 !important;
  flex-shrink: 0 !important;
}

#sidebar.navbar .nav-link:hover .nav-link-icon,
#sidebar.navbar .nav-link.active .nav-link-icon {
  opacity: 1 !important;
}

#sidebar.navbar .nav-link-icon .icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  stroke-width: 1.75 !important;
}

/* Текст ссылки */
#sidebar.navbar .nav-link-title {
  font-size: inherit !important;
}

/* Заголовки секций */
#sidebar.navbar .nav-item-header {
  padding: 1rem 1rem 0.25rem !important;
  margin: 0 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
}

#sidebar.navbar .nav-item-header .nav-link-title {
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

/* Стрелка аккордеона */
#sidebar.navbar .sidebar-section-header::after {
  content: '▸' !important;
  position: absolute !important;
  right: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.6875rem !important;
  opacity: 0.4 !important;
  transition: transform 0.2s ease !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

#sidebar.navbar .sidebar-section-header[data-expanded="true"]::after,
#sidebar.navbar .sidebar-section-header[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(90deg) !important;
}

/* Кнопка collapse/expand сайдбара */
#sidebar.navbar .sidebar-toggle-btn {
  all: unset !important;
  position: absolute !important;
  right: 0.75rem !important;
  top: 0.75rem !important;
  width: 2rem !important;
  height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-radius: 0.25rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
  transition: background 0.15s, color 0.15s !important;
}

#sidebar.navbar .sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* ============================================================
   1b. ФУТЕР САЙДБАРА (user info + logout)
   ============================================================ */

#sidebar.navbar .sidebar-footer {
  flex-shrink: 0 !important;
  margin-top: auto !important;
  padding: 0.75rem 1rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(0, 0, 0, 0.15) !important;
  display: block !important;
}

#sidebar.navbar .sidebar-footer .d-flex {
  display: flex !important;
  align-items: center !important;
}

#sidebar.navbar .sidebar-footer .flex-fill {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#sidebar.navbar .sidebar-footer .fw-medium {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #fff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#sidebar.navbar .sidebar-footer .small.text-secondary {
  font-size: 0.6875rem !important;
  color: rgba(255, 255, 255, 0.45) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#sidebar.navbar .sidebar-footer .sidebar-logout {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2rem !important;
  height: 2rem !important;
  cursor: pointer !important;
  border-radius: 0.25rem !important;
  color: rgba(255, 255, 255, 0.5) !important;
  transition: background 0.15s, color 0.15s !important;
  flex-shrink: 0 !important;
  margin-left: 0.5rem !important;
}

#sidebar.navbar .sidebar-footer .sidebar-logout:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
}

#sidebar.navbar .sidebar-footer .sidebar-logout .icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* Collapsed-режим */
#sidebar.navbar.collapsed {
  width: 64px !important;
}

#sidebar.navbar.collapsed .nav-link-title,
#sidebar.navbar.collapsed .sidebar-brand-text,
#sidebar.navbar.collapsed .sidebar-footer .flex-fill,
#sidebar.navbar.collapsed .nav-item-header {
  display: none !important;
}

#sidebar.navbar.collapsed .nav-link {
  justify-content: center !important;
  padding: 0.5rem !important;
  margin: 1px 0.25rem !important;
}

#sidebar.navbar.collapsed .nav-link-icon {
  margin: 0 !important;
}

/* ============================================================
   2. ЛЕЙАУТ СТРАНИЦЫ
   ============================================================ */

#app-container {
  display: flex !important;
  min-height: 100vh !important;
}

/* Sidebar-container скрываем — сайдбар fixed, не участвует во flex */
#app-container #sidebar-container {
  width: 0 !important;
  flex: 0 0 0px !important;
  overflow: hidden !important;
}

/* Основное содержимое — с отступом под fixed-сайдбар */
#main-app.page-wrapper {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  margin-left: 280px !important;
  background: var(--tblr-body-bg, #f1f5f9) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
}

/* Матрица планирования: #scroll-area сам является scroll-контейнером,
   поэтому overflow-x:hidden на main-app не мешает sticky внутри #scroll-area */

/* Сброс старого стиля main */
#main-app main {
  padding: 0 !important;
}

/* ============================================================
   3. СТРАНИЦА ВХОДА
   ============================================================ */

/* Login-page: НЕ используем display !important, чтобы auth.js
   мог скрыть через inline style="display:none" */
#login-page.page-center {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: var(--tblr-body-bg, #f1f5f9);
}

#login-page .card {
  border: 1px solid var(--tblr-border-color, #e6e7e9) !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.04) !important;
  border-radius: 0.5rem !important;
}

#login-page .login-logo {
  height: 80px !important;
  width: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

#login-page .form-label {
  display: block !important;
  text-align: left !important;
  min-width: auto !important;
  font-weight: 500 !important;
}

#login-page .form-control {
  width: 100% !important;
}

/* Скрытие login-page — вызывается auth.js через inline style */

/* ============================================================
   4. КАРТОЧКИ ДАШБОРДА
   ============================================================ */

#dashboard {
  display: block !important;
}

#dashboard-widgets.row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: -0.5rem !important;
}

#dashboard-widgets > .col-sm-6,
#dashboard-widgets > .col-lg-4,
#dashboard-widgets > [class*="col-"] {
  padding: 0.5rem !important;
}

#dashboard-widgets .card-link {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
  height: 100% !important;
  transition: box-shadow 0.2s, transform 0.15s !important;
  border: 1px solid var(--tblr-border-color, #e6e7e9) !important;
}

#dashboard-widgets .card-link:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px) !important;
}

#dashboard-widgets .avatar-lg {
  width: 3.5rem !important;
  height: 3.5rem !important;
  border-radius: 0.375rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#dashboard-widgets .icon-lg {
  width: 1.75rem !important;
  height: 1.75rem !important;
}

/* Уведомление */
#dashboard-notification.alert {
  margin-bottom: 1rem !important;
}

/* ============================================================
   5. СТРАНИЦЫ СОТРУДНИКОВ И ПРОЕКТОВ
   ============================================================ */

/* --- 5.1 Общее: page-wrapper на всех страницах --- */
#main-app.page-wrapper .page-header {
  background: #fff !important;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9) !important;
  padding: 0.75rem 0 !important;
  flex-shrink: 0 !important;
}

#main-app.page-wrapper .page-header .page-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--tblr-body-color, #1e293b) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

#main-app.page-wrapper .page-body {
  flex: 1 !important;
  padding: 1rem 0 !important;
}

/* --- 5.1b Нейтрализация глобальных старых стилей h2/h3 --- */
.page-wrapper h2,
.page-wrapper h3 {
  margin-bottom: 0 !important;
  letter-spacing: normal !important;
}

/* --- 5.2 Спойлеры (добавление/импорт) --- */

/* Общий стиль для ВСЕХ спойлеров на всех страницах */
.page-wrapper .spoiler-header.card-header,
.page-wrapper .card-header .spoiler-header {
  background: var(--tblr-bg-surface, #fff) !important;
  background-image: none !important;
  color: var(--tblr-body-color, #1e293b) !important;
  cursor: pointer !important;
  user-select: none !important;
  border-radius: var(--tblr-border-radius, 4px) !important;
  box-shadow: none !important;
  transform: none !important;
}

.page-wrapper .spoiler-header.card-header:hover,
.page-wrapper .card-header .spoiler-header:hover {
  background: var(--tblr-bg-surface-secondary, #f8fafc) !important;
  background-image: none !important;
  color: var(--tblr-body-color, #1e293b) !important;
  transform: none !important;
  box-shadow: none !important;
}

.page-wrapper .spoiler-header.card-header span,
.page-wrapper .card-header .spoiler-header span {
  color: var(--tblr-body-color, #1e293b) !important;
}

/* Поворот стрелки спойлера при раскрытии (общий) */
.page-wrapper .spoiler-header .icon,
.page-wrapper .spoiler-header .icon-tabler {
  transition: transform 0.2s ease !important;
}

.page-wrapper .spoiler-header.expanded .icon,
.page-wrapper .spoiler-header.expanded .icon-tabler {
  transform: rotate(90deg) !important;
}

/* Общий стиль спойлер-контента (max-height вместо display) */
.page-wrapper .spoiler-content.card-body {
  max-height: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: none !important;
  transition: max-height 0.3s ease, padding 0.3s ease !important;
}

.page-wrapper .spoiler-content.card-body.expanded {
  max-height: 2000px !important;
  padding: 1.25rem !important;
  overflow: visible !important;
  border-top: 1px solid var(--tblr-border-color, #e6e7e9) !important;
}

/* Для practices-spoiler — каждая секция имеет свой padding */
.page-wrapper .practices-spoiler .spoiler-content.card-body.expanded {
  padding: 0 !important;
}

.employees-spoiler.card,
.projects-spoiler.card {
  border: 1px solid var(--tblr-border-color, #e6e7e9) !important;
  border-radius: var(--tblr-border-radius, 4px) !important;
  overflow: visible !important;
}

.employees-spoiler .spoiler-header.card-header,
.projects-spoiler .spoiler-header.card-header {
  background: var(--tblr-bg-surface, #fff) !important;
  background-image: none !important;
  color: var(--tblr-body-color, #1e293b) !important;
  padding: 0.75rem 1.25rem !important;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9) !important;
  cursor: pointer !important;
  user-select: none !important;
  border-radius: var(--tblr-border-radius, 4px) !important;
  margin: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.employees-spoiler .spoiler-header.card-header:hover,
.projects-spoiler .spoiler-header.card-header:hover {
  background: var(--tblr-bg-surface-secondary, #f8fafc) !important;
  background-image: none !important;
  color: var(--tblr-body-color, #1e293b) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Поворот стрелки при раскрытии спойлера */
.employees-spoiler .spoiler-header .icon-tabler,
.projects-spoiler .spoiler-header .icon-tabler {
  transition: transform 0.2s ease !important;
}

.employees-spoiler .spoiler-header.expanded .icon-tabler,
.projects-spoiler .spoiler-header.expanded .icon-tabler {
  transform: rotate(90deg) !important;
}

/* Контент спойлера: управляется через max-height + .expanded (app.js) */
.employees-spoiler .spoiler-content.card-body,
.projects-spoiler .spoiler-content.card-body {
  max-height: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: none !important;
  transition: max-height 0.3s ease, padding 0.3s ease !important;
}

.employees-spoiler .spoiler-content.card-body.expanded,
.projects-spoiler .spoiler-content.card-body.expanded {
  max-height: 2000px !important;
  padding: 1.25rem !important;
  overflow: visible !important;
  border-top: 1px solid var(--tblr-border-color, #e6e7e9) !important;
}

/* --- 5.3 Формы: обеспечиваем Tabler-стиль для g-input/g-select --- */
.page-wrapper .form-control.g-input,
.page-wrapper .form-select.g-select,
.page-wrapper .form-control,
.page-wrapper .form-select {
  font-size: 0.875rem !important;
  height: auto !important;
  border: 1px solid var(--tblr-border-color, #dadcde) !important;
  border-radius: var(--tblr-border-radius, 4px) !important;
  padding: 0.4375rem 0.75rem !important;
  background-color: var(--tblr-bg-forms, #fff) !important;
  color: var(--tblr-body-color, #1e293b) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.page-wrapper .form-control:focus,
.page-wrapper .form-select:focus {
  border-color: var(--tblr-primary, #0054a6) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb, 0, 84, 166), 0.25) !important;
  outline: none !important;
}

.page-wrapper .form-control-sm,
.page-wrapper .form-select-sm {
  font-size: 0.8125rem !important;
  padding: 0.25rem 0.5rem !important;
}

.page-wrapper .form-label {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--tblr-body-color, #1e293b) !important;
  margin-bottom: 0.25rem !important;
  display: block !important;
}

/* --- 5.4 Кнопки: btn совместимость с g-btn --- */

/* Убираем старый shine-эффект (::before/::after) на ВСЕХ кнопках */
.page-wrapper .btn::before,
.page-wrapper .btn::after,
.page-wrapper button::before,
.page-wrapper button::after,
.page-wrapper .btn-toggle-item::before,
.page-wrapper .btn-toggle-item::after,
.page-wrapper .export-btn::before,
.page-wrapper .export-btn::after,
.page-wrapper .import-btn::before,
.page-wrapper .import-btn::after {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}

.page-wrapper .btn.g-btn,
.page-wrapper .btn {
  height: auto !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-radius: var(--tblr-border-radius, 4px) !important;
  padding: 0.5rem 1.5rem !important;
  transform: none !important;
  box-shadow: none !important;
  background-image: none !important;
  position: relative !important;
  overflow: visible !important;
  transition: background-color 0.15s ease !important;
  border: none !important;
  cursor: pointer !important;
}

.page-wrapper .btn:hover,
.page-wrapper button:hover {
  transform: none !important;
  box-shadow: none !important;
  background-image: none !important;
  outline: none !important;
}

/* Двойная страховка: убиваем старый hover gradient для всех кнопок */
.page-wrapper .btn.btn-primary:hover { background: #004080 !important; }
.page-wrapper .btn.btn-success:hover { background: #2a9e3c !important; }
.page-wrapper .btn.btn-danger:hover { background: #c03030 !important; }
.page-wrapper .btn.btn-secondary:hover { background: #555a64 !important; }

.page-wrapper .btn.g-btn_primary,
.page-wrapper .btn-primary {
  background: var(--tblr-primary, #0054a6) !important;
  background-image: none !important;
  border-color: var(--tblr-primary, #0054a6) !important;
  color: #fff !important;
}

.page-wrapper .btn.g-btn_primary:hover,
.page-wrapper .btn-primary:hover {
  background: #004080 !important;
  background-image: none !important;
  border-color: #004080 !important;
  transform: none !important;
  box-shadow: none !important;
}

.page-wrapper .btn.g-btn_success,
.page-wrapper .btn-success {
  background: var(--tblr-success, #2fb344) !important;
  background-image: none !important;
  border-color: var(--tblr-success, #2fb344) !important;
  color: #fff !important;
}

.page-wrapper .btn.g-btn_success:hover,
.page-wrapper .btn-success:hover {
  background: #2a9e3c !important;
  background-image: none !important;
  border-color: #2a9e3c !important;
  transform: none !important;
  box-shadow: none !important;
}

.page-wrapper .btn-danger {
  background: var(--tblr-danger, #d63939) !important;
  background-image: none !important;
  border-color: var(--tblr-danger, #d63939) !important;
  color: #fff !important;
}

.page-wrapper .btn-danger:hover {
  background: #c03030 !important;
  background-image: none !important;
  border-color: #c03030 !important;
  transform: none !important;
  box-shadow: none !important;
}

.page-wrapper .btn-secondary {
  background: var(--tblr-secondary, #626976) !important;
  background-image: none !important;
  border-color: var(--tblr-secondary, #626976) !important;
  color: #fff !important;
}

.page-wrapper .btn-secondary:hover {
  background: #555a64 !important;
  background-image: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* WARNING — нужен явный фон, т.к. старые стили использовали gradient (background-image),
   а общий reset .page-wrapper .btn { background-image: none } делал кнопку прозрачной */
.page-wrapper .btn-warning {
  background: var(--tblr-warning, #f59f00) !important;
  background-image: none !important;
  border-color: var(--tblr-warning, #f59f00) !important;
  color: #1e293b !important;
}

.page-wrapper .btn-warning:hover {
  background: #d97706 !important;
  background-image: none !important;
  border-color: #d97706 !important;
  transform: none !important;
  box-shadow: none !important;
}

.page-wrapper .btn-warning:disabled,
.page-wrapper .btn-warning.disabled {
  background: var(--tblr-warning, #f59f00) !important;
  background-image: none !important;
  border-color: var(--tblr-warning, #f59f00) !important;
  color: #1e293b !important;
  opacity: 0.55 !important;
}

.page-wrapper .btn.g-btn_flat,
.page-wrapper .btn-outline-secondary {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--tblr-border-color, #dadcde) !important;
  color: var(--tblr-body-color, #1e293b) !important;
}

/* Outline primary — нужен явный border/text, иначе наследуется белый цвет из legacy .btn */
.page-wrapper .btn-outline-primary {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--tblr-primary, #0054a6) !important;
  color: var(--tblr-primary, #0054a6) !important;
}
.page-wrapper .btn-outline-primary:hover {
  background: var(--tblr-primary, #0054a6) !important;
  border-color: var(--tblr-primary, #0054a6) !important;
  color: #fff !important;
}

.page-wrapper .btn.g-btn_flat:hover,
.page-wrapper .btn-outline-secondary:hover {
  background: var(--tblr-bg-surface-secondary, #f8fafc) !important;
  background-image: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Размер sm для кнопок */
.page-wrapper .btn-sm {
  padding: 0.25rem 0.75rem !important;
  font-size: 0.8125rem !important;
}

/* Переопределение старых стилей .export-btn */
.page-wrapper .export-btn,
.page-wrapper .import-btn {
  padding: 0.5rem 1.5rem !important;
  font-size: 0.875rem !important;
}

.page-wrapper .export-btn svg,
.page-wrapper .import-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* --- 5.5 Карточки --- */
.page-wrapper .card {
  border: 1px solid var(--tblr-border-color, #e6e7e9) !important;
  border-radius: var(--tblr-border-radius, 4px) !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.04) !important;
  background: var(--tblr-bg-surface, #fff) !important;
}

.page-wrapper .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9) !important;
  padding: 0.75rem 1.25rem !important;
}

.page-wrapper .card-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.page-wrapper .card-body {
  padding: 1.25rem !important;
}

/* --- 5.6 Таблицы --- */
.page-wrapper .table.g-table,
.page-wrapper .table.card-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

.page-wrapper .table thead th {
  background: var(--tblr-bg-surface-secondary, #f8fafc) !important;
  border-bottom: 2px solid var(--tblr-border-color, #e6e7e9) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--tblr-secondary, #626976) !important;
  padding: 0.5rem 0.75rem !important;
  white-space: nowrap !important;
}

.page-wrapper .table thead th.sortable {
  cursor: pointer !important;
  user-select: none !important;
}

.page-wrapper .table thead th.sortable:hover {
  color: var(--tblr-body-color, #1e293b) !important;
}

.page-wrapper .table tbody td {
  padding: 0.5rem 0.75rem !important;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9) !important;
  font-size: 0.8125rem !important;
  vertical-align: middle !important;
  color: var(--tblr-body-color, #1e293b) !important;
}

/* Чередование строк — БЕЗ !important, чтобы JS inline-стили могли перекрасить ячейки */
.page-wrapper .table tbody tr:nth-child(even) {
  background-color: var(--tblr-bg-surface-secondary, #f8fafc);
}

.page-wrapper .table tbody tr:nth-child(odd) {
  background-color: var(--tblr-bg-surface, #fff);
}

.page-wrapper .table tbody tr:hover {
  background-color: rgba(var(--tblr-primary-rgb, 0, 84, 166), 0.04);
}

/* Нейтрализация старого голубого .employee-row — нужен !important т.к. старый CSS тоже с !important */
.page-wrapper .table tbody tr.employee-row {
  background-color: inherit !important;
}

.page-wrapper .table .sort-arrow {
  display: inline-block !important;
  margin-left: 0.25rem !important;
  font-size: 0.7rem !important;
}

/* --- 5.6b Кнопки действий в таблицах --- */
.page-wrapper .action-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  justify-content: center !important;
}

/* Полный сброс стилей кнопок действий — старые стили используют !important */
.page-wrapper .action-buttons .btn-edit,
.page-wrapper .action-buttons .btn-delete,
.page-wrapper .action-buttons .btn-save,
.page-wrapper .action-buttons .btn-expand,
.page-wrapper .action-buttons [class^="btn-"] {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--tblr-border-radius, 4px) !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  min-width: 1.75rem !important;
  min-height: 1.75rem !important;
  max-width: 1.75rem !important;
  max-height: 1.75rem !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--tblr-secondary, #626976) !important;
  transition: background-color 0.15s, color 0.15s !important;
  transform: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  outline: none !important;
}

.page-wrapper .action-buttons .btn-edit:hover {
  background: rgba(0, 84, 166, 0.1) !important;
  background-image: none !important;
  color: var(--tblr-primary, #0054a6) !important;
  transform: none !important;
  box-shadow: none !important;
}

.page-wrapper .action-buttons .btn-delete:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  background-image: none !important;
  color: #ef4444 !important;
  transform: none !important;
  box-shadow: none !important;
}

.page-wrapper .action-buttons .btn-save:hover {
  background: rgba(34, 197, 94, 0.1) !important;
  background-image: none !important;
  color: #16a34a !important;
  transform: none !important;
  box-shadow: none !important;
}

.page-wrapper .action-buttons .btn-expand:hover,
.page-wrapper .action-buttons [class^="btn-"]:hover {
  background: rgba(0, 84, 166, 0.08) !important;
  background-image: none !important;
  color: var(--tblr-primary, #0054a6) !important;
  transform: none !important;
  box-shadow: none !important;
}

.page-wrapper .action-buttons [class^="btn-"]:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  background: transparent !important;
}

/* SVG иконки внутри кнопок действий */
.page-wrapper .action-buttons .g-icon,
.page-wrapper .action-buttons svg {
  width: 1rem !important;
  height: 1rem !important;
  stroke-width: 2 !important;
  pointer-events: none !important;
}

/* Глобальный сброс hover-transform для ВСЕХ кнопок внутри page-wrapper */
.page-wrapper button:hover,
.page-wrapper .btn:hover {
  transform: none !important;
}

/* Сброс строчного hover — предотвращение мигания */
.page-wrapper .table tbody tr {
  transition: none !important;
}

/* --- 5.7 Фильтры --- */
.page-wrapper .filter-group {
  display: flex !important;
  flex-direction: column !important;
}

/* Сегменты периода отчёта: скрытие должно перебивать display:flex !important выше */
.page-wrapper .filter-group.report-period-segment.report-period-hidden {
  display: none !important;
}

/* --- 5.8 Input icon (поиск) --- */
.page-wrapper .input-icon {
  position: relative !important;
}

.page-wrapper .input-icon .input-icon-addon {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 0.75rem !important;
  color: var(--tblr-secondary, #626976) !important;
  pointer-events: none !important;
}

.page-wrapper .input-icon .form-control {
  padding-left: 2.25rem !important;
}

/* --- 5.9 Radio/checkbox Tabler стиль --- */
.page-wrapper .form-check {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.page-wrapper .form-check-input {
  margin: 0 !important;
}

.page-wrapper .form-check-label {
  font-size: 0.8125rem !important;
  cursor: pointer !important;
}

/* ============================================================
   5.10 ОТЧЁТНЫЕ СТРАНИЦЫ (report.html, hours-verification.html)
   ============================================================ */

/* Переопределяем старые стили .report-table-view для Tabler-таблиц */
.page-wrapper .report-table-view {
  display: none !important;
}

.page-wrapper .report-table-view.active {
  display: block !important;
}

/* Полная нейтрализация старых стилей таблиц внутри .report-table-view */
.page-wrapper .report-table-view table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.8125rem !important;
}

.page-wrapper .report-table-view table th {
  background: var(--tblr-bg-surface-secondary, #f8fafc) !important;
  border-bottom: 2px solid var(--tblr-border-color, #e6e7e9) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--tblr-secondary, #626976) !important;
  padding: 0.5rem 0.75rem !important;
  text-align: left !important;
}

.page-wrapper .report-table-view table td {
  padding: 0.5rem 0.75rem !important;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  font-size: 0.8125rem !important;
  vertical-align: middle !important;
  color: var(--tblr-body-color, #1e293b) !important;
}

.page-wrapper .report-table-view table td:first-child {
  font-weight: 600 !important;
  color: var(--tblr-body-color, #1e293b) !important;
}

/* Чередование строк в таблицах отчёта */
.page-wrapper .report-table-view table tbody tr:nth-child(even) {
  background-color: var(--tblr-bg-surface-secondary, #f8fafc);
}

.page-wrapper .report-table-view table tbody tr:nth-child(odd) {
  background-color: var(--tblr-bg-surface, #fff);
}

.page-wrapper .report-table-view table tbody tr:hover {
  background-color: rgba(var(--tblr-primary-rgb, 0, 84, 166), 0.04);
}

/* Строки-заголовки практик в таблице сверки часов */
.page-wrapper .table tbody tr.practice-header-row,
.page-wrapper .table tbody tr.practice-header-row td {
  background: #e7f0fa !important;
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  color: var(--tblr-primary, #0054a6) !important;
  border-bottom: 2px solid var(--tblr-primary, #0054a6) !important;
  padding: 0.625rem 0.75rem !important;
}

/* Нейтрализация голубого фона для employee-row в таблице сверки */
.page-wrapper .table tbody tr.employee-row,
.page-wrapper .table tbody tr.employee-row td {
  background-color: inherit !important;
}

/* Карточка фильтров — card-header с actions */
.page-wrapper .card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.page-wrapper .card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-left: auto !important;
}

/* Переключатель вида (btn-group toggle) */
.page-wrapper .btn-group-toggle {
  display: inline-flex !important;
  border: 1px solid var(--tblr-border-color, #dadcde) !important;
  border-radius: var(--tblr-border-radius, 4px) !important;
  overflow: hidden !important;
}

.page-wrapper .btn-group-toggle .btn-toggle-item {
  padding: 0.375rem 1rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  background: var(--tblr-bg-surface, #fff) !important;
  background-image: none !important;
  color: var(--tblr-body-color, #1e293b) !important;
  border: none !important;
  border-right: 1px solid var(--tblr-border-color, #dadcde) !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
  transform: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
}

.page-wrapper .btn-group-toggle .btn-toggle-item:last-child {
  border-right: none !important;
}

.page-wrapper .btn-group-toggle .btn-toggle-item:hover {
  background: var(--tblr-bg-surface-secondary, #f1f5f9) !important;
  background-image: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.page-wrapper .btn-group-toggle .btn-toggle-item.active {
  background: var(--tblr-primary, #0054a6) !important;
  color: #fff !important;
}

.page-wrapper .btn-group-toggle .btn-toggle-item.active:hover {
  background: #004080 !important;
}

/* Статистические карточки */
.page-wrapper .stat-card {
  background: var(--tblr-bg-surface, #fff) !important;
  border: 1px solid var(--tblr-border-color, #e6e7e9) !important;
  border-radius: var(--tblr-border-radius, 4px) !important;
  padding: 0.75rem 1rem !important;
  text-align: center !important;
  min-width: 120px !important;
}

.page-wrapper .stat-card .stat-card-label {
  font-size: 0.6875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--tblr-secondary, #626976) !important;
  font-weight: 600 !important;
  margin-bottom: 0.25rem !important;
}

.page-wrapper .stat-card .stat-card-value {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--tblr-body-color, #1e293b) !important;
  line-height: 1 !important;
}

/* ============================================================
   6. МОБИЛЬНАЯ АДАПТАЦИЯ
   ============================================================ */

/* Collapsed-сайдбар — уменьшаем margin контента */
#sidebar.navbar.collapsed ~ #main-app.page-wrapper,
#sidebar-container:has(.navbar.collapsed) ~ #main-app.page-wrapper {
  margin-left: 64px !important;
}

@media (max-width: 991.98px) {
  #sidebar.navbar {
    transform: translateX(-100%) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    width: 300px !important;
  }

  #sidebar.navbar.is-open {
    transform: translateX(0) !important;
  }

  #main-app.page-wrapper {
    margin-left: 0 !important;
  }
}

@media (max-width: 767.98px) {
  #dashboard-widgets > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ===== Direct costs: project rows vs totals rows ===== */
/* Ссылки на проекты — выделяем */
.page-wrapper .report-table td a {
  color: #0054a6 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.page-wrapper .report-table td a:hover {
  text-decoration: underline !important;
}

/* Итого-строки по практике — приглушённые, мелкие */
.page-wrapper .report-total-row.practice-total-row td {
  font-size: 12px !important;
  color: #626976 !important;
  background: transparent !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  border-bottom: 1px dashed #dadcde !important;
}
.page-wrapper .report-total-row.practice-total-row td strong {
  font-weight: 500 !important;
  color: #626976 !important;
}

/* Итого-строки по проекту — чуть заметнее, но не кричащие */
.page-wrapper .report-total-row.project-total-row td {
  font-size: 13px !important;
  color: #1e293b !important;
  background: #f8fafc !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  border-bottom: 2px solid #dadcde !important;
}
.page-wrapper .report-total-row.project-total-row td strong {
  font-weight: 600 !important;
}

/* ===== Advance-calc: data-entry-container fix ===== */
/* Нейтрализуем старые стили из styles.css, чтобы Tabler grid работал */
.page-wrapper .data-entry-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
}
.page-wrapper .data-entry-column {
  flex: 1 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
}

/* ===== Planning page: page-header compact ===== */
.page-wrapper .page-header {
  padding-bottom: 0.25rem !important;
  margin-bottom: 0 !important;
}

/* ===== Planning: СБРОС всех старых заливок строк (в режиме by_employee проекты должны быть прозрачными) ===== */
.page-wrapper .planning-table tr.planning-row-project,
.page-wrapper .planning-table .planning-row-project,
.page-wrapper #planning-tables-container .planning-row-project,
.page-wrapper #planning-tables-container tr.project-row {
  background: transparent !important;
}
.page-wrapper #planning-tables-container .planning-row-project td,
.page-wrapper #planning-tables-container tr.project-row td {
  background: transparent !important;
}
/* Первая колонка при гориз. скролле — непрозрачный фон (иначе «просвечивают» даты) */
.page-wrapper #planning-tables-container .planning-row-project td.fixed-col,
.page-wrapper #planning-tables-container tr.project-row td.fixed-col {
  background: #E8F0FE !important;
}

/* Строки сотрудников — единый #E8F0FE (by_employee), ВСЕ ячейки включая fixed-col */
.page-wrapper #planning-tables-container .planning-row-employee td,
.page-wrapper #planning-tables-container .planning-row-employee td.fixed-col,
.page-wrapper .planning-table tr.planning-row-employee td,
.page-wrapper .planning-table tr.planning-row-employee td.fixed-col {
  background: #E8F0FE !important;
}

/* Строки проектов-заголовков — тот же #E8F0FE (by_project), включая сам tr и все td */
.page-wrapper .planning-table tr.planning-row-project-header,
.page-wrapper .planning-table tr.project-row.planning-row-project-header,
.page-wrapper #planning-tables-container .planning-row-project-header,
.page-wrapper #planning-tables-container tr.planning-row-project-header {
  background: #E8F0FE !important;
}
.page-wrapper #planning-tables-container .planning-row-project-header td,
.page-wrapper #planning-tables-container .planning-row-project-header td.fixed-col,
.page-wrapper .planning-table tr.planning-row-project-header td,
.page-wrapper .planning-table tr.planning-row-project-header td.fixed-col {
  background: #E8F0FE !important;
}

/* Ядерный override: заливка fixed-col и employee-name-cell, перебивающая ВСЕ legacy-стили */
.page-wrapper .planning-table tr.planning-row-employee td.fixed-col,
.page-wrapper .planning-table tr.planning-row-employee td.employee-name-cell,
.page-wrapper .planning-table tr.employee-row.planning-row-employee td.fixed-col,
.page-wrapper .planning-table tr.employee-row.planning-row-employee td.employee-name-cell,
.page-wrapper .planning-table .planning-row-employee .employee-name-cell {
  background: #E8F0FE !important;
}
.page-wrapper .planning-table tr.planning-row-project-header td.fixed-col,
.page-wrapper .planning-table tr.planning-row-project-header td.project-name-cell,
.page-wrapper .planning-table tr.project-row.planning-row-project-header td.fixed-col,
.page-wrapper .planning-table tr.project-row.planning-row-project-header td.project-name-cell,
.page-wrapper .planning-table .planning-row-project-header .project-name-cell {
  background: #E8F0FE !important;
}

/* ===== Выходные/праздники — единообразный серый, перебивает АБСОЛЮТНО ВСЁ ===== */
.page-wrapper .planning-table th.weekend,
.page-wrapper .planning-table td.weekend,
.page-wrapper .planning-table .planning-row-employee td.weekend,
.page-wrapper .planning-table .planning-row-project td.weekend,
.page-wrapper .planning-table .planning-row-project-header td.weekend,
.page-wrapper .planning-table .project-row td.weekend,
.page-wrapper .planning-table .stage-row td.weekend,
.page-wrapper .planning-table .employee-row td.weekend,
.page-wrapper #planning-tables-container .planning-row-employee td.weekend,
.page-wrapper #planning-tables-container .planning-row-project-header td.weekend {
  background: #e6e7e9 !important;
  color: #999 !important;
}
/* Праздничные дни (cell-holiday) */
.page-wrapper .planning-table td.cell-holiday,
.page-wrapper .planning-table .planning-row-employee td.cell-holiday,
.page-wrapper .planning-table .planning-row-project td.cell-holiday,
.page-wrapper .planning-table .planning-row-project-header td.cell-holiday,
.page-wrapper #planning-tables-container .planning-row-employee td.cell-holiday,
.page-wrapper #planning-tables-container .planning-row-project-header td.cell-holiday {
  background: #e6e7e9 !important;
  color: #999 !important;
}

/* Input'ы внутри выходных/праздников — прозрачный/светло-серый фон (перебить workload-indicators.css .cell-holiday input) */
.page-wrapper .planning-table td.weekend input,
.page-wrapper .planning-table td.cell-holiday input,
.page-wrapper #planning-tables-container td.weekend input,
.page-wrapper #planning-tables-container td.cell-holiday input {
  background: transparent !important;
  color: #666 !important;
}

/* ===== Иерархия: отступы в первой колонке ===== */
/* by_employee: Сотрудник→Проект→Этап */
.planning-table .planning-row-employee td.fixed-col .employee-header {
  padding-left: 8px !important;
}
.planning-table .planning-row-project td.fixed-col,
.planning-table .project-row td.fixed-col {
  padding-left: 20px !important;
}
.planning-table .stage-row td.fixed-col,
.planning-table .planning-row-stage td.fixed-col {
  padding-left: 36px !important;
}

/* by_project: Проект→Этап→Сотрудник */
.planning-table .planning-row-project-header td.fixed-col {
  padding-left: 0 !important;
}
.planning-table .stage-name-cell {
  padding-left: 20px !important;
}
.planning-table .employee-in-stage-name-cell {
  padding-left: 36px !important;
}

/* ===== Кнопки +/x в первой колонке — справа ===== */
.planning-table .employee-header,
.planning-table .project-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
.planning-table .employee-header .employee-info,
.planning-table .project-header .project-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.planning-table .employee-header .employee-buttons,
.planning-table .project-header .btn-remove-project,
.planning-table .project-header .btn-add-stage {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* ===== Кнопка expand/collapse — справа от названия ===== */
.planning-table .btn-toggle-stages {
  all: unset !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
  color: #626976 !important;
  flex-shrink: 0 !important;
  margin-left: 4px !important;
  transition: background 0.15s, color 0.15s !important;
}
.planning-table .btn-toggle-stages:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}
.project-row:not(.collapsed) .btn-toggle-stages .toggle-icon {
  transform: rotate(90deg) !important;
}
.project-row.collapsed .btn-toggle-stages .toggle-icon {
  transform: rotate(0deg) !important;
}

/* ===== employee-info-line (by_project) — кнопки справа ===== */
.planning-table .employee-info-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

/* ===== Комментарий в ячейке — увеличить иконку (перебить workload-indicators.css) ===== */
.page-wrapper .planning-table td.cell-has-comment::after,
.page-wrapper td.cell-has-comment::after,
td.cell-has-comment::after {
  content: '💬' !important;
  font-size: 14px !important;
  top: -6px !important;
  right: 0px !important;
  line-height: 1 !important;
  z-index: 2 !important;
}

/* ===== Убрать двойной красный бордер с input внутри ячейки с комментарием ===== */
.page-wrapper .cell-has-comment input,
.page-wrapper .gantt-table .cell-has-comment input,
td.cell-has-comment input {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* ===== Planning page: table header fix ===== */
.page-wrapper .planning-table thead {
  background: #f8fafc !important;
}
.page-wrapper .planning-table thead th {
  background: #f8fafc !important;
  color: #626976 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  border-bottom: 2px solid #e6e7e9 !important;
}
.page-wrapper .planning-table thead th.fixed-col {
  background: #f8fafc !important;
}

/* ===== Planning page: employee selector (add employee) ===== */
.page-wrapper .employee-selector {
  border: 1px solid #dadcde !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  color: #1e293b !important;
  background: #fff !important;
}
.page-wrapper .employee-selector:focus {
  border-color: #0054a6 !important;
  box-shadow: 0 0 0 2px rgba(0,84,166,0.1) !important;
  outline: none !important;
}

/* ===== Planning page: pagination override ===== */
.page-wrapper .planning-pagination {
  background: transparent !important;
  border: none !important;
}
.page-wrapper .pagination-controls {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ===== Project Details page: characteristics grid fix ===== */
.page-wrapper #main-characteristics {
  display: flex !important;
  flex-wrap: wrap;
}

/* ===== Project Details page: gantt table fix ===== */
.page-wrapper .gantt-table {
  border-collapse: collapse !important;
}
.page-wrapper .gantt-table th,
.page-wrapper .gantt-table td {
  border: 1px solid #e6e7e9 !important;
  padding: 8px 12px !important;
}
.page-wrapper .gantt-table thead th {
  background: #f8fafc !important;
  font-weight: 600 !important;
  color: #626976 !important;
}

/* ===== Project Details page: stage toggle rotation ===== */
.page-wrapper .stage-toggle.collapsed {
  transform: rotate(-90deg) !important;
}

/* ============================================================
   7. ЖУРНАЛ АКТИВНОСТИ (activity-log.html)
   ============================================================ */

/* Кнопка закрытия модалки: защищаем от глобальных button-стилей */
#activity-log-detail-modal .btn-close {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  min-height: 0 !important;
  min-width: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--tblr-secondary, #626976) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-radius: 4px !important;
}
#activity-log-detail-modal .btn-close::before {
  content: '×' !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  transform: translateY(-1px);
}
#activity-log-detail-modal .btn-close:hover {
  background: rgba(var(--tblr-primary-rgb, 0, 84, 166), 0.08) !important;
  color: var(--tblr-primary, #0054a6) !important;
}

/* Модалка деталей: скролл и читаемая сетка, не зависит от глобальных .modal/.modal-content */
#activity-log-detail-modal.modal {
  z-index: 1050 !important; /* выше контента, ниже системных оверлеев */
}
#activity-log-detail-modal .modal-content {
  width: min(980px, 94vw) !important;
  max-width: 980px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#activity-log-detail-modal .modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9) !important;
  background: var(--tblr-bg-surface, #fff) !important;
}
#activity-log-detail-modal .modal-header h2 {
  margin: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--tblr-body-color, #1e293b) !important;
}
#activity-log-detail-modal .modal-body {
  padding: 1rem 1.25rem !important;
  overflow: auto !important;
}
#activity-log-detail-modal .modal-footer {
  padding: 0.75rem 1.25rem !important;
  border-top: 1px solid var(--tblr-border-color, #e6e7e9) !important;
  background: var(--tblr-bg-surface, #fff) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
}

#activity-log-detail-modal .detail-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem 1.25rem !important;
}
@media (max-width: 768px) {
  #activity-log-detail-modal .detail-grid {
    grid-template-columns: 1fr !important;
  }
}

#activity-log-detail-modal .detail-group label {
  display: block !important;
  margin: 0 0 0.25rem 0 !important;
  font-size: 0.6875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
  color: var(--tblr-secondary, #626976) !important;
}
#activity-log-detail-modal .detail-group span {
  display: block !important;
  color: var(--tblr-body-color, #1e293b) !important;
  word-break: break-word !important;
}
#activity-log-detail-modal .detail-group.full-width {
  grid-column: 1 / -1 !important;
}

#activity-log-detail-modal .changes-section {
  margin-top: 1rem !important;
}
#activity-log-detail-modal .changes-section h3 {
  margin: 0 0 0.5rem 0 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--tblr-body-color, #1e293b) !important;
}
#activity-log-detail-modal .changes-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
}
@media (max-width: 768px) {
  #activity-log-detail-modal .changes-grid {
    grid-template-columns: 1fr !important;
  }
}
#activity-log-detail-modal .changes-column h4 {
  margin: 0 0 0.5rem 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--tblr-secondary, #626976) !important;
}
#activity-log-detail-modal pre {
  margin: 0 !important;
  padding: 0.75rem !important;
  border: 1px solid var(--tblr-border-color, #e6e7e9) !important;
  border-radius: 4px !important;
  background: var(--tblr-bg-surface-secondary, #f8fafc) !important;
  color: var(--tblr-body-color, #1e293b) !important;
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
  max-height: 40vh !important;
  overflow: auto !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* ===== projects.html: Bootstrap 5 Modal — legacy styles.css задаёт .modal { display: none !important }
   и тёмный фон на корне .modal; без этого виден только backdrop, диалог не показывается ===== */
#modal-parent-project-create.modal.show {
  display: block !important;
  background: transparent !important;
  backdrop-filter: none !important;
  z-index: 1056 !important;
}

/* Габариты: без растягивания на всю высоту (modal-dialog-centered задаёт min-height: calc(100% - …)) */
#modal-parent-project-create .modal-dialog.modal-dialog-centered.pp-create-modal-dialog {
  max-width: min(32rem, calc(100vw - 2rem)) !important;
  width: 100% !important;
  min-height: auto !important;
  margin: 1.5rem auto !important;
  display: flex !important;
  align-items: center !important;
}
#modal-parent-project-create .pp-create-modal-dialog .modal-content {
  max-width: none !important;
  width: 100% !important;
}
#modal-parent-project-create .modal-footer .btn-outline-secondary {
  color: var(--tblr-body-color, #1e293b) !important;
  border-color: var(--tblr-border-color, #dadfe5) !important;
  background-color: var(--tblr-bg-surface, #fff) !important;
}
#modal-parent-project-create .modal-footer .btn-outline-secondary:hover {
  color: var(--tblr-body-color, #1e293b) !important;
  background-color: var(--tblr-bg-surface-secondary, #f8fafc) !important;
}

/* ===== parent-project.html: модалка «Добавить проекты» — те же конфликты с legacy .modal в styles.css ===== */
#pp-modal-add.modal.show {
  display: block !important;
  background: transparent !important;
  backdrop-filter: none !important;
  z-index: 1056 !important;
}
#pp-modal-add .modal-dialog.modal-dialog-centered.pp-add-children-modal-dialog {
  max-width: min(48rem, calc(100vw - 2rem)) !important;
  width: 100% !important;
  min-height: auto !important;
  margin: 1.5rem auto !important;
  display: flex !important;
  align-items: center !important;
}
#pp-modal-add .pp-add-children-modal-dialog .modal-content {
  max-width: none !important;
  width: 100% !important;
}
#pp-modal-add .modal-footer .btn-outline-secondary {
  color: var(--tblr-body-color, #1e293b) !important;
  border-color: var(--tblr-border-color, #dadfe5) !important;
  background-color: var(--tblr-bg-surface, #fff) !important;
}
#pp-modal-add .modal-footer .btn-outline-secondary:hover {
  color: var(--tblr-body-color, #1e293b) !important;
  background-color: var(--tblr-bg-surface-secondary, #f8fafc) !important;
}

/* parent-project: иконка отвязки дочернего проекта — контраст на полосатых строках */
#pp-children-table .pp-detach.btn-icon {
  color: var(--tblr-body-color, #1e293b) !important;
}
#pp-children-table .pp-detach.btn-icon:hover {
  color: var(--tblr-body-color, #1e293b) !important;
  background-color: var(--tblr-bg-surface-secondary, #f1f5f9) !important;
}

/* parent-project: кнопка удаления должна оставаться читаемой в disabled */
#pp-delete.btn-outline-danger {
  color: #b42318 !important;
  border-color: #f5c2c7 !important;
  background-color: #fff !important;
}
#pp-delete.btn-outline-danger:hover,
#pp-delete.btn-outline-danger:focus-visible,
#pp-delete.btn-outline-danger:active {
  color: #991b1b !important;
  border-color: #fca5a5 !important;
  background-color: #fff1f2 !important;
}
#pp-delete.btn-outline-danger:disabled,
#pp-delete.btn-outline-danger.disabled {
  color: #6b7280 !important;
  border-color: #d1d5db !important;
  background-color: #f9fafb !important;
  opacity: 1 !important;
}

/* projects.html: пиктограмма сворачивания группы должна быть заметной без hover */
#project-table .parent-group-toggle {
  color: var(--tblr-body-color, #111827) !important;
  background: var(--tblr-bg-surface, #ffffff) !important;
  border: 1px solid var(--tblr-border-color, #d1d5db) !important;
  opacity: 1 !important;
}
#project-table .parent-group-toggle i,
#project-table .parent-group-toggle svg {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
#project-table .parent-group-toggle:hover,
#project-table .parent-group-toggle:focus-visible,
#project-table .parent-group-toggle:active {
  color: var(--tblr-body-color, #111827) !important;
  background: var(--tblr-bg-surface-secondary, #f3f4f6) !important;
  border-color: var(--tblr-border-color, #9ca3af) !important;
}

/* ===== employee-revenue-report.html: Bootstrap 5 Modal — (1) legacy .modal в styles.css: display:none + фон;
   (2) диалог должен быть вне #app-root (прямой потомок body), иначе stacking context предков кладёт его под .modal-backdrop ===== */
#employee-revenue-projects-modal.modal.show {
  display: block !important;
  background: transparent !important;
  backdrop-filter: none !important;
  z-index: 1056 !important;
}
#employee-revenue-projects-modal .modal-dialog.modal-dialog-centered {
  max-width: min(48rem, calc(100vw - 2rem)) !important;
  width: 100% !important;
  min-height: auto !important;
  margin: 1.5rem auto !important;
  display: flex !important;
  align-items: center !important;
}
#employee-revenue-projects-modal .modal-content {
  max-width: none !important;
  width: 100% !important;
}