/* Warm "card dashboard" theme: white surfaces float on a warm-neutral
   canvas, soft shadows instead of hard borders, a deep-teal accent.
   Pastel tile / hero-card tokens are intentionally the same in both
   themes (they're small saturated accents, not surface colors). */
:root {
  --bg: #ffffff;
  --bg-soft: #f5f3ee;
  --bg-deep: #efece4;
  --border: #ebe7dd;
  --border-strong: #ddd7c8;
  --text: #211f1c;
  --text-secondary: #4d4a44;
  --text-muted: #78746c;
  --accent: #211f1c;
  --accent-link: #33544f;
  --accent-soft: #e3ece9;
  --accent-border: rgba(33, 84, 79, 0.14);
  --shadow-border: rgba(28, 27, 26, 0.08) 0px 0px 0px 1px;
  --shadow-card: rgba(28, 27, 26, 0.05) 0px 1px 2px, rgba(28, 27, 26, 0.08) 0px 10px 28px -14px;
  --shadow-lift: rgba(28, 27, 26, 0.1) 0px 16px 32px -16px;
  --radius: 14px;
  --radius-lg: 22px;
  --tile-lavender-bg: #eee9fb;
  --tile-lavender-fg: #5b4b9e;
  --tile-peach-bg: #fbe9df;
  --tile-peach-fg: #9c5a34;
  --tile-mint-bg: #e3f1e6;
  --tile-mint-fg: #2f6b45;
  --hero-kb: linear-gradient(155deg, #2c2b28, #232220);
  --hero-okr: linear-gradient(155deg, #4a5443, #3c4438);
  --hero-tasks: linear-gradient(155deg, #2c3547, #232a3a);
  --brand-ring: #abb48a;
  --brand-wave: #4f5b38;
  --brand-flow: #707c3f;
  color-scheme: light;
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
  --bg: #201e1b;
  --bg-soft: #171513;
  --bg-deep: #131211;
  --border: #34312c;
  --border-strong: #423e37;
  --text: #ededed;
  --text-secondary: #b5b0a6;
  --text-muted: #8a857b;
  --accent: #ededed;
  --accent-link: #6fa89f;
  --accent-soft: #29332f;
  --accent-border: rgba(111, 168, 159, 0.18);
  --shadow-border: rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
  --shadow-card: rgba(0, 0, 0, 0.25) 0px 1px 2px, rgba(0, 0, 0, 0.4) 0px 10px 28px -14px;
  --shadow-lift: rgba(0, 0, 0, 0.45) 0px 16px 32px -16px;
  --brand-ring: #b9c29a;
  --brand-wave: #eeecdd;
  --brand-flow: #a8b378;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size: 14px;
}

/* ---------- Login page (OliFlow, pastel-olive brand tone) ---------- */

.login-page {
  --login-accent: #707c3f;
  --login-accent-hover: #5c6634;
  --login-logo-ring: #abb48a;
  --login-logo-wave: #4f5b38;
  --login-bg-1: #f2f1e1;
  --login-bg-2: #dcdcb4;
  --login-blob-1: #c2c88a;
  --login-blob-2: #a9b46a;
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(160deg, var(--login-bg-1), var(--login-bg-2));
}

:root[data-theme="dark"] .login-page {
  --login-accent: #a8b378;
  --login-accent-hover: #b9c48c;
  --login-logo-ring: #b9c29a;
  --login-logo-wave: #eeecdd;
  --login-bg-1: #23241a;
  --login-bg-2: #15160f;
  --login-blob-1: #4b5030;
  --login-blob-2: #383c22;
}

.login-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.login-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
}

.login-blob-1 {
  width: 380px;
  height: 380px;
  top: -120px;
  left: -100px;
  background: var(--login-blob-1);
}

.login-blob-2 {
  width: 420px;
  height: 420px;
  bottom: -140px;
  right: -120px;
  background: var(--login-blob-2);
}

.login-card {
  position: relative;
  z-index: 1;
  width: 440px;
  max-width: calc(100vw - 32px);
  background: var(--bg);
  border-radius: 24px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: rgba(15, 23, 42, 0.12) 0px 20px 50px -12px, rgba(15, 23, 42, 0.06) 0px 0px 0px 1px;
}

.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.login-logo b {
  font-weight: 600;
  color: var(--login-accent);
}

.login-logo-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
}

.login-logo-icon svg {
  width: 100%;
  height: 100%;
}

.login-tagline {
  color: var(--login-accent);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 6px 0 0;
}

.login-card p.subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin: 4px 0 28px;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.login-field {
  position: relative;
  display: flex;
  align-items: center;
}

.login-field-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  display: inline-flex;
  pointer-events: none;
}

.login-field-icon svg {
  width: 100%;
  height: 100%;
}

.login-field input {
  width: 100%;
  height: 52px;
  padding: 0 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: var(--bg-soft);
  font-size: 14px;
  transition: border-color 0.12s, background 0.12s;
}

.login-field input:focus {
  border-color: var(--login-accent);
  background: var(--bg);
}

.login-field-toggle {
  position: absolute;
  right: 12px;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.login-field-toggle svg {
  width: 100%;
  height: 100%;
}

.login-field-toggle.active {
  color: var(--login-accent);
}

.login-submit {
  height: 52px;
  margin-top: 4px;
  background: var(--login-accent);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.12s;
}

.login-submit:hover {
  background: var(--login-accent-hover);
}

.login-error {
  color: #d0342c;
  font-size: 13px;
  min-height: 18px;
}

/* ---------- App shell ---------- */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-width, 220px) 1fr;
  grid-template-rows: auto 1fr;
  height: 100vh;
  transition: grid-template-columns 0.15s ease;
}

.app.sidebar-collapsed {
  grid-template-columns: 0 1fr;
}

.app.sidebar-collapsed .sidebar {
  padding: 0;
  overflow: hidden;
  border-right: none;
}

.app.home-mode {
  grid-template-columns: 0 1fr;
}

/* Not display:none — that removes .sidebar from CSS Grid's auto-placement
   entirely, which shifts .content (the next auto-placed item) into the
   now-vacant first column instead of the second, squashing it to 0 width.
   The 0-width column already hides the sidebar visually; just clip it. */
.app.home-mode .sidebar {
  padding: 0;
  overflow: hidden;
  border-right: none;
}

.main-header {
  grid-column: 1 / 3;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  text-decoration: none;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-brand svg {
  width: 23px;
  height: 23px;
  flex: none;
}

.app-brand b {
  font-weight: 600;
  color: var(--brand-flow);
}

.main-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.main-tab {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s, color 0.12s;
}

.main-tab:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.main-tab.active {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}

.main-tab.locked {
  color: var(--text-muted);
  opacity: 0.55;
  cursor: not-allowed;
}

.main-tab .module-lock {
  display: inline-flex;
}

.main-tab .module-lock .icon {
  width: 12px;
  height: 12px;
}

.icon-btn {
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  padding: 0;
  transition: background 0.12s, border-color 0.12s;
}

.icon-btn:hover {
  background: var(--accent-soft);
}

.icon-btn.active {
  background: var(--accent-soft);
  border-color: var(--border-strong);
}

#sidebar-toggle-btn .icon {
  transition: transform 0.15s;
}

