/*
  Shared base styles — Task Tracker
  Reset + component-level styles reused across every page (gantt, artist, lead,
  users, founders). Requires tokens.css to be loaded first. Page-specific
  styles.css files should only contain rules unique to that page.
*/

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The [hidden] attribute must always win over component display rules
   (e.g. .user-info, .manager-actions, .button-link all set their own
   `display`, which otherwise overrides the browser's default
   `[hidden] { display: none }` UA rule at equal specificity). */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

table {
  border-collapse: collapse;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ---------- Layout shell ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
}

.topbar h1 {
  margin: 0;
  font-size: var(--text-xl);
}

.topbar p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Groups a "Вернуться" link with the page title so the topbar's
   space-between layout still treats title+back-link as one unit (task [77]) */
.topbar-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.user-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

main {
  padding: var(--space-6);
}

/* ---------- Cards / panels ---------- */
.panel {
  max-width: 1680px;
  margin: 0 auto;
}

#login-view.panel,
#role-notice.panel {
  max-width: 360px;
  margin: var(--space-12) auto 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8) var(--space-6);
}

#login-view h2 {
  margin: 0 0 var(--space-5);
  font-size: var(--text-xl);
}

#role-notice p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.task-form-panel,
.task-list-panel,
.task-detail-panel,
#gantt-target {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.task-form-panel {
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}

.task-form-panel h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
}

/* ---------- Forms ---------- */
#login-form,
#task-form,
#user-form,
.comment-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#login-form {
  max-width: 100%;
}

#task-form,
#user-form {
  max-width: 420px;
}

.comment-form {
  max-width: 480px;
}

#login-form label,
#task-form label,
#user-form label,
#project-form label,
#client-create-form label,
.toolbar label,
.comment-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

input,
select,
textarea {
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

textarea {
  resize: vertical;
  font-family: inherit;
}

.hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: var(--weight-regular);
}

/* ---------- Buttons ---------- */
button {
  cursor: pointer;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: 8px 14px;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

button:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

button:disabled:hover {
  background: var(--bg-surface);
  border-color: var(--border-default);
}

/* Primary action: submit buttons and any *-save button */
#login-form button[type='submit'],
button[type='submit'],
button[id$='-save'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

#login-form button[type='submit']:hover,
button[type='submit']:hover,
button[id$='-save']:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Destructive action: any *-delete button */
button[id$='-delete'] {
  background: var(--bg-surface);
  border-color: var(--danger-500);
  color: var(--danger-500);
}

button[id$='-delete']:hover {
  background: var(--danger-50);
  border-color: var(--danger-600);
  color: var(--danger-600);
}

/* Quiet/ghost actions */
button[id$='-cancel'],
button[id$='-back'],
#logout-btn {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

button[id$='-cancel']:hover,
button[id$='-back']:hover,
#logout-btn:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.button-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.button-link:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
  text-decoration: none;
}

/* "Вернуться" navigation button on nested tracker screens (task [77]) */
.back-btn {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-3);
}

/* ---------- Status / errors ---------- */
.status {
  min-height: 20px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.status.error,
.error {
  color: var(--danger-500);
}

/* ---------- Toolbar ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* ---------- View switcher tabs ---------- */
.view-switcher {
  display: flex;
  gap: var(--space-1);
}

.view-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: 6px 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.view-tab:hover {
  background: var(--bg-surface-hover);
}

.view-tab.is-active {
  background: var(--accent-subtle);
  border-color: var(--accent-200);
  color: var(--accent-700);
}

/* ---------- Task list / table ---------- */
.task-list-section {
  max-width: 1680px;
  margin: 0 auto var(--space-6);
}

.task-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.task-list-header h2 {
  font-size: var(--text-lg);
  margin: 0;
}

.manager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.task-table {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  overflow: hidden;
}

.task-table th,
.task-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
}

.task-table tbody tr:last-child td {
  border-bottom: none;
}

.task-table tbody tr {
  transition: background var(--transition-fast);
}

.task-table tbody tr:hover {
  background: var(--bg-surface-hover);
}

.task-table th {
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}

.task-table button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

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

.task-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}

