/* Design Gang CRM Product UI v3.
   Application-only finishing layer; welcome.html is intentionally untouched. */

:root {
  --crm3-gap: 10px;
  --crm3-card: #101612;
  --crm3-card-hover: #151e18;
  --crm3-line: rgba(211,239,220,.085);
  --crm3-line-strong: rgba(123,234,159,.19);
  --crm3-ease: cubic-bezier(.16,1,.3,1);
}

/* The board is the primary workspace. Its hierarchy must fit into one glance. */
.page[data-page="crm"] {
  padding: 15px 18px 12px !important;
  background: transparent !important;
}
.page[data-page="crm"] > .page-header {
  display: grid !important;
  grid-template-columns: minmax(220px,1fr) auto;
  align-items: start !important;
  gap: 12px 18px !important;
  min-height: 58px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.page[data-page="crm"] .page-header-left { min-width: 0; }
.page[data-page="crm"] .page-title {
  margin: 0 !important;
  font-size: clamp(22px,2vw,27px) !important;
  line-height: 1.08 !important;
  font-weight: 760 !important;
  letter-spacing: -.035em !important;
}
.page[data-page="crm"] .page-tag {
  margin-left: 7px;
  padding: 3px 7px !important;
  font-size: 9px !important;
  vertical-align: 3px;
}
.crm-header-context { min-height: 20px !important; margin-top: 5px !important; gap: 8px !important; }
.crm-header-hint { overflow: hidden; max-width: 520px; color: var(--text3) !important; font-size: 10px !important; text-overflow: ellipsis; white-space: nowrap; }
.realtime-status { min-height: 20px !important; padding: 2px 7px !important; font-size: 9px !important; }

.page[data-page="crm"] .page-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: 7px !important;
  flex-wrap: nowrap !important;
}
#переключательВидов {
  order: -2;
  margin: 0 !important;
  padding: 3px !important;
  gap: 2px !important;
  border-radius: 11px !important;
}
.видКнопка { min-height: 29px !important; padding: 0 10px !important; font-size: 10px !important; }
#btnAn { order: -1; width: 35px; min-width: 35px; height: 35px; padding: 0 !important; justify-content: center; }
#btnSpaceSettings { min-height: 35px !important; }
#btnNewTask { min-height: 35px !important; padding-inline: 14px !important; }
.crm3-density {
  width: 35px; min-width: 35px; height: 35px; padding: 0 !important;
  justify-content: center; color: var(--text3) !important;
}
.crm3-density svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
body.crm3-compact .crm3-density { color: var(--green-bright) !important; border-color: var(--green-line) !important; background: var(--green-dim) !important; }