#sidebar-toggle-btn.active .icon {
  transform: scaleX(-1);
}

/* Inline line-icon set (replaces emoji throughout the app) */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.15em;
}

.icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.icon-btn .icon {
  width: 16px;
  height: 16px;
}

.sidebar-search {
  flex-shrink: 0;
  padding: 10px 10px 4px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 4px 0 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  transition: border-color 0.12s, background 0.12s;
}

.search-box:focus-within {
  border-color: var(--accent);
  background: var(--bg);
}

.search-box-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.search-box input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 5px 8px 5px 0;
  border: none;
  outline: none;
  background: none;
  font-size: 11.5px;
}

.topbar-right {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-badge-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 12px;
  border: 1.5px solid var(--tile-lavender-fg);
  border-radius: 12px;
  background: none;
  cursor: pointer;
  line-height: 1.25;
  transition: background 0.12s;
}

.user-badge-btn:hover {
  background: var(--tile-lavender-bg);
}

.user-badge-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.user-badge-role {
  font-size: 10px;
  color: var(--tile-lavender-fg);
}

/* ---------- Personal cabinet ---------- */

.cabinet-modal {
  width: 640px !important;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

/* ---------- Article access modal ("Доступы") ---------- */

.access-modal {
  width: 480px !important;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

.access-everyone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--accent-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.access-section {
  margin-bottom: 14px;
  min-height: 0;
}

.access-section-title {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.access-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}

/* Nested Department -> Users tree: the header carries the department name
   and the "grant to everyone in the department" bulk checkbox, the users
   below it are the individual per-user rows it cascades into. */
.access-dept-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
}

.access-dept-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 4px 6px;
}

.access-dept-users {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}

.access-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--bg-soft);
}

.access-row-check:has(input:disabled) {
  color: var(--text-muted);
  opacity: 0.6;
  cursor: not-allowed;
}

.access-row-name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.access-row-check {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.access-row-bulk {
  color: var(--accent-link);
}

.access-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 2px;
}

.cabinet-modal #cabinet-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.cabinet-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.cabinet-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.cabinet-tab:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.cabinet-tab.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.cabinet-section .field-row {
  display: flex;
  gap: 12px;
}

.cabinet-section .field-row .field {
  flex: 1;
}

.cabinet-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.perm-matrix {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.perm-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.perm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 3px 0;
  cursor: pointer;
}

.perm-row input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
}

.perm-row-master {
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.perm-group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.perm-group-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
}

.user-register-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.user-register-row input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-border);
  overflow: hidden;
}

.user-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
}

.user-row-header:hover {
  background: var(--accent-soft);
}

.user-row-header .caret {
  width: 12px;
  color: var(--text-muted);
  font-size: 10px;
  transition: transform 0.15s;
}

.user-row-header .caret.collapsed {
  transform: rotate(-90deg);
}

.user-row-name {
  font-weight: 600;
  font-size: 13px;
}

.user-row-login {
  color: var(--text-muted);
  font-size: 12px;
}

.user-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
}

.user-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.user-status-dot.online {
  background: rgb(62, 207, 142);
}

.user-status-dot.online::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgb(62, 207, 142);
  animation: statusPulse 1.8s ease-out infinite;
}

.user-status-dot.blocked {
  background: #d0342c;
}

@keyframes statusPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.user-badge.admin {
  background: var(--accent-soft);
  color: var(--text);
}

.user-badge.blocked {
  background: rgba(220, 80, 70, 0.14);
  color: #d0342c;
}

.user-row-details {
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}

.user-row-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn {
  padding: 6px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
}

.btn:active {
  transform: scale(0.97);
}

.btn:hover {
  background: var(--accent-soft);
}

.btn.primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.btn.primary:hover {
  background: #000000;
}

.btn.small {
  padding: 3px 9px;
  font-size: 11.5px;
}

.btn.danger {
  color: #d0342c;
  border-color: rgba(220, 80, 70, 0.4);
}

.btn.danger:hover {
  background: rgba(220, 80, 70, 0.14);
}

/* ---------- Sidebar ---------- */

.sidebar {
  position: relative;
  border-right: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 3;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.active {
  background: var(--accent-link);
  opacity: 0.4;
}

.app.sidebar-collapsed .sidebar-resize-handle,
.app.home-mode .sidebar-resize-handle {
  display: none;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 8px 6px;
  flex-shrink: 0;
}

#tree-root {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 12px;
}

.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-footer .sidebar-header-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-footer .btn.small {
  width: 100%;
}

.sidebar-header span {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.tree-node {
  margin-bottom: 1px;
}

.tree-node-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 9px;
  cursor: pointer;
  user-select: none;
  font-size: 11.5px;
  color: var(--text);
  border: 2px solid transparent;
}

.tree-node-row:hover {
  background: var(--accent-soft);
}

.tree-node-row.active {
  background: var(--accent-soft);
  font-weight: 600;
}

.tree-node-row .caret {
  width: 12px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 10px;
  transition: transform 0.15s;
}

.tree-node-row .caret.collapsed {
  transform: rotate(-90deg);
}

.tree-node-row .caret.spacer {
  visibility: hidden;
}

.tree-node-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-node-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.tree-children {
  margin-left: 16px;
  border-left: 1px solid var(--border);
  padding-left: 8px;
}

.tree-node-row.drag-over-inside {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.tree-node-row.drag-over-before {
  box-shadow: inset 0 2px 0 var(--accent);
}

.tree-node-row.drag-over-after {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.tree-node-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
}

.tree-node-row:hover .tree-node-menu-btn,
.tree-node-menu-btn.active {
  display: flex;
}

.tree-node-menu-btn:hover {
  background: var(--border);
  color: var(--text);
}

.tree-node-menu-btn .icon {
  width: 13px;
  height: 13px;
}

.tree-node-menu {
  position: fixed;
  z-index: 60;
  min-width: 152px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: var(--shadow-card), rgba(28, 27, 26, 0.1) 0px 8px 24px -8px;
}

.tree-node-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font-size: 12px;
  text-align: left;
}

.tree-node-menu button:hover {
  background: var(--accent-soft);
}

.tree-node-menu button.danger {
  color: #d0342c;
}

.tree-node-menu button.danger:hover {
  background: rgba(220, 80, 70, 0.14);
}

.tree-node-menu .icon {
  width: 14px;
  height: 14px;
}

/* ---------- OKR tree ---------- */

.okr-node {
  margin-bottom: 2px;
}

.okr-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}

.okr-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.okr-row:hover {
  background: var(--accent-soft);
}

.okr-row.active {
  background: var(--accent-soft);
}

