/*
 * InvestPortal shared shell and dashboard visual system.
 *
 * This file is intentionally loaded after the legacy inline stylesheet.  Shell
 * selectors are anchored to #app, #sidebar, and #page-dashboard so existing
 * feature pages can keep their current component contracts.
 */

:root {
  --shell-sidebar-expanded: 260px;
  --shell-sidebar-collapsed: 64px;
  --shell-topbar-height: 64px;
  --shell-sidebar-bg: #ffffff;
  --shell-sidebar-bg-deep: #f4f6f9;
  --shell-sidebar-surface: #f6f8fb;
  --shell-sidebar-border: #e3e8ee;
  --shell-sidebar-text: #5c6b79;
  --shell-sidebar-muted: #7b8794;
  --shell-sidebar-active: linear-gradient(100deg, rgba(0, 150, 219, .30), rgba(80, 184, 226, .12));
  --shell-sidebar-active-border: #0096db;
  --shell-workspace-bg: #f4f7fa;
  --shell-card-bg: #ffffff;
  --shell-card-border: #e2e9ef;
  --shell-text: #172330;
  --shell-muted: #70808d;
  --shell-accent: #2563eb;
  --shell-accent-hover: #1d4ed8;
  --shell-accent-soft: #eff6ff;
  --shell-info: #3d7bd9;
  --shell-warning: #d48926;
  --shell-danger: #dc5b64;
  --shell-success: #20a46a;
  --shell-radius-sm: 8px;
  --shell-radius-md: 12px;
  --shell-radius-lg: 16px;
  --shell-shadow-card: 0 1px 2px rgba(20, 34, 46, .03), 0 5px 18px rgba(20, 34, 46, .045);
  --shell-shadow-float: 0 12px 32px rgba(20, 34, 46, .14);
  --shell-focus-ring: 0 0 0 3px rgba(37, 99, 235, .22);
}

/* The topbar is shared by every page; keep its dimensions independent from
   page-specific controls rendered in the workspace. */
#app > .header,
#app > .topbar,
#app > .shell-topbar {
  min-height: var(--shell-topbar-height);
  height: var(--shell-topbar-height);
  padding: 0 28px;
  gap: 18px;
  background: #ffffff;
  border-bottom: 1px solid var(--shell-card-border);
  color: var(--shell-text);
  box-shadow: 0 1px 0 rgba(20, 34, 46, .015);
  position: relative;
  z-index: 100;
}

#app > .header .header-logo,
#app > .topbar .header-logo,
#app > .shell-topbar .header-logo {
  width: calc(var(--shell-sidebar-expanded) - 24px);
  min-width: 0;
  gap: 11px;
}

#app > .header .header-logo-icon,
#app > .topbar .header-logo-icon,
#app > .shell-topbar .header-logo-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 5px 12px rgba(37, 99, 235, .2);
}

#app > .header .header-logo-text,
#app > .topbar .header-logo-text,
#app > .shell-topbar .header-logo-text {
  color: var(--shell-text);
  font-size: 16px;
  letter-spacing: -.02em;
}

#app > .header .header-search,
#app > .topbar .header-search,
#app > .shell-topbar .header-search {
  max-width: 560px;
}

#app > .header .header-search input,
#app > .topbar .header-search input,
#app > .shell-topbar .header-search input {
  height: 38px;
  border-color: transparent;
  border-radius: 10px;
  background: #f2f5f8;
  color: var(--shell-text);
  box-shadow: none;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

#app > .header .header-search input:hover,
#app > .topbar .header-search input:hover,
#app > .shell-topbar .header-search input:hover {
  background: #edf2f5;
}

#app > .header .header-search input:focus,
#app > .topbar .header-search input:focus,
#app > .shell-topbar .header-search input:focus {
  border-color: rgba(37, 99, 235, .45);
  background: #ffffff;
  box-shadow: var(--shell-focus-ring);
}

#app > .header .header-btn-icon,
#app > .topbar .header-btn-icon,
#app > .shell-topbar .header-btn-icon {
  width: 36px;
  height: 36px;
  border-color: var(--shell-card-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--shell-muted);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

