/* styles/widgets/projects.css
 *
 * Extracted from styles/main.css during T4#20 (the May-2026
 * CSS-split refactor). Originally lived at lines 7872-8513
 * of main.css. Cascade order is preserved: main.css loads first
 * (themes + base + modal/tab/layout infra), then per-widget
 * files in alphabetical order via <link> tags in index.html.
 */

/* ── PROJECTS WIDGET (Phase 5) ─────────────────────────────────
 * One widget closes Side Project Kanban + Project Tracker. Each
 * project is a card with a progress bar; click to expand inline,
 * inside expansion you toggle between List and Kanban view.
 */

.projects-stage {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.projects-add-btn-block {
    background: transparent;
    color: var(--muted);
    border: 1px dashed var(--border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    padding: 8px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.projects-add-btn-block:hover {
    color: var(--text);
    border-color: var(--accent);
    background: color-mix(in oklab, var(--accent) 5%, var(--surface2));
}
.projects-add-btn {
    background: var(--accent);
    color: var(--accent-on);
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
}
.projects-add-btn:hover { filter: brightness(1.1); }

.projects-icon-btn {
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.projects-icon-btn:hover { color: var(--text); background: var(--surface); }
.projects-icon-btn-del:hover { color: var(--red); }

.projects-empty {
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    padding: 12px 8px;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 6px;
}

.projects-card {
    --project-accent: var(--accent);
    border: 1px solid var(--border);
    border-left: 3px solid var(--project-accent);
    border-radius: 8px;
    background: var(--surface2);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.projects-card-expanded {
    background: color-mix(in oklab, var(--project-accent) 4%, var(--surface2));
}
.projects-card-head {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 8px;
    align-items: center;
    cursor: pointer;
}
.projects-card-icon { font-size: 16px; }
.projects-card-name {
    color: var(--text);
    font-weight: 700;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Slice D-big stage 1: shared project styling. The card itself
 * gets a slightly different border + the badge surfaces the
 * owner's username so the viewer can tell at a glance what's
 * theirs vs what's shared with them. */
.projects-card-shared {
    border-style: dashed;
}
.projects-shared-badge {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(108, 99, 255, 0.18);
    color: var(--accent);
    letter-spacing: 0.02em;
    margin-right: 6px;
}
.projects-shared-divider {
    margin: 14px 0 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

/* 20260638: Project editor mode toggle (Open vs Assigned). */
.pe-mode-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pe-mode-card {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    transition: border-color 120ms ease, background 120ms ease;
}
.pe-mode-card:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface2));
}
.pe-mode-card input {
    margin: 2px 0 0 0;
    flex: 0 0 auto;
}
.pe-mode-card-body {
    flex: 1 1 auto;
}
.pe-mode-card-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.pe-mode-card-note {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.3;
    margin-top: 2px;
}

/* Project editor share section */
.pe-share-help {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
    margin-bottom: 8px;
}
.pe-share-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}
.pe-share-add-row .modal-input { flex: 1 1 auto; }
.pe-share-add-row .ae-btn-primary {
    flex: 0 0 auto;
    white-space: nowrap;
}
.pe-share-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.pe-share-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--surface2);
    border: 1px solid var(--border);
    font-size: 12px;
}
.pe-share-name {
    flex: 1 1 auto;
}
.pe-share-name b { color: var(--text); font-weight: 600; }
.pe-share-remove {
    flex: 0 0 auto;
    padding: 3px 9px;
    font-size: 11px;
}
.pe-share-remove:hover {
    color: var(--red);
    border-color: var(--red);
}
.pe-share-empty,
.pe-share-loading {
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
    padding: 6px 10px;
}
.projects-card-pct {
    color: var(--project-accent);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.projects-card-track {
    height: 6px;
    background: var(--surface);
    border-radius: 999px;
    overflow: hidden;
}
.projects-card-fill {
    height: 100%;
    background: var(--project-accent);
    transition: width 0.2s ease;
}
.projects-card-meta {
    color: var(--muted);
    font-size: 11px;
}

.projects-expanded {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.projects-view-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
    background: var(--surface);
    align-self: flex-start;
}
.projects-view-pill {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
}
.projects-view-pill-active {
    background: var(--project-accent);
    color: var(--accent-on);
}

.projects-quickadd {
    display: flex;
    gap: 6px;
}
.projects-input {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 12px;
}
.projects-input:focus {
    outline: none;
    border-color: var(--project-accent);
}

/* List view */
.projects-task-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.projects-task-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 4px 6px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 12px;
}
.projects-task-check {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--border);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-on);
    font-size: 10px;
    font-weight: 800;
    padding: 0;
}
.projects-task-check:hover { border-color: var(--project-accent); }
.projects-task-done .projects-task-check {
    background: var(--project-accent);
    border-color: var(--project-accent);
}
.projects-task-text {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.projects-task-done .projects-task-text {
    text-decoration: line-through;
    color: var(--muted);
}
.projects-task-status {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--surface2);
    border: 1px solid var(--border);
}

