/* CRM visual system: stable navigation, compact depth and Gantt readability. */
:root {
  --crm-blue:#2563eb;
  --crm-blue-light:#60a5fa;
  --crm-surface:#0f172a;
  --crm-shadow:0 10px 24px rgba(2,6,23,.18), inset 0 1px 0 rgba(255,255,255,.05);
  --crm-shadow-hover:0 14px 30px rgba(2,6,23,.26), inset 0 1px 0 rgba(255,255,255,.08);
}

#app {
  min-height:100vh;
}

#app .fade-in {
  animation:none !important;
}

#app aside {
  box-shadow:14px 0 34px rgba(2,6,23,.18);
}

.crm-brand {
  min-height:4.5rem;
  letter-spacing:.01em;
}

.crm-brand-mark {
  display:flex;
  width:2.5rem;
  height:2.5rem;
  flex:0 0 2.5rem;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid rgba(147,197,253,.45);
  border-radius:.85rem;
  background:linear-gradient(135deg,#0ea5e9,#2563eb 56%,#4f46e5);
  box-shadow:0 8px 18px rgba(37,99,235,.28),inset 0 1px 0 rgba(255,255,255,.22);
}

.crm-brand-logo {
  width:100%;
  height:100%;
  object-fit:contain;
  padding:.18rem;
  border-radius:.72rem;
  background:#fff;
}

.crm-login-brand {
  width:4.5rem;
  height:4.5rem;
  border-radius:1.25rem;
}

#app main > header {
  box-shadow:0 8px 24px rgba(2,6,23,.12);
}

#app main section.rounded-lg.border.bg-slate-900,
#app main article.rounded-lg.border.bg-slate-900 {
  box-shadow:var(--crm-shadow);
}

#app main section.rounded-lg.border.bg-slate-900:hover,
#app main article.rounded-lg.border.bg-slate-900:hover {
  box-shadow:var(--crm-shadow-hover);
}

#app button:not(:disabled) {
  background-image:linear-gradient(180deg,rgba(255,255,255,.055),rgba(2,6,23,.06));
  box-shadow:0 5px 14px rgba(2,6,23,.14),inset 0 1px 0 rgba(255,255,255,.05);
}

#app button:not(:disabled):hover {
  box-shadow:0 9px 20px rgba(2,6,23,.2),inset 0 1px 0 rgba(255,255,255,.08);
}

#app button[data-route],
#app button[data-management-route] {
  min-height:2.65rem;
}

#app table tbody tr {
  background-image:linear-gradient(105deg,rgba(255,255,255,.025),rgba(59,130,246,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 2px 8px rgba(2,6,23,.08);
  transition:background-color .16s ease,box-shadow .16s ease,transform .16s ease;
}

#app table tbody tr:hover {
  background-color:rgba(30,41,59,.58);
  box-shadow:inset 3px 0 0 rgba(96,165,250,.72),0 5px 14px rgba(2,6,23,.16);
}

.gantt-task-bar {
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 4px 12px rgba(2,6,23,.34),inset 0 1px 0 rgba(255,255,255,.24);
  filter:saturate(1.06);
  transition:filter .16s ease,box-shadow .16s ease,transform .16s ease;
}

.gantt-task-bar:hover {
  box-shadow:0 7px 16px rgba(2,6,23,.42),inset 0 1px 0 rgba(255,255,255,.3);
  filter:saturate(1.16) brightness(1.05);
  transform:translateY(-1px);
}

[data-week-shift="-7"],
[data-week-shift="7"] {
  border-color:rgba(96,165,250,.75) !important;
  background:linear-gradient(135deg,#0ea5e9,#2563eb 55%,#4338ca) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(37,99,235,.28),inset 0 1px 0 rgba(255,255,255,.2) !important;
}

[data-week-shift="-7"]:hover,
[data-week-shift="7"]:hover {
  background:linear-gradient(135deg,#0284c7,#1d4ed8 55%,#3730a3) !important;
  box-shadow:0 12px 24px rgba(37,99,235,.36),inset 0 1px 0 rgba(255,255,255,.24) !important;
}

/* На широком экране «Мои задачи» находится под кнопкой «Новая задача». */
#crm-specialist-tasks-button {
  position:fixed !important;
  z-index:95 !important;
  top:.75rem !important;
  right:1rem !important;
  left:auto !important;
  bottom:auto !important;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9) !important;
  box-shadow:0 10px 24px rgba(91,33,182,.32),inset 0 1px 0 rgba(255,255,255,.18) !important;
}