#app > .header .header-actions,
#app > .topbar .header-actions,
#app > .shell-topbar .header-actions {
  gap: 10px;
  min-height: 36px;
}

#app > .header .header-btn-icon:hover,
#app > .topbar .header-btn-icon:hover,
#app > .shell-topbar .header-btn-icon:hover {
  background: var(--shell-accent-soft);
  border-color: rgba(37, 99, 235, .28);
  color: var(--shell-accent-hover);
}

#app > .header .header-btn-icon:focus-visible,
#app > .topbar .header-btn-icon:focus-visible,
#app > .shell-topbar .header-btn-icon:focus-visible,
#app > .header .user-avatar:focus-visible,
#app > .topbar .user-avatar:focus-visible,
#app > .shell-topbar .user-avatar:focus-visible {
  outline: none;
  box-shadow: var(--shell-focus-ring);
}

#app > .header .user-avatar,
#app > .topbar .user-avatar,
#app > .shell-topbar .user-avatar {
  background: linear-gradient(145deg, #60a5fa, #2563eb);
  box-shadow: 0 4px 10px rgba(37, 99, 235, .18);
}

#app > .header .user-avatar .material-icons-outlined,
#app > .topbar .user-avatar .material-icons-outlined,
#app > .shell-topbar .user-avatar .material-icons-outlined {
  font-size: 20px;
  line-height: 1;
}

#app > .header .header-utility-btn,
#app > .topbar .header-utility-btn,
#app > .shell-topbar .header-utility-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

#app > .header #btnSyncDb,
#app > .topbar #btnSyncDb,
#app > .shell-topbar #btnSyncDb {
  color: #315b9c;
  border-color: #d5e2f3;
  background: #f7faff;
}

#app > .header #btnSyncDb:hover,
#app > .topbar #btnSyncDb:hover,
#app > .shell-topbar #btnSyncDb:hover {
  color: #1d4ed8;
  border-color: #9dbbe8;
  background: #eff6ff;
}

#app > .header .header-utility-btn.btn-secondary,
#app > .topbar .header-utility-btn.btn-secondary,
#app > .shell-topbar .header-utility-btn.btn-secondary {
  color: #315b9c;
  border-color: #d5e2f3;
  background: #ffffff;
}

#app > .header .header-utility-btn.btn-secondary:hover,
#app > .topbar .header-utility-btn.btn-secondary:hover,
#app > .shell-topbar .header-utility-btn.btn-secondary:hover {
  color: #1d4ed8;
  border-color: #9dbbe8;
  background: #eff6ff;
}

#app > .header .user-name,
#app > .topbar .user-name,
#app > .shell-topbar .user-name {
  color: var(--shell-text);
}

#app > .header .user-role,
#app > .topbar .user-role,
#app > .shell-topbar .user-role {
  color: var(--shell-muted);
}

#app > .header #currencySwitcher,
#app > .topbar #currencySwitcher,
#app > .shell-topbar #currencySwitcher {
  min-height: 36px !important;
  height: 36px;
  padding: 0 10px !important;
  border-color: var(--shell-card-border) !important;
  border-radius: var(--shell-radius-sm) !important;
  background: #ffffff !important;
  color: var(--shell-text) !important;
}

/* Shared button language.  The broad .btn selector is avoided so feature-page
   buttons retain their existing spacing and semantic variants. */
#app > .header .btn-primary,
#app > .topbar .btn-primary,
#app > .shell-topbar .btn-primary,
#page-dashboard .btn-primary,
#page-dashboard .shell-primary,
#page-dashboard [data-shell-action="primary"] {
  background: var(--shell-accent);
  border-color: var(--shell-accent);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, .16);
}

#app > .header .btn-primary:hover,
#app > .topbar .btn-primary:hover,
#app > .shell-topbar .btn-primary:hover,
#page-dashboard .btn-primary:hover,
#page-dashboard .shell-primary:hover,
#page-dashboard [data-shell-action="primary"]:hover {
  background: var(--shell-accent-hover);
  border-color: var(--shell-accent-hover);
  box-shadow: 0 5px 13px rgba(37, 99, 235, .22);
}

