/* ── Board ────────────────────────────────────────────── */
.crm-board{display:flex;gap:14px;overflow-x:auto;padding:4px 0 16px;min-height:400px;align-items:flex-start;}

/* ── Column ──────────────────────────────────────────── */
.crm-column{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);min-width:280px;max-width:320px;flex-shrink:0;display:flex;flex-direction:column;}
.crm-column-header{padding:10px 12px;font-size:12px;font-weight:600;color:var(--text);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.crm-column-counter{font-size:10px;color:var(--text3);font-weight:400;}
.crm-column-body{padding:8px;min-height:60px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
.crm-column.drag-over{background:var(--bg3);border-color:var(--accent);}

/* ── Card ────────────────────────────────────────────── */
.crm-card{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);padding:10px 12px;cursor:grab;transition:all 0.1s;}
.crm-card:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-glow);}
.crm-card.dragging{opacity:0.4;box-shadow:0 8px 24px rgba(0,0,0,0.3);}
.crm-card-title{font-size:12px;font-weight:500;color:var(--text);margin-bottom:4px;word-break:break-word;}
.crm-card-meta{font-size:10px;color:var(--text3);display:flex;gap:8px;flex-wrap:wrap;}
.crm-card-meta span{display:inline-flex;align-items:center;gap:3px;}

/* ── Toolbar ─────────────────────────────────────────── */
.crm-toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center;}
.crm-toolbar select{background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:6px 10px;border-radius:var(--radius);font-size:11px;}

/* ── List view ───────────────────────────────────────── */
.crm-list-view{display:none;}
.crm-list-view.active{display:block;}

/* ── Modals ──────────────────────────────────────────── */
.crm-modal{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;}
.crm-modal-content{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);width:90%;max-width:560px;max-height:80vh;overflow-y:auto;padding:20px;}
.crm-modal-content.crm-modal-wide{max-width:720px;}
.crm-modal-title{font-size:14px;font-weight:600;margin-bottom:14px;}
.crm-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;}

/* ── Form inside modal ───────────────────────────────── */
.crm-field{margin-bottom:12px;}
.crm-field label{display:block;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px;}
.crm-field input,.crm-field textarea,.crm-field select{width:100%;padding:8px 10px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-size:12px;}
.crm-field textarea{resize:vertical;min-height:60px;}
.crm-field input[type="checkbox"]{width:auto;margin-right:6px;}

/* ── Participants in card detail ─────────────────────── */
.crm-participant{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:var(--bg4);border-radius:4px;font-size:10px;color:var(--text2);}
.crm-participant-list{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0;}

/* ── File list ───────────────────────────────────────── */
.crm-file-list{display:flex;flex-direction:column;gap:4px;margin:8px 0;}
.crm-file-item{display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--bg3);border-radius:var(--radius);font-size:11px;}
.crm-file-item a{color:var(--accent);text-decoration:none;}
.crm-file-item a:hover{text-decoration:underline;}
.crm-file-size{color:var(--text3);font-size:10px;margin-left:auto;}

/* ── Field values in card detail ─────────────────────── */
.crm-field-value{margin-bottom:8px;}
.crm-field-value .crm-field-label{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;}
.crm-field-value .crm-field-text{font-size:12px;color:var(--text);margin-top:2px;word-break:break-word;}

/* ── Access modal ────────────────────────────────────── */
.crm-access-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;}
.crm-access-row input[type="checkbox"]{width:16px;height:16px;}

/* ── Columns / Fields managment ──────────────────────── */
.crm-mgmt-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg3);border-radius:var(--radius);margin-bottom:6px;}
.crm-mgmt-item .crm-mgmt-name{flex:1;font-size:12px;}
.crm-mgmt-item button{background:none;border:none;color:var(--text3);cursor:pointer;font-size:13px;}
.crm-mgmt-item button:hover{color:var(--red);}

/* ── Drag handle ─────────────────────────────────────── */
.crm-drag-handle{color:var(--text3);font-size:11px;cursor:grab;user-select:none;}

/* ── Hidden helpers ──────────────────────────────────── */
.crm-hide{display:none ;}

/* ── Buttons matching topbar style ───────────────────── */
.crm-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 14px;border-radius:var(--radius);font-size:11px;font-weight:500;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;transition:all 0.12s;height:32px;box-sizing:border-box;white-space:nowrap;}
.crm-toolbar button:hover{border-color:var(--accent);color:var(--accent);}
.crm-toolbar .btn-accent{background:var(--accent);color:#fff;border-color:var(--accent);}
.crm-toolbar .btn-accent:hover{background:var(--accent2);color:#fff;}

/* ── Comments ──────────────────────────────────────────── */
.crm-comments-block {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.crm-comment-item {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.crm-comment-item:last-child {
  border-bottom: none;
}

.crm-comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}

.crm-comment-body {
  flex: 1;
  min-width: 0;
}

.crm-comment-meta {
  font-size: 10px;
  color: var(--text3);
  margin-bottom: 2px;
}

.crm-comment-text {
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
}

.crm-comment-delete {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  align-self: flex-start;
}

.crm-comment-delete:hover {
  color: var(--red);
}

.crm-comment-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: flex-end;
}

.crm-comment-form textarea {
  flex: 1;
  padding: 8px 10px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12px;
  resize: none;
  font-family: var(--font);
  min-height: 32px;
}

.crm-comment-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.crm-comment-badge {
  font-size: 11px;
  color: var(--text3);
  margin-left: auto;
}

.crm-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 4px;
}

.crm-card-unread {
  border-left: 2px solid var(--accent) !important;
}