/* ==================== HOME CONTENT BOX ==================== */
.home-content-box { max-width: 1100px; margin: 0 auto; background: var(--bg-card); border-radius: 12px; padding: 28px 32px 36px; }
.home-content-box--wide { max-width: 1500px; }

/* ==================== HOME PAGE ==================== */
.section-pill { background: var(--accent-dim); color: var(--accent); padding: 4px 14px; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.section-pill--blue { background: var(--blue-dim); color: var(--blue); }
.section-pill--green { background: var(--green-dim); color: var(--green); }
.section-pill--orange { background: var(--kanban-section-pill-bg); color: var(--orange); }

.project-card-home {
  display: flex; flex-direction: column; position: relative;
  background: var(--home-card-bg); border: none; border-radius: 14px;
  padding: 0; min-height: 120px;
  text-decoration: none; color: #fff;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  box-shadow: 0 2px 10px var(--shadow-color-sm);
  overflow: hidden;
}
.project-card-home:hover { box-shadow: 0 8px 30px var(--shadow-color-md); transform: translateY(-3px); }

/* Drag & drop reordering — only active when grid has --reorder modifier (mod/admin entered reorder mode) */
.projects-home-grid--reorder .project-card-home { cursor: grab; }
.projects-home-grid--reorder .project-card-home:active { cursor: grabbing; }
.projects-home-grid--reorder .project-card-home--new { cursor: pointer; }  /* "+ Ново" stays clickable */
.project-card-home.dragging { opacity: 0.4; transform: scale(0.97); }
.project-card-home.home-board-drag-over { outline: 2px dashed var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent-dim); }