.okr-row .caret {
  width: 12px;
  color: var(--text-muted);
  font-size: 10px;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.okr-row .caret.collapsed {
  transform: rotate(-90deg);
}

.okr-row .caret.spacer {
  visibility: hidden;
}

.okr-title {
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.okr-title .icon.okr-icon,
h1 .icon.okr-icon,
.okr-parent-icon .icon.okr-icon {
  width: 15px;
  height: 15px;
  margin-right: 4px;
  color: var(--text-muted);
  vertical-align: -0.2em;
}

.okr-owner-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  color: #d0342c;
  border: 1px solid rgba(220, 80, 70, 0.4);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}

.okr-owner-badge-tree {
  align-self: flex-start;
  font-size: 9px;
  color: #d0342c;
  border: 1px solid rgba(220, 80, 70, 0.4);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

.okr-children {
  margin-left: 16px;
  border-left: 1px solid var(--border);
  padding-left: 8px;
}

/* ---------- OKR period tabs + table ---------- */

.okr-period-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 24px 0 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.period-pill {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}

.period-pill:hover {
  background: var(--accent-soft);
}

.period-pill.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.okr-header-table {
  border-collapse: collapse;
  margin-bottom: 24px;
  width: 100%;
  max-width: 640px;
}

.okr-header-table th,
.okr-header-table td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
  font-size: 13px;
}

.okr-header-table th {
  background: var(--bg-soft);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.okr-table-toolbar {
  margin-bottom: 10px;
}

.okr-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.okr-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.okr-table th {
  background: var(--bg-soft);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 8px 8px;
  border: 1px solid var(--border);
  white-space: normal;
  line-height: 1.3;
  vertical-align: bottom;
  word-break: break-word;
  max-height: 54px;
}

.okr-table td {
  border: 1px solid var(--border);
  padding: 8px 8px;
  vertical-align: middle;
  overflow-wrap: break-word;
}

.okr-table th:nth-child(1),
.okr-table td:nth-child(1) {
  width: 92px;
}

.okr-table th:nth-child(2),
.okr-table td:nth-child(2) {
  width: 280px;
}

.okr-table th:nth-child(3),
.okr-table td:nth-child(3) {
  width: 120px;
}

.okr-table th:nth-child(4),
.okr-table td:nth-child(4) {
  width: 100px;
}

.okr-table th:nth-child(5),
.okr-table td:nth-child(5) {
  width: 280px;
}

.okr-table th:nth-child(6),
.okr-table td:nth-child(6),
.okr-table th:nth-child(7),
.okr-table td:nth-child(7) {
  width: 110px;
}

.okr-table th:nth-child(8),
.okr-table td:nth-child(8) {
  width: 160px;
}

.okr-table:not(.details-expanded) .okr-detail-col {
  display: none;
}

.okr-parent-icon {
  text-align: center;
  font-size: 16px;
}

.okr-row-objective {
  background: rgba(240, 200, 80, 0.08);
}

.okr-row-objective td {
  border-top: 2px solid #3a3a3a;
  border-bottom: 2px solid #3a3a3a;
}

.okr-row-objective .okr-objective-title {
  font-weight: 400;
}

.okr-row-kr {
  background: var(--bg);
}

.okr-row-kr.okr-row-kr-alt {
  background: var(--bg-soft);
}

.okr-row-kr td {
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}

.okr-kr-indent {
  padding-left: 20px !important;
}

.okr-input {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 7px;
  font-size: 13px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
}

.okr-input:hover {
  border-color: var(--border);
}

.okr-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
}

.okr-input:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

textarea.okr-input {
  resize: both;
  overflow: hidden;
  min-height: 32px;
  line-height: 1.4;
  width: 100%;
  white-space: pre-wrap;
}

input.okr-kr-value {
  width: 64px;
  min-width: 64px;
  text-align: center;
  flex: none;
  font-weight: 700;
  border-radius: 8px;
}

.okr-value-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: #3a3a3a;
}

.okr-value-badge strong {
  font-weight: 700;
}

.okr-approach-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.okr-approach-cell select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 4px;
  font-size: 11px;
  background: var(--bg);
}

.okr-placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.initiative-view-item {
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

.initiative-view-item + .initiative-view-item {
  margin-top: 10px;
}

.initiative-view-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.initiative-text {
  white-space: pre-line;
  margin-bottom: 4px;
  font-size: 11px;
}

.initiative-status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
}

.initiatives-editor-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.initiative-item {
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

.initiative-text-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.initiative-bullet {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
  padding-top: 6px;
}

.initiative-text-row .initiative-text-input {
  flex: 1;
  font-size: 11px;
}

.initiative-item:last-of-type {
  border-bottom: none;
}

.initiative-item-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.initiative-status-select {
  flex: 1;
  border: none;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
}

.initiative-item-footer button.remove {
  border: none;
  background: none;
  color: var(--text-muted);
  padding: 0 4px;
  font-size: 12px;
  line-height: 1;
}

.initiative-item-footer button.remove:hover {
  color: #d0342c;
}

.add-initiative-btn {
  align-self: flex-start;
  font-size: 11px;
  padding: 3px 10px;
}

.okr-metric-note-view {
  white-space: pre-line;
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 4px;
}

.okr-responsibles-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.responsible-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #a9cdf0;
  color: var(--accent-link);
  border-radius: 20px;
  padding: 2px 4px 2px 10px;
  font-size: 11px;
  background: #f3f8fd;
}

.responsible-chip .responsible-input,
.responsible-chip .responsible-select {
  border: none;
  background: transparent;
  color: var(--accent-link);
  font-size: 11px;
  max-width: 110px;
  padding: 2px 0;
}

.responsible-chip .responsible-input:focus,
.responsible-chip .responsible-select:focus {
  outline: none;
}

.responsible-chip button.remove {
  border: none;
  background: none;
  color: var(--accent-link);
  opacity: 0.6;
  padding: 0 4px;
  font-size: 11px;
  line-height: 1;
}

.responsible-chip button.remove:hover {
  opacity: 1;
}

.add-responsible-btn {
  font-size: 11px;
  padding: 3px 10px;
}

.okr-table select.okr-parent-level-select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 2px;
  font-size: 10px;
  background: var(--bg);
}

.okr-cell-disabled {
  color: var(--text-muted);
  text-align: center;
}

.okr-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.okr-row-actions .btn.small {
  padding: 3px 6px;
  font-size: 11px;
}

.okr-empty-cell {
  text-align: center;
  color: var(--text-muted);
  padding: 24px !important;
}

.okr-table-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  border: 1px solid var(--border);
  background: var(--bg);
  white-space: nowrap;
}

.tag-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.tag-chip .tag-dot {
  width: 8px;
  height: 8px;
}

/* ---------- Content ---------- */

.content {
  overflow-y: auto;
  padding: 32px 48px;
}

@keyframes viewFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content.view-fade-in > * {
  animation: viewFadeIn 0.18s ease;
}

.content.okr-mode,
.content.editor-mode {
  padding: 20px 16px;
}

.empty-state {
  color: var(--text-muted);
  text-align: center;
  margin-top: 80px;
}

/* Center the article column with generous side gutters — both the read view
   and the editor share this so switching between them doesn't reflow width.
   Percentage padding is relative to .content's own (already-inset) box, so
   this stacks with .content's padding rather than replacing it. Scoped away
   from .okr-mode: the OKR page reuses .article-view for its own (wide-table)
   layout, which this centering would otherwise squeeze down to 60% width. */
.content:not(.okr-mode) .article-view,
.editor {
  padding: 0 20%;
}

