/* ═══════════════════════════════════════════════════════════════════
   PlanIT — Dvelop IT brand stylesheet
   All colours use Bootstrap 5 / Phoenix CSS vars so dark mode works
═══════════════════════════════════════════════════════════════════ */

:root {
    --brand:            #0094ff;
    --brand-hover:      #007ad9;
    --brand-focus-ring: rgba(0, 148, 255, 0.28);
    --planit-radius:    10px;
    --planit-radius-sm: 7px;
}

html { position: relative; min-height: 100%; }

/* ── Focus rings ─────────────────────────────────────────────────── */
.btn:focus, .btn:active:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--brand-focus-ring);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:active {
    background-color: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
}
.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem var(--brand-focus-ring) !important;
}
.btn-outline-primary {
    color: var(--brand) !important;
    border-color: var(--brand) !important;
}
.btn-outline-primary:hover {
    background-color: var(--brand) !important;
    color: #fff !important;
}

/* ── Links ──────────────────────────────────────────────────────── */
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }

/* ── Form focus rings ────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 0.2rem var(--brand-focus-ring) !important;
}

/* ── User avatar (initials) ─────────────────────────────────────── */
.planit-avatar {
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    font-family: inherit;
}
.planit-avatar-sm  { width: 32px; height: 32px; font-size: .88rem; }
.planit-avatar-xl  { width: 52px; height: 52px; font-size: 1.4rem; }

/* ── Nav logo ───────────────────────────────────────────────────── */
.planit-nav-logo {
    height: 50px;
    width: auto;
    display: block;
    line-height: 1;
}
/* Prevent the brand container's large font-size from inflating line-height */
.navbar-brand { line-height: 1; display: flex; align-items: center; }

/* ── Nav active state ──────────────────────────────────────────── */
.navbar-vertical .nav-link.active {
    color: var(--brand) !important;
}

/* ── Sidebar overflow clip ───────────────────────────────────────── */
.navbar-vertical .navbar-vertical-content { overflow-x: hidden; }

/* ── Collapsed sidebar — hide text & sub-items ───────────────────── */
.navbar-vertical-collapsed .navbar-vertical .planit-nav-section,
.navbar-vertical-collapsed .navbar-vertical .planit-nav-arrow,
.navbar-vertical-collapsed .navbar-vertical .collapse {
    display: none !important;
}
.navbar-vertical-collapsed .navbar-vertical .planit-project-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    margin-left: .25rem;
    margin-right: .25rem;
}
.navbar-vertical-collapsed .navbar-vertical .planit-new-project-link {
    justify-content: center;
}

/* ── Login page ──────────────────────────────────────────────────── */
.login-page-wrapper {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden;
}
.login-video {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.login-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, .48); z-index: 1;
}
.login-content { position: relative; z-index: 2; width: 100%; }
.login-card {
    background: rgba(255, 255, 255, .1) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, .2) !important;
    border-radius: 16px;
    color: white;
}
.login-card h2,
.login-card h3,
.login-card label,
.login-card a { color: white !important; }
.login-card .form-control {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .3);
    color: white;
}
.login-card .form-control::placeholder { color: rgba(255, 255, 255, .52); }
.login-card .form-control:focus {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .65);
    color: white;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, .14);
}

/* ── Robot empty state ──────────────────────────────────────────── */
.robot-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
}
.robot-empty-video {
    width: 240px;
    height: 170px;
    object-fit: cover;
    border-radius: 18px;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 32px rgba(0,148,255,.18);
}

/* ── Empty-state shared ─────────────────────────────────────────── */
.planit-empty {
    text-align: center;
    padding: 4rem 1rem;
}
.planit-empty-icon {
    font-size: 2.8rem;
    line-height: 1;
    margin-bottom: 1rem;
    display: block;
}
.planit-empty h5 {
    font-weight: 700;
    color: var(--bs-body-color);
    margin-bottom: .4rem;
}

/* ── Colour swatch picker ────────────────────────────────────────── */
.color-swatches { display: flex; gap: .45rem; flex-wrap: wrap; }
.color-swatch {
    width: 28px; height: 28px;
    border-radius: 50%; border: none;
    cursor: pointer; outline: none; flex-shrink: 0;
    transition: transform .15s;
}
.color-swatch:hover { transform: scale(1.2); }

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes cardPopIn {
    0%   { opacity: 0; transform: scale(.8) translateY(14px); }
    65%  { transform: scale(1.03) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes slideInX {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes rowAppear {
    0%   { opacity: 0; transform: translateY(-5px); background: rgba(0,148,255,.12); }
    35%  { opacity: 1; transform: translateY(0); background: rgba(0,148,255,.12); }
    100% { background: transparent; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROJECT CARDS
═══════════════════════════════════════════════════════════════════ */

.proj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

.proj-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--planit-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .18s, transform .2s;
    cursor: pointer;
}
.proj-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, .11);
    transform: translateY(-4px);
}

.proj-card-accent { height: 4px; width: 100%; flex-shrink: 0; }

.proj-card-body { padding: 1.1rem 1.25rem .8rem; flex: 1; }

.proj-card-icon {
    width: 38px; height: 38px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--c) 14%, var(--bs-body-bg));
    color: var(--c);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.05rem;
    margin-bottom: .75rem;
    flex-shrink: 0;
}

.proj-card-name {
    font-weight: 700; font-size: .97rem;
    color: var(--bs-body-color);
    margin-bottom: .2rem; line-height: 1.35;
}

.proj-card-meta {
    font-size: .76rem;
    color: var(--bs-secondary-color);
}

.proj-card-footer {
    padding: .6rem 1.25rem .85rem;
    border-top: 1px solid var(--bs-border-color-subtle);
}

.proj-open-btn {
    font-size: .8rem; font-weight: 600;
    border: 1.5px solid; border-radius: 8px;
    background: transparent; padding: .25rem .75rem;
    text-decoration: none; display: inline-block;
    transition: background .12s, color .12s;
}
.proj-open-btn:hover {
    background: var(--c) !important;
    color: #fff !important;
}

.proj-card-new { animation: cardPopIn .38s cubic-bezier(.34, 1.56, .64, 1) both; }

/* ═══════════════════════════════════════════════════════════════════
   BOARD LIST
═══════════════════════════════════════════════════════════════════ */

.boards-list { display: flex; flex-direction: column; gap: .35rem; max-width: 700px; }

.board-item {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--planit-radius);
    display: flex; align-items: center;
    gap: .9rem; padding: .75rem 1rem;
    transition: box-shadow .12s, transform .14s;
}
.board-item:hover {
    box-shadow: 0 3px 14px rgba(0, 0, 0, .07);
    transform: translateX(4px);
}

.board-item-accent { width: 4px; height: 28px; border-radius: 3px; flex-shrink: 0; }