#app > .header .btn-secondary,
#app > .topbar .btn-secondary,
#app > .shell-topbar .btn-secondary,
#page-dashboard .btn-secondary,
#page-dashboard .shell-secondary,
#page-dashboard [data-shell-action="secondary"] {
  background: #ffffff;
  border-color: var(--shell-card-border);
  color: var(--shell-text);
  box-shadow: none;
}

#app > .header .btn-secondary:hover,
#app > .topbar .btn-secondary:hover,
#app > .shell-topbar .btn-secondary:hover,
#page-dashboard .btn-secondary:hover,
#page-dashboard .shell-secondary:hover,
#page-dashboard [data-shell-action="secondary"]:hover {
  background: #f2f7f7;
  border-color: rgba(37, 99, 235, .35);
  color: var(--shell-accent-hover);
}

#app > .header .btn:focus-visible,
#app > .topbar .btn:focus-visible,
#app > .shell-topbar .btn:focus-visible,
#page-dashboard .btn:focus-visible,
#page-dashboard button:focus-visible,
#page-dashboard a:focus-visible,
#page-dashboard [role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--shell-focus-ring);
}

/* Workspace and sidebar */
#app > .layout-body {
  min-height: 0;
  background: var(--shell-workspace-bg);
}

#app .main-content {
  min-width: 0;
  background: var(--shell-workspace-bg);
  color: var(--shell-text);
}

#app #sidebar {
  width: var(--shell-sidebar-expanded);
  min-width: var(--shell-sidebar-expanded);
  background: var(--shell-sidebar-bg);
  border-right: 1px solid var(--shell-sidebar-border);
  color: var(--shell-sidebar-text);
  transition: width .22s ease, min-width .22s ease, transform .22s ease, box-shadow .22s ease;
  z-index: 50;
}

#app #sidebar .sidebar-scroll {
  padding: 0 4px 18px 0;
  scrollbar-color: rgba(92, 107, 121, .25) transparent;
  scrollbar-width: none;
}

#app #sidebar .sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}

#app #sidebar .sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(92, 107, 121, .23);
  border-radius: 999px;
}

#app #sidebar .sidebar-section {
  padding: 4px 0;
}

#app #sidebar .sidebar-label {
  padding: 8px 14px 4px;
  color: var(--shell-sidebar-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
}

#app #sidebar .sidebar-divider {
  flex: 0 0 1px;
  height: 1px;
  /* суммарный воздух у границы: 20px до (2 margin пункта + 4 padding секции + 14)
     и 20px после (8 + 4 padding секции + 8 padding заголовка) */
  margin: 14px 20px 8px;
  background: var(--shell-sidebar-border);
}

#app #sidebar .sidebar-item {
  position: relative;
  width: calc(100% - 32px);
  height: 34px;
  min-height: 34px;
  margin: 2px 16px;
  padding: 8px 14px;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--shell-sidebar-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

#app #sidebar .sidebar-item:hover {
  background: rgba(0, 150, 219, .07);
  border-color: rgba(0, 150, 219, .12);
  color: #344454;
}

#app #sidebar .sidebar-item:focus-visible {
  outline: none;
  border-color: rgba(89, 192, 235, .68);
  box-shadow: 0 0 0 3px rgba(0, 150, 219, .18);
}

#app #sidebar .sidebar-item.active,
#app #sidebar .sidebar-item[aria-current="page"] {
  background: var(--shell-sidebar-active);
  border-color: rgba(89, 192, 235, .38);
  color: var(--shell-sidebar-text);
  box-shadow: inset 3px 0 0 var(--shell-sidebar-active-border), 0 5px 14px rgba(0, 150, 219, .18), inset 0 1px 0 rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

#app #sidebar .sidebar-item.active::before,
#app #sidebar .sidebar-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--shell-sidebar-active-border);
}

#app #sidebar .sidebar-item .icon {
  width: 20px;
  min-width: 20px;
  color: var(--shell-sidebar-muted);
  font-size: 18px;
  line-height: 1;
  transition: color .15s ease;
}

