/* Design Gang CRM — Green System
   Final application-only layer. Welcome is a separate document and is not affected. */

:root {
  color-scheme: dark;

  /* Neutral graphite foundation */
  --bg0: #070a08;
  --bg1: #0c110e;
  --bg2: #111713;
  --bg3: #172019;
  --bg4: #1e2921;
  --card: #111713;
  --surface: #111713;
  --text: #f2f7f3;
  --text2: #b6c1b9;
  --text3: #76837a;
  --border: rgba(211, 239, 220, .09);
  --border2: rgba(211, 239, 220, .17);

  /* One accent family. Legacy semantic variables intentionally converge here. */
  --green: #5cdb86;
  --green-strong: #35bf67;
  --green-bright: #7bea9f;
  --green-pale: #b9f5cc;
  --green-dim: rgba(92, 219, 134, .13);
  --green-line: rgba(92, 219, 134, .26);
  --acc: var(--green);
  --acc2: var(--green-strong);
  --acc3: var(--green-bright);
  --acc-dim: var(--green-dim);
  --acc-border: var(--green-line);
  --blue: var(--green);
  --blue-dim: var(--green-dim);
  --purple: var(--green-bright);
  --purple-dim: var(--green-dim);
  --yellow: #a8d9b7;
  --yellow-dim: rgba(126, 198, 148, .12);

  /* Destructive actions stay distinct, but subdued instead of becoming another accent. */
  --red: #ef8e8e;
  --red-dim: rgba(239, 142, 142, .10);

  --ds-surface-0: var(--bg0);
  --ds-surface-1: var(--bg1);
  --ds-surface-2: var(--bg2);
  --ds-surface-3: var(--bg3);
  --ds-line: var(--border);
  --ds-line-strong: var(--border2);
  --ds-text: var(--text);
  --ds-muted: var(--text2);
  --ds-faint: var(--text3);
  --ds-accent: var(--green);
  --ds-accent-soft: var(--green-dim);
  --ds-success: var(--green);
  --ds-warning: #a8d9b7;
  --ds-info: var(--green-bright);
  --ds-danger: var(--red);

  --pv-bg: var(--bg0);
  --pv-surface: rgba(17, 23, 19, .9);
  --pv-surface-solid: var(--bg2);
  --pv-raised: var(--bg3);
  --pv-line: var(--border);
  --pv-line-strong: var(--border2);
  --pv-text: var(--text);
  --pv-muted: var(--text2);
  --pv-faint: var(--text3);
  --pv-green: var(--green);
  --pv-blue: var(--green-bright);
  --pv-amber: #a8d9b7;
  --pv-red: var(--red);

  --r: 14px;
  --r-sm: 10px;
  --r-lg: 17px;
  --r-xl: 22px;
  --green-shadow: 0 12px 30px rgba(30, 131, 67, .18);
  --green-focus: 0 0 0 3px rgba(92, 219, 134, .15);
}

html,
body {
  background: var(--bg0) !important;
  color: var(--text) !important;
}

body::before {
  background:
    radial-gradient(900px 560px at 78% -12%, rgba(66, 190, 105, .09), transparent 66%),
    radial-gradient(720px 520px at 12% 108%, rgba(38, 114, 63, .07), transparent 70%) !important;
}

