/* Design Gang CRM — workspace hierarchy and task-detail polish. */

/* Project header: one compact identity block instead of floating controls. */
.page[data-page="crm"] .page-header {
  min-height: 62px !important;
  margin-bottom: 8px !important;
}

#crmTitle {
  gap: 9px !important;
  min-width: 0;
}

#crmTitle > img {
  width: 25px !important;
  height: 25px !important;
  padding: 4px;
  object-fit: contain;
  border: 1px solid rgba(92,219,134,.16);
  border-radius: 8px;
  background: rgba(92,219,134,.07);
  box-sizing: border-box;
}

.crm-header-context {
  gap: 10px !important;
}

.crm-header-hint {
  color: rgba(216,225,219,.46) !important;
}

.page[data-page="crm"] .page-actions {
  padding: 4px;
  border: 1px solid rgba(211,239,220,.055);
  border-radius: 13px;
  background: rgba(211,239,220,.018);
}

#переключательВидов {
  border: 0 !important;
  background: transparent !important;
}

.видКнопка {
  color: rgba(226,235,229,.52) !important;
  transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease !important;
}

.видКнопка:hover { color: rgba(238,245,240,.8) !important; }
.видКнопка.active {
  color: #eff8f1 !important;
  background: rgba(92,219,134,.105) !important;
  box-shadow: inset 0 0 0 1px rgba(92,219,134,.12) !important;
}

/* Filters open as one smooth strip; fields no longer pop into the layout. */
.crm-filter-panel {
  overflow: hidden;
  transition: border-color 180ms ease, background 180ms ease !important;
}

.crm-filter-scroll { overflow: hidden; }

.crm-filter-panel .crm-filter-advanced {
  display: block !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  min-height: 34px !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  opacity: 0;
  border-width: 0 !important;
  pointer-events: none;
  transform: translateX(-5px);
  transition:
    width 210ms cubic-bezier(.2,.8,.2,1),
    max-width 210ms cubic-bezier(.2,.8,.2,1),
    padding 210ms cubic-bezier(.2,.8,.2,1),
    opacity 140ms ease,
    transform 210ms cubic-bezier(.2,.8,.2,1) !important;
}

.crm-filter-panel.expanded .crm-filter-advanced {
  width: auto !important;
  min-width: 112px !important;
  max-width: 164px !important;
  padding-right: 28px !important;
  padding-left: 10px !important;
  opacity: 1;
  border-width: 1px !important;
  pointer-events: auto;
  transform: translateX(0);
}

.crm-filter-more::after {
  content: '›';
  margin-left: 5px;
  color: currentColor;
  transform: rotate(90deg);
  transition: transform 180ms ease;
}

.crm-filter-more.active::after { transform: rotate(-90deg); }

.crm-active-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  margin: -2px 0 9px;
  overflow-x: auto;
  scrollbar-width: none;
}
.crm-active-filters::-webkit-scrollbar { display: none; }
.crm-active-filters[hidden] { display: none !important; }
.crm-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 3px 8px;
  flex: 0 0 auto;
  color: rgba(216,232,221,.68);
  background: rgba(92,219,134,.055);
  border: 1px solid rgba(92,219,134,.105);
  border-radius: 999px;
  font: inherit;
  font-size: 9.5px;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.crm-filter-chip:hover {
  color: #e7f7eb;
  background: rgba(92,219,134,.1);
  border-color: rgba(92,219,134,.18);
  transform: translateY(-1px);
}
.crm-filter-chip b { color: rgba(239,247,241,.88); font-weight: 680; }
.crm-filter-chip i { color: rgba(183,204,190,.45); font-style: normal; font-size: 12px; }

