/* ============================================================
   Labbet — developer collaboration palette
   Muted teal/blue, terminal-inspired. Scoped to .labbet-view.
   ============================================================ */

.labbet-view {
  --lab-accent: #5ba4c9;
  --lab-accent-dim: #5ba4c933;
  --lab-accent-glow: #5ba4c955;
  --lab-secondary: #7ec8a8;
  --lab-terminal: #3d5a6e;
  --lab-border: #5ba4c920;
}

/* Override accent on interactive elements */
.labbet-view .btn--primary {
  background: var(--lab-accent);
  border-color: var(--lab-accent);
}
.labbet-view .btn--primary:hover {
  background: #4a8fb3;
  border-color: #4a8fb3;
}
.labbet-view .btn:hover {
  border-color: var(--lab-accent-dim);
}

/* Sections */
.lab-section {
  margin-bottom: 1.8rem;
}

.lab-section-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--lab-border);
}

.lab-section-title {
  font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lab-accent);
}

.lab-section-count {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.68rem;
  color: var(--dim);
  background: var(--bg);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

.lab-section-action {
  margin-left: auto;
}

/* Top bar: filter toggle + title */
.lab-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.lab-title {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--lab-accent);
  letter-spacing: 0.02em;
}

.lab-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.72rem;
  color: var(--dim);
  cursor: pointer;
  margin-left: auto;
  user-select: none;
}

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

/* Card overrides for labbet context */
.labbet-view .pipe-card:hover,
.labbet-view .archive-card:hover,
.labbet-view .note-card:hover,
.labbet-view .todo-card:hover {
  border-color: var(--lab-accent-dim);
}

.labbet-view .note-card.commented {
  border-left-color: var(--lab-accent);
}

/* Compact pipeline cards (list, not kanban) */
.lab-pipe-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  animation: fadeUp 0.2s ease both;
}

.lab-pipe-card:hover {
  background: var(--card-hover);
  border-color: var(--lab-accent-dim);
}

.lab-pipe-card--high {
  border-left: 3px solid var(--danger);
}

.lab-pipe-title {
  font-size: 0.85rem;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-stage-pill {
  display: inline-block;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.12rem 0.5rem;
  border-radius: 10px;
  border: 1px solid;
  white-space: nowrap;
}

.lab-pipe-meta {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  font-size: 0.68rem;
  color: var(--dim);
  flex-shrink: 0;
}

/* Compact note cards */
.lab-note-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  animation: fadeUp 0.2s ease both;
}

.lab-note-card:hover {
  background: var(--card-hover);
  border-color: var(--lab-accent-dim);
}

.lab-note-card.type-question { border-left: 3px solid #6b9dff; }
.lab-note-card.type-request { border-left: 3px solid var(--warning); }
.lab-note-card.type-bug { border-left: 3px solid var(--danger); }

.lab-note-body {
  font-size: 0.85rem;
  line-height: 1.4;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lab-note-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: var(--dim);
  flex-shrink: 0;
  white-space: nowrap;
}

.lab-note-from {
  font-weight: 600;
  color: var(--text);
}

/* Compact todo cards */
.lab-todo-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  margin-bottom: 0.3rem;
  animation: fadeUp 0.2s ease both;
}

.lab-todo-card--high { border-left: 3px solid var(--danger); }

