/* ─── Reset + base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: #1a1a1a;
    background: #f4f5f7;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: #1a1a1a; text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 600; color: #1a1a1a; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .75rem; }

/* ─── Page layout (sidebar + main) ─────────────────────────────────────────── */
.app {
    display: flex;
    min-height: 100vh;
}
.sidebar {
    width: 240px;
    background: #1a1a1a;
    color: #fff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.sidebar-brand {
    padding: 1.25rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    border-bottom: 1px solid #2a2a2a;
}
.brand-mark {
    width: 32px;
    height: 32px;
    background: #fff;
    color: #1a1a1a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .85rem;
    letter-spacing: .02em;
    border-radius: 4px;
}
/* MPD icon used in the sidebar + mobile topbar — same slot the old "D"
   chip occupied, sized to match. The SVG already has its own dark fill so
   no background swatch is needed. */
.brand-mark-img {
    width: 36px;
    height: 36px;
    display: inline-block;
    border-radius: 6px;
    flex-shrink: 0;
}
.mobile-topbar .brand-mark-img { width: 28px; height: 28px; border-radius: 5px; }
.brand-name {
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: #fff;
    text-transform: uppercase;
}
.sidebar-section-label {
    padding: 1.25rem 1.25rem .25rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #777;
    font-weight: 600;
}
.sidebar-nav { display: flex; flex-direction: column; padding: .5rem 0; flex: 1; }
.nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 1.25rem;
    color: #c9c9c9;
    font-size: .9rem;
    border-left: 3px solid transparent;
    cursor: pointer;
}
.nav-item:hover { color: #fff; background: #232323; }
.nav-item.active {
    color: #fff;
    background: #2a2a2a;
    border-left-color: #16a34a;
    font-weight: 600;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .9; }
.sidebar-footer {
    border-top: 1px solid #2a2a2a;
    padding: .75rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .85rem;
}
.sidebar-footer .footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.sidebar-footer .me { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.sidebar-footer .me a { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer form { margin: 0; }
.lang-toggle {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding-top: .25rem;
}
.lang-toggle a {
    color: #777;
    padding: .15rem .45rem;
    border-radius: 3px;
    font-weight: 600;
}
.lang-toggle a:hover { color: #fff; text-decoration: none; }
.lang-toggle a.active { color: #fff; background: #2a2a2a; }
.lang-toggle .sep { color: #444; }

/* Light variant for the login card */
.login-wrap .lang-toggle a { color: #888; }
.login-wrap .lang-toggle a:hover { color: #1a1a1a; }
.login-wrap .lang-toggle a.active { color: #fff; background: #1a1a1a; }
.login-wrap .lang-toggle .sep { color: #ccc; }
.sidebar-footer .logout-btn {
    background: transparent;
    border: 1px solid #444;
    color: #c9c9c9;
    padding: .3rem .6rem;
    font-size: .72rem;
    cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sidebar-footer .logout-btn:hover { background: #fff; color: #1a1a1a; border-color: #fff; }
.footer-extra-link {
    display: block;
    margin-top: .35rem;
    font-size: .72rem;
    color: #999;
    text-decoration: none;
}
.footer-extra-link:hover { color: #fff; }

/* Attendees picker on the schedule page — wraps into a row of selectable
   chips, click anywhere on the chip to toggle the hidden checkbox. */
.attendee-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.attendee-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .65rem .3rem .35rem;
    border: 1px solid #d4d4d4;
    border-radius: 999px;
    cursor: pointer;
    font-size: .82rem;
    background: #fafafa;
    transition: background .12s, border-color .12s;
    user-select: none;
}
.attendee-chip input { position: absolute; opacity: 0; pointer-events: none; }
.attendee-chip:hover { background: #f0f0f0; border-color: #b0b0b0; }
.attendee-chip:has(input:checked) {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}
/* Video-conference picker on the schedule page — same chip look as the
   attendee picker so they line up visually. */
.video-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.video-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border: 1px solid #d4d4d4;
    border-radius: 999px;
    cursor: pointer;
    font-size: .85rem;
    background: #fafafa;
    user-select: none;
}
.video-chip input { position: absolute; opacity: 0; pointer-events: none; }
.video-chip:hover { background: #f0f0f0; border-color: #b0b0b0; }
.video-chip:has(input:checked) {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

.attendee-chip:has(input:checked) .avatar {
    background: #fff;
    color: #1a1a1a;
}
/* Sidebar group picker — sits between brand and the workspace nav. */
.sidebar-group-picker {
    margin: .5rem 1.25rem .25rem;
}
.sidebar-group-picker select {
    width: 100%;
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    padding: .35rem .5rem;
    font-size: .8rem;
    cursor: pointer;
}
.sidebar-group-picker select:hover { border-color: #555; }
.sidebar-group-picker select:focus { outline: none; border-color: #fff; }

/* ─── Main area ────────────────────────────────────────────────────────────── */
.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.main-inner {
    padding: 2rem 2.5rem 4rem;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

/* ─── Page header ──────────────────────────────────────────────────────────── */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.page-title h1 { margin-bottom: .25rem; }
.page-title .subtitle { color: #6b6b6b; font-size: .9rem; margin: 0; }

/* ─── Pills / Filters ──────────────────────────────────────────────────────── */
.tabs-row {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 1rem;
    padding-bottom: 0;
}
.tab-link {
    padding: .65rem 0;
    color: #6b6b6b;
    font-size: .9rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.tab-link:hover { color: #1a1a1a; }
.tab-link.active {
    color: #1a1a1a;
    border-bottom-color: #1a1a1a;
    font-weight: 600;
}

.filter-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    border: 1px solid #d4d4d4;
    border-radius: 999px;
    color: #4b4b4b;
    background: #fff;
    font-size: .8rem;
    font-weight: 500;
}
.filter-pill:hover { border-color: #1a1a1a; color: #1a1a1a; }
.filter-pill.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.filter-pill .count {
    background: #fff;
    color: #1a1a1a;
    border-radius: 999px;
    padding: 0 .4rem;
    font-size: .68rem;
    font-weight: 700;
    margin-left: .25rem;
}
.filter-pill.active .count { background: #fff; color: #1a1a1a; }

/* ─── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border: 1px solid #1a1a1a;
    background: #fff;
    color: #1a1a1a;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 500;
    border-radius: 6px;
    line-height: 1;
    font-family: inherit;
}
.btn:hover { background: #1a1a1a; color: #fff; }
/* Primary CTAs use the brand green (the "Do" in MPD). Save, Create, Connect,
   Confirm — anything that closes a loop / moves work forward. */
.btn.primary { background: #16a34a; color: #fff; border-color: #16a34a; }
.btn.primary:hover { background: #128a3e; border-color: #128a3e; }
.btn.danger { color: #1a1a1a; border-color: #d4d4d4; background: #fff; }
.btn.danger:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
/* Solid red destructive button (delete actions). */
.btn.delete-btn {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.btn.delete-btn:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn.small { padding: .35rem .7rem; font-size: .75rem; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: #f0f0f0; color: #1a1a1a; }

/* ─── Card / List ──────────────────────────────────────────────────────────── */
.card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.04);
    border: 1px solid #ececec;
    /* No overflow:hidden — the row-menu popover needs to escape the card. */
}
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #ececec;
}
.card-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-weight: 700;
    font-size: 1rem;
    color: #1a1a1a;
}
.card-title .count-chip {
    background: #f0f0f0;
    color: #1a1a1a;
    padding: .12rem .55rem;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
}

.list-cols {
    display: grid;
    grid-template-columns: 28px 38px 1fr 110px 130px 110px 36px;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.5rem;
    color: #888;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    background: #fafafa;
    border-bottom: 1px solid #ececec;
}
.list-row {
    display: grid;
    grid-template-columns: 28px 38px 1fr 110px 130px 110px 36px;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: #fafafa; }

.row-num { color: #888; font-weight: 600; font-size: .9rem; }
.row-title {
    font-weight: 500;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.row-title:hover { color: #000; text-decoration: underline; }
.row-meta { color: #6b6b6b; font-size: .85rem; }
.row-actions { color: #888; cursor: pointer; text-align: center; font-size: 1.2rem; }

/* Clickable circle — also works as a plain element when not in a button */
.row-check {
    width: 20px;
    height: 20px;
    border: 1.5px solid #c4c4c4;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: all .15s ease;
}
button.row-check { font: inherit; outline: none; }
.row-check:hover { border-color: #16a34a; }
/* Read-only circle on /todos — visual only, never interactive. */
.row-check.readonly { cursor: default; pointer-events: none; }
.row-check.readonly:hover { border-color: #c4c4c4; }
.row-check.done {
    background: #16a34a;          /* green */
    border-color: #16a34a;
}
.row-check.done::after {
    content: '✓';
    color: #fff;
    font-size: 12px;
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* When the whole task is complete: green line through the title + dim the row */
.list-row.task-complete .row-title {
    text-decoration: line-through;
    text-decoration-color: #16a34a;
    text-decoration-thickness: 2px;
    color: #888;
}
.list-row.task-complete .row-priority,
.list-row.task-complete .row-num { color: #b4b4b4; }

/* Canceled rows: dim everything, no strikethrough */
.list-row.task-canceled { opacity: .55; }
.list-row.task-canceled .row-title { color: #888; }

/* Overdue rows: red left edge, bold red due-date text, subtle pink wash. */
.list-row.is-overdue {
    border-left: 3px solid #dc2626;
    background: #fef2f2;
}
.list-row.is-overdue:hover { background: #fee2e2; }
.list-row.is-overdue .row-priority {
    color: #dc2626;
    font-weight: 600;
}
.list-row.is-overdue .row-priority::before {
    content: '⚠ ';
    margin-right: .15rem;
}

.add-row {
    padding: .85rem 1.5rem;
    color: #1a1a1a;
    font-size: .9rem;
    font-weight: 500;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    display: inline-block;
    width: 100%;
}
.add-row:hover { background: #f0f0f0; }

/* My Tasks page rows: check, #, title, due, status, completed-date, schedule, ⋯ */
.list-cols.mt-row, .list-row.mt-row {
    grid-template-columns: 28px 38px minmax(0, 1fr) 130px 130px 130px 130px 110px 36px;
}
/* /todos page rows: title, due, owner, status, completed-date, ⋯ (read-only, no circle). */
.list-cols.todo-row, .list-row.todo-row {
    grid-template-columns: minmax(0, 1fr) 130px 140px 130px 140px 110px;
    align-items: center;
}
.list-row.todo-row > * { min-width: 0; }
.row-archive form { margin: 0; }
/* /issues page rows: title, company, added-by, status, ⋯. */
.list-cols.issues-row, .list-row.issues-row {
    grid-template-columns: minmax(0, 1fr) 150px 180px 180px 36px;
    align-items: center;
}
/* /rocks list — 7 columns: chevron, title, due, owner, status, archive, ⋯ */
.list-cols.rocks-row, .list-row.rocks-row {
    grid-template-columns: 28px minmax(0, 1fr) 130px 160px 130px 110px 36px;
    align-items: center;
}
.list-row.rocks-row > * { min-width: 0; }
.list-row.issues-row > * { min-width: 0; }
/* Company badges — colored chip per business so the eye picks them out fast. */
/* Default look for company badges — applies to any company name. The
   specific overrides below add a distinct color for the seed companies; new
   admin-added companies fall back to this neutral chip. */
.badge[class*="company-"] { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }
.badge.company-institutos     { background: #fff3cd; color: #856404; border: 1px solid #ffe082; }
.badge.company-innovationbeast { background: #d1ecf1; color: #0c5460; border: 1px solid #9ddae0; }
.badge.company-rqv            { background: #e2d5f3; color: #4a235a; border: 1px solid #c5a3e0; }
.row-schedule { display: flex; justify-content: flex-start; }

/* Truncate long titles in list rows. The cell needs min-width:0 so the grid
   actually allows the inner text to overflow + ellipsis. The link itself gets
   a native browser tooltip via the title= attribute on hover. */
.cell-truncate { min-width: 0; overflow: hidden; }
.row-title-trunc {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* /my-tasks → "From Rocks Assigned To Me" row layout:
   #, title, rock, due, schedule, view. min-width:0 on every grid cell so
   long text truncates instead of pushing the row wider than the card. */
.list-cols.rock-todo-row, .list-row.rock-todo-row {
    grid-template-columns: 28px 38px minmax(0, 1.5fr) minmax(0, 1fr) 130px 130px 110px 70px;
    gap: .75rem;
    align-items: center;
}

/* /my-tasks → Completed/Canceled merged row layout. */
.list-cols.done-row, .list-row.done-row {
    grid-template-columns: minmax(0, 1.5fr) 200px 130px 160px;
    gap: .75rem;
    align-items: center;
}

/* Inline "add a To-Do" row at the bottom of the My To Do's section. Same
   grid as the regular row so the inputs line up under the headers. */
.list-row.mt-add-row {
    display: grid;
    grid-template-columns: 28px 38px minmax(0, 1fr) 130px 130px 130px 130px 110px 36px;
    gap: 1rem;
    align-items: center;
    background: #fafbfc;
    border-top: 2px dashed #e0e0e0;
}
.list-row.mt-add-row > * { min-width: 0; }
.list-row.mt-add-row input[type="text"],
.list-row.mt-add-row input[type="date"],
.list-row.mt-add-row select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    padding: .42rem .55rem;
    font-size: .85rem;
    background: #fff;
    font-family: inherit;
}
.list-row.mt-add-row input[type="text"] { font-size: .92rem; padding-left: .65rem; }
.row-check.add-plus {
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row-check.add-plus:hover { background: #128a3e; }

/* Settings gear icon (next to "My To Do's" header). */
.settings-gear {
    text-decoration: none;
    font-size: 1.05rem;
    opacity: .55;
    transition: opacity .15s;
    cursor: pointer;
}
.settings-gear:hover { opacity: 1; }

/* Category chip shown next to the Status badge — same look as the other
   badges (no custom color). Stack lets multiple badges wrap to a 2nd line
   if needed instead of pushing the Completed Date column. */
.status-stack { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

/* User-pickable category palette. Each color is a soft pastel background
   with a darker text for legibility. */
.badge.cat-gray   { background: #e5e7eb; color: #374151; border: 1px solid #cbd5e1; }
.badge.cat-blue   { background: #dbeafe; color: #1e3a8a; border: 1px solid #93c5fd; }
.badge.cat-green  { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.badge.cat-red    { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.badge.cat-yellow { background: #fef3c7; color: #854d0e; border: 1px solid #fcd34d; }
.badge.cat-purple { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
.badge.cat-pink   { background: #fce7f3; color: #831843; border: 1px solid #f9a8d4; }
.badge.cat-orange { background: #ffedd5; color: #9a3412; border: 1px solid #fdba74; }

/* Color picker (a row of clickable swatches) on the categories page. */
.cat-color-picker {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    flex-wrap: wrap;
}
.cat-swatch {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .12s, transform .1s;
    position: relative;
}
.cat-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cat-swatch:hover { transform: scale(1.1); }
.cat-swatch.selected { border-color: #1a1a1a; }

/* Categories management page — laid out as a fixed grid so every column
   lines up vertically across rows (name input, swatch picker, Save, delete). */
.categories-list { display: flex; flex-direction: column; gap: .35rem; }
.cat-row-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    column-gap: .6rem;
    align-items: center;
    padding: .55rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.cat-row-wrap:last-child { border-bottom: none; }
.cat-row-wrap form { margin: 0; }
.category-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) auto auto;
    column-gap: .65rem;
    align-items: center;
}
.category-row input[type="text"] { width: 100%; box-sizing: border-box; }
.cat-add-form {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) auto auto;
    column-gap: .65rem;
    align-items: center;
}
.cat-add-form input[type="text"] { width: 100%; box-sizing: border-box; }

/* On phones the swatch row + Save would crowd the input — stack everything. */
@media (max-width: 640px) {
    .cat-row-wrap     { grid-template-columns: 1fr 36px; row-gap: .4rem; }
    .category-row     { grid-template-columns: 1fr; row-gap: .4rem; }
    .cat-add-form     { grid-template-columns: 1fr; row-gap: .4rem; }
}
.list-row.done-row > * { min-width: 0; }
/* Source badges — one chip per origin so Completed entries are scannable. */
.badge.src-mine { background: #e9ecef; color: #495057; border: 1px solid #cfd4d8; }
.badge.src-todo { background: #d6e9ff; color: #1e3a8a; border: 1px solid #94c0f5; }
.badge.src-rock { background: #ede0ff; color: #4a235a; border: 1px solid #c5a3e0; }
.list-row.rock-todo-row > * { min-width: 0; }
.list-row.rock-todo-row form { margin: 0; }

/* /my-tasks → "Rocks Assigned To Me" row: #, title, due, status. */
.list-cols.mt-rocks-row, .list-row.mt-rocks-row {
    grid-template-columns: 38px minmax(0, 1fr) 130px 130px;
    gap: .75rem;
    align-items: center;
}
.list-row.mt-rocks-row > * { min-width: 0; }

/* /my-tasks unified row layout — used across:
     1) My To Do's
     2) To Do's Assigned To Me
     3) From Rocks Assigned To Me
     4) Rocks Assigned To Me (with the Completed and Category cells blank)
   So the Item / Due / Status columns line up perfectly down the page. */
.list-cols.mtnew-row, .list-row.mtnew-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 130px 180px 160px;
    gap: .75rem;
    align-items: center;
}
.list-row.mtnew-row > * { min-width: 0; }
.list-row.mtnew-row form { margin: 0; }
/* Center the Status cell (4th column) in both the header and every data row,
   across all three aligned sections (My To Do's, To Do's Assigned To Me,
   From Rocks Assigned To Me) plus the bottom Rocks Assigned To Me block. */
.list-cols.mtnew-row > div:nth-child(4),
.list-row.mtnew-row  > div:nth-child(4) {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Inline add row mirrors the same grid. */
.list-row.mtnew-row.mtnew-add-row {
    background: #fafbfc;
    border-top: 2px dashed #e0e0e0;
}
.list-row.mtnew-row.mtnew-add-row input[type="text"],
.list-row.mtnew-row.mtnew-add-row input[type="date"],
.list-row.mtnew-row.mtnew-add-row select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    padding: .42rem .55rem;
    font-size: .85rem;
    background: #fff;
    font-family: inherit;
}
.list-row.mtnew-row.mtnew-add-row input[type="text"] {
    font-size: .92rem;
    padding-left: .65rem;
}

/* Inline category dropdown in the Category cell — looks like a soft chip. */
.cat-select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    padding: .3rem .45rem;
    font-size: .8rem;
    background: #fff;
    cursor: pointer;
    color: #1a1a1a;
    font-family: inherit;
}
.cat-select.cat-gray   { background: #e5e7eb; color: #374151; border-color: #cbd5e1; }
.cat-select.cat-blue   { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
.cat-select.cat-green  { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.cat-select.cat-red    { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.cat-select.cat-yellow { background: #fef3c7; color: #854d0e; border-color: #fcd34d; }
.cat-select.cat-purple { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.cat-select.cat-pink   { background: #fce7f3; color: #831843; border-color: #f9a8d4; }
.cat-select.cat-orange { background: #ffedd5; color: #9a3412; border-color: #fdba74; }

/* ── Mobile layout for the My-Tasks aligned rows ─────────────────────────
   On phones we collapse the 5-column grid down to a 2x2 card so each task
   takes the minimum vertical space while still exposing the two actions
   the user cares about on the go: mark-complete and schedule.
       row 1: [○] Item title
       row 2: Due · Status
   The header strip, Category cell and inline "+ add" row are all hidden —
   adding a new task is desktop-only for now. */
@media (max-width: 760px) {
    /* Drop the column headers entirely on phones. */
    .list-cols.mtnew-row { display: none; }
    /* Hide the inline add row — no room and small inputs are awkward to tap. */
    .list-row.mtnew-row.mtnew-add-row { display: none; }

    .list-row.mtnew-row {
        grid-template-columns: 28px minmax(0, 1fr) auto;
        grid-template-areas:
            "check item item"
            "due   due  status";
        gap: .35rem .55rem;
        padding: .7rem .85rem;
    }
    /* Use plain `:nth-child` rather than `div:nth-child` because the first
       child in From-Rocks rows is a <form>, not a <div>. */
    .list-row.mtnew-row > :nth-child(1) { grid-area: check; }
    .list-row.mtnew-row > :nth-child(2) { grid-area: item;  }
    .list-row.mtnew-row > :nth-child(3) {
        grid-area: due;
        font-size: .8rem;
        display: block;  /* override the legacy .row-priority hide rule */
    }
    .list-row.mtnew-row > :nth-child(4) {
        grid-area: status;
        /* Right-align so the Schedule button sits at the row edge and Due
           gets the rest of the row. */
        justify-content: flex-end;
        text-align: right;
    }
    /* Hide Category cell on phones — read-only badge, not actionable. */
    .list-row.mtnew-row > :nth-child(5) { display: none; }

    /* Item link can wrap onto a second line if titles are long. */
    .list-row.mtnew-row .row-title-trunc {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* Inline Schedule menu inside the Status cell — keep popup floating above. */
.schedule-menu.inline-status { position: relative; }
.schedule-menu.inline-status summary {
    list-style: none;
    cursor: pointer;
}
.schedule-menu.inline-status summary::-webkit-details-marker { display: none; }
.schedule-menu.inline-status[open] .menu-pop {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 180px;
}

/* Same min-width discipline for the standard My-Tasks rows so titles in
   "My To Do's" and "To Do's Assigned To Me" can ellipsis cleanly too. */
.list-row.mt-row > * { min-width: 0; }

/* Cleaner Add-To-Do form inside a Rock — each control gets a fixed
   sensible width so labels and date pickers don't overlap. */
.rock-todo-add {
    display: grid;
    grid-template-columns: 1fr 180px 160px auto;
    gap: .5rem;
    align-items: center;
}
@media (max-width: 720px) {
    .list-cols.rock-todo-row, .list-row.rock-todo-row {
        grid-template-columns: 30px 1fr auto;
        gap: .35rem;
    }
    .list-cols.rock-todo-row > div:nth-child(n+3),
    .list-row.rock-todo-row > div:nth-child(n+4) { display: none; }
    .rock-todo-add { grid-template-columns: 1fr; }
}
.schedule-menu { position: relative; }
.schedule-menu summary.schedule-btn {
    list-style: none;
    cursor: pointer;
    padding: .35rem .7rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    border: 1px solid #16a34a;
    background: #16a34a;
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    user-select: none;
    line-height: 1;
}
.schedule-menu summary.schedule-btn::-webkit-details-marker { display: none; }
.schedule-menu summary.schedule-btn:hover { background: #128a3e; border-color: #128a3e; }
.schedule-menu[open] summary.schedule-btn { background: #0f7a37; border-color: #0f7a37; }
/* When the task is already scheduled, swap the colors green but keep the
   exact same size as the "Schedule" button so the column doesn't shift. */
.schedule-menu summary.schedule-btn.schedule-btn-on {
    background: #d1fae5;
    color: #065f46;
    border-color: #34d399;
}
.schedule-menu summary.schedule-btn.schedule-btn-on:hover,
.schedule-menu[open] summary.schedule-btn.schedule-btn-on {
    background: #065f46;
    color: #fff;
    border-color: #065f46;
}

.list-empty {
    padding: 4rem 1.5rem;
    text-align: center;
    color: #888;
}

/* ─── Avatars ──────────────────────────────────────────────────────────────── */
.avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    flex-shrink: 0;
}
.avatar.lg { width: 36px; height: 36px; font-size: .85rem; }
.avatar.sm { width: 22px; height: 22px; font-size: .65rem; }
.row-owner { display: flex; align-items: center; gap: .5rem; color: #4b4b4b; font-size: .85rem; }
.row-owner .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Badges ───────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .65rem;
    border: 1px solid #d4d4d4;
    background: #fff;
    color: #4b4b4b;
    font-size: .72rem;
    font-weight: 500;
    border-radius: 999px;
    line-height: 1.4;
}
.badge.solid { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.badge.muted { color: #888; border-color: #e5e5e5; }
.badge.priority-High   { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.badge.priority-Medium { background: #f0f0f0; color: #1a1a1a; border-color: #d4d4d4; }
.badge.priority-Low    { background: #fff; color: #888; border-color: #e5e5e5; }
/* My Tasks status categories — Scheduled = green, Waiting on Other = light red */
.badge.mtprio-today     { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.badge.mtprio-scheduled { background: #d1fae5; color: #065f46; border-color: #34d399; }
.badge.mtprio-waiting   { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
/* Terminal-state badges shown in the Status column when a task is done. */
.badge.status-complete  { background: #16a34a; color: #fff; border-color: #16a34a; }
.badge.status-canceled  { background: #f3f4f6; color: #6b7280; border-color: #d1d5db; }
/* Tiny timestamp shown under the Completed/Canceled badge (legacy; kept for compat). */
.status-when {
    margin-top: .2rem;
    font-size: .7rem;
    color: #6b7280;
    line-height: 1.1;
}
/* Dedicated "Completed Date" column to the right of Status. */
.row-completed-when {
    font-size: .8rem;
    color: #6b7280;
}
.badge.dot::before {
    content: '';
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
}

/* Inline status dropdown — looks like a badge but clickable */
.status-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: .25rem 1.55rem .25rem .75rem;
    border: 1px solid #d4d4d4;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23888' d='M0 0l5 6 5-6z'/></svg>") right .55rem center no-repeat;
    color: #4b4b4b;
    font-size: .72rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: 999px;
    cursor: pointer;
    width: auto;
    line-height: 1.4;
    height: auto;
    box-shadow: none;
}
.status-select:hover { border-color: #1a1a1a; color: #1a1a1a; }
.status-select:focus { outline: 2px solid #1a1a1a; outline-offset: 1px; }
.status-select.is-resolved { background-color: #1a1a1a; color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23fff' d='M0 0l5 6 5-6z'/></svg>");
    border-color: #1a1a1a;
}
.status-select.is-resolved:hover { background-color: #000; }

/* Priority dropdown — same shape as status-select, with mtprio color variants. */
.priority-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: .25rem 1.55rem .25rem .75rem;
    border: 1px solid #d4d4d4;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23888' d='M0 0l5 6 5-6z'/></svg>") right .55rem center no-repeat;
    color: #4b4b4b;
    font-size: .72rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: 999px;
    cursor: pointer;
    width: auto;
    line-height: 1.4;
    height: auto;
    box-shadow: none;
}
.priority-select:hover { border-color: #1a1a1a; color: #1a1a1a; }
.priority-select:focus { outline: 2px solid #1a1a1a; outline-offset: 1px; }
/* "today" is the untriaged sentinel — render as a soft prompt asking the user
   to pick a real priority. */
.priority-select.mtprio-today {
    background-color: #fff; color: #6b6b6b; border-color: #c4c4c4;
    border-style: dashed;
}
.priority-select.mtprio-today:hover { color: #1a1a1a; border-color: #1a1a1a; }
.priority-select.mtprio-scheduled {
    background-color: #d1fae5; color: #065f46; border-color: #34d399;
}
.priority-select.mtprio-scheduled:hover { background-color: #a7f3d0; }
.priority-select.mtprio-waiting {
    background-color: #fee2e2; color: #991b1b; border-color: #fca5a5;
}
.priority-select.mtprio-waiting:hover { background-color: #fecaca; }

/* 3-dot row menu (uses native <details>) */
.row-menu { position: relative; justify-self: end; }
.row-menu summary {
    list-style: none;
    cursor: pointer;
    color: #888;
    font-size: 1.4rem;
    line-height: 1;
    padding: .15rem .5rem;
    border-radius: 6px;
    user-select: none;
}
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu summary:hover { background: #f0f0f0; color: #1a1a1a; }
.row-menu[open] summary { background: #f0f0f0; color: #1a1a1a; }
.menu-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
    min-width: 170px;
    padding: .35rem 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
}
.menu-item {
    display: block;
    text-align: left;
    width: 100%;
    padding: .55rem .9rem;
    background: transparent;
    border: none;
    font: inherit;
    font-size: .85rem;
    color: #1a1a1a;
    cursor: pointer;
}
.menu-item:hover { background: #f5f5f5; }
.menu-item.danger { color: #1a1a1a; font-weight: 500; border-top: 1px solid #ececec; margin-top: .2rem; padding-top: .65rem; }
.menu-item.danger:hover { background: #1a1a1a; color: #fff; }

/* Reschedule sub-menu inside the row 3-dot menu */
.reschedule-sub { width: 100%; }
.reschedule-sub > summary { list-style: none; cursor: pointer; }
.reschedule-sub > summary::-webkit-details-marker { display: none; }
.menu-pop.submenu {
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    background: #fafafa;
    padding: .25rem 0;
    margin: .15rem 0;
    min-width: auto;
}

/* ─── Forms ────────────────────────────────────────────────────────────────── */
form.stacked label {
    display: block;
    margin-top: 1rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b6b6b;
    margin-bottom: .35rem;
    font-weight: 600;
}
input[type=text], input[type=email], input[type=password], input[type=date],
select, textarea {
    width: 100%;
    padding: .65rem .85rem;
    border: 1px solid #d4d4d4;
    background: #fff;
    color: #1a1a1a;
    font: inherit;
    border-radius: 6px;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(26,26,26,.08);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.form-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* ─── Detail page ──────────────────────────────────────────────────────────── */
.detail {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #ececec;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 1.75rem 2rem;
}
.detail-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: .75rem;
}
.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    color: #6b6b6b;
    font-size: .85rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #ececec;
}
.detail-meta b { color: #1a1a1a; font-weight: 600; }
.description {
    white-space: pre-wrap;
    color: #2a2a2a;
    margin: 1rem 0 1.5rem;
    line-height: 1.65;
}

/* ─── Comments ─────────────────────────────────────────────────────────────── */
.section-title {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #6b6b6b;
    font-weight: 600;
    margin: 2rem 0 .75rem;
}
.comment {
    display: flex;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.comment:last-of-type { border-bottom: none; }
.comment-body-wrap { flex: 1; min-width: 0; }
.comment-meta {
    font-size: .8rem;
    color: #888;
    margin-bottom: .25rem;
}
.comment-meta b { color: #1a1a1a; font-weight: 600; }
.comment-body { white-space: pre-wrap; color: #2a2a2a; }

/* Notes (My Tasks edit page) */
.note {
    border-left: 2px solid #1a1a1a;
    padding: .5rem 0 .5rem .85rem;
    margin-bottom: .85rem;
}
.note-meta {
    font-size: .75rem;
    color: #777;
    margin-bottom: .25rem;
}
.note-meta b { color: #1a1a1a; font-weight: 600; }
.note-context {
    display: inline-block;
    background: #f0f0f0;
    color: #1a1a1a;
    padding: .05rem .45rem;
    border-radius: 3px;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.note-body { white-space: pre-wrap; color: #2a2a2a; }

/* Activity log on Issues detail page */
.activity { display: flex; flex-direction: column; gap: .75rem; }
.activity-item {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.activity-item:last-child { border-bottom: none; }
.activity-time {
    font-size: .78rem;
    color: #888;
    white-space: nowrap;
}
.activity-text {
    font-size: .88rem;
    color: #2a2a2a;
}
.activity-text b { color: #1a1a1a; font-weight: 600; }
@media (max-width: 700px) {
    .activity-item { grid-template-columns: 1fr; gap: .15rem; }
}

/* ─── Milestones ───────────────────────────────────────────────────────────── */
.milestones { border: 1px solid #ececec; border-radius: 8px; }
.milestone {
    display: grid;
    grid-template-columns: auto 1fr 120px auto;
    gap: .75rem;
    align-items: center;
    padding: .7rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}
.milestone:last-child { border-bottom: none; }
.milestone.done .ms-title { text-decoration: line-through; color: #888; }
.milestone form { margin: 0; }
/* Make the milestone title behave like a normal-text link (no underline until
   hover) so the click affordance is subtle. */
a.ms-title { color: #1a1a1a; text-decoration: none; }
a.ms-title:hover { text-decoration: underline; }

/* Attachments list on the milestone detail page */
.attachments { margin-bottom: .5rem; }
.attachment {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: .75rem;
    align-items: center;
    padding: .55rem .25rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: .9rem;
}
.attachment:last-child { border-bottom: none; }
.attach-link { display: inline-flex; gap: .5rem; align-items: center; color: #1a1a1a; }
.attach-link:hover { text-decoration: underline; }
.attach-icon { opacity: .65; }
.attach-meta { font-size: .75rem; }
.attachment form { margin: 0; }

/* Rock list — expandable To-Do's sub-list per row */
.rock-expand-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, color .15s ease;
}
.rock-expand-btn:hover { color: #1a1a1a; }
.rock-row-wrap.expanded .rock-expand-btn { transform: rotate(90deg); color: #1a1a1a; }
/* Master chevron in the header rotates when everything is open. */
#rocks-expand-all.all-open { transform: rotate(90deg); color: #1a1a1a; }
.rock-todos {
    display: none;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}
.rock-row-wrap.expanded .rock-todos { display: block; }
/* Off-track rocks tint the whole row red so they're impossible to miss. */
.rock-row-wrap.rock-off-track > .list-row {
    background: #fef2f2;
    border-left: 4px solid #dc2626;
}
.rock-row-wrap.rock-off-track > .list-row .row-title { color: #991b1b; font-weight: 600; }
/* Completed rocks tint the whole row green to celebrate the win. */
.rock-row-wrap.rock-completed > .list-row {
    background: #f0fdf4;
    border-left: 4px solid #16a34a;
}
.rock-row-wrap.rock-completed > .list-row .row-title { color: #14532d; font-weight: 600; }
/* Each sub-row reuses the same 8-column grid as the parent rock row so the
   Due and Owner cells line up perfectly under their column headers. */
.list-row.rocks-row.rock-todo {
    padding: .55rem 1.5rem;
    font-size: .88rem;
    background: transparent;
}
.list-row.rocks-row.rock-todo:hover { background: #f4f4f4; }
.list-row.rocks-row.rock-todo:last-child { border-bottom: none; }
.rock-todo-title-cell {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.rock-todo-bullet { color: #999; flex: 0 0 14px; text-align: center; }
.rock-todo-title { color: #2a2a2a; text-decoration: none; }
.rock-todo-title:hover { text-decoration: underline; }
.rock-todo.done .rock-todo-title { text-decoration: line-through; color: #999; }
.rock-todo.done .rock-todo-bullet { color: #16a34a; }
.rock-todo-empty { padding: .55rem 1.5rem; font-size: .85rem; font-style: italic; }

/* Clickable column headers for sort-by-due / sort-by-owner. */
.list-cols .sortable a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.list-cols .sortable a:hover { color: #1a1a1a; }

/* ─── KPI dashboard ────────────────────────────────────────────────────── */
.kpi-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.kpi-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    background: linear-gradient(to bottom, #fafafa, #fff);
    gap: .5rem;
    flex-wrap: wrap;
}
.kpi-card-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.kpi-targets { display: flex; flex-wrap: wrap; gap: .4rem; }
.kpi-target-chip {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .76rem;
    font-weight: 500;
}
.kpi-target-chip b { color: #1a1a1a; font-weight: 700; }

/* "Director / Manager" picker at the top of the Manage KPI Team modal —
   filters the candidate dropdowns to people who sit under that person. */
.kpi-manager-picker {
    margin: 0 0 1.25rem;
    padding: .75rem .9rem;
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 8px;
}
.kpi-manager-picker label {
    display: block;
    font-size: .78rem;
    color: #555;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: .35rem;
}
.kpi-manager-picker select {
    width: 100%;
    padding: .4rem .6rem;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: .9rem;
    background: #fff;
    cursor: pointer;
}

.kpi-table-head, .kpi-row {
    display: grid;
    gap: .75rem;
    align-items: center;
    padding: .75rem 1.5rem;
}
.kpi-table.kpi-setter .kpi-table-head,
.kpi-table.kpi-setter .kpi-row {
    grid-template-columns: minmax(0, 1.4fr) 80px 160px 80px 100px 100px 70px;
}
.kpi-table.kpi-closer .kpi-table-head,
.kpi-table.kpi-closer .kpi-row {
    grid-template-columns: minmax(0, 1.4fr) 80px 80px 100px 70px;
}
.kpi-table-head {
    color: #888;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    background: #fafafa;
    border-bottom: 1px solid #ececec;
}
.kpi-row {
    border-bottom: 1px solid #f0f0f0;
    font-size: .92rem;
}
.kpi-row:last-child { border-bottom: none; }
.kpi-row:hover { background: #fafafa; }
.kpi-name { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.kpi-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-num { font-weight: 600; color: #1a1a1a; text-align: center; }
.kpi-num.kpi-hit  { color: #047857; background: #d1fae5; border-radius: 5px; padding: .2rem; }
.kpi-num.kpi-miss { color: #b91c1c; background: #fee2e2; border-radius: 5px; padding: .2rem; }

.kpi-member-list {
    list-style: none; padding: 0; margin: 0;
    border: 1px solid #ececec; border-radius: 6px;
}
.kpi-member-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .75rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: .9rem;
}
.kpi-member-list li:last-child { border-bottom: none; }
.kpi-member-list form { margin: 0; }

/* ─── Action bar ───────────────────────────────────────────────────────────── */
.action-bar {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 1.25rem 0 1.5rem;
    padding: 1rem;
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 8px;
    align-items: center;
}
.action-bar form { margin: 0; display: flex; gap: .5rem; align-items: center; }
.action-bar select { width: auto; padding: .4rem .7rem; }

/* ─── Integrations ─────────────────────────────────────────────────────────── */
.integration-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #ececec;
}
.integration-row:last-child { border-bottom: none; }
.integration-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #f0f0f0;
    color: #1a1a1a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.integration-info { flex: 1; min-width: 0; }
.integration-name { font-weight: 600; color: #1a1a1a; }
.integration-meta { font-size: .85rem; color: #4b4b4b; }
.integration-action form { margin: 0; }

/* ─── Schedule picker — week-grid like a calendar ─────────────────────────── */
.cal-wrap { background: #fff; border: 1px solid #ececec; border-radius: 8px; overflow: auto; }
.cal-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, minmax(120px, 1fr));
    background: #ececec;
    gap: 1px;
    min-width: 900px;
}
.cal-col { background: #fff; }
.cal-day-header {
    padding: .55rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #4b4b4b;
    border-bottom: 1px solid #ececec;
    background: #fafafa;
    text-align: center;
    height: 40px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-day-body { position: relative; }

.cal-times .cal-day-body { position: relative; }
.cal-time-tick {
    position: absolute;
    left: 0; right: 0;
    font-size: .68rem;
    color: #888;
    padding: 0 .35rem 0 0;
    text-align: right;
    transform: translateY(-50%);
    height: 1.2em;
    line-height: 1.2em;
}

.cal-hour-line {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: #f0f0f0;
}

.cal-event {
    position: absolute;
    left: 2px; right: 2px;
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #34d399;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: .7rem;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 2;
    pointer-events: none;  /* let the user click the slot underneath if visible */
}
.cal-event-time { font-weight: 600; opacity: .85; }
.cal-event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-slot {
    position: absolute;
    left: 2px; right: 2px;
    background: rgba(255, 255, 255, .9);
    border: 1px dashed #d4d4d4;
    color: #4b4b4b;
    cursor: pointer;
    border-radius: 4px;
    font-size: .7rem;
    font-family: inherit;
    padding: 2px 5px;
    text-align: left;
    box-sizing: border-box;
    z-index: 1;
}
.cal-slot:hover {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
    border-style: solid;
    z-index: 5;
}
/* A slot that someone INVITED is busy during — hide it so the calendar only
   shows times everyone is available. Toggled by the schedule page JS in
   response to attendee-picker changes. */
.cal-slot.attendee-busy { display: none; }

/* ─── Public booking page (Calendly-style) ──────────────────────────────── */
body.booking-body {
    background: #f5f5f5;
    min-height: 100vh;
    padding: 2rem 1rem;
    margin: 0;
}
.booking-wrap {
    max-width: 540px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
    padding: 2rem;
}
.booking-head h1 {
    margin: 0 0 1rem;
    font-size: 1.35rem;
}
.booking-warning {
    background: #fef3c7;
    color: #854d0e;
    border: 1px solid #fcd34d;
    padding: .55rem .8rem;
    border-radius: 6px;
    font-size: .85rem;
    margin: .5rem 0 1rem;
}
.booking-errors {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    padding: .65rem .8rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: .9rem;
}
.booking-label {
    display: block;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b6b6b;
    font-weight: 600;
    margin: 1rem 0 .35rem;
}
.booking-wrap input[type="text"],
.booking-wrap input[type="email"],
.booking-wrap input[type="tel"],
.booking-wrap input[type="date"],
.booking-wrap select {
    width: 100%;
    box-sizing: border-box;
    padding: .55rem .7rem;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: .95rem;
    font-family: inherit;
    background: #fff;
}
/* Country-flag phone input — give the library wrapper full-width so it
   lines up with the other inputs on the booking form. */
.booking-wrap .iti { display: block; width: 100%; }
.booking-wrap .iti input[type="tel"] { padding-left: 5rem; }

.booking-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: .4rem;
    margin-top: .25rem;
}
.booking-slot {
    padding: .5rem .25rem;
    border: 1px solid #1a1a1a;
    background: #fff;
    color: #1a1a1a;
    border-radius: 6px;
    font-size: .85rem;
    cursor: pointer;
    font-family: inherit;
}
.booking-slot:hover { background: #f0f0f0; }
.booking-slot.selected {
    background: #1a1a1a;
    color: #fff;
}

/* Confirmation page */
.booking-confirmed { text-align: center; }
.booking-check {
    width: 56px; height: 56px; margin: 0 auto 1rem;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 2rem;
    line-height: 56px;
    font-weight: 700;
}

/* ─── Modal ────────────────────────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1rem 2rem;
    z-index: 100;
    overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.modal {
    background: #fff;
    width: 100%;
    max-width: 560px;
    border-radius: 10px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .25);
    overflow: hidden;
    animation: modal-in .15s ease-out;
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid #ececec;
}
.modal-head h2 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #888;
    padding: .15rem .5rem;
    border-radius: 4px;
}
.modal-close:hover { color: #1a1a1a; background: #f0f0f0; }
.modal-body { padding: 1.25rem 1.5rem; }
.modal-body label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #6b6b6b; font-weight: 600; margin: 1rem 0 .35rem; }
.modal-body label:first-child { margin-top: 0; }
.modal-foot {
    padding: .9rem 1.5rem;
    border-top: 1px solid #ececec;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    background: #fafafa;
}

/* ─── My Team chart ───────────────────────────────────────────────────────── */
.team-canvas-wrap {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
#team-chart {
    display: block;
    width: 100%;
    height: 65vh;
    min-height: 480px;
    background:
        linear-gradient(to right,  #f5f5f5 1px, transparent 1px) 0 0/40px 40px,
        linear-gradient(to bottom, #f5f5f5 1px, transparent 1px) 0 0/40px 40px;
    border-radius: 6px;
    cursor: grab;
}
#team-chart.connecting { cursor: crosshair; }
.team-node { cursor: grab; }
.team-node.dragging { cursor: grabbing; }
.team-node-bg {
    fill: #1a1a1a;
    stroke: #1a1a1a;
    stroke-width: 2;
    transition: fill .12s ease, stroke .12s ease;
}
.team-node:hover .team-node-bg { fill: #333; }
.team-node.picked .team-node-bg { fill: #16a34a; stroke: #16a34a; }
#team-chart.connecting .team-node:hover .team-node-bg { fill: #16a34a; }
.team-node-initials {
    fill: #fff;
    font-weight: 700;
    font-size: 16px;
    pointer-events: none;
    user-select: none;
}
.team-node-name {
    fill: #1a1a1a;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
}
.team-node-name.above { font-size: 14px; }
.team-node-title {
    fill: #4b4b4b;
    font-size: 11px;
    pointer-events: none;
    user-select: none;
}
.team-node-kpi {
    fill: #6b7280;
    font-size: 10px;
    font-style: italic;
    pointer-events: none;
    user-select: none;
}
.team-node-count {
    fill: #16a34a;
    font-size: 10px;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}
.team-node-task {
    fill: #1a1a1a;
    font-size: 11px;
    pointer-events: none;
    user-select: none;
}
.team-node.is-owner .team-node-bg {
    stroke: #16a34a;
    stroke-width: 3;
}
/* Floating X / + buttons on each member node */
.node-action { cursor: pointer; opacity: 0; transition: opacity .12s; }
.team-node:hover .node-action { opacity: 1; }
.node-action-bg { fill: #fff; stroke: #1a1a1a; stroke-width: 1.5; }
.node-action.node-delete .node-action-bg { stroke: #dc2626; }
.node-action.node-delete:hover .node-action-bg { fill: #dc2626; }
.node-action.node-delete text { fill: #dc2626; font-size: 14px; font-weight: 700; }
.node-action.node-delete:hover text { fill: #fff; }
.node-action.node-plus .node-action-bg { stroke: #16a34a; }
.node-action.node-plus:hover .node-action-bg { fill: #16a34a; }
.node-action.node-plus text { fill: #16a34a; font-size: 16px; font-weight: 700; }
.node-action.node-plus:hover text { fill: #fff; }
/* "Link" button: connect this node to another existing node */
.node-action.node-link .node-action-bg { stroke: #2563eb; }
.node-action.node-link:hover .node-action-bg { fill: #2563eb; }
.node-action.node-link path { stroke: #2563eb; }
.node-action.node-link:hover path { stroke: #fff; }
/* Linking-mode visual states */
.team-node.link-source .team-node-bg { stroke: #2563eb; stroke-width: 4; fill: #1f2a44; }
body:has(.team-link-banner[style*="block"]) .team-node:not(.link-source) { cursor: crosshair; }
body:has(.team-link-banner[style*="block"]) .team-node:not(.link-source):hover .team-node-bg {
    stroke: #2563eb; stroke-width: 3;
}
.team-link-banner {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: #2563eb;
    color: #fff;
    padding: .55rem 1rem;
    font-size: .85rem;
    font-weight: 500;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 1000;
}
/* Cumulative expand/collapse: hidden nodes/edges drop entirely. */
.team-node.node-hidden { display: none; }
.team-edge.edge-hidden { display: none; }
.team-edge {
    stroke: #888;
    stroke-width: 2;
    cursor: pointer;
    transition: stroke .15s ease, stroke-width .15s ease;
}
.team-edge:hover {
    stroke: #dc2626;
    stroke-width: 3;
}
#team-chart.connecting .team-edge { pointer-events: none; }

/* ─── Login ────────────────────────────────────────────────────────────────── */
body.login-body { background: #1a1a1a; }
.login-wrap {
    max-width: 400px;
    margin: 8rem auto;
    padding: 2.25rem 2rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.login-wrap h1 {
    text-align: center;
    letter-spacing: .04em;
    margin-bottom: 1.5rem;
}
/* Login splash: bigger MPD chip centered above the form. */
.login-mark { width: 64px; height: 64px; border-radius: 12px; display: block; margin: 0 auto 1rem; }
.login-wrap .brand-mark {
    width: 48px; height: 48px; font-size: 1.1rem;
    margin: 0 auto 1rem; display: flex;
}

/* ─── Flash ────────────────────────────────────────────────────────────────── */
.flash {
    padding: .75rem 1rem;
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    margin-bottom: 1rem;
    background: #fff;
    font-size: .9rem;
}
.flash.error { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.flash.ok { background: #f0f0f0; }

/* ─── Misc ─────────────────────────────────────────────────────────────────── */
.muted { color: #888; }
.linkbox {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .85rem;
    border: 1px dashed #c4c4c4;
    margin: .5rem 0;
    color: #6b6b6b;
    font-size: .82rem;
    border-radius: 6px;
}
.linkbox a { color: #1a1a1a; font-weight: 600; }
.no-margin { margin: 0; }
.row-flex { display: flex; gap: .5rem; align-items: center; }

/* ─── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .sidebar { width: 64px; }
    .brand-name, .nav-item span:not(.icon), .sidebar-section-label, .sidebar-footer .me a { display: none; }
    .nav-item { justify-content: center; padding: .8rem 0; }
    .sidebar-brand { justify-content: center; padding: 1rem 0; }
    .sidebar-footer { justify-content: center; }
    .sidebar-footer .me { display: none; }
    .main-inner { padding: 1.5rem 1.25rem 4rem; }
    .list-cols, .list-row {
        grid-template-columns: 24px 32px 1fr 80px 36px;
    }
    .list-cols.mt-row, .list-row.mt-row {
        grid-template-columns: 24px 32px 1fr 80px 36px;
    }
    .list-cols.todo-row, .list-row.todo-row {
        grid-template-columns: 32px 1fr 80px 100px;
    }
    .row-schedule, .row-completed-when { display: none; }
    .list-cols .col-priority, .list-cols .col-created,
    .list-row .row-priority, .list-row .row-created { display: none; }
    .form-row { grid-template-columns: 1fr; }
}

/* ─── Mobile chrome ─────────────────────────────────────────────────────────
   On phones we swap the full sidebar for a slim top bar (brand + logout) and
   a sticky bottom nav with only My Tasks and Issues. Everything else (Team,
   Rocks, To-Dos, KPIs, group pickers) is intentionally hidden — the mobile
   surface is for individual contributors checking their own work on the go. */
.mobile-topbar    { display: none; }
.mobile-bottomnav { display: none; }

@media (max-width: 760px) {
    /* Hide the desktop sidebar entirely. */
    .sidebar { display: none; }

    /* Reclaim full width and add bottom padding so content isn't hidden
       behind the fixed bottom nav. */
    .app { display: block; }
    .main { width: 100%; }
    .main-inner { padding: 1rem 1rem 5.5rem; max-width: 100%; }

    /* Top bar: brand on the left, logout on the right. Sticky at top. */
    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .65rem 1rem;
        background: #1a1a1a;
        color: #fff;
        position: sticky;
        top: 0;
        z-index: 50;
    }
    .mobile-topbar .brand {
        display: flex;
        align-items: center;
        gap: .55rem;
    }
    .mobile-topbar .brand-mark {
        width: 28px; height: 28px;
        background: #fff; color: #1a1a1a;
        display: inline-flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: .8rem;
        border-radius: 4px;
    }
    .mobile-topbar .brand-name {
        font-size: .82rem; font-weight: 700;
        letter-spacing: .14em; text-transform: uppercase;
    }
    .mobile-topbar form { margin: 0; }
    .mobile-topbar .logout-btn {
        background: transparent;
        color: #fff;
        border: 1px solid #555;
        padding: .35rem .8rem;
        font-size: .78rem;
        border-radius: 6px;
        cursor: pointer;
    }
    .mobile-topbar .logout-btn:hover { background: #fff; color: #1a1a1a; border-color: #fff; }

    /* Bottom nav: two equal-width tabs pinned to the viewport. */
    .mobile-bottomnav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        background: #1a1a1a;
        border-top: 1px solid #2a2a2a;
        z-index: 50;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .mobile-bottomnav .nav-item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        padding: .55rem 0 .6rem;
        color: #c9c9c9;
        font-size: .72rem;
        border-left: none;
        border-top: 3px solid transparent;
        text-align: center;
    }
    .mobile-bottomnav .nav-item.active {
        color: #fff;
        background: #2a2a2a;
        border-left: none;
        border-top-color: #16a34a;
        font-weight: 600;
    }
    .mobile-bottomnav .nav-item svg { width: 22px; height: 22px; }

    /* Loosen the page header so the action button doesn't overflow. */
    .page-head { flex-wrap: wrap; }

    /* Tables/lists: horizontal scroll instead of cramped columns. */
    .detail, .list-card, .kpi-card {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0;
    }

    /* Modal: full-width on phones, no awkward margins. */
    .modal-backdrop .modal {
        max-width: 96vw;
        width: 96vw;
        margin: .5rem auto;
    }
}