/* ---------- Gantt container ---------- */
#gantt-target {
  overflow-x: auto;
  padding: var(--space-2);
}

/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 24, 28, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-4);
}

.modal-overlay[hidden] {
  display: none;
}

.modal-dialog {
  background: var(--bg-surface);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-modal);
  padding: var(--space-6);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.modal-header h2 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.modal-close:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

/* Task [104]: lead's inline attachment preview modal (image/PDF) — reuses
   .modal-overlay/.modal-dialog/.modal-close above, adds only the
   media-sizing + download-row rules specific to a preview. */
.attachment-preview-modal img#attachment-preview-image {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
}

.attachment-preview-modal iframe#attachment-preview-frame {
  display: block;
  width: 100%;
  height: 70vh;
  border: none;
}

.attachment-preview-actions {
  margin-top: var(--space-3);
  display: flex;
  justify-content: flex-end;
}

/* ---------- Artist / Lead: task list + detail split view ---------- */
/* Task [98]: was capped at 1100px, ~340px narrower than every other page
   section's 1440px max-width (.panel, .task-list-section, .board-section's
   ancestor, .overview-section, .filters-panel). That mismatch produced large
   unused side gutters on Artist/Lead pages above ~1100px viewport width and
   squeezed the task-list/detail split and the Lead Kanban board (nested
   directly inside #app-view) into a needlessly narrow working area. Aligning
   to the same 1440px cap used everywhere else removes the gutters and gives
   both the split view and the board the same available width Manager's
   .panel-based pages already get. */
.app-view {
  max-width: 1680px;
  margin: 0 auto;
}

.artist-layout {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.task-list-panel {
  flex: 0 0 260px;
  padding: var(--space-3);
}

.task-list-panel h2 {
  font-size: var(--text-md);
  margin: 0 0 var(--space-2);
}

.my-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.my-task-list-item button {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
}

.my-task-list-item:nth-child(even) button {
  background: var(--bg-muted);
}

.my-task-list-item button:hover {
  background: var(--bg-surface-hover);
  border-color: transparent;
}

.my-task-list-item.is-selected button {
  background: var(--accent-subtle);
  border-color: var(--accent-200);
  color: var(--accent-700);
  font-weight: var(--weight-semibold);
}

.task-detail-panel {
  flex: 1;
  padding: var(--space-5) var(--space-6);
}

.task-detail-panel h2 {
  margin-top: 0;
}

/* Task [105]: wraps the Edit button below a task-detail-panel's heading —
   public/lead/ and public/artist/ don't need this (their #task-detail-panel
   is pure view, no edit action), so it's introduced here rather than reused
   from an existing class. */
.task-detail-actions {
  margin: 0 0 var(--space-4);
}

.task-detail-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-6);
}

.detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.detail-row--single {
  grid-template-columns: 1fr;
}

.detail-field {
  text-align: center;
}

.detail-field dt {
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  margin: 0;
}

.detail-field dd {
  margin: 0;
}

/* ---------- Comment thread ---------- */
.comment-thread {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

/* Task [104]: collapsible thread — empty when <= 5 comments (no button
   rendered), holds the "show more" control above the thread otherwise. */
.comment-thread-toggle:empty {
  display: none;
}

.comment-thread-toggle {
  margin-bottom: var(--space-2);
}

.comment-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-on-accent);
}

.comment-badge--submission {
  background-color: var(--accent);
}

.comment-badge--feedback {
  background-color: var(--success-500);
}

.comment-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.comment-body {
  margin: 0 0 4px;
  white-space: pre-wrap;
}

.comment-attachment a {
  color: var(--accent);
}

/* ---------- Checklist (task [59]) ---------- */
.checklist-section {
  margin: 0 0 var(--space-6);
}

.checklist-section h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.checklist-progress {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  padding: 1px 8px;
}

.checklist-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.checklist-item-title {
  flex: 1;
  font-size: var(--text-sm);
}

.checklist-item.is-done .checklist-item-title {
  text-decoration: line-through;
  color: var(--text-tertiary);
}

.checklist-item-remove {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
}

.checklist-item-remove:hover {
  color: var(--danger-600);
}

.checklist-form {
  display: flex;
  gap: var(--space-2);
}