.lab-todo-card input[type="checkbox"] {
  accent-color: var(--lab-accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.lab-todo-title {
  font-size: 0.85rem;
  flex: 1;
}

.lab-todo-meta {
  font-size: 0.68rem;
  color: var(--dim);
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

/* Compact archive cards */
.lab-archive-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  animation: fadeUp 0.2s ease both;
}

.lab-archive-card:hover {
  background: var(--card-hover);
  border-color: var(--lab-accent-dim);
}

.lab-archive-title {
  font-size: 0.85rem;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-archive-meta {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  font-size: 0.68rem;
  color: var(--dim);
  flex-shrink: 0;
}

/* Quick create */
.lab-create-bar {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.4rem;
}

.lab-create-bar .quick-input {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.82rem;
}

.lab-create-bar .quick-input:focus {
  border-color: var(--lab-accent);
}

.lab-create-bar .quick-select {
  font-size: 0.78rem;
}

/* Empty state */
.lab-empty {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.78rem;
  color: var(--dim);
  padding: 0.6rem 0;
  font-style: italic;
}

/* Active nav link override for labbet */
.nav-link[data-route="labbet"].active {
  color: #5ba4c9;
  background: #5ba4c922;
}

/* Grid layout for sections */
.lab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

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

/* Full-width sections */
.lab-full {
  grid-column: 1 / -1;
}

/* ============================================================
   Labbet v2: Tabs, Documents, Comments, Notifications
   ============================================================ */

/* Tabs */
.lab-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin: 0.8rem 0 0;
}

.lab-tab {
  padding: 0.5rem 1rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}

.lab-tab:hover { color: var(--text); }
.lab-tab.active { color: var(--lab-accent); border-bottom-color: var(--lab-accent); }

.lab-tab-badge {
  display: inline-block;
  background: var(--lab-accent);
  color: #fff;
  font-size: 0.6rem;
  padding: 0.05rem 0.35rem;
  border-radius: 8px;
  margin-left: 0.2rem;
  font-weight: 700;
  vertical-align: middle;
}

/* Count badges on pipeline cards */
.lab-count-badge {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.08rem 0.35rem;
  border-radius: 3px;
}

.lab-count-badge--doc {
  background: var(--lab-accent-dim);
  color: var(--lab-accent);
}

.lab-count-badge--comment {
  background: var(--lab-secondary);
  color: #1a1a2e;
}

/* Document cards */
.lab-doc-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  animation: fadeUp 0.2s ease both;
}

.lab-doc-card:hover {
  background: var(--card-hover);
  border-color: var(--lab-accent-dim);
}

.lab-doc-title {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--lab-accent);
}

.lab-doc-meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.68rem;
  color: var(--dim);
}

.lab-doc-preview {
  font-size: 0.78rem;
  color: var(--dim);
  line-height: 1.3;
  margin-top: 0.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Document detail */
.lab-doc-view-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.lab-doc-view-header h3 {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 1rem;
  font-weight: 700;
  color: var(--lab-accent);
  margin: 0;
}

.lab-doc-view-meta {
  font-size: 0.72rem;
  color: var(--dim);
}

/* Document edit */
.lab-doc-edit {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lab-doc-edit .archive-textarea {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.85rem;
  min-height: 250px;
}

/* Document list within tab */
.lab-docs {
  padding-top: 0.8rem;
}

.lab-docs-add {
  margin-top: 0.6rem;
}

/* Comments */
.lab-comment {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.4rem;
  animation: fadeUp 0.2s ease both;
}

.lab-comment-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.lab-comment-author {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.lab-comment-time {
  font-size: 0.68rem;
  color: var(--dim);
}

.lab-comment-delete {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.lab-comment:hover .lab-comment-delete {
  opacity: 0.5;
}

.lab-comment-delete:hover {
  opacity: 1 !important;
  color: var(--danger);
}

.lab-comment-body {
  font-size: 0.85rem;
  line-height: 1.5;
}

.lab-comment-body p {
  margin: 0 0 0.3rem;
}

.lab-comment-body p:last-child {
  margin-bottom: 0;
}

.lab-comment-form textarea {
  font-family: inherit;
}

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

/* Discussion tab */
.lab-discussion {
  padding-top: 0.8rem;
}

/* ============================================================
   Inline editing
   ============================================================ */

.lab-editable {
  cursor: default;
  border-radius: 4px;
  transition: background 0.15s;
}

.lab-editable:hover {
  background: var(--lab-accent-dim);
}

.lab-inline-edit {
  width: 100%;
  font-family: inherit;
}

h2 .lab-inline-edit {
  font-size: 1.2rem;
  font-weight: 700;
}

.lab-edit-hint {
  font-size: 0.62rem;
  color: var(--dim);
  margin-top: 0.2rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
}