.board-item-name {
    font-weight: 600; font-size: .92rem; flex: 1;
    color: var(--bs-body-color);
}

.board-item-meta { font-size: .77rem; color: var(--bs-secondary-color); white-space: nowrap; }

.board-item-actions { opacity: .2; transition: opacity .12s; flex-shrink: 0; }
.board-item:hover .board-item-actions { opacity: 1; }

.board-item-new { animation: slideInX .22s ease-out both; }

/* ── Project pill tabs ───────────────────────────────────────────── */
.project-tabs { display: flex; gap: .35rem; flex-wrap: wrap; }

.project-tab {
    padding: .28rem .85rem;
    border-radius: 20px; font-size: .82rem; font-weight: 500;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    text-decoration: none;
    transition: background .12s, color .12s;
    border: 1.5px solid transparent;
    white-space: nowrap;
}
.project-tab:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); text-decoration: none; }
.project-tab.active { background: var(--brand); color: #fff !important; border-color: var(--brand); }

/* ═══════════════════════════════════════════════════════════════════
   MONDAY.COM-STYLE BOARD TABLE
═══════════════════════════════════════════════════════════════════ */

.planit-board {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--planit-radius);
    overflow: hidden;
    --g-color: var(--brand);
}

/* Group header row */
.planit-group-header {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px;
    background: var(--bs-body-bg);
    border-left: 6px solid var(--g-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.planit-group-chevron {
    color: var(--bs-secondary-color);
    display: flex; align-items: center;
    flex-shrink: 0;
}

.planit-group-name {
    font-weight: 700; font-size: .92rem;
    color: var(--g-color);
}

.planit-group-count {
    font-size: .71rem; font-weight: 600;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    padding: 2px 8px; border-radius: 20px;
    flex-shrink: 0;
}

/* Column headers */
.planit-col-headers {
    display: grid;
    grid-template-columns: 48px 1fr 120px 72px 110px;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    font-size: .67rem; font-weight: 700;
    color: var(--bs-secondary-color);
    text-transform: uppercase; letter-spacing: .08em;
    border-left: 6px solid transparent;
}
.planit-col-headers > div {
    padding: 7px 12px;
    border-right: 1px solid var(--bs-border-color);
}
.planit-col-headers > div:last-child { border-right: none; }

/* Item rows */
.planit-row {
    display: grid;
    grid-template-columns: 48px 1fr 120px 72px 110px;
    border-bottom: 1px solid var(--bs-border-color-subtle);
    background: var(--bs-body-bg);
    transition: background .1s;
    border-left: 6px solid transparent;
    cursor: default;
}
.planit-row:last-child { border-bottom: none; }
.planit-row:hover {
    background: var(--bs-tertiary-bg);
    border-left-color: var(--g-color);
}

.planit-cell {
    padding: 10px 12px;
    display: flex; align-items: center;
    border-right: 1px solid transparent;
}
.planit-row:hover .planit-cell { border-right-color: var(--bs-border-color-subtle); }
.planit-cell:last-child { border-right: none; }

/* Checkbox circle */
.planit-checkbox {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    flex-shrink: 0; cursor: pointer; margin: auto;
    transition: border-color .12s, transform .12s;
}
.planit-row:hover .planit-checkbox {
    border-color: var(--g-color);
    transform: scale(1.1);
}

/* Item number — appears on row hover */
.planit-item-num {
    font-size: .68rem; color: var(--bs-border-color);
    margin-right: 8px; flex-shrink: 0;
    opacity: 0; transition: opacity .12s;
    white-space: nowrap;
}
.planit-row:hover .planit-item-num { opacity: 1; }

.planit-item-name {
    font-weight: 500; flex: 1; font-size: .9rem;
    color: var(--bs-body-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.planit-item-date { font-size: .78rem; color: var(--bs-secondary-color); }

/* Empty rows */
.planit-empty-row {
    padding: 2.5rem 1rem;
    text-align: center;
    background: var(--bs-body-bg);
    border-left: 6px solid transparent;
    color: var(--bs-secondary-color);
    font-size: .88rem;
}

/* + Add Item row */
.planit-add-row {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    padding-left: calc(6px + 48px + 12px);
    color: var(--bs-secondary-color);
    cursor: pointer; font-size: .84rem; font-weight: 500;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color-subtle);
    border-left: 6px solid var(--g-color);
    transition: color .12s, background .12s;
    user-select: none;
}
.planit-add-row:hover {
    color: var(--g-color);
    background: color-mix(in srgb, var(--g-color) 5%, var(--bs-body-bg));
}

/* Inline add input row */
.planit-add-input-row {
    display: grid;
    grid-template-columns: 48px 1fr 120px 72px 110px;
    border-top: 1px solid var(--bs-border-color-subtle);
    background: var(--bs-body-bg);
    border-left: 6px solid var(--g-color);
}

.planit-add-input {
    border: none; outline: none; background: transparent;
    font-size: .9rem; font-weight: 500;
    color: var(--bs-body-color); width: 100%; padding: 2px 0;
    font-family: inherit;
}
.planit-add-input::placeholder { color: var(--bs-tertiary-color); }

/* New row animation */
.planit-row-new { animation: rowAppear .65s ease-out both; }

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR NAV TREE
═══════════════════════════════════════════════════════════════════ */

/* "PROJECTS" section header row */
.planit-nav-section {
    display: flex; align-items: center; justify-content: space-between;
    padding: .55rem 1.1rem .2rem;
    margin-top: .15rem;
}
.planit-nav-section-label {
    font-size: .64rem; font-weight: 700; letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}
.planit-nav-section-link {
    color: var(--bs-secondary-color);
    opacity: 0; transition: opacity .12s;
    display: flex; align-items: center;
    text-decoration: none;
}
.planit-nav-section:hover .planit-nav-section-link { opacity: 1; }
.planit-nav-section-link:hover { color: var(--brand); }

/* Normalise all vertical nav-links to same base size (My Work, Team, etc.) */
#navbarVerticalNav .nav-link {
    font-size: .87rem;
}

/* Project toggle link */
.planit-project-link {
    display: flex; align-items: center;
    padding: .38rem 1.1rem .38rem .9rem;
    gap: .55rem; text-decoration: none;
    border-radius: 8px; margin: 1px .45rem;
    transition: background .12s, color .12s;
    color: var(--bs-body-color) !important;
    font-weight: 600; font-size: .87rem;
    position: relative;
}
.planit-project-link:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color) !important;
    text-decoration: none;
}
.planit-project-link.expanded,
.planit-project-link[aria-expanded="true"] {
    color: var(--brand) !important;
}

/* Colored dot per project */
.planit-proj-dot {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0; display: inline-block;
}