#crm-specialist-tasks-panel {
  position:fixed !important;
  z-index:94 !important;
  top:4.1rem !important;
  right:1rem !important;
  left:auto !important;
  bottom:auto !important;
  box-shadow:0 18px 40px rgba(2,6,23,.34),inset 0 1px 0 rgba(255,255,255,.06);
}

@media (min-width:1024px) {
  #crm-specialist-tasks-button {
    top:4.75rem !important;
    right:1.5rem !important;
  }

  #crm-specialist-tasks-panel {
    top:8.25rem !important;
    right:1.5rem !important;
  }
}

@media (max-width:640px) {
  .crm-brand {
    min-height:4rem;
  }

  #crm-specialist-tasks-button {
    top:.75rem !important;
    right:.75rem !important;
    max-width:calc(100vw - 1.5rem);
  }

  #crm-specialist-tasks-panel {
    top:4.1rem !important;
    right:.75rem !important;
    width:calc(100vw - 1.5rem) !important;
  }
}

/* Readable text and one active route in both navigation layouts. */
html { scrollbar-gutter: stable; }
#app main { min-width: 0; }
#app :is(h1,h2,h3,p,td,th) { overflow-wrap: anywhere; }
:root:not([data-theme="light"]) #app :is(.text-slate-500,.text-slate-600) { color:#94a3b8; }
:root[data-theme="light"] #app :is(.text-slate-500,.text-slate-600) { color:#526279 !important; }
#app :is(.text-\[10px\],.text-\[11px\]) { font-size:12px; line-height:1.5; }
#app :is(button,input,select,textarea):focus-visible { outline:2px solid #60a5fa; outline-offset:3px; }
#app :is(button,input,select) { min-height:36px; }
#app button[data-route] { white-space:normal; line-height:1.45; }
#app button[data-route][aria-current="page"] { color:#bfdbfe; background-color:rgba(37,99,235,.18); border-color:#60a5fa; }
:root[data-theme="light"] #app button[data-route][aria-current="page"] { color:#1d4ed8 !important; background-color:#dbeafe !important; }
:root[data-theme="light"] #app :is(.bg-blue-600,.bg-violet-600,.bg-rose-600,.bg-emerald-600).text-white { color:#fff !important; }
.crm-modal-open { overflow:hidden; }
.crm-modal-open #crm-specialist-tasks-button,
.crm-modal-open #crm-specialist-tasks-panel,
.crm-modal-open #crm-notification-bell,
.crm-modal-open #crm-notification-panel,
.crm-modal-open #theme-toggle { z-index:40 !important; }
#app [role="dialog"] { overscroll-behavior:contain; }
@media (min-width:1024px) {
  #app aside { position:sticky; top:0; height:100dvh; align-self:flex-start; }
  #app aside nav { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
  #app aside nav button { flex-shrink:0; }
}
@media (max-width:1023px) {
  #app .crm-mobile-nav { flex-wrap:nowrap; overflow-x:auto; max-width:100%; padding:3px 1px 8px; overscroll-behavior-x:contain; }
  #app .crm-mobile-nav button { flex:0 0 auto; white-space:nowrap; min-height:40px; }
  #app .crm-new-task { align-self:flex-start; min-height:40px; }
  #app main header h1 { font-size:1.25rem; line-height:1.35; padding-right:1rem; }
}
@media (prefers-reduced-motion:reduce) {
  #app *, #app *::before, #app *::after { animation:none !important; transition:none !important; }
}

/* Grid children must shrink so wide engineering tables scroll inside their card. */
#app .crm-calculator,
#app .crm-calculator .calc-page-panel,
#app .crm-calculator .calc-card,
#app .crm-calculator :is(.calc-layout,.tray-layout,.shield-layout,.sp256-layout) > * {
  min-width:0;
  max-width:100%;
}
#app .crm-calculator :is(input,select) { min-width:0; max-width:100%; }