.checklist-form input[type='text'] {
  flex: 1;
}

/* ---------- Kanban board (task [58]) ---------- */
.board-section {
  max-width: 100%;
  margin: 0 auto var(--space-6);
  overflow-x: auto;
}

.board-columns {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  min-height: 200px;
}

.board-column {
  flex: 1 1 0;
  min-width: 200px;
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.board-column.is-drop-target {
  background: var(--accent-subtle);
  border-color: var(--accent-400);
}

.board-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.board-column-header h3 {
  font-size: var(--text-sm);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.board-column-count {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  padding: 1px 8px;
}

.board-column-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 40px;
}

.board-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  padding: var(--space-2) var(--space-3);
  cursor: grab;
}

.board-card:active {
  cursor: grabbing;
}

.board-card-title {
  margin: 0 0 4px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.board-card-meta {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.board-card .status-badge {
  margin: 0 0 4px;
}

/* ---------- Board columns config modal ---------- */
.board-columns-config-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.board-columns-config-key {
  flex: 0 0 140px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.board-columns-config-row input {
  flex: 1;
}

.board-columns-add-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

/* ---------- Filters panel (task [60]) ---------- */
.filters-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  margin: 0 auto var(--space-4);
  max-width: 1680px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.filters-panel select {
  min-width: 160px;
}

/* ---------- Tags (task [60]) ---------- */
.tag-chip-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.tag-chip {
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  border: 1px solid;
}

/* Per-tag color differentiation (task [96] follow-up): each distinct tag
   string is hashed (see hashTagToPaletteIndex in gantt/app.js) to one of a
   fixed set of token-based color trios, so the same tag always renders in
   the same color, and different tags are visually distinguishable from
   each other. Palette entries reuse existing tokens only (no raw hex). */
.tag-chip--palette-0 {
  color: var(--accent-700);
  background: var(--accent-subtle);
  border-color: var(--accent-200);
}

.tag-chip--palette-1 {
  color: var(--success-500);
  background: var(--success-50);
  border-color: var(--success-500);
}

.tag-chip--palette-2 {
  color: var(--warning-600);
  background: var(--warning-50);
  border-color: var(--warning-600);
}

.tag-chip--palette-3 {
  color: var(--danger-500);
  background: var(--danger-50);
  border-color: var(--danger-500);
}

.tag-chip--palette-4 {
  color: var(--gray-700);
  background: var(--gray-100);
  border-color: var(--gray-300);
}

.tag-chip--palette-5 {
  color: var(--gray-800);
  background: var(--gray-200);
  border-color: var(--gray-400);
}

.board-card .tag-chip-list {
  margin-top: var(--space-2);
}

/* ---------- Status badges & deadline urgency (task [96]) ---------- */
.status-badge {
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  border: 1px solid;
}

.status-badge--todo {
  background: var(--gray-100);
  color: var(--gray-600);
  border-color: var(--gray-600);
}

.status-badge--in_progress {
  background: var(--accent-subtle);
  color: var(--accent-700);
  border-color: var(--accent-200);
}

.status-badge--submitted {
  background: var(--warning-50);
  color: var(--warning-600);
  border-color: var(--warning-600);
}

.status-badge--done {
  background: var(--success-50);
  color: var(--success-500);
  border-color: var(--success-500);
}

.deadline-overdue {
  color: var(--danger-500);
  font-weight: var(--weight-semibold);
}

.deadline-due-soon {
  color: var(--warning-600);
}

/* ---------- Stage badges (task [176]) ---------- */
.stage-badge {
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  padding: 1px 8px;
}

.stage-badge--concept {
  background: var(--stage-concept-bg);
  color: var(--stage-concept-text);
}

.stage-badge--sketch {
  background: var(--stage-sketch-bg);
  color: var(--stage-sketch-text);
}

.stage-badge--modeling {
  background: var(--stage-modeling-bg);
  color: var(--stage-modeling-text);
}

.stage-badge--texturing {
  background: var(--stage-texturing-bg);
  color: var(--stage-texturing-text);
}

.stage-badge--rendering {
  background: var(--stage-rendering-bg);
  color: var(--stage-rendering-text);
}

.stage-badge--review {
  background: var(--stage-review-bg);
  color: var(--stage-review-text);
}

.stage-badge--revision {
  background: var(--stage-revision-bg);
  color: var(--stage-revision-text);
}

.stage-badge--final {
  background: var(--stage-final-bg);
  color: var(--stage-final-text);
}

/* ---------- Inline status/deadline editing on the gantt task list (task [101]) ---------- */
.status-select {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-family: inherit;
  border-radius: var(--radius-full);
  padding: 1px 22px 1px 8px;
  border: 1px solid;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.status-select:disabled option:disabled {
  color: var(--text-tertiary);
}

.status-select--todo {
  background-color: var(--gray-100);
  color: var(--gray-600);
  border-color: var(--gray-600);
}

.status-select--in_progress {
  background-color: var(--accent-subtle);
  color: var(--accent-700);
  border-color: var(--accent-200);
}

.status-select--submitted {
  background-color: var(--warning-50);
  color: var(--warning-600);
  border-color: var(--warning-600);
}

.status-select--done {
  background-color: var(--success-50);
  color: var(--success-500);
  border-color: var(--success-500);
}

.deadline-input {
  font: inherit;
  font-size: var(--text-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  background: var(--bg-surface);
  color: inherit;
}

.deadline-input.deadline-overdue,
.deadline-input.deadline-due-soon {
  border-color: currentColor;
}

/* ---------- Project overview (task [61]) ---------- */
.overview-section {
  max-width: 1680px;
  margin: 0 auto var(--space-6);
}

.overview-toggle-row {
  margin-bottom: var(--space-4);
}

.overview-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.overview-stat-tile {
  flex: 1 1 160px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4);
  margin: 0;
}

.overview-stat-tile dt {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

.overview-stat-tile dd {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.overview-stat-tile dd.overview-stat-overdue {
  color: var(--danger-500);
}

.overview-stat-breakdown {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.overview-task-group {
  margin-bottom: var(--space-5);
}

.overview-task-group h3 {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
}

.overview-deadline-overdue {
  color: var(--danger-500);
  font-weight: var(--weight-semibold);
}

.overview-empty {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}

/* ---------- Vendor overrides (scoped; harmless on pages that don't load these) ---------- */

/* Frappe Gantt: accent-themed bars */
.gantt .bar {
  fill: var(--accent-subtle-strong);
  stroke: var(--accent-200);
}

.gantt .bar-progress {
  fill: var(--accent);
}

.gantt .bar-invalid {
  fill: transparent;
  stroke: var(--border-strong);
}

.gantt .today-highlight {
  fill: var(--accent-subtle);
}

/* Primer timeline (comment thread avatars/badges) — align with token palette */
.TimelineItem-badge {
  background: var(--bg-muted);
  color: var(--text-secondary);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  main {
    padding: var(--space-4);
  }

  .artist-layout {
    flex-direction: column;
  }

  .task-list-panel {
    flex: 1 1 auto;
    width: 100%;
  }

  .toolbar {
    gap: var(--space-3);
  }
}

@media (max-width: 600px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }

  main {
    padding: var(--space-3);
  }

  #login-view.panel,
  #role-notice.panel {
    margin-top: var(--space-4);
    padding: var(--space-6) var(--space-4);
  }

  .task-list-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .manager-actions {
    width: 100%;
  }

  .manager-actions button,
  .manager-actions .button-link {
    flex: 1 1 auto;
  }

  #task-form,
  #user-form,
  .comment-form {
    max-width: 100%;
  }

  .detail-row {
    grid-template-columns: 1fr;
  }

  .modal-dialog {
    padding: var(--space-4);
  }

  .board-columns {
    flex-direction: column;
  }

  .board-column {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* Markdown rendered content */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}
.markdown-content h1 { font-size: 1.25rem; }
.markdown-content h2 { font-size: 1.125rem; }
.markdown-content h3 { font-size: 1rem; }
.markdown-content p { margin-bottom: var(--space-2); }
.markdown-content ul,
.markdown-content ol {
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
}
.markdown-content li { margin-bottom: var(--space-1); }
.markdown-content blockquote {
  border-left: 3px solid var(--border-default);
  padding-left: var(--space-3);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.markdown-content pre {
  background: var(--gray-50);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  overflow-x: auto;
  margin-bottom: var(--space-2);
}
.markdown-content code {
  background: var(--gray-50);
  border-radius: 3px;
  padding: 0.15em 0.3em;
  font-size: 0.9em;
}
.markdown-content pre code {
  background: none;
  padding: 0;
}
.markdown-content table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: var(--space-2);
}
.markdown-content th,
.markdown-content td {
  border: 1px solid var(--border-default);
  padding: var(--space-1) var(--space-2);
  text-align: left;
}
.markdown-content th {
  background: var(--gray-50);
  font-weight: 600;
}
.markdown-content img {
  max-width: 100%;
  border-radius: var(--radius-md);
}
.markdown-content input[type="checkbox"] {
  margin-right: var(--space-1);
}
.markdown-content a {
  color: var(--accent-700);
  text-decoration: underline;
}

/* @mentions */
.mention {
  background: var(--accent-subtle);
  color: var(--accent-700);
  border-radius: 3px;
  padding: 0.1em 0.3em;
  font-weight: 500;
  cursor: default;
}

/* Entity links (TASK-123, PROJECT-42) */
.entity-link {
  color: var(--accent-700);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dashed var(--accent-200);
}
.entity-link:hover {
  border-bottom-style: solid;
}

/* Markdown preview */
.markdown-preview-toggle {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.markdown-preview-toggle button {
  background: none;
  border: none;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  font-size: 0.85rem;
}
.markdown-preview-toggle button.active {
  color: var(--accent-700);
  border-bottom-color: var(--accent-700);
}
.markdown-preview-area {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  min-height: 80px;
  background: var(--bg-surface);
}

/* ---------- User Combobox (searchable user dropdown) ---------- */
.user-cb {
  position: relative;
}
.user-cb-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 4px 8px;
  background: var(--bg-surface);
  cursor: text;
}
.user-cb-wrap:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px var(--accent-100);
}
.user-cb-input {
  flex: 1 1 120px;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  min-width: 80px;
  padding: 4px 0;
}
.user-cb-list {
  position: absolute;
  z-index: 100;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin-top: 2px;
  box-shadow: var(--shadow-md);
}
.user-cb-item {
  padding: 6px 10px;
  cursor: pointer;
}
.user-cb-item:hover,
.user-cb-item--hl {
  background: var(--bg-surface-hover);
}
.user-cb-item--sel {
  font-weight: 600;
  color: var(--accent);
}
.user-cb-empty {
  padding: 8px 10px;
  color: var(--text-tertiary);
  font-style: italic;
}
.user-cb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.user-cb-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--accent-subtle);
  color: var(--accent-700);
  border-radius: var(--radius-md);
  padding: 2px 6px;
  font-size: 0.85em;
  line-height: 1.4;
}
.user-cb-chip-x {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1em;
  line-height: 1;
  padding: 0 2px;
  color: inherit;
  opacity: 0.7;
}
.user-cb-chip-x:hover {
  opacity: 1;
}

/* ---------- Create dropdown (unified create button) ---------- */
.create-dropdown {
  position: relative;
  display: inline-block;
}
.create-dropdown-trigger {
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: 6px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.create-dropdown-trigger:hover {
  background: var(--accent-hover);
}
.create-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 200;
  min-width: 150px;
  margin-top: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 4px 0;
}
.create-dropdown-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 14px;
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
}
.create-dropdown-menu button:hover {
  background: var(--bg-surface-hover);
}

/* ---------- Bulk toolbar (task [120]) ---------- */
.bulk-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--accent-subtle);
  border: 1px solid var(--accent-200);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.bulk-toolbar label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
}
.bulk-toolbar label span {
  white-space: nowrap;
}
.bulk-toolbar select,
.bulk-toolbar input[type="date"],
.bulk-toolbar input[type="text"] {
  padding: 4px 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.85rem;
}
.bulk-toolbar button {
  padding: 5px 12px;
  border: none;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.bulk-toolbar button#bulk-apply-btn {
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 600;
}
.bulk-toolbar button#bulk-clear-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
}
.bulk-task-cb {
  cursor: pointer;
}