/* Chevron arrow — rotates when expanded */
.planit-nav-arrow {
    margin-left: auto; flex-shrink: 0;
    color: var(--bs-secondary-color);
    display: flex; align-items: center;
    transition: transform .2s;
}
.planit-project-link[aria-expanded="true"] .planit-nav-arrow {
    transform: rotate(90deg);
}

/* Board sub-list */
.planit-board-list {
    padding: 0 .45rem .3rem 2.4rem;
    list-style: none; margin: 0;
}

/* Board link */
.planit-board-link {
    display: flex; align-items: center; gap: .5rem;
    padding: .29rem .65rem;
    border-radius: 7px;
    text-decoration: none;
    font-size: .83rem; font-weight: 500;
    color: var(--bs-body-color);
    transition: background .1s, color .1s;
    cursor: pointer;
}
.planit-board-link:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    text-decoration: none;
}
.planit-board-link.active {
    background: color-mix(in srgb, var(--brand) 10%, var(--bs-body-bg));
    color: var(--brand);
    font-weight: 600;
}

/* Board dot */
.planit-board-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--bs-border-color);
    flex-shrink: 0; display: inline-block;
    transition: transform .15s, background .15s;
}
.planit-board-link:hover .planit-board-dot { background: var(--bs-secondary-color); }

/* "+ New board" dot */
.planit-board-dot-add {
    width: 14px; height: 14px; border-radius: 50%;
    background: transparent;
    border: 1.5px solid currentColor;
    font-size: .75rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-weight: 700;
}
.planit-board-new-link {
    color: var(--bs-secondary-color) !important;
    margin-top: 1px;
}
.planit-board-new-link:hover {
    color: var(--brand) !important;
    background: color-mix(in srgb, var(--brand) 7%, var(--bs-body-bg));
}

/* "New project" link at bottom */
.planit-new-project-link {
    color: var(--bs-secondary-color) !important;
    font-size: .85rem;
}
.planit-new-project-link:hover {
    color: var(--brand) !important;
    background: color-mix(in srgb, var(--brand) 7%, var(--bs-body-bg));
}

/* ═══════════════════════════════════════════════════════════════════
   WORK ITEM DETAIL MODAL
═══════════════════════════════════════════════════════════════════ */

.wi-modal-accent {
    height: 4px; flex-shrink: 0;
    background: var(--brand);
    transition: background .2s;
}

.wi-modal-crumb {
    display: flex; align-items: center; gap: .32rem;
    font-size: .74rem; font-weight: 600;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.wi-modal-num {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    font-family: ui-monospace, monospace;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    padding: 2px 8px; border-radius: 20px;
    white-space: nowrap;
}

.wi-modal-title {
    font-size: 1.35rem; font-weight: 800;
    color: var(--bs-body-color); line-height: 1.28;
    margin-bottom: 1.2rem; word-break: break-word;
}

.wi-modal-props {
    display: flex; gap: .6rem; flex-wrap: wrap;
    margin-bottom: .25rem;
}
.wi-modal-prop {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color-subtle);
    border-radius: var(--planit-radius-sm);
    padding: .45rem .85rem; min-width: 110px;
    transition: border-color .12s;
}
.wi-modal-prop:hover  { border-color: var(--bs-border-color); }
.wi-modal-prop-ghost  { opacity: .5; }

.wi-modal-prop-label {
    font-size: .6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--bs-secondary-color); margin-bottom: .2rem;
}
.wi-modal-prop-val {
    font-size: .86rem; font-weight: 600;
    color: var(--bs-body-color);
}
.wi-modal-prop-empty {
    color: var(--bs-secondary-color);
    font-weight: 500; font-style: italic; font-size: .82rem;
}

.wi-modal-divider {
    border-color: var(--bs-border-color-subtle);
    margin: 1.2rem 0;
}

.wi-modal-section { margin-bottom: .25rem; }
.wi-modal-section-hd {
    display: flex; align-items: center; gap: .4rem;
    font-size: .82rem; font-weight: 700;
    color: var(--bs-body-color); margin-bottom: .65rem;
}
.wi-modal-soon-pill {
    font-size: .58rem; font-weight: 700; text-transform: uppercase;
    background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
    border-radius: 20px; padding: 2px 7px; margin-left: .15rem;
}

.wi-modal-placeholder {
    border: 1.5px dashed var(--bs-border-color);
    border-radius: var(--planit-radius-sm);
    padding: .9rem 1.1rem;
}
.wi-modal-placeholder-text {
    font-size: .84rem; font-style: italic;
    color: var(--bs-tertiary-color);
}

.wi-modal-activity-empty {
    display: flex; flex-direction: column;
    align-items: center; gap: .5rem;
    padding: 1.75rem 1rem;
    color: var(--bs-secondary-color);
    font-size: .82rem; opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════════
   TEAM PAGE
═══════════════════════════════════════════════════════════════════ */

.team-table {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--planit-radius);
    overflow: hidden;
    max-width: 860px;
}

.team-table-header {
    display: grid;
    grid-template-columns: 2.5fr 2fr 100px;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 8px 16px;
    font-size: .64rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--bs-secondary-color);
}

.team-row {
    display: grid;
    grid-template-columns: 2.5fr 2fr 100px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--bs-border-color-subtle);
    background: var(--bs-body-bg);
    transition: background .1s;
}
.team-row:last-child { border-bottom: none; }
.team-row:hover      { background: var(--bs-tertiary-bg); }
.team-row-new        { animation: rowAppear .45s ease-out both; }

.team-table--ws .team-table-header,
.team-table--ws .team-row { grid-template-columns: 2.5fr 2fr 100px 52px; }

.btn-ghost-danger {
    background: none; border: none; cursor: pointer;
    color: var(--bs-danger, #dc3545);
    padding: 4px 6px; border-radius: 6px;
    opacity: 0; transition: opacity .12s, background .1s;
    display: flex; align-items: center;
}
.team-row:hover .btn-ghost-danger { opacity: 1; }
.btn-ghost-danger:hover { background: color-mix(in srgb, #dc3545 12%, transparent); }

.team-cell {
    display: flex; align-items: center; gap: .6rem;
}

.team-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    color: #fff; font-weight: 700; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.team-member-info { line-height: 1.25; }
.team-name        { font-weight: 600; font-size: .88rem; color: var(--bs-body-color); }
.team-email-sub   { font-size: .73rem; color: var(--bs-secondary-color); }
.team-email       { font-size: .84rem; color: var(--bs-secondary-color); }

.team-status-badge {
    font-size: .68rem; font-weight: 700;
    padding: 3px 10px; border-radius: 20px;
    background: color-mix(in srgb, var(--sc, var(--brand)) 13%, var(--bs-body-bg));
    color: var(--sc, var(--brand));
}

/* ═══════════════════════════════════════════════════════════════════
   PROJECT CARD — MEMBER CHIPS
═══════════════════════════════════════════════════════════════════ */

.proj-card-members {
    display: flex; align-items: center;
    flex-wrap: nowrap; overflow: hidden;
}

.proj-member-chip {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--mc, var(--bs-secondary-bg));
    color: #fff; font-weight: 700; font-size: .68rem;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bs-body-bg);
    margin-left: -5px; flex-shrink: 0;
    position: relative; z-index: 1;
    transition: transform .12s, z-index 0s;
    cursor: default;
}
.proj-member-chip:first-child { margin-left: 0; }
.proj-member-chip:hover { transform: scale(1.18); z-index: 2; }

.proj-member-more {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .63rem; font-weight: 700;
}

.proj-member-manage-btn {
    width: 24px; height: 24px; border-radius: 50%;
    border: 1.5px dashed var(--bs-border-color);
    background: transparent;
    color: var(--bs-secondary-color);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    margin-left: 6px;
    transition: border-color .12s, color .12s, background .12s;
    padding: 0;
}
.proj-member-manage-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 8%, var(--bs-body-bg));
}