/* Status text keeps sufficient contrast in both themes. */
.gantt-task-bar { color:#fff !important; }

/* Task labels and timeline bars share a two-column grid with the date scale. */
.crm-gantt-table {
  --gantt-label-width:18rem;
  --gantt-track-width:36rem;
  --gantt-surface:#0f172a;
  --gantt-hover:#17243a;
  --gantt-border:#334155;
  --gantt-text:#f1f5f9;
  --gantt-muted:#cbd5e1;
  min-width:calc(var(--gantt-label-width) + var(--gantt-track-width));
}
.crm-gantt-header,
.crm-gantt-row {
  display:grid;
  grid-template-columns:var(--gantt-label-width) minmax(var(--gantt-track-width),1fr);
  width:100%;
  padding:0;
  align-items:stretch;
}
#app .crm-gantt-row,
#gantt-root .crm-gantt-row {
  border-radius:0;
  background:var(--gantt-surface);
  box-shadow:none;
  transform:none;
}
.crm-gantt-label {
  display:block;
  min-width:0;
  padding:12px 16px;
  background:var(--gantt-surface);
  color:var(--gantt-text);
}
.crm-gantt-title {
  display:block;
  font-size:14px;
  font-weight:600;
  line-height:1.45;
  white-space:normal;
  overflow-wrap:anywhere;
}
.crm-gantt-project,
.crm-gantt-meta {
  display:block;
  margin-top:5px;
  color:var(--gantt-muted);
  font-size:12px;
  line-height:1.5;
  white-space:normal;
  overflow-wrap:anywhere;
}
.crm-gantt-meta { display:flex; flex-wrap:wrap; gap:4px 12px; }
.crm-gantt-track {
  display:block;
  position:relative;
  min-width:0;
  min-height:64px;
  overflow:hidden;
  border-left:1px solid var(--gantt-border);
  background:linear-gradient(var(--gantt-border),var(--gantt-border)) center / 100% 1px no-repeat;
}
.crm-gantt-track .gantt-task-bar {
  position:absolute;
  top:50%;
  height:28px;
  margin-top:-14px;
  padding:0;
  overflow:hidden;
  border-radius:5px;
  font-size:12px;
  font-weight:600;
  line-height:26px;
  text-align:left;
}
.crm-gantt-track .gantt-task-bar > span { padding:0 8px; }