@media (max-width: 860px) {
  .content:not(.okr-mode) .article-view,
  .editor {
    padding: 0 5%;
  }
}

.article-view h1 {
  margin: 0 0 8px;
  font-size: 18px;
}

.article-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.article-head h1 {
  margin: 0;
}

.article-icon-inline {
  display: inline-flex;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--text-secondary);
}

.article-icon-inline .icon {
  width: 100%;
  height: 100%;
}

/* Cover banner: shared by the read view and the editor's live preview. Image
   covers use an inline background-image (set in JS); gradient covers pick
   up one of the 12 .cover-gradient-<key> presets below. In the read view the
   title sits inside the banner (see .article-cover .article-head below); the
   editor's standalone preview never nests a head, so it stays a plain strip. */
.article-cover {
  position: relative;
  height: 180px;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Light scrim at the bottom so the (always-dark) title text stays legible
   over an arbitrary uploaded photo, not just the pastel gradient presets. */
.article-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.article-cover .article-head {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 14px 20px;
  color: #2c2a25;
}

.article-cover .article-head h1,
.article-cover .article-icon-inline {
  color: inherit;
}

/* 12 soft pastel presets — same tone in both themes (small decorative
   accents, not surface colors), matching the hero-card convention. */
.cover-gradient-peach { background: linear-gradient(135deg, #ffe3cf, #ffcfab); }
.cover-gradient-rose { background: linear-gradient(135deg, #ffe1e6, #ffc7d2); }
.cover-gradient-butter { background: linear-gradient(135deg, #fff2cf, #ffe49c); }
.cover-gradient-sage { background: linear-gradient(135deg, #e8f3dd, #cee6b8); }
.cover-gradient-mint { background: linear-gradient(135deg, #dcf5ea, #bce9d7); }
.cover-gradient-sky { background: linear-gradient(135deg, #dcf0f7, #b9e2f0); }
.cover-gradient-powder { background: linear-gradient(135deg, #e1ecfc, #c6dcf8); }
.cover-gradient-lavender { background: linear-gradient(135deg, #eae5fb, #d6cbf5); }
.cover-gradient-lilac { background: linear-gradient(135deg, #f3e2f8, #e6c4f0); }
.cover-gradient-blush { background: linear-gradient(135deg, #fbe1ef, #f5bfdc); }
.cover-gradient-sand { background: linear-gradient(135deg, #f1e7d9, #e3d1b4); }
.cover-gradient-olive { background: linear-gradient(135deg, #eaeedd, #d3dab8); }

.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 20px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

.article-status-badge {
  display: inline-block;
  vertical-align: middle;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-muted);
  margin-left: 6px;
}

.tree-status-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 9999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.article-tags {
  display: flex;
  gap: 6px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.article-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.article-view .article-body.ql-editor {
  font-size: 13px;
  line-height: 1.7;
  padding: 0;
}

.article-body img {
  max-width: 100%;
  border-radius: 6px;
  margin: 8px 0;
  cursor: zoom-in;
}

/* ---------- Image resize handle (editor) ---------- */

#quill-editor-container .ql-editor img {
  cursor: pointer;
}

.img-resize-handles {
  position: fixed;
  border: 1.5px dashed var(--accent-link);
  pointer-events: none;
  z-index: 40;
}

.img-resize-handle {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 11px;
  height: 11px;
  background: var(--accent-link);
  border: 1.5px solid var(--bg);
  border-radius: 3px;
  cursor: se-resize;
  pointer-events: auto;
}

/* ---------- Image lightbox (article view) ---------- */

.image-lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  z-index: 200;
  cursor: zoom-out;
  animation: lightboxFadeIn 0.15s ease;
}

@keyframes lightboxFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.image-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 60px;
}

.article-body a {
  color: var(--accent-link);
}

/* ---------- Rich content: shared between editor and article view ---------- */

/* Code block — Quill 2.x renders this as .ql-code-block-container > .ql-code-block
   (one div per line), NOT <pre class="ql-syntax"> (that markup only appears with the
   optional syntax/hljs module, which isn't registered here). quill.snow.css's own
   background/radius for this is also scoped to ".ql-snow .ql-editor", an ancestor
   the article view never has, so it needs its own theme-independent rule too. */
#quill-editor-container .ql-editor .ql-code-block-container,
.article-body .ql-code-block-container {
  background: #1e1e24;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0;
  overflow-x: auto;
}

#quill-editor-container .ql-editor .ql-code-block,
.article-body .ql-code-block {
  color: #e4e4e8;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Inline code — the article view isn't nested inside .ql-snow, so quill.snow.css's
   own (hardcoded light-mode) rule for this never applies there; style it ourselves
   so it also works in dark mode. */
#quill-editor-container .ql-editor code,
.article-body code {
  background: var(--bg-soft);
  color: var(--text);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 90%;
}

/* Blockquote — same story: quill.snow.css's border/spacing is scoped to
   ".ql-snow .ql-editor blockquote", which the article view lacks. */
#quill-editor-container .ql-editor blockquote,
.article-body blockquote {
  margin: 14px 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--border-strong);
  color: var(--text-secondary);
  font-style: italic;
}

/* Adjacent sibling margins collapse to the larger of the two (14px, not the
   sum) — so consecutive quotes read as one continuous block. Give this exact
   case its own explicit gap so several quotes in a row stay visually distinct. */
#quill-editor-container .ql-editor blockquote + blockquote,
.article-body blockquote + blockquote {
  margin-top: 28px;
}

#quill-editor-container .ql-editor hr,
.article-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

#quill-editor-container .ql-editor table,
.article-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
  font-size: 12.5px;
}

#quill-editor-container .ql-editor table td,
#quill-editor-container .ql-editor table th,
.article-body table td,
.article-body table th {
  border: 1px solid var(--border);
  padding: 6px 10px;
}

#quill-editor-container .ql-editor table th,
.article-body table th {
  background: var(--bg-soft);
  font-weight: 600;
  text-align: left;
}

#quill-editor-container .ql-editor table tr:nth-child(even) td,
.article-body table tr:nth-child(even) td {
  background: var(--bg-soft);
}

/* Quill 2.x stores checklist/bullet/ordered state as li[data-list=...], not
   the old Quill 1.x li[data-checked]; the checkbox glyph itself comes from
   quill.snow.css's built-in li[data-list] > .ql-ui:before rule, so this only
   needs to add our own accent color + strikethrough on top of it. */
#quill-editor-container .ql-editor li[data-list="checked"],
.article-body li[data-list="checked"] {
  text-decoration: line-through;
  color: var(--text-muted);
}

#quill-editor-container .ql-editor li[data-list="checked"] > .ql-ui,
#quill-editor-container .ql-editor li[data-list="unchecked"] > .ql-ui,
.article-body li[data-list="checked"] > .ql-ui,
.article-body li[data-list="unchecked"] > .ql-ui {
  color: var(--accent-link);
}

.footnote-ref {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 0 1px;
}

.footnotes-list {
  margin-top: 32px;
  font-size: 11px;
  color: var(--text-muted);
  padding-left: 20px;
}

.footnotes-list li {
  margin-bottom: 6px;
}

.footnote-backref {
  color: var(--accent);
  text-decoration: none;
  margin-left: 2px;
}

.attachments-block {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.attachments-title {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
}

.attachment-chip:hover {
  background: var(--accent-soft);
}

.attachment-size {
  color: var(--text-muted);
  font-size: 11px;
}

.attachment-chip button.remove {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  color: var(--text-muted);
  padding: 0;
  margin-left: 2px;
  line-height: 1;
}

.attachment-chip .icon {
  width: 14px;
  height: 14px;
}

button.remove .icon {
  width: 10px;
  height: 10px;
}

.attachment-chip button.remove:hover {
  color: #d0342c;
}

.attachments-editor {
  margin-top: 20px;
  margin-bottom: 8px;
}

.editor-cover-area {
  display: none;
  margin-bottom: 14px;
}

.editor-cover-area .article-cover {
  margin-bottom: 0;
}

.editor-header-card {
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 20px 14px;
  margin-bottom: 14px;
}

.editor-meta-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.editor-meta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 12px;
}

.editor-meta-btn:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.editor-meta-btn .icon {
  width: 14px;
  height: 14px;
}

.editor-meta-btn.ghost {
  color: var(--text-muted);
  background: none;
  border-color: transparent;
}

.editor-meta-btn.ghost:hover {
  color: #d0342c;
  background: rgba(220, 80, 70, 0.1);
}

.meta-popover {
  position: fixed;
  z-index: 60;
  width: 260px;
  padding: 12px;
  background: var(--bg);
  border-radius: 12px;
  box-shadow: var(--shadow-card), rgba(28, 27, 26, 0.1) 0px 8px 24px -8px;
}

.meta-popover .icon-palette {
  max-height: 200px;
  overflow-y: auto;
}

.meta-popover-remove {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 7px 8px;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  text-align: left;
}

.meta-popover-remove:hover {
  color: #d0342c;
}

.cover-popover-title {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 10px 0 6px;
}

.cover-popover-title:first-child {
  margin-top: 0;
}

.cover-upload-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.cover-gradient-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.cover-gradient-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 0;
}

.cover-gradient-swatch:hover {
  box-shadow: 0 0 0 2px var(--accent-link);
}

.editor-header-card .field-row {
  margin-bottom: 0;
}

.editor textarea.title-input {
  width: 100%;
  font-size: 17px;
  font-weight: 600;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  margin-bottom: 16px;
  outline: none;
  resize: none;
  background: none;
  color: var(--text);
}

/* No overflow:hidden here — an ancestor with non-visible overflow becomes the
   sticky positioning context per spec, and since this card itself never
   scrolls internally, that silently neutered .kb-toolbar's sticky-to-top
   (verified: it just scrolled away with the page instead of pinning). The
   corner rounding it used to provide via clipping is applied directly on the
   toolbar (top corners) and the editor container (bottom corners) instead. */
.quill-card {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 2px, rgba(0, 0, 0, 0.04) 0px 8px 8px -8px;
}

/* ---------- Custom editor toolbar (own markup; Quill's toolbar module is disabled) ---------- */

.kb-toolbar {
  position: sticky;
  top: 0;
  /* Kept below .modal-backdrop (z-index: 50) on purpose — a plain z-index:100
     here would make this sticky (non-modal) strip render on top of any modal
     opened while the editor is behind it (e.g. "+ Тег" in the sidebar while
     editing), poking through the dimmed overlay. 45 is still comfortably
     above ordinary page content. */
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
}

.kb-toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.kb-toolbar-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 4px;
  background: var(--border);
}

.kb-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  min-width: 28px;
  padding: 0 6px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}

.kb-toolbar-btn .icon {
  width: 15px;
  height: 15px;
}

.kb-toolbar-btn:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.kb-toolbar-btn.active {
  background: var(--accent-soft);
  color: var(--accent-link);
}

.kb-toolbar-btn-wide {
  width: auto;
  min-width: 132px;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 12.5px;
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--bg);
}

.kb-toolbar-caret {
  width: 10px !important;
  height: 10px !important;
  transform: rotate(90deg);
}

.kb-toolbar-dropdown {
  position: relative;
}

.kb-toolbar-dd-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  margin-top: 4px;
  min-width: 170px;
  padding: 4px;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: var(--shadow-card), rgba(28, 27, 26, 0.1) 0px 8px 24px -8px;
}

.kb-toolbar-dropdown.open .kb-toolbar-dd-menu {
  display: block;
}

.kb-toolbar-dd-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font-size: 12.5px;
  text-align: left;
  white-space: nowrap;
}

.kb-toolbar-dd-menu button:hover {
  background: var(--accent-soft);
}

.kb-toolbar-dd-menu .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.kb-toolbar-heading-1 {
  font-size: 16px;
  font-weight: 700;
}

.kb-toolbar-heading-2 {
  font-size: 14.5px;
  font-weight: 700;
}

.kb-toolbar-heading-3 {
  font-size: 13px;
  font-weight: 700;
}

.kb-toolbar-swatches {
  flex-wrap: wrap;
  gap: 6px;
  min-width: 140px;
  padding: 8px;
}

/* .kb-toolbar-swatches carries the same specificity as the base
   .kb-toolbar-dd-menu{display:none} rule and comes after it in the
   stylesheet, so a plain `display: flex` here would always win and the
   dropdown would never close. Only flip to flex once .open actually applies. */
.kb-toolbar-dropdown.open .kb-toolbar-dd-menu.kb-toolbar-swatches {
  display: flex;
}

.kb-toolbar-swatches button {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
}

.kb-toolbar-swatch-none {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: var(--text-muted);
}

.kb-toolbar-swatch-none .icon {
  width: 11px;
  height: 11px;
}

#quill-editor-container .ql-container.ql-snow {
  border: none;
  border-radius: 0 0 14px 14px;
  font-size: 13px;
}

#quill-editor-container .ql-editor {
  min-height: 320px;
  line-height: 1.6;
  padding: 20px 24px;
}

#quill-editor-container .ql-editor.ql-blank::before {
  color: var(--text-muted);
  font-style: normal;
  left: 24px;
}

/* Quill's snow theme ships light-mode colors; repaint for the dark theme. */
#quill-editor-container .ql-snow .ql-stroke {
  stroke: currentColor;
}

#quill-editor-container .ql-snow .ql-fill {
  fill: currentColor;
}

#quill-editor-container .ql-snow .ql-tooltip {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--text);
  box-shadow: none;
}

#quill-editor-container .ql-snow .ql-tooltip input[type="text"] {
  background: var(--bg-deep);
  border-color: var(--border);
  color: var(--text);
}

/* ---------- Callout blocks (врезки), inserted via the toolbar or slash menu ---------- */

.callout {
  padding: 10px 14px;
  border-radius: 10px;
  margin: 14px 0;
  font-size: 13px;
  line-height: 1.6;
}

.callout-info {
  background: var(--accent-soft);
  color: var(--text);
}

.callout-warning {
  background: var(--tile-peach-bg);
  color: var(--tile-peach-fg);
}

.callout-danger {
  background: rgba(220, 80, 70, 0.14);
  color: #b23a2f;
}

/* ---------- Tag editor (recent tags + search-to-add, used in the article editor) ---------- */

.tag-editor-field {
  min-width: 220px;
  flex: 1 1 220px;
}

/* Selected tags, "often used" suggestions, and the search box all live on one
   wrapping line — the wrapper divs collapse via display:contents so their
   chips join this flex row directly instead of stacking as separate blocks. */
.tag-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tag-editor-selected,
.tag-editor-recent {
  display: contents;
}

.tag-editor-empty {
  font-size: 11.5px;
  color: var(--text-muted);
}

.tag-remove {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  color: var(--text-muted);
  padding: 0;
  margin-left: 2px;
  line-height: 1;
}

.tag-remove .icon {
  width: 9px;
  height: 9px;
}

.tag-remove:hover {
  color: #d0342c;
}

.tag-chip-suggest {
  cursor: pointer;
  border: 1px dashed var(--border-strong);
  background: none;
  color: var(--text-muted);
  font: inherit;
}

.tag-chip-suggest:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.tag-editor-search {
  position: relative;
  flex: 0 0 auto;
}

.tag-editor-search input {
  width: 15ch;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
  font-size: 12px;
  background: var(--bg);
  color: var(--text);
}

.tag-editor-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 15;
  width: max(220px, 100%);
  margin-top: 4px;
  max-height: 180px;
  overflow-y: auto;
  padding: 4px;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: var(--shadow-card), rgba(28, 27, 26, 0.1) 0px 8px 24px -8px;
}

.tag-editor-results.open {
  display: block;
}

.tag-editor-result {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 7px;
  background: none;
  font-size: 12px;
  text-align: left;
  color: var(--text);
}

.tag-editor-result:hover {
  background: var(--accent-soft);
}

/* ---------- Slash ("/") command menu ---------- */

.slash-menu {
  position: fixed;
  z-index: 200;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-border), rgba(0, 0, 0, 0.08) 0px 8px 24px;
  padding: 6px;
}

.slash-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}

.slash-menu-item .icon {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.slash-menu-item.active,
.slash-menu-item:hover {
  background: var(--accent-soft);
}

.slash-menu-empty {
  padding: 10px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.editor .field-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.editor label.field-label {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}

.field-hint {
  font-size: 11px;
  color: #d0342c;
  margin-top: 4px;
}

.editor select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal {
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card), rgba(0, 0, 0, 0.06) 0px 16px 32px -16px;
  padding: 20px;
  width: 360px;
}

.modal h2 {
  margin: 0 0 14px;
  font-size: 14px;
}

.modal .field {
  margin-bottom: 14px;
}

.modal label {
  font-size: 12px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

.modal input[type="text"] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: none;
}

.modal input[type="color"] {
  width: 48px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 2px;
}

.modal select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: var(--bg);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.cabinet-modal-actions {
  justify-content: space-between;
}

.icon-preview-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--text);
  margin-bottom: 10px;
}

.icon-preview-box .icon {
  width: 20px;
  height: 20px;
}

.icon-preview-placeholder {
  color: var(--text-muted);
}

.icon-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.icon-palette-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-muted);
  padding: 0;
}

.icon-palette-btn .icon {
  width: 16px;
  height: 16px;
}

.icon-palette-btn:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.icon-palette-btn.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.tag-manage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.tag-manage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--bg-soft);
}