/* ── Members modal rows ─────────────────────────────────────────── */
.members-modal-row {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: .6rem 0;
    border-bottom: 1px solid var(--bs-border-color-subtle);
}
.members-modal-row:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════════
   BOARD ACCORDION (Board/Index)
═══════════════════════════════════════════════════════════════════ */

.board-accordion {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.board-acc-panel {
    border: 1px solid var(--bs-border-color-subtle);
    border-radius: var(--planit-radius);
    overflow: hidden;
    background: var(--bs-body-bg);
    transition: box-shadow .15s;
}
.board-acc-panel:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

.board-acc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    background: var(--bs-body-bg);
    transition: background .1s;
}
.board-acc-header:hover { background: var(--bs-tertiary-bg); }

.board-acc-chevron {
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    transition: transform .2s;
    flex-shrink: 0;
}
.board-acc-panel.open .board-acc-chevron {
    transform: rotate(90deg);
}

.board-acc-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.board-acc-name {
    font-weight: 600;
    font-size: .9rem;
    color: var(--bs-body-color);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-acc-count {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}

.board-acc-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity .12s;
    flex-shrink: 0;
}
.board-acc-header:hover .board-acc-actions { opacity: 1; }

.board-acc-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color);
    cursor: pointer;
    text-decoration: none;
    transition: background .1s, color .1s;
    padding: 0;
}
.board-acc-action-btn:hover {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.board-acc-body {
    border-top: 1px solid var(--bs-border-color-subtle);
}

/* reuse planit-board table styles inside accordion */
.board-acc-body .planit-col-headers {
    border-top: none;
}
.board-acc-body .planit-row:last-child {
    border-bottom: none;
}

.board-acc-loading {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    font-size: .84rem;
    color: var(--bs-secondary-color);
}

/* ═══════════════════════════════════════════════════════════════════
   WORK ITEM — ASSIGNEE + COMPLETE
═══════════════════════════════════════════════════════════════════ */

.planit-assignee-chip {
    width: 24px; height: 24px; border-radius: 50%;
    color: #fff; font-weight: 700; font-size: .65rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; cursor: default;
}
.planit-assignee-more {
    background: var(--bs-secondary-bg) !important;
    color: var(--bs-secondary-color) !important;
    font-size: .6rem;
}

.planit-unassigned {
    color: var(--bs-secondary-color);
    font-size: .82rem;
}

.planit-checkbox.checked {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
}
.planit-checkbox.checked::after {
    content: '';
    display: block;
    width: 5px; height: 8px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg) translate(1px, -1px);
    margin: auto;
}

.planit-row-done .planit-item-name {
    text-decoration: line-through;
    opacity: .5;
}
.planit-row-done .planit-item-num,
.planit-row-done .planit-item-date {
    opacity: .4;
}

/* ── Status pill ──────────────────────────────────────────────── */
.wi-status-pill {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 20px;
    font-size: .7rem; font-weight: 600;
    white-space: nowrap; cursor: pointer;
    border: none; outline: none;
    transition: filter .12s;
    max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}
.wi-status-pill:hover { filter: brightness(1.12); }
.wi-status-empty {
    display: inline-flex; align-items: center;
    font-size: .7rem; color: var(--bs-tertiary-color);
    cursor: pointer; gap: 4px;
    padding: 2px 4px; border-radius: 4px;
    transition: color .12s;
}
.wi-status-empty:hover { color: var(--bs-secondary-color); }

/* Status picker dropdown */
.wi-status-backdrop {
    position: fixed; inset: 0; z-index: 1049;
    background: rgba(0,0,0,.35);
    display: none;
}
.wi-status-backdrop.open { display: block; }