.crm-gantt-scale { min-height:44px; background:none; }
.crm-gantt-tick {
  position:absolute;
  top:12px;
  padding-left:4px;
  white-space:nowrap;
  font-size:12px;
  color:var(--gantt-muted);
}
.crm-gantt-header .crm-gantt-label { color:var(--gantt-muted); }
#app .crm-gantt-row:hover,
#gantt-root .crm-gantt-row:hover,
.crm-gantt-row:hover .crm-gantt-label { background:var(--gantt-hover); }
.crm-gantt-row:focus-visible { outline:2px solid #60a5fa; outline-offset:-2px; }
:root[data-theme="light"] .crm-gantt-table {
  --gantt-surface:#fff;
  --gantt-hover:#eff6ff;
  --gantt-border:#cbd5e1;
  --gantt-text:#172033;
  --gantt-muted:#475569;
}
@media(max-width:640px) {
  .crm-gantt-table { --gantt-label-width:14rem; --gantt-track-width:32rem; }
  .crm-gantt-label { padding:12px; }
}


/* A bounded scroll area keeps dates visible and aligned with every task row. */
.crm-gantt-scroll {
  position:relative;
  isolation:isolate;
  max-height:70vh;
  max-height:70dvh;
  overflow:auto;
  scrollbar-gutter:stable;
  scroll-padding-top:56px;
  border:1px solid #334155;
  border-radius:8px;
}
.crm-gantt-scroll:focus-visible { outline:2px solid #60a5fa; outline-offset:3px; }
.crm-gantt-scroll .crm-gantt-header {
  position:sticky;
  top:0;
  z-index:5;
  background:#111e34 !important;
  box-shadow:0 2px 0 #334155,0 5px 12px rgba(2,6,23,.16);
}
.crm-gantt-header .crm-gantt-label { background:inherit; }
.crm-gantt-scroll .crm-gantt-row { scroll-margin-top:56px; }
.crm-gantt-group-heading {
  --group-fill:#1e3a5f;
  --group-text:#e0f2fe;
  --group-muted:#bfdbfe;
  --group-accent:#60a5fa;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-left:4px solid var(--group-accent);
  background:var(--group-fill);
  color:var(--group-text);
}
.crm-gantt-group-heading--project {
  --group-fill:#3b2b60;
  --group-text:#f3e8ff;
  --group-muted:#ddd6fe;
  --group-accent:#a78bfa;
}
.crm-gantt-group-heading > div { min-width:0; }
.crm-gantt-group-heading :is(h1,h3) {
  margin:0;
  color:var(--group-text) !important;
  font-weight:700;
  overflow-wrap:anywhere;
}
.crm-gantt-group-heading p {
  color:var(--group-muted) !important;
}
.crm-gantt-group-meta { margin-top:4px; font-size:12px; line-height:1.5; }
.crm-gantt-group-count {
  flex-shrink:0;
  padding:4px 8px;
  border-radius:5px;
  background:rgba(255,255,255,.12);
  color:var(--group-text);
  font-size:12px;
  font-weight:600;
}
:root[data-theme="light"] .crm-gantt-scroll { border-color:#cbd5e1; }
:root[data-theme="light"] .crm-gantt-scroll .crm-gantt-header {
  background:#f1f5f9 !important;
  box-shadow:0 2px 0 #cbd5e1,0 5px 12px rgba(15,23,42,.08);
}
:root[data-theme="light"] .crm-gantt-group-heading {
  --group-fill:#dbeafe;
  --group-text:#1e3a8a;
  --group-muted:#1e40af;
  --group-accent:#2563eb;
}
:root[data-theme="light"] .crm-gantt-group-heading--project {
  --group-fill:#ede9fe;
  --group-text:#4c1d95;
  --group-muted:#5b21b6;
  --group-accent:#7c3aed;
}
:root[data-theme="light"] .crm-gantt-group-count { background:rgba(255,255,255,.65); }

/* Calculator backgrounds must survive the general button highlight. */
#app .crm-calculator button { background-image:none; text-shadow:none; }
#app .crm-calculator :is(.calc-product-tab.active,.calc-mode.active,.calc-submit) {
  background:linear-gradient(135deg,#1d4ed8,#6d28d9);
  color:#fff;
  border-color:#4338ca;
  text-shadow:none;
}
#app .crm-calculator :is(.calc-product-tab.active,.calc-mode.active,.calc-submit):hover {
  background:linear-gradient(135deg,#1e40af,#5b21b6);
  color:#fff;
  filter:none;
}
:root[data-theme="light"] #app .crm-calculator :is(.calc-product-tab,.calc-mode):not(.active),
:root[data-theme="light"] #app .crm-calculator .shield-secondary,
:root[data-theme="light"] #app .crm-calculator .tray-qty button {
  background:#f1f5f9;
  color:#334155;
  border-color:#cbd5e1;
}
:root[data-theme="light"] #app .crm-calculator :is(.calc-product-tab,.calc-mode):not(.active):hover,
:root[data-theme="light"] #app .crm-calculator .shield-secondary:hover,
:root[data-theme="light"] #app .crm-calculator .tray-qty button:hover {
  background:#dbeafe;
  color:#1e40af;
  border-color:#2563eb;
}
:root[data-theme="light"] #app .crm-calculator :is(.tray-delete,.shield-remove,[data-tray-clear],[data-shield-clear]) {
  background:#fff1f2;
  color:#9f1239;
  border:1px solid #fda4af;
  border-radius:7px;
}
:root[data-theme="light"] #app .crm-calculator [data-tray-clear] { padding:6px 10px; }
:root[data-theme="light"] #app .crm-calculator :is(.tray-delete,.shield-remove,[data-tray-clear],[data-shield-clear]):hover {
  background:#ffe4e6;
  color:#881337;
  border-color:#be123c;
}
:root[data-theme="light"] #app .crm-calculator button:focus-visible {
  outline:2px solid #1d4ed8;
  outline-offset:3px;
}