/* ═══════════════════════════════════════════════════════════════════
   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 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);
}

/* ── 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 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 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 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); }

/* 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-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-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;
}

/* 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; }

/* ── Hero ─────────────────────────────────────────────────────── */
.mywork-hero {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color-subtle);
    border-radius: var(--planit-radius);
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
}

.mywork-ring-wrap {
    position: relative;
    width: 120px; height: 120px;
    flex-shrink: 0;
}
.mywork-ring { width: 120px; height: 120px; }
.mywork-ring-inner {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.mywork-ring-pct {
    font-size: 1.6rem; font-weight: 800; line-height: 1;
    color: var(--bs-body-color);
}
.mywork-ring-sym { font-size: .9rem; font-weight: 600; }
.mywork-ring-label { font-size: .7rem; color: var(--bs-secondary-color); margin-top: 2px; }

/* Stats */
.mywork-stats { flex: 1; min-width: 0; }

.mywork-rank-badge {
    display: inline-flex; align-items: center; gap: .45rem;
    background: color-mix(in srgb, var(--brand) 12%, var(--bs-body-bg));
    color: var(--brand);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .8rem; font-weight: 700;
    margin-bottom: 1rem;
}
.mywork-rank-icon { font-size: 1rem; }

.mywork-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.mywork-stat {
    display: flex; flex-direction: column; gap: 2px;
}
.mywork-stat-val {
    font-size: 1.5rem; font-weight: 800;
    color: var(--bs-body-color); line-height: 1;
}
.mywork-stat-lbl {
    font-size: .7rem; color: var(--bs-secondary-color);
    text-transform: uppercase; letter-spacing: .05em;
}
.mywork-stat-done .mywork-stat-val  { color: var(--brand); }
.mywork-stat-today .mywork-stat-val { color: #2ecc71; }

/* ── 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 {
    text-align: center;
    padding: 3rem 2rem;
    border: 1px solid var(--bs-border-color-subtle);
    border-radius: var(--planit-radius);
    background: color-mix(in srgb, #2ecc71 7%, var(--bs-body-bg));
    animation: rowAppear .5s ease both;
}
.mywork-all-done-appear { animation: rowAppear .5s ease both; }

@media (max-width: 768px) {
    .mywork-hero { flex-direction: column; text-align: center; }
    .mywork-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .mywork-proj-bar { width: 50px; }
}