#app #sidebar .sidebar-item:hover .icon,
#app #sidebar .sidebar-item.active .icon,
#app #sidebar .sidebar-item[aria-current="page"] .icon {
  color: #8bd6f2;
}

#app #sidebar .nav-label,
#app #sidebar .sidebar-item > .label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app #sidebar .sidebar-badge {
  min-width: 20px;
  margin-left: auto;
  padding: 2px 6px;
  border: 0;
  border-radius: 999px;
  background: #0096db;
  color: #ffffff;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}

/* Desktop collapse. Support both the current class and the data attribute
   used by the shell lifecycle implementation. */
#app #sidebar.collapsed,
#app #sidebar[data-collapsed="true"] {
  width: var(--shell-sidebar-collapsed);
  min-width: var(--shell-sidebar-collapsed);
}

#app #sidebar.collapsed .sidebar-scroll,
#app #sidebar[data-collapsed="true"] .sidebar-scroll {
  padding-right: 7px;
  padding-left: 7px;
}

#app #sidebar.collapsed .sidebar-section,
#app #sidebar[data-collapsed="true"] .sidebar-section {
  width: 100%;
  flex: 0 0 auto;
}

#app #sidebar.collapsed .sidebar-label,
#app #sidebar.collapsed .nav-label,
#app #sidebar.collapsed .sidebar-item > .label,
#app #sidebar[data-collapsed="true"] .sidebar-label,
#app #sidebar[data-collapsed="true"] .nav-label,
#app #sidebar[data-collapsed="true"] .sidebar-item > .label {
  display: none;
}

#app #sidebar.collapsed .sidebar-divider,
#app #sidebar[data-collapsed="true"] .sidebar-divider {
  margin-right: 7px;
  margin-left: 7px;
}

#app #sidebar.collapsed .sidebar-item,
#app #sidebar[data-collapsed="true"] .sidebar-item {
  justify-content: center;
  width: calc(100% - 12px);
  padding: 8px;
  /* базовые 2px 16px съедали почти всю ширину — иконки сжимались */
  margin: 2px 6px;
}

#app #sidebar.collapsed .sidebar-item .icon,
#app #sidebar[data-collapsed="true"] .sidebar-item .icon {
  margin: 0;
}

#app #sidebar.collapsed .sidebar-item .icon,
#app #sidebar[data-collapsed="true"] .sidebar-item .icon {
  width: 24px;
  min-width: 24px;
  font-size: 22px;
}

#app #sidebar.collapsed .sidebar-badge,
#app #sidebar[data-collapsed="true"] .sidebar-badge {
  position: absolute;
  /* выше и мельче, чтобы не перекрывать иконку; «кольцо» цветом фона
     отделяет цифру от иконки при касании */
  top: -2px;
  right: 2px;
  min-width: 15px;
  margin: 0;
  padding: 1px 4px;
  font-size: 8.5px;
  line-height: 1.3;
  box-shadow: 0 0 0 2px var(--shell-sidebar-bg, #ffffff);
}

/* Tooltip labels are supplied by shell.js as data-tooltip/data-label.  The
   title fallback keeps the existing static sidebar understandable in the
   collapsed state when a title is present. */
#app #sidebar.collapsed .sidebar-item[data-tooltip]:hover::after,
#app #sidebar[data-collapsed="true"] .sidebar-item[data-tooltip]:hover::after,
#app #sidebar.collapsed .sidebar-item[data-label]:hover::after,
#app #sidebar[data-collapsed="true"] .sidebar-item[data-label]:hover::after,
#app #sidebar.collapsed .sidebar-item[title]:hover::after,
#app #sidebar[data-collapsed="true"] .sidebar-item[title]:hover::after {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: calc(100% + 8px);
  z-index: 1001;
  min-width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 7px;
  background: #1d2b36;
  box-shadow: var(--shell-shadow-float);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, 4px);
  opacity: 0;
  animation: shell-tooltip-in .12s ease forwards;
}

#app #sidebar.collapsed .sidebar-item[data-tooltip]:hover::after,
#app #sidebar[data-collapsed="true"] .sidebar-item[data-tooltip]:hover::after {
  content: attr(data-tooltip);
}