/* First frame and sign in */
.boot-screen,
.auth-screen {
  color: var(--text) !important;
  background:
    radial-gradient(660px 460px at 50% 34%, rgba(56, 190, 99, .13), transparent 68%),
    var(--bg0) !important;
}
.boot-progress i {
  background: linear-gradient(90deg, var(--green-strong), var(--green-bright)) !important;
}
.auth-card {
  background: rgba(13, 18, 15, .88) !important;
  border-color: var(--border2) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .025) !important;
}
.auth-btn,
button.auth-btn,
.hbtn.primary,
.btn-primary {
  color: #071109 !important;
  background: linear-gradient(180deg, var(--green-bright), var(--green)) !important;
  border: 1px solid rgba(185, 245, 204, .28) !important;
  box-shadow: var(--green-shadow), inset 0 1px rgba(255, 255, 255, .32) !important;
}
.auth-btn:hover,
.hbtn.primary:hover,
.btn-primary:hover {
  background: linear-gradient(180deg, #8af0aa, #65df8e) !important;
  box-shadow: 0 15px 34px rgba(30, 131, 67, .24), inset 0 1px rgba(255, 255, 255, .34) !important;
}

/* Application shell */
.sidebar,
.mobile-bar,
.bnav {
  background: rgba(11, 15, 12, .96) !important;
  border-color: var(--border) !important;
}
.sidebar::before { background: linear-gradient(180deg, rgba(92, 219, 134, .035), transparent 30%) !important; }
.snav-item,
.bnav-item,
.space-item,
.sidebar-user { color: var(--text3) !important; }
.snav-item:hover,
.bnav-item:hover,
.space-item:hover,
.sidebar-user:hover { color: var(--text2) !important; background: rgba(92, 219, 134, .055) !important; }
.snav-item.active,
.bnav-item.active,
.space-item.active {
  color: var(--text) !important;
  background: linear-gradient(180deg, rgba(92, 219, 134, .14), rgba(92, 219, 134, .075)) !important;
  border-color: rgba(92, 219, 134, .23) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}
.snav-item.active .snav-icon { color: var(--green-bright) !important; }
.sidebar-logo-text,
.mobile-bar-logo {
  background: linear-gradient(135deg, var(--green-pale), var(--green)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.sidebar-hub,
.sidebar-hub-icon,
.sidebar-avatar {
  border-color: var(--green-line) !important;
}
.sidebar-hub-icon,
.sidebar-avatar,
.news-ava,
.team-ava,
.user-mgmt-ava,
.chat-ava,
.workload-ava,
.task-chat-message.own .task-chat-avatar {
  color: #071109 !important;
  background: linear-gradient(145deg, var(--green-bright), var(--green-strong)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.28) !important;
}

/* Surfaces: fewer competing layers, clearer hierarchy */
.page-header,
.pv-head,
.ds-page-head { border-color: var(--border) !important; }
.stat-card,
.pv-kpi,
.pv-panel,
.ds-panel,
.ds-kpi,
.user-mgmt-card,
.team-card,
.workload-card,
.portfolio-card,
.settings-section,
.cab-section,
.cab-profile,
.news-card,
.article-card,
.ecosystem-service {
  color: var(--text) !important;
  background: linear-gradient(155deg, rgba(20, 29, 23, .94), rgba(12, 17, 14, .94)) !important;
  border-color: var(--border) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.022) !important;
}
.stat-card:hover,
.pv-kpi:hover,
.user-mgmt-card:hover,
.team-card:hover,
.portfolio-card:hover,
.news-card:hover,
.article-card:hover {
  border-color: rgba(92, 219, 134, .21) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.19), inset 0 1px rgba(255,255,255,.035) !important;
}

/* Board and cards */
.board-col,
.board-column {
  background: rgba(13, 19, 15, .82) !important;
  border-color: var(--border) !important;
}
.board-col-header,
.col-head { background: rgba(92, 219, 134, .025) !important; border-color: var(--border) !important; }
.task-card,
.kcard {
  background: linear-gradient(155deg, rgba(27, 38, 30, .92), rgba(17, 24, 19, .96)) !important;
  border-color: rgba(211, 239, 220, .10) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.025) !important;
}
.task-card:hover,
.kcard:hover {
  background: linear-gradient(155deg, rgba(32, 46, 36, .96), rgba(19, 29, 22, .98)) !important;
  border-color: rgba(92, 219, 134, .25) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035) !important;
}
.task-card::before,
.task-card.HIGH::before,
.task-card.MEDIUM::before,
.task-card.LOW::before,
.task-card[data-priority]::before {
  background: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(92, 219, 134, .10) !important;
}