/* 20260638: open-mode shared-project badges on each task row. */
.projects-task-doneby {
    font-size: 10px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.projects-task-claim {
    font-family: inherit;
    font-size: 10px;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--border);
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.projects-task-claim:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.projects-task-claim.claimed-self {
    color: var(--accent);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.projects-task-claim.claimed-other {
    cursor: default;
    color: var(--muted);
}
.projects-task-claim.claimed-other:hover {
    color: var(--muted);
    border-color: var(--border);
}

/* Kanban view */
.projects-kanban {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.projects-kanban-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 120px;
}
.projects-kanban-col-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.projects-kanban-col-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--muted);
}
.projects-kanban-col-count {
    color: var(--muted);
    font-size: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 7px;
    font-variant-numeric: tabular-nums;
}
.projects-kanban-col-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 30px;
}
.projects-kanban-empty {
    color: var(--muted);
    font-size: 11px;
    text-align: center;
    padding: 8px;
}
.projects-kanban-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-left: 2px solid var(--project-accent);
    border-radius: 4px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
}
.projects-kanban-card-text {
    color: var(--text);
    line-height: 1.3;
}
.projects-kanban-card-actions {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}
.projects-kanban-move {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.projects-kanban-move:hover {
    background: color-mix(in oklab, var(--project-accent) 12%, var(--surface));
    border-color: var(--project-accent);
    color: var(--text);
}

/* Project editor: starter chips */
.project-edit-icon-row,
.project-edit-color-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.project-edit-icon-chip {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 16px;
    cursor: pointer;
}
.project-edit-icon-chip:hover {
    border-color: var(--accent);
}
.project-edit-color-chip {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
}
.project-edit-color-chip:hover {
    border-color: var(--text);
}

/* Mobile: collapse kanban to a single column */
@media (max-width: 600px) {
    .projects-kanban {
        grid-template-columns: 1fr;
    }
    .projects-card-head {
        grid-template-columns: auto 1fr auto auto;
    }
    .projects-card-head .projects-card-pct { display: none; }
    .projects-task-row {
        grid-template-columns: auto 1fr auto;
    }
    .projects-task-row .projects-task-status { display: none; }
}

/* Slice D-fast: Friends button in the header. Mirrors the bell
   (.app-updates-btn) and admin panel button so the row of header
   icons (gear, friends, lightbulb, bell, shield) lines up
   consistently. */
.friends-btn {
    /* position: relative anchors the .friends-badge child. Spacing
       comes from .brand-icons's flex gap; no per-button margin
       here. */
    position: relative;
    background: none; border: 1px solid var(--border);
    border-radius: 6px; color: var(--muted);
    font-size: 12px; padding: 2px 7px;
    cursor: pointer; font-family: inherit;
    line-height: 1;
}
.friends-btn:hover { border-color: var(--accent); color: var(--text); }
.friends-btn .sr   { position: absolute; left: -9999px; }

/* Pending-incoming-request badge in the top-right corner. Same
   shape as .au-badge (the bell's red unread pill) for visual
   consistency. */
.friends-badge {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: var(--red); color: white;
    border-radius: 999px;
    font-size: 10px; font-weight: 700;
    line-height: 16px; text-align: center;
    box-shadow: 0 0 0 2px var(--surface);
}

/* Slice D-fast: Friends modal (its own overlay, opened by the
   👤 header button). The modal's own width/height/overflow
   rules now live in styles/widgets/chat.css alongside the
   chat-tab layout chain (the tabs share the modal shell, so
   it made sense to colocate). That file alphabetically loads
   BEFORE projects.css, which is why this rule used to win on
   cascade order and silently clobber width and overflow-y;
   removing the duplicate so chat.css is the source of truth. */
.fr-help {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 14px;
}
.fr-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}
.fr-add-row .modal-input { flex: 1 1 auto; }
.fr-add-row .ae-btn-primary {
    flex: 0 0 auto;
    white-space: nowrap;
}
.fr-block      { margin-top: 14px; }
.fr-subtitle {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.fr-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--surface2);
    border: 1px solid var(--border);
}
.fr-row-pending {
    opacity: 0.85;
    border-style: dashed;
}
/* Pending project-share rows: the project name is the primary
 * label, the "shared by @owner" line is a sub-text below it. */
.fr-row-share .fr-name {
    line-height: 1.3;
}
.fr-share-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
    margin-top: 2px;
}
.fr-name {
    flex: 1 1 auto;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fr-name b { font-weight: 600; color: var(--text); }
.fr-display {
    color: var(--muted);
    font-weight: 400;
}
.fr-name-unknown {
    color: var(--muted);
    font-style: italic;
}
.fr-pill {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    background: rgba(245, 180, 60, 0.18);
    color: #f5b43c;
    letter-spacing: 0.02em;
}
.fr-empty {
    color: var(--muted);
    font-size: 13px;
    font-style: italic;
    padding: 8px 10px;
}
/* Per-button accent tints. Accept = green, Decline / Remove =
 * red on hover, Cancel = neutral. Keeps the row visually scannable. */
.fr-btn-accept {
    color: var(--green);
    border-color: var(--green);
}
.fr-btn-accept:hover {
    background: rgba(67, 217, 162, 0.12);
}
.fr-btn-decline:hover,
.fr-btn-remove:hover {
    color: var(--red);
    border-color: var(--red);
}

/* Slice C-big / C.5: Replay tours section */
.ae-tour-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    margin-bottom: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}
.ae-tour-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--surface2);
    border: 1px solid var(--border);
}
.ae-tour-label {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 500;
}
.ae-tour-pill {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ae-tour-pill.seen {
    background: rgba(120, 130, 145, 0.15);
    color: var(--muted);
}
.ae-tour-pill.new {
    background: rgba(108, 99, 255, 0.15);
    color: var(--accent);
}
/* Off-tab rows are slightly dimmer so the "currently mounted on
 * this tab" rows visually pop. The Replay button itself stays full
 * brightness - clicking surfaces a toast asking the user to add
 * the widget to a tab first. */
.ae-tour-row.offtab .ae-tour-label { opacity: 0.65; }
.ae-tour-replay {
    flex: 0 0 auto;
    padding: 4px 10px;
    font-size: 12px;
}
.ae-tour-empty {
    color: var(--muted);
    font-size: 13px;
    font-style: italic;
    padding: 8px 10px;
}
.ae-tour-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}