/* Search is primary; occasional filters stay secondary and do not form a wall. */
.crm-filter-panel {
  display: grid !important;
  grid-template-columns: minmax(210px, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 9px !important;
  padding: 6px !important;
  border-radius: 12px !important;
  background: rgba(211,239,220,.022) !important;
  box-shadow: none !important;
}
.crm-filter-panel .search-wrap { min-width: 0; }
.crm-filter-panel .search-inp { height: 34px !important; padding-left: 32px !important; border-radius: 9px !important; }
.crm-filter-scroll { display: flex !important; align-items: center !important; justify-content: flex-end; gap: 6px !important; min-width: 0; }
.crm-filter-panel select,
.crm-filter-panel .hselect,
.crm-filter-panel .hbtn { min-height: 34px !important; max-width: 164px; font-size: 10px !important; }
.crm-filter-panel .crm-filter-more { max-width: none; }
.crm-filter-panel:not(.expanded) .crm-filter-advanced { display: none !important; }
.crm-filter-panel.expanded { grid-template-columns: minmax(210px,.72fr) minmax(0,1.5fr) !important; }
.crm-filter-panel.expanded .crm-filter-scroll { flex-wrap: wrap; }

/* Team tempo is context, not the page hero. */
#темпПолоса { margin: 0 0 9px !important; }
#темпПолоса > div { min-height: 37px; padding: 7px 10px !important; border-radius: 11px !important; background: rgba(211,239,220,.018) !important; box-shadow: none !important; }
#темпПолоса.pv-tempo-collapsed > div { padding: 7px 10px !important; }
.pv-tempo-toggle { min-height: 24px !important; border: 0 !important; background: transparent !important; }

/* Kanban: fewer containers, denser cards, one consistent rhythm. */
.board-wrap { padding: 0 !important; border-radius: 0 !important; background: none !important; }
.board-cols { gap: var(--crm3-gap) !important; padding: 0 1px 7px !important; scroll-padding-inline: 1px; }
.board-col {
  flex: 0 0 clamp(252px, 22.5vw, 292px) !important;
  min-width: 252px !important;
  min-height: calc(100vh - 206px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 13px !important;
  background: rgba(211,239,220,.018) !important;
  border-color: var(--crm3-line) !important;
  box-shadow: none !important;
}
.board-col .col-head {
  min-height: 43px !important;
  padding: 9px 11px !important;
  font-size: 10px !important;
  letter-spacing: .065em !important;
  background: rgba(211,239,220,.022) !important;
  border-bottom-color: var(--crm3-line) !important;
}
.col-dot { width: 6px !important; height: 6px !important; box-shadow: 0 0 0 3px rgba(92,219,134,.07) !important; }
.col-cnt { min-width: 19px !important; height: 19px !important; font-size: 9px !important; background: rgba(211,239,220,.045) !important; }
.col-plus { width: 25px !important; height: 25px !important; }
.col-body { padding: 7px !important; gap: 7px !important; overscroll-behavior: contain; scrollbar-gutter: stable; }

.task-card,
.kcard {
  flex: 0 0 auto !important;
  min-height: 68px !important;
  padding: 11px 11px 10px !important;
  border-radius: 11px !important;
  background: var(--crm3-card) !important;
  border: 1px solid var(--crm3-line) !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.16) !important;
  transform: translateZ(0);
  transition: background 140ms ease,border-color 140ms ease,box-shadow 140ms ease,transform 140ms var(--crm3-ease) !important;
  transition-delay: 0s !important;
}
.task-card:hover,
.kcard:hover {
  transform: translate3d(0,-1px,0) !important;
  background: var(--crm3-card-hover) !important;
  border-color: var(--crm3-line-strong) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.2) !important;
}
.task-card:active { transform: translate3d(0,0,0) scale(.992) !important; }
.task-card::before { top: 13px !important; left: 11px !important; width: 5px !important; height: 5px !important; }
.task-card .tc-top { min-height: 13px; margin: 0 0 5px !important; padding-left: 11px; }
.task-card .tc-id { display: none !important; }
.task-card .tc-date-top { margin-left: 0 !important; color: var(--text3) !important; font-size: 9px !important; }
.task-card .tc-title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 7px !important;
  padding: 0 !important;
  color: var(--text) !important;
  font-size: 12.5px !important;
  font-weight: 670 !important;
  line-height: 1.34 !important;
  letter-spacing: -.01em !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.task-card .tc-metki,
.task-card .tc-custom-fields { gap: 4px !important; margin-bottom: 6px !important; }
.task-card .tc-metka,
.task-card .tag,
.task-card .badge { padding: 3px 6px !important; color: var(--text3) !important; background: rgba(211,239,220,.035) !important; font-size: 8.5px !important; }
.task-card .pv3-system-tag { display: none !important; }
.task-card .tc-footer { margin-top: 7px !important; padding-top: 7px !important; border-top-color: rgba(211,239,220,.055) !important; }
.task-card .tc-who { gap: 6px !important; font-size: 10px !important; }
.task-card .tc-ava { width: 18px !important; height: 18px !important; font-size: 8px !important; }
.task-card .tc-price { font-size: 10px !important; }
.task-card .tc-del { display: none !important; }
.task-card .tc-zastoj { padding: 2px 5px !important; font-size: 8px !important; }
.task-card .tc-timers { gap: 4px !important; margin-bottom: 6px !important; }
.task-card .tc-timer { font-size: 8px !important; }
.task-card .tc-media { max-height: 54px; overflow: hidden; }