#app #sidebar.collapsed .sidebar-item[data-label]:hover::after,
#app #sidebar[data-collapsed="true"] .sidebar-item[data-label]:hover::after {
  content: attr(data-label);
}

#app #sidebar.collapsed .sidebar-item[title]:hover::after,
#app #sidebar[data-collapsed="true"] .sidebar-item[title]:hover::after {
  content: attr(title);
}

@keyframes shell-tooltip-in {
  from { opacity: 0; transform: translate(-50%, 4px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

#app #sidebar #sidebarCollapseBtn {
  right: -13px;
  width: 26px;
  height: 48px;
  border: 1px solid var(--shell-sidebar-border);
  border-radius: 0 10px 10px 0;
  background: var(--shell-sidebar-surface);
  color: var(--shell-sidebar-text);
  box-shadow: 3px 4px 12px rgba(0, 0, 0, .12);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

#app #sidebar #sidebarCollapseBtn:hover {
  border-color: rgba(43, 192, 173, .4);
  background: #2a3d49;
  color: #76e5d6;
}

#app #sidebar #sidebarCollapseBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(43, 192, 173, .25);
}

/* Dashboard composition. Legacy card and grid selectors are scoped to this
   page so catalog, kanban, CRM, and report pages are not restyled here. */
#page-dashboard {
  background: var(--shell-workspace-bg);
}

#page-dashboard .btn-primary,
#page-dashboard .shell-primary,
#page-dashboard [data-shell-action="primary"] {
  background: #0096db;
  border-color: #0096db;
  color: #fff;
}

#page-dashboard .btn-primary:hover,
#page-dashboard .shell-primary:hover,
#page-dashboard [data-shell-action="primary"]:hover {
  background: #007fb8;
  border-color: #007fb8;
}

#page-dashboard .page-header,
#page-dashboard .dashboard-heading {
  align-items: flex-start;
  padding: 28px 32px 0;
}

#page-dashboard .page-title,
#page-dashboard .dashboard-heading h1,
#page-dashboard .dashboard-heading .page-title {
  color: var(--shell-text);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.2;
}

#page-dashboard .page-subtitle,
#page-dashboard .dashboard-heading p,
#page-dashboard .dashboard-heading .page-subtitle {
  margin-top: 7px;
  color: var(--shell-muted);
  font-size: 13px;
}

#page-dashboard .page-body,
#page-dashboard .dashboard-body {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 24px 32px 40px;
}

#page-dashboard .stats-grid,
#page-dashboard .dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

#page-dashboard .stat-value--money {
  white-space: nowrap;
  font-size: 22px;
  letter-spacing: -.025em;
}

#page-dashboard .stat-card,
#page-dashboard .dashboard-kpi {
  position: relative;
  min-width: 0;
  height: 76px;
  min-height: 76px;
  padding: 8px 16px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--shell-card-border);
  border-radius: var(--shell-radius-md);
  background: var(--shell-card-bg);
  box-shadow: var(--shell-shadow-card);
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

#page-dashboard .stat-card::after,
#page-dashboard .dashboard-kpi::after {
  display: none;
}

#page-dashboard .stat-card.clickable:hover,
#page-dashboard .dashboard-kpi[role="button"]:hover,
#page-dashboard .dashboard-kpi.clickable:hover {
  border-color: rgba(37, 99, 235, .32);
  box-shadow: 0 8px 24px rgba(20, 34, 46, .09);
  transform: translateY(-2px);
}

#page-dashboard .stat-card:focus-visible,
#page-dashboard .dashboard-kpi:focus-visible {
  outline: none;
  border-color: rgba(37, 99, 235, .45);
  box-shadow: var(--shell-focus-ring);
}

#page-dashboard .stat-icon,
#page-dashboard .dashboard-kpi-icon {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  background: var(--shell-accent-soft);
  color: var(--shell-accent-hover);
}

#page-dashboard .stat-icon.orange,
#page-dashboard .stat-icon.blue,
#page-dashboard .stat-icon.purple {
  background: #e7f1ff;
  color: #4d80cf;
}

#page-dashboard .stat-icon.green {
  background: #e5f7ef;
  color: var(--shell-success);
}