/* ---------- Saved filter tabs (task [121]) ---------- */
.saved-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.saved-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-primary);
  cursor: pointer;
  max-width: 160px;
  white-space: nowrap;
}
.saved-tab:hover {
  background: var(--bg-surface-hover);
}
.saved-tab-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.saved-tab-x {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0 2px;
}
.saved-tab-x:hover {
  color: var(--danger-500);
}

/* ---------- Notification badge + tabs (task [122]) ---------- */
.notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--danger-500);
  color: #fff;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.notif-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

.notif-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.notif-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
}
.notif-tab {
  padding: 8px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.notif-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.notif-tab:hover:not(.is-active) {
  color: var(--text-primary);
}
.notifications-panel {
  max-width: 800px;
}
.notif-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.notif-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
}
.notif-item:hover {
  background: var(--bg-surface-hover);
}
.notif-item--unread {
  background: var(--accent-subtle);
}
.notif-item--unread:hover {
  background: var(--accent-100);
}
.notif-message {
  font-size: 0.9rem;
  color: var(--text-primary);
}
.notif-time {
  font-size: 0.78rem;
  color: var(--text-tertiary);
}

/* ---------- Global search (task [123]) ---------- */
.global-search {
  position: relative;
  flex: 0 1 320px;
  min-width: 180px;
}
.search-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.85rem;
}
.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}
.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  max-height: 420px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  margin-top: 4px;
}
.search-group {
  padding: 4px 0;
}
.search-group + .search-group {
  border-top: 1px solid var(--border-default);
}
.search-group-title {
  padding: 6px 12px 2px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.search-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 12px;
  cursor: pointer;
}
.search-item:hover {
  background: var(--bg-surface-hover);
}
.search-item-label {
  font-size: 0.88rem;
  color: var(--text-primary);
}
.search-item-sub {
  font-size: 0.78rem;
  color: var(--text-tertiary);
}
.search-empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 0.85rem;
}