.tag-manage-row.tag-tree-add-row,
.tag-manage-row.tag-manage-add-row {
  background: transparent;
  padding: 0;
}

.tag-manage-row input[type="text"] {
  flex: 1;
}

.tag-tree-row .caret,
.tag-tree-add-row .caret {
  width: 12px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
  transition: transform 0.15s;
}

.tag-tree-row .caret.collapsed {
  transform: rotate(-90deg);
}

.tag-tree-row .caret.spacer,
.tag-tree-add-row .caret.spacer {
  visibility: hidden;
  cursor: default;
}

.tag-tree-add-row {
  margin-top: 4px;
}

/* ---------- Tasks module ---------- */

.tasks-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

.tasks-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 18px;
  align-items: start;
  min-height: 0;
  flex: 1;
}

.tasks-grid.kanban-mode {
  grid-template-columns: 1fr;
}

.tasks-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tasks-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 980px) {
  .tasks-grid { grid-template-columns: 1fr; }
}

.tasks-filter-tabs {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.tasks-filter-tab {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.tasks-filter-tab:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.tasks-filter-tab.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

/* Task list sidebar item */
.task-list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  user-select: none;
}

.task-list-item:hover {
  background: var(--accent-soft);
}

.task-list-item.active {
  background: var(--accent-soft);
  font-weight: 600;
}

.task-list-item .task-list-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--text-muted);
}