#page-dashboard .stat-value,
#page-dashboard .dashboard-kpi-value {
  position: relative;
  z-index: 1;
  color: var(--shell-text);
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.15;
  letter-spacing: -.025em;
}

#page-dashboard #statsGrid .stat-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-dashboard .stat-label,
#page-dashboard .dashboard-kpi-label {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  color: var(--shell-muted);
  font-size: 12px;
  line-height: 1.35;
}

#page-dashboard .page-header .btn-sm {
  height: 30px;
  min-height: 30px;
  padding: 5px 10px;
  line-height: 18px;
}

#page-dashboard .section-header > .btn-xs {
  height: 26px;
  min-height: 26px;
  padding: 3px 8px;
  line-height: 18px;
}

#page-dashboard .dashboard-next-actions {
  margin-bottom: 20px;
  padding: 18px 22px;
  border: 1px solid rgba(37, 99, 235, .2);
  background: linear-gradient(135deg, #ffffff 0%, #f6fbfa 100%);
}

#page-dashboard .next-actions-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#page-dashboard .next-action-item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--shell-card-border);
  border-radius: var(--shell-radius-sm);
  background: rgba(255, 255, 255, .84);
}

#page-dashboard .next-action-task { border-left: 3px solid var(--shell-danger); }
#page-dashboard .next-action-project { border-left: 3px solid var(--shell-accent); }

#page-dashboard .next-action-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--shell-danger);
  background: rgba(220, 91, 100, .12);
  font-size: 17px;
}

#page-dashboard .next-action-project .next-action-icon {
  color: var(--shell-accent-hover);
  background: var(--shell-accent-soft);
}

#page-dashboard .next-action-copy { min-width: 0; flex: 1 1 auto; }
#page-dashboard .next-action-type,
#page-dashboard .next-action-meta {
  color: var(--shell-muted);
  font-size: 11px;
  line-height: 1.3;
}
#page-dashboard .next-action-title {
  overflow: hidden;
  color: var(--shell-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#page-dashboard .next-action-item .btn { flex: 0 0 auto; }

#page-dashboard .next-actions-empty {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 10px;
  color: var(--shell-muted);
  font-size: 12px;
}
#page-dashboard .next-actions-empty > .material-icons-outlined {
  color: var(--shell-success);
}

#page-dashboard #crmFunnelCard,
#page-dashboard .dashboard-panel,
#page-dashboard .dashboard-grid > .card,
#page-dashboard .dashboard-grid > .dashboard-panel {
  min-width: 0;
  border: 1px solid var(--shell-card-border);
  border-radius: var(--shell-radius-md);
  background: var(--shell-card-bg);
  box-shadow: var(--shell-shadow-card);
}

#page-dashboard #crmFunnelCard {
  margin-bottom: 16px;
  padding: 18px;
}

#page-dashboard #crmDealsFunnelCard {
  margin-bottom: 16px;
  padding: 18px;
}

/* Keep the homepage focused on executive KPIs and the two CRM funnels for now. */
#page-dashboard #nextActionsCard,
#page-dashboard #activityFeed,
#page-dashboard #recentProjectsCard,
#page-dashboard #todayTasksCard,
#page-dashboard #attentionCard,
#page-dashboard #leadsDashboardCard {
  display: none;
}

#page-dashboard .dashboard-grid,
#page-dashboard .grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 20px;
}

#page-dashboard #activityFeed,
#page-dashboard #recentProjectsCard,
#page-dashboard .dashboard-grid > .card {
  min-height: 280px;
  padding: 22px;
}

#page-dashboard .section-header,
#page-dashboard .dashboard-panel-header {
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

#page-dashboard .card-title,
#page-dashboard .dashboard-panel-title {
  margin-bottom: 0;
  color: var(--shell-text);
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -.01em;
}

#page-dashboard .crm-funnel,
#page-dashboard .dashboard-funnel {
  min-height: 88px;
  padding-top: 0;
}

#page-dashboard .crm-funnel-stage {
  padding: 8px 6px;
}

#page-dashboard .crm-funnel-count {
  font-size: 22px;
  font-weight: 700;
  line-height: 25.3px;
  letter-spacing: -.025em;
}