/* ---------- Task breadcrumb (task [124]) ---------- */
.task-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.breadcrumb-link {
  color: var(--accent);
  cursor: pointer;
}
.breadcrumb-link:hover {
  text-decoration: underline;
}
.breadcrumb-current {
  color: var(--text-secondary);
}
.breadcrumb-sep {
  color: var(--text-tertiary);
  margin: 0 2px;
}

/* ---------- Template picker (task [125]) ---------- */
.template-picker {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
}
.template-picker select {
  width: 100%;
}

/* ---------- Dashboard (task [126]) ---------- */
.dashboard-section {
  margin-top: 12px;
}
.dashboard-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 16px;
}
.dash-tab {
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.dash-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.dash-project-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.dash-project-filters select {
  min-width: 140px;
}
.dash-project-row:hover {
  background: var(--accent-subtle);
}
.status-badge--active {
  background: var(--accent-subtle);
  color: var(--accent-700);
  border-color: var(--accent-200);
}
.status-badge--completed {
  background: var(--success-50);
  color: var(--success-500);
  border-color: var(--success-500);
}
.status-badge--archived {
  background: var(--gray-100);
  color: var(--gray-600);
  border-color: var(--gray-600);
}
.dash-progress-bar {
  width: 80px;
  height: 8px;
  background: var(--border-default);
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.dash-progress-fill {
  height: 100%;
  background: var(--success-500);
  border-radius: 4px;
}
.dash-progress-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-left: 6px;
}
.dash-charts-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.dash-chart-card {
  flex: 1 1 300px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 16px;
}
.dash-chart-card h3 {
  margin: 0 0 12px;
  font-size: 0.95rem;
}
.dash-stat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dash-stat-list li {
  padding: 4px 0;
  border-bottom: 1px solid var(--border-default);
  font-size: 0.9rem;
}
.dash-stat-list li:last-child {
  border-bottom: none;
}
.dash-project-table {
  width: 100%;
}

/* ---------- Forgot / Reset password (task [127]) ---------- */
.forgot-password-link {
  margin-top: 8px;
  font-size: 0.85rem;
}
.forgot-password-link a {
  color: var(--accent);
}
.forgot-password-link a:hover {
  text-decoration: underline;
}
.success {
  color: var(--success-500);
  font-weight: var(--weight-medium);
}

/* ---------- Personal tasks (task [128]) ---------- */
.personal-tasks-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-default, #d0d7de);
}