.task-list-item .task-list-icon .icon {
  width: 15px;
  height: 15px;
}

.task-list-item .task-list-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-list-item .task-list-count {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--border);
  border-radius: 10px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

.task-list-item .task-list-delete-btn {
  display: none;
  align-items: center;
  border: none;
  background: none;
  color: var(--text-muted);
  padding: 0 2px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.task-list-item .task-list-delete-btn .icon {
  width: 12px;
  height: 12px;
}

.task-list-item:hover .task-list-delete-btn {
  display: flex;
}

.task-list-item .task-list-delete-btn:hover {
  color: #d0342c;
}

/* Tasks content area */
.tasks-content-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.tasks-content-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.tasks-add-btn-main {
  margin-left: auto;
}

/* Progress bar */
.tasks-progress-bar-wrap {
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  margin-bottom: 20px;
  overflow: hidden;
}

.tasks-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a90d9, #2e7d32);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.tasks-progress-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Task cards */
.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border-left: 4px solid transparent;
  box-shadow: var(--shadow-card);
  background: var(--bg);
  transition: box-shadow 0.15s, transform 0.1s, border-color 0.15s;
  cursor: default;
}

.task-card.priority-high { border-left-color: #c25a4e; }
.task-card.priority-normal { border-left-color: #d8b45a; }
.task-card.priority-low { border-left-color: #5b7fb0; }

.task-card:hover {
  box-shadow: var(--shadow-border), rgba(0, 0, 0, 0.06) 0px 4px 8px, rgba(0, 0, 0, 0.04) 0px 8px 8px -8px;
  transform: translateY(-1px);
}

.task-card.done {
  opacity: 0.55;
}

.task-card.done .task-card-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.task-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: all 0.15s;
  position: relative;
}

.task-check:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.task-check.checked {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.task-check.checked::after {
  content: '✓';
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
}

.task-card-body {
  flex: 1;
  min-width: 0;
}

.task-card-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 3px;
  line-height: 1.4;
  word-break: break-word;
}

.task-card-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  white-space: pre-line;
  line-height: 1.4;
}

.task-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.task-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
}

.priority-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

.task-priority-badge.priority-low {
  background: #e8f0fd;
  color: #2a5fc2;
}

.task-priority-badge.priority-normal {
  background: #fef9e7;
  color: #a07a00;
}

.task-priority-badge.priority-high {
  background: rgba(220, 80, 70, 0.14);
  color: #d0342c;
}

.task-type-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
}