/* Controls */
.hbtn.ghost,
.btn-ghost,
.crm-filter-panel,
#переключательВидов,
.pv-tabs,
.ds-tabs {
  color: var(--text2) !important;
  background: rgba(211, 239, 220, .035) !important;
  border-color: var(--border) !important;
}
.hbtn.ghost:hover,
.btn-ghost:hover {
  color: var(--text) !important;
  background: rgba(92, 219, 134, .08) !important;
  border-color: rgba(92, 219, 134, .19) !important;
}
.hbtn.ghost.active,
.crm-filter-more.active,
.видКнопка.active,
.pv-tab.active,
.ds-tab.active,
.news-tag-btn.active {
  color: var(--green-bright) !important;
  background: var(--green-dim) !important;
  border-color: var(--green-line) !important;
  box-shadow: none !important;
}
.hselect,
.minput,
.mselect,
.mtextarea,
.search-inp,
#выборПорядка,
.field-input,
.ds-input,
.task-chat-input {
  color: var(--text) !important;
  background-color: rgba(211, 239, 220, .04) !important;
  border-color: var(--border) !important;
}
.hselect:hover,
.minput:hover,
.mselect:hover,
.mtextarea:hover,
.search-inp:hover,
.field-input:hover { background-color: rgba(211, 239, 220, .06) !important; }
.hselect:focus,
.minput:focus,
.mselect:focus,
.mtextarea:focus,
.search-inp:focus,
.field-input:focus,
.ds-input:focus,
.task-chat-input:focus {
  border-color: rgba(92, 219, 134, .58) !important;
  box-shadow: var(--green-focus) !important;
}
select option { color: var(--text); background: var(--bg2); }

/* Statuses use one green ramp; only destructive actions retain muted red. */
.stat-val.blue,
.stat-val.yellow,
.stat-val.green,
.stat-val.purple,
.sbadge.IN_PROGRESS,
.sbadge.REVIEW,
.sbadge.COMPLETED,
.rbadge.manager,
.rbadge.designer,
.ds-badge.accent,
.ds-badge.info,
.ds-badge.warning,
.pv-kpi-value,
.ds-chart-value,
.ds-row-value,
.crm-header-accent,
.page-tag,
.filter-count,
.user-mgmt-role {
  color: var(--green-bright) !important;
}
.sbadge.IN_PROGRESS,
.sbadge.REVIEW,
.sbadge.COMPLETED,
.rbadge.manager,
.rbadge.designer,
.ds-badge.accent,
.ds-badge.info,
.ds-badge.warning,
.page-tag,
.user-mgmt-role {
  background: var(--green-dim) !important;
  border-color: var(--green-line) !important;
}
.user-mgmt-card > div[style*="background"],
.task-live-notice {
  color: var(--green-pale) !important;
  background: rgba(92, 219, 134, .085) !important;
  border-color: rgba(92, 219, 134, .17) !important;
}
.task-live-notice::before { background: var(--green) !important; box-shadow: 0 0 0 4px rgba(92, 219, 134, .09) !important; }
.hbtn.danger { color: #f0a2a2 !important; background: var(--red-dim) !important; border-color: rgba(239,142,142,.16) !important; }
.hbtn.danger:hover { background: rgba(239,142,142,.15) !important; border-color: rgba(239,142,142,.24) !important; }

/* Analytics, ecosystem and chat */
.ds-eyebrow,
.pv-eyebrow,
.ds-chart-value { color: var(--green-bright) !important; }
.ds-bar-fill,
.ds-chart-bar,
.pv-bar-fill,
.goal-progress-bar,
.workload-bar-fill {
  background: linear-gradient(90deg, var(--green-strong), var(--green-bright)) !important;
  box-shadow: none !important;
}
.ecosystem-icon,
.ecosystem-icon.violet,
.task-chat-send {
  color: #071109 !important;
  background: linear-gradient(145deg, var(--green-bright), var(--green-strong)) !important;
}
.task-chat-message.own .task-chat-bubble { background: rgba(92, 219, 134, .11) !important; border-color: rgba(92, 219, 134, .19) !important; }

/* Native focus is consistent and keyboard-visible. */
:where(button, a, input, select, textarea):focus-visible {
  outline: none !important;
  box-shadow: var(--green-focus) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}