/* Reorder mode banner (only shown when active) */
.home-reorder-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; margin-bottom: 12px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 13px; color: var(--text);
  animation: home-reorder-banner-in 0.2s ease;
}
.home-reorder-banner span { flex: 1; line-height: 1.4; }
.home-reorder-banner strong { color: var(--accent); }
@keyframes home-reorder-banner-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Subtle hint shown to mods/admins when NOT in reorder mode */
.home-reorder-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin: 0 0 8px;
  text-align: center;
  opacity: 0.6;
}
.project-card-home__header { padding: 14px 18px; background: var(--home-card-header); text-align: center; }
.project-card-home__pin { position: absolute; top: 12px; right: 14px; color: var(--text-dim); opacity: 0.5; }
.project-card-home__above { font-size: 11px; color: var(--text-dim); font-weight: 500; margin-bottom: 4px; letter-spacing: 0.04em; }
.project-card-home__title { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.project-card-home__body { padding: 12px 18px; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.project-card-home__avatars { display: flex; justify-content: center; }
.project-card-home__desc { font-size: 13px; color: var(--text-secondary); }
.project-card-home--new { border: 1px dashed var(--border); opacity: 0.4; box-shadow: none; }
.project-card-home--new .project-card-home__header { background: transparent; }
.project-card-home--new:hover { opacity: 0.7; }
.project-card-home--docs .project-card-home__header { background: var(--home-card-docs); }

/* Create choice modal */
.btn-create-choice { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; text-align: left; color: var(--text); font-family: inherit; transition: border-color 0.15s, background 0.15s; }
.btn-create-choice:hover { border-color: var(--accent); background: var(--bg-hover); }
.btn-create-choice__icon { font-size: 28px; flex-shrink: 0; }
.btn-create-choice__title { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.btn-create-choice__desc { font-size: 12px; color: var(--text-dim); line-height: 1.4; }

.projects-home-grid { display: grid; gap: 12px; }
@media (max-width: 600px) { .projects-home-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 900px) and (min-width: 601px) { .projects-home-grid { grid-template-columns: repeat(2,1fr) !important; } }

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

.assignment-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: 13px; transition: background var(--transition-fast); }
.assignment-row:hover { background: var(--bg-hover); }
.assignment-row:last-child { border-bottom: none; }
.assignment-title { font-weight: 500; }
.assignment-board { font-size: 11px; color: var(--text-dim); background: var(--bg-hover); padding: 1px 6px; border-radius: 9999px; }

/* ==================== BOARDS GRID (PROJECT PAGE) ==================== */
.boards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.board-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 18px; text-decoration: none; color: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); min-height: 140px; display: flex; flex-direction: column; }
.board-box:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.board-box-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.board-box-title { font-size: 14px; font-weight: 700; color: #fff; }
.board-box-count { font-size: 11px; color: var(--text-dim); }
.board-box-preview { flex: 1; display: flex; gap: 4px; align-items: flex-end; padding-top: 4px; }
.preview-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.preview-bar { width: 100%; min-height: 10px; background: var(--accent-dim); border: 1px solid var(--accent); border-radius: 3px; }
.preview-col.done .preview-bar { background: var(--green-dim); border-color: var(--green); }
.preview-count { font-size: 9px; color: var(--text-dim); font-weight: 600; }
.preview-label { font-size: 8px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; writing-mode: vertical-rl; text-orientation: mixed; max-height: 60px; overflow: hidden; text-overflow: ellipsis; }

/* Board preview list (horizontal column names) */
.board-preview-list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding-top: 10px; line-height: 1.7; }
.board-preview-item { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.board-preview-count { color: var(--text-dim); font-size: 11px; }
.board-preview-sep { color: var(--text-dim); font-size: 11px; margin: 0 4px; opacity: 0.4; }
.board-preview-total { font-size: 11px; color: var(--text-dim); margin-top: 10px; font-weight: 500; }

/* Tool card colored headers */
.tool-card__color-bar { height: 6px; border-radius: 12px 12px 0 0; }
.tool-card__color-bar--orange { background: linear-gradient(90deg, #f97316, #fb923c); }
.tool-card__color-bar--blue { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.tool-card__color-bar--teal { background: linear-gradient(90deg, #14b8a6, #2dd4bf); }
.tool-card__color-bar--yellow { background: linear-gradient(90deg, #eab308, #facc15); }
.tool-card__color-bar--green { background: linear-gradient(90deg, #22c55e, #4ade80); }
.tool-card__color-bar--purple { background: linear-gradient(90deg, #a855f7, #c084fc); }
.tool-card__color-bar--red { background: linear-gradient(90deg, #ef4444, #f87171); }

/* Colored preview bars per column position */
.preview-bar--0 { background: var(--kanban-preview-orange); border-color: var(--orange); }
.preview-bar--1 { background: var(--kanban-preview-blue); border-color: var(--blue); }
.preview-bar--2 { background: var(--yellow-dim); border-color: var(--yellow); }
.preview-bar--3 { background: var(--purple-dim); border-color: var(--purple); }
.preview-bar--4 { background: var(--kanban-preview-teal); border-color: var(--teal); }
.preview-bar--5 { background: rgba(236,72,153,0.28); border-color: #ec4899; }

/* Board watching section */
.board-watching { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
.board-watching__label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.board-watching__avatars { display: flex; }
.board-watching__avatar { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; border: 2px solid var(--bg); margin-left: -4px; overflow: hidden; }
.board-watching__avatar:first-child { margin-left: 0; }

/* ==================== KANBAN BOARD ==================== */
/* Board title: large centered heading, Basecamp-style. Sits inside page-board
   so it scrolls with the columns. position: relative for z-index above ::before. */
.board-title {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 20px 0 10px;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}

/* Board toolbar: compact row of actions above columns, inside the board area.
   position: relative keeps it above the ::before backdrop in the stacking context. */
.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 4px 8px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.board-toolbar input[type="search"] {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text);
  width: 160px;
  outline: none;
  font-family: inherit;
}
.board-toolbar input[type="search"]:focus {
  border-color: var(--accent);
}

/* The backdrop panel lives on #pageContent.page-board::before now and covers
   the header + columns area. board-kanban is just a plain flex child that
   fills the remaining vertical space. position: relative keeps it above the
   backdrop in the stacking context. */
.board-kanban {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  align-items: flex-start;
  padding: 8px 0 16px;
  flex: 1 0 auto;
  position: relative;
}

/* Board page header — 3-column grid so the title is perfectly centered:
   [1fr empty] [auto title] [1fr actions, right-aligned]. The empty left
   column balances the actions column so the auto title column sits exactly
   in the middle of the header. position: relative keeps the header above
   the ::before backdrop in the stacking context. */
.board-page-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 18px 0 14px;
  position: relative;
}
.board-page-header__title { grid-column: 2; margin: 0; text-align: center; font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.board-page-header__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; position: relative; flex-wrap: nowrap; white-space: nowrap; }

/* Column color bar — driven by --col-color CSS variable */
.kanban-column {
  flex: 1 0 280px;
  display: flex; flex-direction: column; position: relative;
  background: var(--kanban-col-bg);
  border-radius: 8px;
  border: 1px solid var(--kanban-col-border);
}
.kanban-column__inner { display: flex; flex-direction: column; flex: 1; padding: 0 14px; }


.column-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0 10px; margin-bottom: 4px; position: relative;
  border-bottom: 1px solid var(--border);
}
.column-title-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.column-title-link { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.column-title-link .col-count { font-weight: 500; color: var(--text-dim); font-size: 11px; background: var(--bg-hover); padding: 2px 8px; border-radius: 9999px; }
.column-header-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.col-menu-btn { background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; font-size: 16px; padding: 2px 10px; border-radius: 9999px; line-height: 1; transition: background var(--transition-fast), color var(--transition-fast); }
.col-menu-btn:hover { background: var(--bg-elevated); color: var(--text); }
.column-title-link a { color: inherit; text-decoration: none; }
.column-title-link a:hover { color: var(--accent); }
.col-drag-handle { cursor: grab; color: var(--text-dim); font-size: 16px; opacity: 0; transition: opacity var(--transition-fast); user-select: none; flex-shrink: 0; }
.kanban-column:hover .col-drag-handle { opacity: 1; }
.col-drag-handle:active { cursor: grabbing; }
.kanban-column.col-dragging { opacity: 0.4; }
.kanban-column.col-drag-over { outline: 2px dashed var(--drag-over-border); outline-offset: -2px; background: var(--drag-over-bg); }

/* Column cards */
.column-cards { flex: 1; min-height: 40px; padding: 8px 0 2px; transition: background var(--transition-normal); }
.column-cards.drag-over { background: var(--drag-over-bg); outline: 2px dashed var(--drag-over-border); outline-offset: -2px; border-radius: 6px; }
/* Empty state — dashed placeholder that mimics a card slot (~230px tall) */
.column-cards:empty {
  min-height: 230px;
  border: 1px dashed var(--border-hover);
  border-radius: 8px;
  background: transparent;
  margin: 8px 0;
  padding: 0;
}

/* ON HOLD section */
.on-hold-section { margin-top: 6px; border-top: 1px solid var(--kanban-col-border); }
.on-hold-toggle { width: 100%; display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--text-dim); font-size: 12px; font-weight: 600; padding: 8px 4px; cursor: pointer; text-align: left; letter-spacing: 0.03em; transition: color 0.15s; }
.on-hold-toggle:hover { color: var(--text); }
.on-hold-toggle__icon { font-size: 10px; flex-shrink: 0; }
.on-hold-toggle__count { margin-left: auto; background: var(--kanban-on-hold-bg); border-radius: 9999px; padding: 1px 7px; font-size: 11px; }
.on-hold-cards { }
.on-hold-drop { min-height: 230px; border: 1px dashed var(--border-hover); border-radius: 8px; padding: 4px; margin-bottom: 6px; position: relative; display: flex; flex-direction: column; }
/* When the drop zone has cards, shrink it to the cards' natural height */
.on-hold-drop:has(.kanban-card-wrap) { min-height: 36px; }
.on-hold-drop-hint { font-size: 11px; color: var(--text-dim); text-align: center; padding: 6px; opacity: 0.5; pointer-events: none; margin: auto; }
.on-hold-drop:has(.kanban-card-wrap) .on-hold-drop-hint { display: none; }

/* Kanban card wrap + menu button */
.kanban-card-wrap { position: relative; }
.kanban-card__menu-btn { position: absolute; top: 6px; right: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim); font-size: 14px; line-height: 1; padding: 1px 5px; cursor: pointer; opacity: 0; transition: opacity 0.15s; z-index: 2; }
.kanban-card-wrap:hover .kanban-card__menu-btn { opacity: 1; }
.kanban-card__menu-btn:hover { color: var(--text); }
.kanban-card__hold-badge { display: inline-block; font-size: 10px; font-weight: 600; color: var(--yellow); background: var(--yellow-dim); border-radius: 4px; padding: 1px 6px; margin-bottom: 4px; }
.kanban-card__priority-badge { display: inline-block; font-size: 10px; font-weight: 600; border-radius: 4px; padding: 1px 6px; margin-bottom: 4px; margin-right: 4px; }
.kanban-card__priority-badge--urgent { color: var(--red); background: var(--red-dim); }
.kanban-card__priority-badge--high { color: var(--yellow); background: var(--yellow-dim); }

/* Kanban card context menu */
.kanban-card-context { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md); overflow: hidden; min-width: 190px; }
.kanban-card-context button, .kanban-card-context__link { display: block; width: 100%; padding: 9px 14px; background: none; border: none; color: var(--text); font-size: 13px; text-align: left; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.kanban-card-context button:hover, .kanban-card-context__link:hover { background: var(--bg-hover); }
.kanban-card-context__sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Done/Not Now sidebar */
.kanban-sidebar { display: flex; flex-direction: column; border-left: 2px solid var(--border); flex-shrink: 0; align-self: stretch; min-height: 200px; }
.kanban-sidebar-tab { writing-mode: vertical-rl; text-orientation: mixed; padding: 20px 11px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; text-align: center; transition: background var(--transition-fast), color var(--transition-fast); text-decoration: none; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.kanban-sidebar-tab:hover { background: var(--bg-hover); color: #fff; }
.done-tab { background: var(--green-dim); color: var(--green); border-left: 3px solid var(--green); }
.sidebar-count { display: block; font-weight: 400; margin-bottom: 4px; }
.sidebar-label { display: block; }

/* ==================== KANBAN CARD ==================== */
.kanban-card {
  display: block; background: var(--kcard-bg, var(--bg-card)); border: 1px solid var(--kcard-border, var(--border));
  border-radius: 8px; padding: 12px 14px; margin-bottom: 8px;
  text-decoration: none; color: var(--text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  cursor: grab;
}
.kanban-card:hover { border-color: var(--border-hover); box-shadow: 0 3px 10px var(--card-hover-shadow); transform: translateY(-2px); }
.kanban-card:active { cursor: grabbing; transform: scale(0.98); }
.kanban-card.dragging { opacity: 0.35; }
.kanban-card__content { min-width: 0; }
.kanban-card__title { font-size: 13.5px; font-weight: 600; color: var(--kcard-title, var(--text)); margin-bottom: 10px; line-height: 1.4; }

/* Card footer: avatars left + badges right */
.kanban-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Stacked assignee avatars */
.kanban-card__avatars { display: flex; align-items: center; }
.kanban-card__av { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; border: 2px solid var(--bg-card); margin-left: -6px; flex-shrink: 0; overflow: hidden; }
.kanban-card__av:first-child { margin-left: 0; }
.kanban-card__av--empty { background: var(--bg-hover); color: var(--text-dim); font-size: 11px; }
.kanban-card__av--more { background: var(--bg-elevated); color: var(--text-dim); font-size: 8px; font-weight: 700; }

/* Card badges */
.kanban-card__badges { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: flex-end; }
.kanban-card__due { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--text-secondary); background: var(--bg-hover); padding: 2px 7px; border-radius: 4px; }
.kanban-card__due--overdue { background: var(--red-dim) !important; color: var(--red) !important; font-weight: 600; }
.kanban-card__due--today { background: var(--yellow-dim) !important; color: var(--yellow) !important; font-weight: 600; }
.kanban-card__publish { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--accent); background: var(--accent-dim); padding: 2px 7px; border-radius: 4px; }
.kanban-card__comments { display: inline-flex; align-items: center; gap: 3px; background: var(--bg-hover); color: var(--text-secondary); border-radius: 4px; padding: 2px 7px; font-size: 10px; font-weight: 600; }
.kanban-card__steps { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--green); background: var(--green-dim); padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.kanban-card__client { display: inline-flex; align-items: center; font-size: 10px; color: var(--text-dim); background: var(--bg-hover); padding: 2px 7px; border-radius: 4px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Card color states */
.kanban-card.overdue { border-left: 3px solid var(--red); }
.kanban-card.deadline-today { border-left: 3px solid var(--red); }
.kanban-card.deadline-soon { border-left: 3px solid var(--yellow); }
.kanban-card.deadline-ok { border-left: 3px solid var(--green); }
.kanban-card.priority { border-left: 3px solid var(--priority-card-border); background: linear-gradient(135deg, var(--priority-card-bg), var(--bg-card)); }
.kanban-card.on-hold { opacity: 0.45; }

/* Deadline color system (board-specific dates) — card background + border */
.kanban-card.dl-green  { border-left: 3px solid var(--dl-green-border);  background: var(--dl-green-bg); }
.kanban-card.dl-yellow { border-left: 3px solid var(--dl-yellow-border); background: var(--dl-yellow-bg); }
.kanban-card.dl-red    { border-left: 3px solid var(--dl-red-border);    background: var(--dl-red-bg); }
.kanban-card.dl-black  { border-left: 3px solid var(--dl-black-border);  background: var(--dl-black-bg); }
.kanban-card.dl-none   { border-left: 3px solid var(--dl-none-border);   background: var(--dl-none-bg); }
.kanban-card__dl-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; }
.kanban-card__dl-badge.dl-green  { color: #fff; background: var(--dl-green-badge); }
.kanban-card__dl-badge.dl-yellow { color: #fff; background: var(--dl-yellow-badge); }
.kanban-card__dl-badge.dl-red    { color: #fff; background: var(--dl-red-badge); }
.kanban-card__dl-badge.dl-black  { color: var(--text-dim); background: var(--dl-black-badge); }

.dash-card.dl-green  { border-left: 3px solid var(--dl-green-border);  background: var(--dl-green-bg-dash); }
.dash-card.dl-yellow { border-left: 3px solid var(--dl-yellow-border); background: var(--dl-yellow-bg-dash); }
.dash-card.dl-red    { border-left: 3px solid var(--dl-red-border);    background: var(--dl-red-bg-dash); }
.dash-card.dl-black  { border-left: 3px solid var(--dl-black-border);  background: var(--dl-black-bg-dash); }
.dash-card.dl-none   { border-left: 3px solid var(--dl-none-border);   background: var(--dl-none-bg); }
.dash-card__dl-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; padding: 2px 5px; border-radius: 4px; }
.dash-card__dl-badge.dl-green  { color: #fff; background: var(--dl-green-badge); }
.dash-card__dl-badge.dl-yellow { color: #fff; background: var(--dl-yellow-badge); }
.dash-card__dl-badge.dl-red    { color: #fff; background: var(--dl-red-badge); }
.dash-card__dl-badge.dl-black  { color: var(--text-dim); background: var(--dl-black-badge); }

.pc-mini-card.dl-green  { border-left: 3px solid var(--dl-green-border);  background: var(--dl-green-bg-pc); }
.pc-mini-card.dl-yellow { border-left: 3px solid var(--dl-yellow-border); background: var(--dl-yellow-bg-pc); }
.pc-mini-card.dl-red    { border-left: 3px solid var(--dl-red-border);    background: var(--dl-red-bg-pc); }
.pc-mini-card.dl-black  { border-left: 3px solid var(--dl-black-border);  background: var(--dl-black-bg-pc); }
.pc-mini-card.dl-none   { border-left: 3px solid var(--dl-none-border);   background: var(--dl-none-bg); }
.pc-mini-card__dl { font-size: 10px; font-weight: 600; margin-top: 4px; padding: 1px 5px; border-radius: 4px; display: inline-block; }
.pc-mini-card__dl.dl-green  { color: var(--green);  background: var(--green-dim); }
.pc-mini-card__dl.dl-yellow { color: var(--yellow); background: var(--yellow-dim); }
.pc-mini-card__dl.dl-red    { color: var(--red);    background: var(--red-dim); }
.pc-mini-card__dl.dl-black  { color: var(--text-dim); background: var(--bg-hover); }

/* Add card button */
.add-card-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px; border: 1px dashed var(--border); border-radius: 8px;
  color: var(--text-dim); font-size: 12px; cursor: pointer;
  transition: all var(--transition-fast); background: none; text-decoration: none;
  margin-top: 8px; opacity: 0;
}
.kanban-column:hover .add-card-btn { opacity: 1; }
.add-card-btn:hover { border-color: var(--col-color, var(--accent)); color: var(--col-color, var(--accent)); background: var(--overlay-white-ultra); opacity: 1; }

/* Column context menu */
.col-context-menu { position: absolute; right: 0; top: 100%; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg); z-index: 100; min-width: 160px; padding: 4px; }
.col-context-menu button { display: block; width: 100%; text-align: left; padding: 8px 12px; background: none; border: none; color: var(--text); font-size: 13px; cursor: pointer; border-radius: 4px; font-family: inherit; }
.col-context-menu button:hover { background: var(--bg-hover); }

/* ==================== PROJECT CARD PIN ICON ==================== */
.project-card-home {
  position: relative;
}
.project-card-home__pin {
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--text-dim);
  opacity: 0.5;
}

/* ==================== DONE SIDEBAR PANEL ==================== */
.done-sidebar-panel {
  position: fixed; right: 0; top: 90px; bottom: 0; width: 360px;
  background: var(--bg-card); border-left: 2px solid var(--green);
  box-shadow: -4px 0 20px var(--shadow-color-sm); z-index: 100;
  animation: slideInRight 0.2s ease;
}
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ==================== COLUMN VIEW PAGE ==================== */
.column-view {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 0 40px;
}
.column-view__header {
  text-align: center;
  padding: 24px 0 20px;
}
.column-view__title {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0;
}
.column-view__subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 4px;
}
.column-view__cards {
  display: flex;
  flex-direction: column;
}
.column-view__cards .kanban-card-wrap { cursor: default; }
.column-view__cards .kanban-card { cursor: pointer; }
.column-view__cards .kanban-card:active { cursor: pointer; transform: translateY(-2px); }
.column-view__empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
  font-size: 14px;
}
.column-view__section-label {
  padding: 14px 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.column-view__date-group {
  margin-bottom: 8px;
}
.column-view__date-label {
  padding: 16px 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.column-view__date-group:first-child .column-view__date-label {
  padding-top: 0;
}

/* ==================== PRESENCE INDICATORS ==================== */
.presence-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: transparent; }
.presence-dot.online { background: var(--green); box-shadow: 0 0 4px var(--green); }

/* ==================== ATTACHMENTS ON CARDS ==================== */
.card-attachments { margin-bottom: 24px; }
.attachment-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
.attachment-item:hover { border-color: var(--border-hover); }
.attachment-icon { font-size: 24px; flex-shrink: 0; }
.attachment-info { flex: 1; min-width: 0; }
.attachment-name { font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-meta { font-size: 11px; color: var(--text-dim); }