body.crm3-compact .board-col { flex-basis: clamp(230px,20vw,266px) !important; min-width:230px !important; }
body.crm3-compact .task-card { padding: 9px 10px 8px !important; }
body.crm3-compact .task-card { min-height: 52px !important; }
body.crm3-compact .task-card .tc-title { -webkit-line-clamp: 1; font-size: 11.5px !important; }
body.crm3-compact .task-card .tc-metki,
body.crm3-compact .task-card .tc-custom-fields,
body.crm3-compact .task-card .tc-media { display: none !important; }
body.crm3-compact .task-card .tc-footer { margin-top: 5px !important; padding-top: 5px !important; }

/* Modal/task details: content first, controls second. */
.modal-overlay .modal-content.task-refactor-modal,
.task-refactor-modal { width: min(1050px,calc(100vw - 32px)) !important; max-height: min(88dvh,900px) !important; border-radius: 20px !important; }
.task-shell { gap: 14px !important; }
.task-shell-main { min-width: 0; }
.task-shell-side { border-left-color: var(--crm3-line) !important; }
.task-description { line-height: 1.6 !important; }
.task-module { border-color: var(--crm3-line) !important; }

/* Sidebar becomes navigation, not another dashboard. */
.sidebar { width: 242px !important; }
.sidebar-command { margin: 8px 9px 4px !important; }
.snav-item { min-height: 37px !important; margin: 1px 8px !important; border-radius: 9px !important; }
.snav-group.pv-group-toggle { margin-inline: 8px !important; }
.space-item { min-height: 42px !important; margin-inline: 8px !important; }
.space-action-btn { opacity: 0 !important; }
.space-item:hover .space-action-btn,
.space-item:focus-within .space-action-btn { opacity: .72 !important; }
.sidebar-hub { margin: 8px !important; }
.sidebar-user { margin: 0 8px 8px !important; border: 1px solid var(--crm3-line) !important; border-radius: 11px !important; }

@media (max-width: 1180px) {
  .crm-header-hint { display:none; }
  .page[data-page="crm"] > .page-header { grid-template-columns:1fr; }
  .page[data-page="crm"] .page-actions { justify-content:flex-start; overflow-x:auto; scrollbar-width:none; }
  .page[data-page="crm"] .page-actions::-webkit-scrollbar { display:none; }
  .crm-filter-panel { grid-template-columns:minmax(190px,.8fr) minmax(0,1.2fr) !important; }
}

@media (max-width: 760px) {
  .page[data-page="crm"] { padding: 12px 10px 76px !important; }
  .page[data-page="crm"] > .page-header { gap: 10px !important; min-height: 0 !important; }
  .page[data-page="crm"] .page-title { font-size: 22px !important; }
  .crm-header-context { display:none !important; }
  #btnSpaceSettings { display:none !important; }
  .crm3-density { display:none !important; }
  .crm-filter-panel,
  .crm-filter-panel.expanded { display:block !important; padding:6px !important; }
  .crm-filter-panel .search-wrap { margin:0 !important; }
  .crm-filter-scroll { justify-content:flex-start !important; margin-top:6px; overflow-x:auto !important; scrollbar-width:none; }
  .crm-filter-scroll::-webkit-scrollbar { display:none; }
  .crm-filter-panel:not(.expanded) .crm-filter-scroll select { display:none !important; }
  .crm-filter-panel .crm-filter-more { min-width:100%; max-width:none; }
  .crm-filter-panel.expanded .crm-filter-more { min-width:auto; }
  #темпПолоса { display:none !important; }
  .board-cols { scroll-snap-type:x proximity; }
  .board-col { flex-basis:min(86vw,330px) !important; min-width:min(86vw,330px) !important; min-height:calc(100dvh - 238px) !important; scroll-snap-align:start; }
  .task-card .tc-del { display:none !important; }
  .modal-overlay .modal-content.task-refactor-modal,
  .task-refactor-modal { width:100% !important; max-height:92dvh !important; border-radius:20px 20px 0 0 !important; }
  .task-shell { grid-template-columns:1fr !important; }
  .task-shell-side { border-left:0 !important; border-top:1px solid var(--crm3-line) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .task-card,.kcard { transition:none !important; }
}