.field-checkbox-inline {
  display: flex;
  align-items: flex-end;
  padding-bottom: 6px;
}

.field-checkbox-inline label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}

.task-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
}

.task-status-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

.task-status-badge.status-backlog {
  background: var(--accent-soft);
  color: var(--text-muted);
}

.task-status-badge.status-in_progress {
  background: #e8f0fd;
  color: #2a5fc2;
}

.task-status-badge.status-blocked {
  background: rgba(220, 80, 70, 0.14);
  color: #d0342c;
}

.task-status-badge.status-overdue {
  background: rgba(234, 88, 12, 0.14);
  color: #c2410c;
}

.task-due-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.task-due-badge .icon {
  width: 11px;
  height: 11px;
}

.task-due-badge.overdue {
  color: #d0342c;
  border-color: rgba(220, 80, 70, 0.4);
  background: rgba(220, 80, 70, 0.14);
}

/* Deadline urgency strip */
.task-deadline-bar {
  height: 3px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
  margin: 6px 0;
  max-width: 220px;
}

.task-deadline-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.task-deadline-bar.level-plenty .task-deadline-bar-fill { background: #4caf6d; }
.task-deadline-bar.level-later .task-deadline-bar-fill { background: #8bc34a; }
.task-deadline-bar.level-upcoming .task-deadline-bar-fill { background: #e0a940; }
.task-deadline-bar.level-soon .task-deadline-bar-fill { background: #e08a3c; }
.task-deadline-bar.level-urgent .task-deadline-bar-fill,
.task-deadline-bar.level-overdue .task-deadline-bar-fill { background: #ff5b4f; }

/* Subtasks: indented under their parent in list view */
.task-card.subtask {
  margin-left: 32px;
}

/* Checklist progress */
.task-checklist-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.task-checklist-progress-bar {
  flex: 1;
  max-width: 220px;
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.task-checklist-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.task-checklist-progress-label {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Assignee chips */
.task-assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--bg-soft);
  box-shadow: var(--shadow-border);
}

.task-assignee-chip .icon {
  width: 10px;
  height: 10px;
}

.task-assignee-chip.editable {
  font-size: 12px;
  padding: 4px 10px;
}

.task-assignee-chip button.remove {
  border: none;
  background: none;
  padding: 0 0 0 2px;
  color: var(--text-muted);
  display: inline-flex;
  cursor: pointer;
}

.task-responsibles-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.task-assignee-add-select {
  padding: 4px 8px;
  border: 1px dashed var(--border-strong);
  border-radius: 9999px;
  background: transparent;
  font-size: 12px;
  color: var(--text-muted);
  outline: none;
}

/* Checklist editor (task modal) */
.task-checklist-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.task-checklist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.task-checklist-row input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.task-checklist-row input[type="text"] {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  font-size: 13px;
}

/* View toggle (list / kanban) */
.tasks-view-toggle {
  display: flex;
  gap: 4px;
  border-radius: 8px;
  padding: 2px;
  background: var(--bg-soft);
  box-shadow: var(--shadow-border);
}

.tasks-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.tasks-view-btn .icon {
  width: 14px;
  height: 14px;
}

.tasks-view-btn.active {
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-border);
}

/* Kanban board */
.tasks-list.kanban-mode {
  overflow-x: auto;
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 12px;
  align-items: start;
}

.kanban-column {
  background: var(--bg-soft);
  border-radius: 10px;
  box-shadow: var(--shadow-border);
  padding: 10px;
  min-height: 200px;
}

.kanban-column.drag-over {
  box-shadow: 0 0 0 2px var(--accent);
}

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding: 0 2px;
}

.kanban-column-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
}

.kanban-card {
  background: var(--bg);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: 10px 12px;
  cursor: grab;
  transition: box-shadow 0.15s;
}

.kanban-card:hover {
  box-shadow: var(--shadow-border), rgba(0, 0, 0, 0.06) 0px 4px 8px;
}

.kanban-card.done .task-card-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.kanban-card .task-card-meta {
  margin-top: 6px;
}

.task-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.task-card:hover .task-card-actions {
  opacity: 1;
}

.task-action-btn {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  color: var(--text-muted);
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1;
}

.task-action-btn .icon {
  width: 14px;
  height: 14px;
}

.task-action-btn:hover {
  background: var(--accent-soft);
  color: var(--text);
}

.task-action-btn.danger:hover {
  background: rgba(220, 80, 70, 0.14);
  color: #d0342c;
}

/* Empty tasks state */
.tasks-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.tasks-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.tasks-empty-icon .icon {
  width: 40px;
  height: 40px;
  color: var(--text-muted);
}

.tasks-empty-text {
  font-size: 13px;
}

/* Quick add bar */
.task-quick-add {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  cursor: text;
  margin-top: 8px;
  transition: all 0.15s;
}

.task-quick-add:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.task-quick-add-icon {
  display: flex;
  color: var(--text-muted);
}

.task-quick-add-icon .icon {
  width: 16px;
  height: 16px;
}

.task-quick-add input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
}

.task-quick-add input::placeholder {
  color: var(--text-muted);
}

/* Task modal */
.task-modal-wide {
  width: 480px !important;
  max-width: calc(100vw - 40px);
}

.task-modal-wide textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
}

.task-modal-wide .field-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.task-modal-wide .field-row > div {
  flex: 1;
  min-width: 100px;
}

.task-modal-wide select,
.task-modal-wide input[type="date"] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  background: var(--bg);
  font-family: inherit;
  font-size: 13px;
}

/* All tasks view */
.tasks-all-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  padding: 16px 0 8px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}

.tasks-all-section-title:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* ---------- Home (Главная) ---------- */

.home-view {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}

.home-greeting {
  margin-bottom: 20px;
}

.home-greeting h1 {
  font-size: 22px;
  margin: 0 0 4px;
}

.home-subtitle {
  color: var(--text-muted);
  margin: 0;
  font-size: 13px;
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 18px;
  align-items: start;
}

.home-main, .home-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.home-panel {
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}

.home-panel-head {
  margin-bottom: 14px;
}