.btn-create-personal {
  margin-top: 0.75rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  background: var(--color-btn-bg, #f6f8fa);
  border: 1px solid var(--color-border-default, #d0d7de);
  border-radius: 6px;
  cursor: pointer;
}

.btn-create-personal:hover {
  background: var(--color-btn-hover-bg, #eaeef2);
}

.personal-task-form {
  margin-top: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--color-border-default, #d0d7de);
  border-radius: 6px;
  background: var(--color-canvas-subtle, #f6f8fa);
}

.personal-task-form label {
  display: block;
  margin-bottom: 0.5rem;
}

.personal-task-form input[type="text"],
.personal-task-form input[type="date"],
.personal-task-form textarea {
  width: 100%;
  box-sizing: border-box;
}

.personal-task-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* ---------- Nav menu dropdown (task [141]) ---------- */
.nav-menu {
  position: relative;
}

.nav-menu-btn {
  background: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}

.nav-menu-btn:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.04));
  border-color: var(--accent-200);
}

.nav-menu-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-1) 0;
}

.nav-menu-item {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: background var(--transition-fast);
}

.nav-menu-item:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.04));
  text-decoration: none;
  color: var(--text-primary);
}

.nav-menu-item.is-current {
  color: var(--accent);
  font-weight: var(--weight-medium);
  background: var(--accent-50, rgba(59, 130, 246, 0.05));
}