#crmFocusMode {
  width:35px;
  min-width:35px;
  height:35px;
  padding:0 !important;
  justify-content:center;
  color:rgba(216,229,220,.48) !important;
}
#crmFocusMode svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
body.crm-focus-board #crmFocusMode { color:#8be6a8 !important; border-color:rgba(92,219,134,.2) !important; background:rgba(92,219,134,.08) !important; }
body.crm-focus-board:has(#boardCols .task-card) .board-col:has(.col-body > .empty) { display:none !important; }

/* Kanban surfaces: quieter columns, clearer cards, less visual noise. */
.board-col {
  border-color: rgba(211,239,220,.065) !important;
  background: linear-gradient(180deg,rgba(211,239,220,.024),rgba(211,239,220,.011)) !important;
}

.board-col .col-head {
  background: rgba(14,20,16,.86) !important;
  border-bottom-color: rgba(211,239,220,.055) !important;
}

.task-card,
.kcard {
  border-color: rgba(211,239,220,.075) !important;
  background: linear-gradient(180deg,rgba(24,31,27,.98),rgba(17,22,19,.98)) !important;
}

.task-card:hover,
.kcard:hover {
  border-color: rgba(92,219,134,.2) !important;
  background: linear-gradient(180deg,rgba(29,39,33,.99),rgba(19,26,22,.99)) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.24), 0 0 0 1px rgba(92,219,134,.035) !important;
}

.task-card:focus-visible,
.list-row:focus-visible {
  outline:none !important;
  border-color:rgba(112,229,150,.48) !important;
  box-shadow:0 0 0 3px rgba(67,196,109,.16),0 16px 34px rgba(0,0,0,.28) !important;
}
.task-card.task-focus-return,
.list-row.task-focus-return {
  animation:crmFocusReturn 620ms cubic-bezier(.16,1,.3,1) both;
}

.task-card .tc-title { color: rgba(244,248,245,.94) !important; }
.task-card .tc-footer { color: rgba(216,225,219,.58) !important; }

/* Task details: stronger hierarchy, calmer controls, useful content above the fold. */
.modal-overlay .task-refactor-modal {
  width: min(1100px,calc(100vw - 42px)) !important;
  height: min(84dvh,820px);
  max-height: min(84dvh,820px) !important;
  overflow: hidden;
  border-color: rgba(211,239,220,.12) !important;
  background: #0d110f !important;
  box-shadow: 0 34px 100px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.025) !important;
  animation: crmTaskOpen 260ms cubic-bezier(.16,1,.3,1) both;
}

.task-refactor-modal .modal-head {
  min-height: 76px;
  padding: 17px 20px !important;
  border-bottom: 1px solid rgba(211,239,220,.075) !important;
  background: rgba(16,22,18,.96) !important;
}

.task-refactor-modal .modal-head-title {
  max-width: 720px;
  color: #f2f7f3;
  font-size: clamp(17px,1.6vw,21px) !important;
  font-weight: 720 !important;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.task-head-meta { margin-top: 8px !important; gap: 8px !important; }
.task-head-meta .ds-badge { border-color: rgba(211,239,220,.09); }
.task-head-actions .hbtn { min-height: 32px; }
.task-stepper { display:inline-flex; align-items:center; gap:4px; }
.task-stepper button {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  color:rgba(218,229,222,.62);
  background:rgba(211,239,220,.02);
  border:1px solid rgba(211,239,220,.065);
  border-radius:9px;
  font:inherit;
  font-size:17px;
  cursor:pointer;
  transition:color 140ms ease,background 140ms ease,border-color 140ms ease,transform 140ms ease;
}
.task-stepper button:hover:not(:disabled) { color:#eff8f1; background:rgba(92,219,134,.07); border-color:rgba(92,219,134,.14); transform:translateY(-1px); }
.task-stepper button:disabled { opacity:.22; cursor:default; }
.task-save-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 0;
  overflow: hidden;
  color: rgba(180,196,186,.58);
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(4px);
  transition: max-width 180ms ease, opacity 140ms ease, transform 180ms ease;
}
.task-save-state::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #68dc8e;
  box-shadow: 0 0 0 3px rgba(104,220,142,.08);
}
.task-save-state.visible { max-width: 110px; opacity: 1; transform: translateX(0); }
.task-save-state.saving::before { animation: crmSavePulse .8s ease-in-out infinite; }