.wi-status-picker {
    position: fixed; z-index: 1060;
    background: var(--phoenix-body-bg, #fff);
    border: 1px solid var(--phoenix-border-color, #cbd0dd);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    min-width: 180px; max-width: 240px;
    max-height: 320px; overflow-y: auto;
    padding: 4px 0;
    display: none;
}
.wi-status-picker.open { display: block; }
.wi-status-picker-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; cursor: pointer;
    font-size: .82rem; color: var(--phoenix-body-color, #31374a);
    transition: background .08s;
}
.wi-status-picker-item:hover { background: var(--phoenix-tertiary-bg, #f5f5f5); }
.wi-status-picker-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.wi-status-picker-item.active { font-weight: 600; }
.wi-status-picker-divider {
    height: 1px; background: var(--phoenix-border-color, #cbd0dd); margin: 4px 0; opacity: .5;
}
.wi-status-picker-add {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; cursor: pointer;
    font-size: .82rem; color: var(--phoenix-secondary-color, #949db5);
    transition: background .08s;
}
.wi-status-picker-add:hover { background: var(--phoenix-tertiary-bg, #f5f5f5); color: var(--phoenix-body-color, #31374a); }

/* Add-status inline form */
.wi-status-add-form {
    padding: 8px 12px;
    display: none;
}
.wi-status-add-form.open { display: block; }
.wi-status-add-row {
    display: flex; align-items: center; gap: 6px;
}
.wi-status-add-input {
    flex: 1; min-width: 0;
    border: 1px solid var(--phoenix-border-color, #cbd0dd);
    border-radius: 6px; padding: 4px 8px;
    font-size: .8rem; background: var(--phoenix-body-bg, #fff);
    color: var(--phoenix-body-color, #31374a); outline: none;
}
.wi-status-add-input:focus { border-color: var(--brand); }
.wi-status-add-swatches {
    display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px;
}
.wi-status-add-swatch {
    width: 16px; height: 16px; border-radius: 50%;
    cursor: pointer; flex-shrink: 0; border: 2px solid transparent;
    transition: transform .1s, border-color .1s;
}
.wi-status-add-swatch:hover { transform: scale(1.2); }
.wi-status-add-swatch.selected { border-color: var(--phoenix-body-color, #31374a); }
.wi-status-add-save {
    padding: 3px 10px; border-radius: 6px; font-size: .78rem;
    background: var(--brand); color: #fff; border: none; cursor: pointer;
    flex-shrink: 0;
}
.wi-status-add-save:hover { background: var(--brand-dark, #0080e0); }

/* Workspace switcher */
.planit-ws-switcher { position: relative; }
.planit-ws-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 8px; border: none;
    background: var(--phoenix-tertiary-bg, rgba(255,255,255,.06));
    color: var(--phoenix-body-color, inherit);
    font-size: .82rem; font-weight: 600; cursor: pointer;
    transition: background .12s;
    text-align: left;
}
.planit-ws-btn:hover { background: var(--phoenix-tertiary-bg, rgba(255,255,255,.1)); }
.planit-ws-btn::after { margin-left: auto; }
.planit-ws-icon { display: flex; align-items: center; flex-shrink: 0; opacity: .7; }
.planit-ws-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.planit-ws-divider {
    margin: 4px 12px 8px;
    border-color: var(--phoenix-border-color, rgba(255,255,255,.1));
    opacity: .4;
}

/* Assignee select in modal */
.wi-assignee-select {
    display: block;
    width: 100%;
    margin-top: 6px;
    font-size: .8rem;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
}
.wi-assignee-select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════════
   MY WORK SCREEN
═══════════════════════════════════════════════════════════════════ */

/* Empty state */
.mywork-empty {
    display: flex; flex-direction: column; align-items: center;
    padding: 5rem 2rem; text-align: center;
}
.mywork-empty-svg { width: 200px; height: 160px; }

/* ── My Work hero card ──────────────────────────────────────────── */
.mw-card {
    border: 1px solid var(--bs-border-color-subtle);
    border-radius: var(--planit-radius);
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
    margin-bottom: 2rem;
}
.mw-card-accent { height: 4px; }
.mw-card-body   { padding: 1.5rem 2rem; background: var(--bs-body-bg); }

/* Header: rank badge ← → level pill */
.mw-header {
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap;
    gap: .6rem; margin-bottom: 1.35rem;
}
.mw-rank-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: color-mix(in srgb, var(--brand) 11%, var(--bs-body-bg));
    color: var(--brand);
    padding: 4px 13px; border-radius: 999px;
    font-size: .8rem; font-weight: 700;
}
.mw-level-pill {
    display: inline-flex; align-items: center; gap: .45rem;
}
.mw-level-chip {
    display: inline-flex; align-items: center;
    padding: .22rem .65rem; border-radius: 999px;
    font-size: .68rem; font-weight: 800; letter-spacing: .07em; color: #fff;
}
.mw-level-name { font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); }

/* Progress section */
.mw-progress-section { margin-bottom: 1.4rem; }
.mw-progress-header {
    display: flex; align-items: baseline;
    justify-content: space-between; flex-wrap: wrap;
    gap: .5rem; margin-bottom: .65rem;
}
.mw-pct {
    font-size: 2.6rem; font-weight: 900;
    color: var(--brand); line-height: 1;
}
.mw-pct-sym { font-size: 1.4rem; font-weight: 700; }
.mw-pct-label {
    font-size: .88rem; font-weight: 600;
    color: var(--bs-secondary-color); margin-left: .15rem;
}
.mw-pct-sub { font-size: .82rem; color: var(--bs-secondary-color); }
.mw-bar-wrap {
    height: 10px; border-radius: 5px;
    background: var(--bs-border-color-subtle); overflow: hidden;
}
.mw-bar-fill {
    height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, var(--brand-hover), var(--brand));
    transition: width .7s cubic-bezier(.4,0,.2,1);
}

/* KPI tiles */
.mw-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem; margin-bottom: 1.25rem;
}
.mw-kpi {
    position: relative; overflow: hidden;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color-subtle);
    border-radius: var(--planit-radius-sm);
    padding: .85rem 1rem .85rem 1.2rem;
    display: flex; flex-direction: column; gap: 2px;
}
.mw-kpi::before {
    content: ''; position: absolute;
    inset: 0 auto 0 0; width: 3px;
    background: var(--bs-border-color);
    border-radius: var(--planit-radius-sm) 0 0 var(--planit-radius-sm);
}
.mw-kpi-done::before  { background: var(--brand); }
.mw-kpi-rem::before   { background: #f39c12; }
.mw-kpi-today::before { background: #2ecc71; }
.mw-kpi-icon { color: var(--bs-secondary-color); opacity: .55; margin-bottom: 2px; }
.mw-kpi-done  .mw-kpi-icon { color: var(--brand); opacity: 1; }
.mw-kpi-today .mw-kpi-icon { color: #2ecc71;       opacity: 1; }
.mw-kpi-val {
    font-size: 1.85rem; font-weight: 900;
    line-height: 1; color: var(--bs-body-color);
}
.mw-kpi-done  .mw-kpi-val { color: var(--brand); }
.mw-kpi-today .mw-kpi-val { color: #2ecc71; }
.mw-kpi-label {
    font-size: .67rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--bs-secondary-color);
}

/* Gamification footer strip */
.mw-footer {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color-subtle);
}
.mw-xp-bar-wrap {
    flex: 0 0 110px; height: 6px;
    background: var(--bs-border-color-subtle);
    border-radius: 3px; overflow: hidden;
}
.mw-xp-fill {
    height: 100%; border-radius: 3px;
    transition: width .7s cubic-bezier(.4,0,.2,1);
}
.mw-footer-text { font-size: .74rem; color: var(--bs-secondary-color); }
.mw-footer-sep  { font-size: .74rem; color: var(--bs-border-color); }
.mw-footer-link { font-size: .74rem; color: var(--brand); text-decoration: none; }
.mw-footer-link:hover { text-decoration: underline; }
.mw-badge-pip {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; background: var(--bs-border-color);
}
.mw-badge-pip.earned { background: var(--brand); }

/* Make items clickable */
.mywork-item { cursor: pointer; }

/* ── Project groups ────────────────────────────────────────────── */
.mywork-projects {
    display: flex; flex-direction: column; gap: 1.25rem;
    margin-bottom: 2rem;
}

.mywork-project-group {
    border: 1px solid var(--bs-border-color-subtle);
    border-radius: var(--planit-radius);
    overflow: hidden;
    background: var(--bs-body-bg);
    transition: box-shadow .15s;
}
.mywork-project-group:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

.mywork-project-done { opacity: .75; }

.mywork-project-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color-subtle);
}

.mywork-proj-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.mywork-proj-name {
    font-weight: 700; font-size: .88rem;
    color: var(--bs-body-color); flex: 1;
}

.mywork-proj-progress {
    display: flex; align-items: center; gap: 8px;
}
.mywork-proj-bar {
    width: 80px; height: 5px; border-radius: 3px;
    background: var(--bs-border-color-subtle);
    overflow: hidden;
}
.mywork-proj-bar-fill {
    height: 100%; border-radius: 3px;
    transition: width .5s ease;
}
.mywork-proj-pct {
    font-size: .72rem; color: var(--bs-secondary-color);
    width: 28px; text-align: right;
}

/* ── Board section ─────────────────────────────────────────────── */
.mywork-board-section {
    padding: 0;
}
.mywork-board-section + .mywork-board-section {
    border-top: 1px solid var(--bs-border-color-subtle);
}

.mywork-board-label {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 16px 4px;
    font-size: .72rem; font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: uppercase; letter-spacing: .05em;
}
.mywork-board-link {
    color: var(--bs-secondary-color);
    margin-left: auto;
    opacity: 0; transition: opacity .15s;
}
.mywork-board-label:hover .mywork-board-link { opacity: 1; }

/* ── Work items ─────────────────────────────────────────────────── */
.mywork-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px;
    border-top: 1px solid var(--bs-border-color-subtle);
    transition: background .1s;
}
.mywork-item:hover { background: var(--bs-tertiary-bg); }
.mywork-board-section > .mywork-item:first-of-type { border-top: none; }

.mywork-check {
    width: 20px; height: 20px; flex-shrink: 0;
    background: transparent; border: none; padding: 0;
    color: var(--bs-border-color);
    cursor: pointer;
    transition: color .15s;
    display: flex; align-items: center; justify-content: center;
}
.mywork-check:hover { color: var(--brand); }
.mywork-check.checked { color: var(--brand); }
.mywork-check.checked .mywork-check-tick { opacity: 1; }
.mywork-check-tick { opacity: 0; transition: opacity .15s; }
.mywork-check svg { width: 20px; height: 20px; }

.mywork-item-name {
    flex: 1; min-width: 0;
    font-size: .88rem; color: var(--bs-body-color);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: opacity .3s, text-decoration .3s;
}
.mywork-item-meta {
    font-size: .72rem; color: var(--bs-secondary-color);
    flex-shrink: 0;
}
.mywork-item-date {
    font-size: .72rem; color: var(--bs-secondary-color);
    flex-shrink: 0; min-width: 55px; text-align: right;
}

.mywork-item-done .mywork-item-name {
    text-decoration: line-through;
    opacity: .45;
}
.mywork-item-done .mywork-item-meta,
.mywork-item-done .mywork-item-date { opacity: .4; }

/* ── All done banner ────────────────────────────────────────────── */
.mywork-all-done { animation: rowAppear .5s ease both; }
.mywork-all-done-appear { animation: rowAppear .5s ease both; }
.mywork-done-card {
    text-align: center;
    padding: 2rem;
    border: 1px solid var(--phoenix-border-color, #e3e6ea);
    border-radius: 16px;
    background: color-mix(in srgb, #2ecc71 7%, var(--phoenix-body-bg, #fff));
}
.mywork-done-video {
    width: 240px;
    height: 170px;
    object-fit: contain;
    border-radius: 12px;
    margin-bottom: 1rem;
    display: block;
    margin-inline: auto;
}

@media (max-width: 768px) {
    .mw-card-body { padding: 1.1rem 1.1rem; }
    .mw-kpi-grid  { grid-template-columns: repeat(2, 1fr); }
    .mywork-proj-bar { width: 50px; }
}

/* ── Comments ─────────────────────────────────────────────── */
.wi-comments-list { display: flex; flex-direction: column; gap: .25rem; }
.wi-comment {
    padding: .5rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.wi-comment:last-child { border-bottom: none; }
.wi-comment-body {
    padding-left: 2rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--bs-body-color);
}
.wi-comment-compose { margin-top: .25rem; }
.wi-comment-delete-btn { opacity: 0; transition: opacity .15s; }
.wi-comment:hover .wi-comment-delete-btn { opacity: 1; }

/* ── Profile ──────────────────────────────────────────────── */
.profile-hero-accent {
    height: 6px;
    width: 100%;
}

.profile-hero-avatar {
    width: 72px !important;
    height: 72px !important;
    font-size: 1.75rem !important;
    flex-shrink: 0;
}

.profile-level-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .65rem;
    border-radius: 999px;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.profile-xp-bar {
    height: 8px;
    background: var(--bs-secondary-bg);
    border-radius: 999px;
    overflow: hidden;
}

.profile-xp-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .4s ease;
}

.profile-stat-num {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--brand);
    line-height: 1;
    margin-bottom: .3rem;
}

.profile-stat-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.profile-stat-xp { font-size: .72rem; }

.profile-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.profile-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem .75rem 1rem;
    border-radius: 14px;
    background: var(--bs-tertiary-bg);
    border: 2px solid transparent;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    cursor: default;
}

.profile-badge-earned {
    border-color: var(--brand);
}

.profile-badge-earned:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 148, 255, .15);
}

.profile-badge-locked {
    opacity: .4;
    filter: grayscale(1);
}

.profile-badge-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
}

.profile-badge-icon svg { width: 22px; height: 22px; }

.profile-badge-name {
    font-weight: 700;
    font-size: .8rem;
    margin-bottom: .2rem;
    line-height: 1.2;
}

.profile-badge-desc {
    font-size: .7rem;
    color: var(--bs-secondary-color);
    margin-bottom: .35rem;
    line-height: 1.3;
}

.profile-badge-date {
    font-size: .65rem;
    color: var(--bs-tertiary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-xp-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    font-size: .8rem;
    color: var(--bs-body-color);
}

/* ── Badge unlock toasts ─────────────────────────────────────── */
.planit-toast-container {
    position: fixed;
    top: calc(var(--phoenix-navbar-top-height, 4rem) + .75rem);
    right: 1rem;
    z-index: 99990;
    display: flex; flex-direction: column; gap: .55rem;
    pointer-events: none;
    max-width: 320px;
    isolation: isolate;
}

.planit-badge-toast {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: .85rem 1.1rem;
    background-color: var(--phoenix-body-bg, #fff);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--brand);
    border-radius: var(--planit-radius);
    box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.22);
    pointer-events: all;
    opacity: 0;
    transform: translateX(calc(100% + 1rem));
    transition: opacity .32s ease, transform .32s cubic-bezier(.22,.61,.36,1);
    will-change: transform, opacity;
}
.planit-badge-toast.visible {
    opacity: 1;
    transform: translateX(0);
}

.pbt-icon-wrap {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand) 12%, var(--bs-body-bg));
    display: flex; align-items: center; justify-content: center;
    color: var(--brand);
}
.pbt-icon-wrap svg { width: 16px; height: 16px; }

.pbt-body { min-width: 0; }
.pbt-eyebrow {
    font-size: .63rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--brand); margin-bottom: .1rem;
}
.pbt-name {
    font-size: .9rem; font-weight: 700;
    color: var(--bs-body-color); line-height: 1.2;
}
.pbt-desc {
    font-size: .76rem; color: var(--bs-secondary-color);
    margin-top: .15rem;
}

/* ── Work item description editor ───────────────────────────── */
.wi-desc-wrap { position: relative; }

.wi-desc-view {
    min-height: 2.4rem;
    padding: .55rem .75rem;
    border-radius: var(--planit-radius-sm);
    border: 1.5px solid transparent;
    font-size: .88rem; line-height: 1.6;
    color: var(--bs-body-color);
    cursor: pointer;
    white-space: pre-wrap; word-break: break-word;
    transition: border-color .12s, background .12s;
}
.wi-desc-view:hover {
    border-color: var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}
.wi-desc-empty .wi-desc-placeholder {
    font-style: italic;
    color: var(--bs-tertiary-color);
    font-size: .84rem;
}

.wi-desc-ta {
    display: block; width: 100%; min-height: 110px;
    padding: .55rem .75rem;
    border: 1.5px solid var(--brand);
    border-radius: var(--planit-radius-sm);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .88rem; line-height: 1.6;
    resize: vertical; outline: none;
    box-shadow: 0 0 0 3px var(--brand-focus-ring);
    font-family: inherit;
}

.wi-desc-actions {
    display: flex; align-items: center; gap: .5rem;
    margin-top: .45rem;
}
.wi-desc-hint {
    font-size: .7rem; color: var(--bs-tertiary-color);
    margin-left: auto;
}

/* ── Cross-board drag-and-drop ───────────────────────────────── */
.planit-drag-handle {
    opacity: 0;
    cursor: grab;
    font-size: .85rem;
    color: var(--bs-secondary-color);
    line-height: 1;
    user-select: none;
    flex-shrink: 0;
    margin-right: 4px;
    transition: opacity .15s;
}
.planit-row:hover .planit-drag-handle { opacity: .45; }
.planit-drag-handle:active { cursor: grabbing; }
.planit-row.wi-dragging { opacity: .25; }
.board-acc-panel.drop-over > .board-acc-header {
    background: rgba(0, 148, 255, .07);
    outline: 2px dashed var(--brand);
    outline-offset: -2px;
    border-radius: var(--planit-radius-sm);
}

/* Inline assignee picker */
.wi-assignee-picker {
    position: fixed; z-index: 1060;
    background: var(--phoenix-body-bg, #fff);
    border: 1px solid var(--phoenix-border-color, #cbd0dd);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    min-width: 190px; max-width: 260px;
    max-height: 300px; overflow-y: auto;
    padding: 4px 0;
    display: none;
}
.wi-assignee-picker.open { display: block; }
.wi-assignee-picker-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; cursor: pointer;
    font-size: .82rem; color: var(--phoenix-body-color, #31374a);
    transition: background .08s;
}
.wi-assignee-picker-item:hover { background: var(--phoenix-tertiary-bg, #f5f5f5); }
.wi-assignee-picker-item.assigned { font-weight: 600; }
.wi-assignee-chip-sm {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; color: #fff;
}
.wi-assignee-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wi-assignee-check { margin-left: auto; flex-shrink: 0; color: var(--brand); }
.wi-assignee-picker-empty {
    padding: 8px 12px; font-size: .82rem;
    color: var(--phoenix-secondary-color, #949db5);
}
.planit-assignee-cell { cursor: pointer; }
.planit-assignee-chip-xs {
    width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .6rem; font-weight: 700; color: #fff; vertical-align: middle;
}

/* ── Work item attachments ───────────────────────────────────── */
.wi-attachment-list { display: flex; flex-direction: column; gap: 6px; }
.wi-attachment-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    background: var(--phoenix-tertiary-bg, #f5f6f7);
    border-radius: 6px;
    font-size: .82rem;
}
.wi-attachment-icon { flex-shrink: 0; color: var(--bs-secondary-color); }
.wi-attachment-info { flex: 1; min-width: 0; }
.wi-attachment-name {
    display: block; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--bs-body-color); text-decoration: none;
}
.wi-attachment-name:hover { text-decoration: underline; }
.wi-attachment-meta {
    display: flex; align-items: center; gap: 5px;
    font-size: .74rem; color: var(--bs-secondary-color); margin-top: 2px;
}
.wi-attachment-delete-btn {
    flex-shrink: 0; background: none; border: none; padding: 4px;
    color: var(--bs-secondary-color); cursor: pointer; border-radius: 4px;
    opacity: 0; transition: opacity .12s, color .12s;
}
.wi-attachment-item:hover .wi-attachment-delete-btn { opacity: 1; }
.wi-attachment-delete-btn:hover { color: var(--bs-danger); }
.wi-attachment-upload { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.wi-attachment-upload-label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .8rem; cursor: pointer;
    color: var(--brand); font-weight: 500;
    padding: 4px 10px;
    border: 1px dashed var(--brand);
    border-radius: 5px;
    transition: background .1s;
}
.wi-attachment-upload-label:hover { background: rgba(0,148,255,.06); }
.wi-attachment-upload-hint {
    font-size: .72rem; color: var(--bs-secondary-color);
}

/* ── Notification bell badge ─────────────────────────────────── */
.notif-bell-badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    border-radius: 999px;
    background: #e74c3c;
    color: #fff;
    font-size: .6rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    pointer-events: none;
    line-height: 1;
}

/* ── Notification dropdown panel ────────────────────────────── */
.notif-dropdown {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    min-width: 340px;
    max-width: min(340px, calc(100vw - 1rem));
    padding: 0 !important;
}

/* ── Notification list items ─────────────────────────────────── */
.notif-item {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--bs-border-color-subtle);
    cursor: pointer;
    transition: background .12s;
    position: relative;
    text-decoration: none;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bs-tertiary-bg); }
.notif-item.unread { background: color-mix(in srgb, var(--brand) 5%, var(--bs-body-bg)); }
.notif-item.unread:hover { background: color-mix(in srgb, var(--brand) 9%, var(--bs-body-bg)); }

.notif-icon-wrap {
    flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 8px;
    background: color-mix(in srgb, var(--brand) 12%, var(--bs-body-bg));
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.notif-content { flex: 1; min-width: 0; }
.notif-msg {
    font-size: .82rem; color: var(--bs-body-color);
    line-height: 1.4; word-break: break-word;
}
.notif-wi-name {
    display: inline-flex; align-items: center; gap: .22rem;
    margin-top: .28rem;
    font-size: .72rem; font-weight: 600; color: var(--brand);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-time {
    margin-top: .22rem;
    font-size: .68rem; color: var(--bs-secondary-color);
}
.notif-unread-dot {
    flex-shrink: 0;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand);
    margin-top: 7px;
    opacity: 0;
    transition: opacity .15s;
}
.notif-item.unread .notif-unread-dot { opacity: 1; }

/* ── @mention highlight ──────────────────────────────────────── */
.mention-tag { color: var(--brand); font-weight: 600; }

/* ── Mention notification toast ──────────────────────────────── */
.planit-notif-toast {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .85rem 1.1rem;
    background-color: var(--phoenix-body-bg, #fff);
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--brand);
    border-radius: var(--planit-radius);
    box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.22);
    pointer-events: all;
    opacity: 0;
    transform: translateX(calc(100% + 1rem));
    transition: opacity .32s ease, transform .32s cubic-bezier(.22,.61,.36,1);
    will-change: transform, opacity;
}
.planit-notif-toast.visible { opacity: 1; transform: translateX(0); }

.pnt-icon {
    flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 8px;
    background: color-mix(in srgb, var(--brand) 12%, var(--bs-body-bg));
    display: flex; align-items: center; justify-content: center;
}
.pnt-body { min-width: 0; }
.pnt-title {
    font-size: .7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--brand); margin-bottom: .1rem;
}
.pnt-msg { font-size: .84rem; color: var(--bs-body-color); line-height: 1.35; }


/* -- PR card --------------------------------------------------- */
.wi-pr-card {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .6rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background: var(--bs-tertiary-bg);
    position: relative;
}
.wi-pr-card--error { border-color: rgba(231,76,60,.3); background: rgba(231,76,60,.04); }
.wi-pr-card-body { min-width: 0; flex: 1; }
.wi-pr-card-title {
    font-size: .84rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: .4rem;
}
.wi-pr-card-title-link {
    color: var(--bs-body-color); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wi-pr-card-title-link:hover { color: var(--brand); text-decoration: underline; }
.wi-pr-card-meta { font-size: .75rem; color: var(--bs-secondary-color); margin-top: .15rem; }
.wi-pr-card-link { font-size: .75rem; color: var(--brand); text-decoration: none; }
.wi-pr-card-link:hover { text-decoration: underline; }
.wi-pr-status-badge {
    display: inline-block; padding: .1rem .45rem;
    border-radius: 20px; font-size: .68rem; font-weight: 700;
    color: #fff; white-space: nowrap; flex-shrink: 0;
}
.wi-pr-unlink-btn {
    background: transparent; border: none; padding: .2rem; cursor: pointer;
    color: var(--bs-secondary-color); flex-shrink: 0; border-radius: 4px;
    opacity: 0; transition: opacity .15s;
    display: flex; align-items: center;
}
.wi-pr-card:hover .wi-pr-unlink-btn { opacity: 1; }
.wi-pr-unlink-btn:hover { color: #e74c3c; background: rgba(231,76,60,.08); }

/* ── View toggle ──────────────────────────────────────────────── */
.planit-view-btn {
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    padding: .32rem .6rem;
    background: var(--bs-body-bg);
    line-height: 1;
}
.planit-view-btn.active {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
.planit-view-btn:not(.active):hover {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* ── Kanban view ──────────────────────────────────────────────── */
.planit-kanban {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    align-items: flex-start;
    padding-bottom: 1.5rem;
    min-height: 120px;
}
.pk-col {
    flex: 0 0 270px;
    min-width: 0;
    background: var(--phoenix-tertiary-bg, #f5f5f5);
    border-radius: 10px;
    border: 1px solid var(--phoenix-border-color, #cbd0dd);
    /* top border colour is set inline per column */
    border-top-width: 3px;
}
.pk-col-header {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--phoenix-border-color, #cbd0dd);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--phoenix-body-color, #31374a);
}
.pk-col-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pk-col-count {
    font-size: .7rem;
    background: var(--bs-secondary-bg);
    border-radius: 20px;
    padding: .1rem .42rem;
    color: var(--bs-secondary-color);
    font-weight: 500;
    min-width: 1.4rem;
    text-align: center;
}
.pk-cards {
    padding: .45rem .45rem .3rem;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.pk-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 7px;
    padding: .55rem .7rem;
    cursor: pointer;
    transition: box-shadow .14s, border-color .14s;
}
.pk-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.09);
    border-color: var(--brand);
}
.pk-card-name {
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: .3rem;
    color: var(--bs-body-color);
    word-break: break-word;
}
.pk-card-done .pk-card-name {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}
.pk-card-footer {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.pk-card-num { font-size: .72rem; color: var(--bs-secondary-color); }
.pk-card-assignees { display: flex; gap: .2rem; margin-left: auto; }
.pk-add-trigger {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .4rem;
    border-radius: 5px;
    cursor: pointer;
    color: var(--bs-secondary-color);
    font-size: .78rem;
    border: none;
    background: transparent;
    width: 100%;
    transition: background .12s;
}
.pk-add-trigger:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
.pk-add-input {
    width: 100%;
    font-size: .82rem;
    border: 1.5px solid var(--brand);
    border-radius: 5px;
    padding: .3rem .5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    outline: none;
    margin-bottom: .25rem;
}
.planit-assignee-cell { cursor: pointer; }

/* ── Inline assignee picker ───────────────────────────────────── */
.wi-assignee-picker {
    position: fixed;
    z-index: 1060;
    background: var(--phoenix-body-bg, #fff);
    border: 1px solid var(--phoenix-border-color, #cbd0dd);
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,.14);
    min-width: 230px;
    max-width: 300px;
    display: none;
    overflow: hidden;
}
.wi-assignee-picker.open { display: block; }
.wi-ap-section { padding: .35rem .4rem; }
.wi-ap-item {
    display: flex; align-items: center; gap: .4rem;
    padding: .25rem .35rem; border-radius: 5px;
}
.wi-ap-name {
    font-size: .82rem; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--phoenix-body-color, #31374a);
}
.wi-ap-remove {
    background: transparent; border: none; cursor: pointer; padding: .15rem;
    border-radius: 3px; color: var(--phoenix-secondary-color, #949db5);
    display: flex; align-items: center; flex-shrink: 0;
}
.wi-ap-remove:hover { background: rgba(231,76,60,.1); color: #e74c3c; }
.wi-ap-empty { font-size: .8rem; color: var(--phoenix-secondary-color, #949db5); padding: .25rem .35rem; }
.wi-ap-search-wrap { padding: .3rem .4rem; }
.wi-ap-search {
    width: 100%; font-size: .82rem; padding: .28rem .45rem;
    border: 1px solid var(--phoenix-border-color, #cbd0dd); border-radius: 5px;
    background: var(--phoenix-body-bg, #fff); color: var(--phoenix-body-color, #31374a); outline: none;
}
.wi-ap-search:focus { border-color: var(--brand); }
.wi-ap-results { max-height: 180px; overflow-y: auto; padding: .2rem .4rem .4rem; }