/* ---------- Filter dropdown with checkboxes (task [143]) ---------- */
.filter-dropdown {
  position: relative;
  display: inline-block;
}

.filter-dropdown-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.filter-dropdown-btn:hover {
  border-color: var(--accent-400);
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}

.filter-dropdown-btn.has-selection {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
  font-weight: var(--weight-semibold);
}

.filter-dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 200px;
  max-height: 300px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}

.filter-dropdown-toolbar {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
}

.filter-dropdown-action {
  background: none;
  border: none;
  font-size: var(--text-xs);
  color: var(--accent);
  cursor: pointer;
  padding: 0;
}

.filter-dropdown-action:hover {
  text-decoration: underline;
}

.filter-dropdown-list {
  overflow-y: auto;
  max-height: 240px;
  padding: var(--space-1) 0;
}

.filter-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background var(--transition-fast);
}

.filter-dropdown-item:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.filter-dropdown-item input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}

/* ---------- Language toggle (task [149]) ---------- */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lang-toggle-option {
  background: none;
  border: none;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.lang-toggle-option:not(:last-child) {
  border-right: 1px solid var(--border-default);
}

.lang-toggle-option.is-active {
  background: var(--accent);
  color: #fff;
  cursor: default;
}

.lang-toggle-option:not(.is-active):hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

/* ---------- Overflow menu (task [179]) ---------- */
.overflow-menu {
  position: relative;
  display: inline-block;
}

.overflow-menu-trigger {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.overflow-menu-trigger:hover {
  border-color: var(--accent-200);
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}

.overflow-menu-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 100;
  min-width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-1) 0;
}

.overflow-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.overflow-menu-item:hover {
  background: var(--bg-surface-hover);
  text-decoration: none;
}

/* ---------- Empty state (task [181]) ---------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--text-tertiary);
}

.empty-state__icon {
  font-size: 48px;
  margin-bottom: var(--space-4);
  opacity: 0.6;
}

.empty-state__text {
  font-size: var(--text-md);
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
}

.empty-state__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.empty-state__cta:hover {
  background: var(--accent-hover);
}

.mention {
  color: var(--accent-700);
  font-weight: var(--weight-medium);
  background: var(--accent-50);
  border-radius: var(--radius-sm);
  padding: 0 3px;
}

.mention-dropdown {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 220px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 100;
}

.mention-item {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
}

.mention-item:hover,
.mention-item--active {
  background: var(--accent-50);
}

.task-key-badge {
  display: inline;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  margin-right: var(--space-1);
  font-family: monospace;
  cursor: pointer;
  text-decoration: none;
}