#page-dashboard .crm-funnel-label {
  font-size: 10px;
  line-height: 1.2;
}

#page-dashboard .crm-funnel-inv {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

#page-dashboard .crm-deals-funnel .crm-funnel-stage {
  min-width: 120px;
}

#page-dashboard #activityList,
#page-dashboard #recentProjects,
#page-dashboard .dashboard-panel-body {
  min-width: 0;
  max-width: 100%;
}

#page-dashboard #activityList > div,
#page-dashboard #recentProjects > div,
#page-dashboard #todayTasks > div,
#page-dashboard #attentionList > div {
  max-width: 100%;
  overflow-x: auto;
}

#page-dashboard #activityList:empty::before,
#page-dashboard #recentProjects:empty::before,
#page-dashboard .dashboard-panel-body:empty::before {
  content: "Нет данных для отображения";
  display: block;
  padding: 40px 16px;
  border: 1px dashed var(--shell-card-border);
  border-radius: var(--shell-radius-sm);
  color: var(--shell-muted);
  font-size: 13px;
  text-align: center;
}

/* Explicit dashboard states, used by dashboard-ui.js and safe for panels that
   render independently of the rest of the page. */
#page-dashboard .dashboard-state {
  display: grid;
  min-height: 142px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 24px 16px;
  border-radius: var(--shell-radius-sm);
  color: var(--shell-muted);
  text-align: center;
}

#page-dashboard .dashboard-state-title,
#page-dashboard .dashboard-state strong {
  color: var(--shell-text);
  font-size: 13px;
  font-weight: 700;
}

#page-dashboard .dashboard-state-copy,
#page-dashboard .dashboard-state p {
  max-width: 36ch;
  color: var(--shell-muted);
  font-size: 12px;
  line-height: 1.45;
}

#page-dashboard .dashboard-error {
  border: 1px solid rgba(220, 91, 100, .2);
  background: #fff7f7;
  color: var(--shell-danger);
}

#page-dashboard .dashboard-error strong,
#page-dashboard .dashboard-error .dashboard-state-title {
  color: #b74650;
}

#page-dashboard .dashboard-empty {
  border: 1px dashed var(--shell-card-border);
  background: #fbfcfd;
}

#page-dashboard .dashboard-skeleton,
#page-dashboard [data-state="loading"] .dashboard-panel-body,
#page-dashboard [aria-busy="true"] .dashboard-panel-body {
  min-height: 128px;
  border-radius: var(--shell-radius-sm);
  background: linear-gradient(90deg, #edf1f4 25%, #f8fafb 37%, #edf1f4 63%);
  background-size: 400% 100%;
  animation: shell-skeleton-shimmer 1.35s ease-in-out infinite;
}

@keyframes shell-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Keep the old content useful while giving dashboard tables/lists the same
   visual density as the shell. */
#page-dashboard .af-item,
#page-dashboard .project-card,
#page-dashboard .empty-state {
  border-color: var(--shell-card-border);
}

#page-dashboard .af-item:hover,
#page-dashboard .project-card:hover {
  border-color: rgba(37, 99, 235, .28);
  box-shadow: 0 5px 14px rgba(20, 34, 46, .06);
}

/* Responsive overlay: the sidebar becomes an off-canvas panel at the design
   breakpoint and the workspace keeps a single-column reading order. */