.create-draft-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: rgba(174,190,180,.5);
  font-size: 9.5px;
  font-weight: 620;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 150ms ease, transform 180ms ease, color 150ms ease;
}
.create-draft-status.visible { opacity: 1; transform: translateX(0); }
.create-draft-status.saved { color: rgba(113,221,148,.68); }
.create-draft-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

#modal:has(#ct-title) .modal-head,
#sheetContent:has(#ct-title) .modal-head {
  gap: 14px;
  border-bottom: 1px solid rgba(211,239,220,.07);
}
#modal:has(#ct-title) > div:nth-child(2),
#sheetContent:has(#ct-title) > div:nth-child(2) {
  scrollbar-gutter: stable;
}
.task-head-actions .modal-close {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(211,239,220,.07);
  border-radius: 9px;
  background: rgba(211,239,220,.025);
}

.task-shell { background: #0d110f; }
.task-shell-main {
  padding: 20px 22px 32px !important;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

.task-jumpbar {
  position: sticky;
  top: -20px;
  z-index: 5;
  display: flex;
  gap: 5px;
  margin: -20px -22px 15px;
  padding: 10px 22px 9px;
  overflow-x: auto;
  background: rgba(13,17,15,.92);
  border-bottom: 1px solid rgba(211,239,220,.055);
  backdrop-filter: blur(16px) saturate(120%);
  scrollbar-width: none;
}
.task-jumpbar::-webkit-scrollbar { display: none; }
.task-jumpbar button {
  min-height: 29px;
  padding: 0 10px;
  flex: 0 0 auto;
  color: rgba(213,225,217,.52);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.task-jumpbar button:hover { color: rgba(239,246,241,.86); background: rgba(211,239,220,.035); }
.task-jumpbar button.active {
  color: #dff8e6;
  background: rgba(92,219,134,.09);
  border-color: rgba(92,219,134,.12);
}
.task-scroll-anchor { scroll-margin-top: 58px; }

.task-shell-side {
  width: 280px !important;
  flex-basis: 280px !important;
  padding: 19px 17px 28px !important;
  background: #111713 !important;
  border-left-color: rgba(211,239,220,.075) !important;
  scrollbar-gutter: stable;
}

.task-description {
  min-height: 50px;
  padding: 15px 16px !important;
  color: rgba(230,238,233,.8) !important;
  background: rgba(211,239,220,.025) !important;
  border-color: rgba(211,239,220,.065) !important;
  border-radius: 12px !important;
}

.task-actions { margin: 10px 0 13px !important; }
.task-actions .hbtn {
  min-height: 31px;
  color: rgba(226,235,229,.66) !important;
  background: transparent !important;
  border-color: rgba(211,239,220,.07) !important;
}

.task-module {
  margin-top: 9px !important;
  border-radius: 12px;
}

.task-section-title {
  margin: 22px 0 9px !important;
  color: rgba(174,190,180,.56) !important;
}

.task-side-field { margin-bottom: 11px !important; }
.task-side-field > span { color: rgba(174,190,180,.52) !important; }
.task-side-field .mselect,
.task-side-field .minput {
  min-height: 42px !important;
  color: rgba(242,247,243,.9) !important;
  background: rgba(4,7,5,.42) !important;
  border-color: rgba(211,239,220,.08) !important;
  border-radius: 10px !important;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease !important;
}

.task-side-field .mselect:focus,
.task-side-field .minput:focus {
  border-color: rgba(92,219,134,.38) !important;
  box-shadow: 0 0 0 3px rgba(92,219,134,.07) !important;
  background: rgba(4,7,5,.62) !important;
}

.task-facts {
  margin: 16px 0 0 !important;
  border-color: rgba(211,239,220,.065) !important;
  background: rgba(211,239,220,.055) !important;
}

.task-fact {
  min-height: 35px;
  align-items: center;
  padding: 8px 10px !important;
  background: #0f1411 !important;
}

.task-admin {
  margin-top: 17px !important;
  padding-top: 16px !important;
  border-top-color: rgba(211,239,220,.075) !important;
}

.task-admin-toggle {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0 3px;
  color: rgba(226,235,229,.72);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.task-admin-toggle span { font-size: 10px; font-weight: 720; letter-spacing: .055em; text-transform: uppercase; }
.task-admin-toggle small { color: rgba(174,190,180,.42); font-size: 9px; font-weight: 600; }
.task-admin-toggle::after {
  content: '›';
  grid-column: 2;
  grid-row: 1 / span 2;
  color: rgba(174,190,180,.5);
  font-size: 16px;
  transform: rotate(90deg);
  transition: transform 180ms ease;
}
.task-admin.collapsed .task-admin-toggle::after { transform: rotate(0); }
.task-admin-body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 210ms cubic-bezier(.2,.8,.2,1), opacity 160ms ease;
}
.task-admin-body > div { min-height: 0; overflow: hidden; }
.task-admin.collapsed .task-admin-body { grid-template-rows: 0fr; opacity: 0; }

.modal-add-subtask .minput,
.task-refactor-modal .upload-zone {
  border-color: rgba(211,239,220,.075) !important;
  background: rgba(211,239,220,.018) !important;
}

.task-chat-draft {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:rgba(113,221,148,.58);
  font-size:8.5px;
  white-space:nowrap;
}
.task-chat-draft[hidden] { display:none; }
.task-chat-draft::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }

/* Command palette: actions and recent work live above the broad navigation list. */
.cmdk-panel {
  width:min(620px,calc(100vw - 28px)) !important;
  border:1px solid rgba(211,239,220,.12) !important;
  background:rgba(13,18,15,.985) !important;
  box-shadow:0 32px 100px rgba(0,0,0,.7),inset 0 1px rgba(255,255,255,.025) !important;
  backdrop-filter:blur(22px);
}
#cmdk-inp { padding:19px 20px !important; font-size:16px !important; }
.cmdk-quick-actions {
  display:flex;
  gap:7px;
  padding:10px 10px 4px;
}
.cmdk-quick-actions button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:34px;
  padding:7px 10px;
  color:rgba(226,237,230,.72);
  background:rgba(211,239,220,.025);
  border:1px solid rgba(211,239,220,.07);
  border-radius:9px;
  font:inherit;
  font-size:10.5px;
  cursor:pointer;
}
.cmdk-quick-actions button:hover { color:#eff8f1; border-color:rgba(92,219,134,.18); background:rgba(92,219,134,.07); }
.cmdk-quick-actions button:disabled { opacity:.35; cursor:default; }
.cmdk-quick-actions kbd,
.crm-shortcut-grid kbd {
  color:rgba(226,237,230,.52);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  border-radius:6px;
  box-shadow:inset 0 -1px rgba(0,0,0,.22);
  font:inherit;
  font-size:9px;
}
.cmdk-quick-actions kbd { padding:2px 5px; }
.cmdk-recent { padding:5px 5px 7px; border-bottom:1px solid rgba(211,239,220,.06); margin-bottom:5px; }
.cmdk-section-label { padding:4px 8px 6px; color:rgba(193,211,199,.38); font-size:8.5px; font-weight:720; letter-spacing:.09em; text-transform:uppercase; }
.cmdk-recent button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:8px 9px;
  color:rgba(235,242,237,.82);
  background:transparent;
  border:0;
  border-radius:8px;
  font:inherit;
  font-size:11px;
  text-align:left;
  cursor:pointer;
}
.cmdk-recent button:hover { background:rgba(92,219,134,.065); }
.cmdk-recent button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmdk-recent button small { color:rgba(188,205,194,.34); font-size:8.5px; letter-spacing:.04em; }

.crm-shortcut-overlay {
  position:fixed;
  inset:0;
  z-index:10050;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(2,5,3,.7);
  backdrop-filter:blur(10px);
  animation:crmFadeIn 150ms ease both;
}
.crm-shortcut-overlay > section {
  width:min(520px,100%);
  overflow:hidden;
  color:#edf5ef;
  background:#101612;
  border:1px solid rgba(211,239,220,.11);
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.62);
  animation:crmTaskOpen 220ms cubic-bezier(.16,1,.3,1) both;
}
.crm-shortcut-overlay header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 15px; border-bottom:1px solid rgba(211,239,220,.065); }
.crm-shortcut-overlay header small { color:rgba(121,222,154,.58); font-size:8.5px; letter-spacing:.09em; text-transform:uppercase; }
.crm-shortcut-overlay h3 { margin:3px 0 0; font-size:18px; letter-spacing:-.025em; }
.crm-shortcut-overlay header button { width:32px; height:32px; color:rgba(230,239,233,.58); background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.065); border-radius:9px; font:inherit; font-size:19px; cursor:pointer; }
.crm-shortcut-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; padding:8px; background:rgba(255,255,255,.035); }
.crm-shortcut-grid span { display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 12px; background:#101612; }
.crm-shortcut-grid kbd { min-width:42px; padding:5px 7px; text-align:center; }
.crm-shortcut-grid b { color:rgba(226,236,229,.72); font-size:10.5px; font-weight:580; }

@keyframes crmFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes crmFocusReturn {
  0% { box-shadow:0 0 0 0 rgba(83,218,128,.4); }
  45% { box-shadow:0 0 0 4px rgba(83,218,128,.16),0 14px 32px rgba(0,0,0,.24); }
  100% { box-shadow:0 0 0 0 rgba(83,218,128,0); }
}

@keyframes crmTaskOpen {
  from { opacity: 0; transform: translate3d(0,10px,0) scale(.985); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

@keyframes crmSavePulse { 50% { opacity: .3; transform: scale(.72); } }

@media (max-width: 900px) {
  .page[data-page="crm"] .page-header { align-items: stretch !important; }
  .page[data-page="crm"] .page-actions { overflow-x: auto; justify-content: flex-start !important; }
  .crm-filter-scroll { overflow-x: auto; scrollbar-width: none; }
  .crm-filter-scroll::-webkit-scrollbar { display: none; }
  .modal-overlay .task-refactor-modal { width: calc(100vw - 20px) !important; height: min(90dvh,820px); max-height: 90dvh !important; }
  .task-shell-side { width: 250px !important; flex-basis: 250px !important; }
}

@media (max-width: 680px) {
  .page[data-page="crm"] .page-actions { padding: 3px; border-radius: 11px; }
  .crm-header-hint { display: none; }
  .crm-filter-panel,
  .crm-filter-panel.expanded { grid-template-columns: 1fr !important; }
  .crm-filter-scroll { justify-content: flex-start !important; }
  .crm-active-filters { margin-top: 0; }
  .modal-overlay .task-refactor-modal {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  .task-refactor-modal .modal-head { min-height: 70px; padding: 14px 15px !important; }
  .task-refactor-modal .modal-head-title { max-width: calc(100vw - 150px); font-size: 17px !important; }
  .task-stepper { display:inline-flex; gap:2px; }
  .task-stepper button { width:29px; height:29px; border-radius:8px; }
  .task-head-actions { gap:3px !important; }
  .task-head-actions > .hbtn:not(.close-btn) { padding-inline:8px !important; }
  .create-draft-status { display: none; }
  .task-shell-main { padding: 16px 14px 26px !important; }
  .task-jumpbar { top: -16px; margin: -16px -14px 13px; padding: 9px 14px 8px; }
  .task-shell-side { width: 100% !important; padding: 17px 14px 30px !important; }
  .cmdk-quick-actions { overflow-x:auto; scrollbar-width:none; }
  .cmdk-quick-actions button { flex:0 0 auto; }
  .crm-shortcut-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay .task-refactor-modal { animation: none !important; }
  .crm-filter-panel .crm-filter-advanced { transition: none !important; }
}