.home-panel-head h2 {
  font-size: 14px;
  font-weight: 650;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Hero module cards */

.hero-row {
  display: grid;
  gap: 12px;
}

.hero-card {
  border-radius: var(--radius-lg);
  padding: 16px 16px 44px;
  color: #f4f2ec;
  position: relative;
  overflow: hidden;
  min-height: 100px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.hero-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.hero-card::after {
  content: '';
  position: absolute;
  inset: auto -30% -60% auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.hero-card.c-kb { background: var(--hero-kb); }
.hero-card.c-okr { background: var(--hero-okr); }
.hero-card.c-tasks { background: var(--hero-tasks); }

.hero-label {
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0.72;
  margin-bottom: 8px;
}

.hero-value {
  font-size: 19px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  position: relative;
}

.hero-sub {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-size: 11px;
  color: rgba(244, 242, 236, 0.72);
}

/* Activity feed */

.home-activity { display: flex; flex-direction: column; }

.home-activity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s;
}

.home-activity-row:hover { background: var(--bg-soft); }
.home-activity-row:last-child { border-bottom: none; }

.home-activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home-activity-icon .icon { width: 15px; height: 15px; }
.home-activity-icon.icon-kb { background: var(--accent-soft); color: var(--accent-link); }
.home-activity-icon.icon-tasks { background: var(--tile-mint-bg); color: var(--tile-mint-fg); }

.home-activity-main { min-width: 0; flex: 1; }

.home-activity-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-activity-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

.home-activity-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.home-activity-time {
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.home-empty-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 8px 4px;
}

/* Quick action tiles */

.quick-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.quick-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.quick-tile:hover {
  border-color: transparent;
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.quick-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-link);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-icon .icon { width: 15px; height: 15px; }
.quick-title { font-size: 12.5px; font-weight: 650; }
.quick-sub { font-size: 11px; color: var(--text-muted); margin-top: -4px; }

/* Donut */

.donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.donut {
  --pct: 0;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: conic-gradient(var(--accent-link) 0deg calc(var(--pct) * 3.6deg), var(--accent-soft) 0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.donut::before {
  content: '';
  position: absolute;
  inset: 16px;
  background: var(--bg);
  border-radius: 50%;
}

.donut-center { position: relative; text-align: center; }

.donut-center .n {
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: block;
  letter-spacing: -0.02em;
}

.donut-center .l {
  font-size: 10.5px;
  color: var(--text-muted);
}

.donut-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-muted);
}

.donut-legend span { display: flex; align-items: center; gap: 5px; }
.donut-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-link); }
.donut-legend i.b { background: var(--accent-soft); border: 1px solid var(--border); }

/* Pastel stat tiles */

.home-stat-tiles { display: flex; flex-direction: column; gap: 8px; }

.stat-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  padding: 11px 14px;
}

.stat-tile.lavender { background: var(--tile-lavender-bg); color: var(--tile-lavender-fg); }
.stat-tile.peach { background: var(--tile-peach-bg); color: var(--tile-peach-fg); }
.stat-tile.mint { background: var(--tile-mint-bg); color: var(--tile-mint-fg); }

.stat-tile-label { font-size: 12px; font-weight: 650; }
.stat-tile-value { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Promo card */

.home-promo {
  border-radius: var(--radius);
  background: linear-gradient(160deg, #f2e6d3, #ecd9bd);
  padding: 18px;
  position: relative;
  overflow: hidden;
  min-height: 108px;
}

.home-promo::after {
  content: '';
  position: absolute;
  right: -18px;
  bottom: -26px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.home-promo-title {
  font-weight: 650;
  font-size: 13px;
  color: #4a3418;
  max-width: 85%;
  text-wrap: balance;
  margin: 0 0 6px;
  position: relative;
}

.home-promo-sub {
  font-size: 11.5px;
  color: #7a5c34;
  line-height: 1.45;
  position: relative;
}

@media (max-width: 860px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* ---------- Gantt (Гант) ---------- */

.gantt-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.gantt-scroll {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex: 1;
}

.gantt-chart {
  display: inline-block;
  min-width: 100%;
  position: relative;
}

.gantt-row {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.gantt-row:last-child {
  border-bottom: none;
}

.gantt-row.done .gantt-col-task-title {
  text-decoration: line-through;
  color: var(--text-muted);
}

.gantt-row-label {
  flex: 0 0 520px;
  position: sticky;
  left: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  z-index: 2;
}

.gantt-header-row .gantt-row-label,
.gantt-month-row .gantt-row-label {
  background: var(--bg-soft);
}

/* Leaf task row: 4-column mini table matching the header. */
.gantt-task-label {
  display: grid;
  grid-template-columns: 200px 110px 120px 90px;
  align-items: center;
}

.gantt-col {
  padding: 8px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-right: 1px solid var(--border);
  height: 100%;
  display: flex;
  align-items: center;
}

.gantt-col:last-child {
  border-right: none;
}

.gantt-col-task {
  font-weight: 500;
  gap: 6px;
}

.gantt-col-task-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-header-row .gantt-col {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.gantt-row.subtask .gantt-col-task {
  padding-left: 26px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* Fixed-width disclosure gutter, shared by group rows (real caret) and leaf
   rows (invisible spacer), so task-title first letters always line up. */
.gantt-caret {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: transform 0.12s;
}

.gantt-caret .icon {
  width: 12px;
  height: 12px;
}

.gantt-caret.expanded {
  transform: rotate(90deg);
}

.gantt-caret.spacer {
  visibility: hidden;
  cursor: default;
}

/* Shared assignee-avatar chip, used by the Gantt table and task cards. */
.assignee-empty {
  color: var(--text-muted);
  font-size: 11px;
}

.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  margin-left: -6px;
  flex-shrink: 0;
}

.avatar-chip:first-child {
  margin-left: 0;
}

.avatar-more {
  margin-left: 2px;
  font-size: 10px;
  color: var(--text-muted);
}

/* Group row: only the task column is meaningful, plus a summary bar. */
.gantt-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
}

.gantt-group-title {
  font-weight: 700;
}

.gantt-group-range {
  font-size: 11px;
  color: var(--text-muted);
}

.gantt-group-bar {
  height: 8px;
  border-radius: 6px;
  background: var(--accent-link);
  opacity: 0.4;
  cursor: pointer;
}

.gantt-row-track {
  display: grid;
  position: relative;
  align-items: center;
}

.gantt-header-track,
.gantt-month-track {
  background: var(--bg-soft);
}

.gantt-month-cell {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  padding: 6px 0;
  border-right: 1px solid var(--border);
  text-transform: capitalize;
}

.gantt-day-cell {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  padding: 8px 0;
  border-right: 1px solid var(--border);
}

.gantt-day-cell.today {
  background: var(--accent-soft);
  color: var(--accent-link);
  font-weight: 600;
}

.gantt-bar {
  height: 8px;
  border-radius: 6px;
  cursor: pointer;
}

/* One square per day; a status change only recolors the days from that
   point on, so a task's run can show several colors across its lifetime. */
.gantt-day-square {
  height: 22px;
  margin: 2px 1px;
  border-radius: 8px;
  cursor: pointer;
  background: #efece6;
  transition: opacity 0.1s, transform 0.1s;
}

.gantt-day-square:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

.gantt-day-square.status-in_progress {
  background: linear-gradient(135deg, #cdd9ef, #bccdea);
}

.gantt-day-square.status-blocked {
  background: linear-gradient(135deg, #f3cac4, #eeb3ac);
}

.gantt-day-square.status-done {
  background: linear-gradient(135deg, #cfe6d6, #bfe0c8);
}

.gantt-day-square.status-overdue {
  background: linear-gradient(135deg, #f3d9b9, #eec89e);
}

.gantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #c25a4e;
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}

.gantt-today-label {
  position: sticky;
  top: 0;
  display: inline-block;
  transform: translateX(-50%);
  background: #c25a4e;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}

.task-status-badge.status-done {
  background: rgba(62, 207, 142, 0.16);
  color: rgb(20, 130, 85);
}

.priority-dot.priority-low {
  color: #2a5fc2;
}

.priority-dot.priority-normal {
  color: #a07a00;
}

.priority-dot.priority-high {
  color: #d0342c;
}