@media (max-width: 860px) {
  #app > .header,
  #app > .topbar,
  #app > .shell-topbar {
    padding: 0 14px;
    gap: 10px;
  }

  #app > .header .header-logo,
  #app > .topbar .header-logo,
  #app > .shell-topbar .header-logo {
    width: auto;
  }

  #app > .header .header-logo-text,
  #app > .topbar .header-logo-text,
  #app > .shell-topbar .header-logo-text {
    display: none;
  }

  #app > .header .header-search,
  #app > .topbar .header-search,
  #app > .shell-topbar .header-search {
    min-width: 0;
  }

  #app > .header .user-info,
  #app > .topbar .user-info,
  #app > .shell-topbar .user-info,
  #app > .header #currencySwitcher,
  #app > .topbar #currencySwitcher,
  #app > .shell-topbar #currencySwitcher,
  #app > .header #btnSyncDb,
  #app > .topbar #btnSyncDb,
  #app > .shell-topbar #btnSyncDb {
    display: none;
  }

  #app > .layout-body::before {
    content: "";
    position: fixed;
    inset: var(--shell-topbar-height) 0 0;
    z-index: 40;
    background: rgba(12, 24, 33, .48);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }

  #app > .layout-body:has(#sidebar.open)::before,
  #app > .layout-body:has(#sidebar[data-open="true"])::before,
  #app > .layout-body:has(#sidebar.is-open)::before {
    opacity: 1;
    pointer-events: auto;
  }

  #app #sidebar,
  #app #sidebar.collapsed,
  #app #sidebar[data-collapsed="true"] {
    position: fixed;
    top: var(--shell-topbar-height);
    bottom: 0;
    left: 0;
    width: min(84vw, 300px);
    min-width: min(84vw, 300px);
    transform: translateX(-105%);
    box-shadow: none;
    transition: transform .22s ease, box-shadow .22s ease;
    z-index: 50;
  }

  #app #sidebar.open,
  #app #sidebar.is-open,
  #app #sidebar[data-open="true"] {
    transform: translateX(0);
    box-shadow: 14px 0 35px rgba(0, 0, 0, .2);
  }

  #app #sidebar.collapsed .sidebar-label,
  #app #sidebar.collapsed .nav-label,
  #app #sidebar.collapsed .sidebar-item > .label,
  #app #sidebar[data-collapsed="true"] .sidebar-label,
  #app #sidebar[data-collapsed="true"] .nav-label,
  #app #sidebar[data-collapsed="true"] .sidebar-item > .label {
    display: inline;
  }

  #app #sidebar.collapsed .sidebar-item,
  #app #sidebar[data-collapsed="true"] .sidebar-item {
    justify-content: flex-start;
    padding: 8px 12px;
  }

  #app #sidebar.collapsed .sidebar-badge,
  #app #sidebar[data-collapsed="true"] .sidebar-badge {
    position: static;
    min-width: 20px;
    margin-left: auto;
    padding: 2px 6px;
  }

  #app #sidebar #sidebarCollapseBtn {
    display: none;
  }

  #page-dashboard .page-header,
  #page-dashboard .dashboard-heading,
  #page-dashboard .page-body,
  #page-dashboard .dashboard-body {
    padding-right: 14px;
    padding-left: 14px;
  }

  #page-dashboard .stats-grid,
  #page-dashboard .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #page-dashboard .next-actions-list {
    grid-template-columns: 1fr;
  }

  #page-dashboard .crm-funnel {
    overflow-x: auto;
    padding-bottom: 6px;
  }

  #page-dashboard .crm-funnel-stage {
    flex: 0 0 132px;
  }

  #page-dashboard .dashboard-grid,
  #page-dashboard .grid-2 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #page-dashboard #crmFunnelCard {
    padding: 18px;
  }
}

@media (max-width: 520px) {
  #app > .header .header-actions,
  #app > .topbar .header-actions,
  #app > .shell-topbar .header-actions {
    gap: 6px;
  }

  #app > .header .header-actions .btn,
  #app > .topbar .header-actions .btn,
  #app > .shell-topbar .header-actions .btn {
    padding-right: 8px;
    padding-left: 8px;
  }

  #page-dashboard .stats-grid,
  #page-dashboard .dashboard-kpis {
    grid-template-columns: 1fr;
  }

  #page-dashboard .stat-card,
  #page-dashboard .dashboard-kpi {
    min-height: 96px;
  }

  #page-dashboard .page-header,
  #page-dashboard .dashboard-heading {
    flex-wrap: wrap;
  }

  #page-dashboard .page-header > :last-child,
  #page-dashboard .dashboard-heading > :last-child {
    width: 100%;
  }
}

/* Respect the user's motion preference without removing focus, hover, or
   loading-state affordances. */
@media (prefers-reduced-motion: reduce) {
  #app *,
  #app *::before,
  #app *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}