/* =============================================================================
styles/app.css
---------------------------------------------------------------------------
All UI styles for Team Navigator. Loaded via from index.html.
Sections are roughly grouped: theme, layout, sidebar, top-nav, cards,
filters, modals, calendars, bulk create, auth gate, admin, etc.
Future split: when convenient, this file can be broken into per-view
stylesheets (tasks.css, people.css, admin.css, ...). For now keeping it
as one file matches the original cascade order.
========================================================================== */
:root { color-scheme: light; }
/* ===== Core layout (was lost during dark-theme revert) ===== */
body { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; background: #f7f7f5; color: #1a1a1a; line-height: 1.45; margin: 0; }
* { box-sizing: border-box; }
.wrap { max-width: none; margin: 0; padding: 16px 24px 40px; }
header.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
header.top h1 { font-size: 22px; font-weight: 650; margin: 0 0 4px; letter-spacing: -0.01em; }
header.top .sub { color: #6b6b6b; font-size: 13px; }
header.top .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.app-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
@media (max-width: 800px) { .app-layout { grid-template-columns: 1fr; } .sidebar { position: static !important; } }
.sidebar { position: sticky; top: 24px; background: #fff; border: 1px solid #ececea; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.nav-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 8px; color: #6b6b6b; cursor: pointer; font-weight: 600; font-size: 13px; border: none; background: transparent; text-align: left; width: 100%; font-family: inherit; transition: all .12s; }
.nav-item:hover { background: #f0efeb; color: #1a1a1a; }
.nav-item.active { background: #1a1a1a; color: #fff; }
.nav-item .nav-count { font-size: 11px; padding: 1px 7px; background: #f0efeb; border-radius: 999px; font-weight: 700; color: #6b6b6b; }
.nav-item .nav-count:empty { display: none; }
.nav-item.active .nav-count { background: #fff; color: #1a1a1a; }
/* Alert state — used for the Requests nav item when there are pending requests. */
.nav-item-alert { color: #b91c1c; }
.nav-item-alert .nav-icon { stroke: #b91c1c; }
.nav-item-alert:hover { background: #fee2e2; color: #b91c1c; }
.nav-item-alert.active { background: #b91c1c; color: #fff; }
.nav-item-alert.active .nav-icon { stroke: #fff; }
.nav-count-alert { background: #b91c1c !important; color: #fff !important; }
.nav-item.active .nav-count.nav-count-alert { background: #fff !important; color: #b91c1c !important; }
/* Buttons */
button.btn { appearance: none; border: 1px solid #d8d6d1; background: #fff; color: #1a1a1a; padding: 7px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; font-weight: 500; font-family: inherit; transition: background .12s; }
button.btn:hover { background: #f0efeb; }
button.btn.primary { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
button.btn.primary:hover { background: #2d2d2d; }
button.btn.danger { color: #b42318; border-color: #fecdca; background: #fef3f2; }
button.btn.danger:hover { background: #fee4e2; }
/* Pills + filters */
.filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filters .label { font-size: 12px; color: #6b6b6b; margin-right: 4px; }
.pill { appearance: none; border: 1px solid #d8d6d1; background: #fff; color: #1a1a1a; padding: 4px 10px; border-radius: 999px; font-size: 12px; cursor: pointer; font-family: inherit; }
.rm-filter-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 5px; }
.rm-filter-pill .rm-owner-mini { flex: 0 0 auto; }
.pill.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.pill.excluded { background: #fef3f2; color: #b42318; border-color: #fecdca; text-decoration: line-through; }
.pill .count-badge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,0.08); font-size: 10px; font-weight: 700; min-width: 16px; text-align: center; }
.pill.active .count-badge { background: rgba(255,255,255,0.25); }
.filter-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.filter-group .label { margin-left: 0 !important; }
.filter-select { appearance: none; -webkit-appearance: none; border: 1px solid #d8d6d1; background: #fff; border-radius: 999px; font-size: 12px; padding: 4px 22px 4px 10px; cursor: pointer; font-family: inherit; }
.search-input { flex: 1; min-width: 180px; max-width: 320px; border: 1px solid #d8d6d1; border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.search-input:focus { outline: 2px solid #1a1a1a; outline-offset: -1px; border-color: transparent; }
/* Page header / segment toggle */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
/* Tasks page header: sticky so the action buttons + view toggle stay visible while scrolling. */
.tasks-page-header {
position: sticky; top: 0; z-index: 30;
background: #fff;
padding: 12px 0 10px;
margin: 0 -24px 14px;
padding-left: 24px; padding-right: 24px;
border-bottom: 1px solid #ececea;
align-items: flex-start;
}
.tasks-page-header-title { flex: 1 1 auto; min-width: 0; }
.tasks-page-header-actions {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
flex-shrink: 0;
}
.page-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.page-subtitle { font-size: 13px; color: #6b6b6b; margin-top: 2px; }
.seg-toggle { display: inline-flex; background: #f0efeb; border-radius: 8px; padding: 2px; }
.seg-toggle button { appearance: none; border: none; background: transparent; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; color: #6b6b6b; font-family: inherit; }
.seg-toggle button.active { background: #fff; color: #1a1a1a; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
/* Team strip + cards grid */
.team-strip { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px; background: #fff; border: 1px solid #ececea; border-radius: 12px; margin-bottom: 14px; }
.team-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; cursor: pointer; border: 1px solid #ececea; background: #faf9f7; font-size: 13px; }
.team-pill:hover { border-color: #d8d6d1; }
.team-pill.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.team-pill.excluded { opacity: 0.55; text-decoration: line-through; color: #6b6b6b; }
.team-pill.excluded::before { content: "− "; font-weight: 700; opacity: 0.7; }
/* Owner picker for roadmap modal */
.rmf-owner-picker { position: relative; }
.rmf-owner-trigger {
display: flex; align-items: center; gap: 8px;
width: 100%; padding: 8px 10px;
border: 1px solid #d8d6d1; border-radius: 8px;
background: #fff; cursor: pointer; font-family: inherit;
font-size: 13px; color: #1a1a1a; text-align: left;
justify-content: space-between;
}
.rmf-owner-trigger:hover { border-color: #1a1a1a; }
.rmf-owner-trigger:focus { outline: none; border-color: #1a1a1a; box-shadow: 0 0 0 2px rgba(26,26,26,0.08); }
.rmf-owner-label-with-av { display: flex; align-items: center; gap: 8px; }
.rmf-owner-label-with-av .av {
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 10px; font-weight: 700; overflow: hidden;
}
.rmf-owner-label-with-av .av img { width: 22px; height: 22px; object-fit: cover; }
.team-pill .av { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; position: relative; color: #fff; font-weight: 600; font-size: 11px; display: inline-flex; }
.team-pill .av .ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; }
.team-pill .av img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.team-pill .count { font-size: 11px; opacity: .7; margin-left: 2px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.card { background: #fff; border: 1px solid #ececea; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 0 rgba(0,0,0,0.02); position: relative; }
.person, .person-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; color: #fff; font-weight: 600; font-size: 14px; overflow: hidden; position: relative; }
.avatar .ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; }
.avatar img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.role { font-size: 11px; color: #6b6b6b; }
.stats { display: flex; gap: 8px; font-size: 11px; color: #6b6b6b; flex-wrap: wrap; padding: 4px 0; }
.stats .stat { display: inline-flex; gap: 4px; align-items: center; }
.stats .dot { width: 6px; height: 6px; border-radius: 50%; }
.dot.empty { background: #cbd5e1; } .dot.waiting { background: #38bdf8; } .dot.proposed { background: #1d4ed8; }
.dot.later-next { background: #dc2626; } .dot.in-progress { background: #f97316; } .dot.under-review { background: #7c3aed; }
.dot.completed { background: #16a34a; } .dot.archived { background: #92400e; } .dot.discarded { background: #9a9a9a; }
.tasks { display: flex; flex-direction: column; gap: 4px; max-height: 540px; overflow-y: auto; padding-right: 2px; }
.tasks:empty::before { content: "No tasks match these filters"; display: block; font-size: 12px; color: #9a9a9a; padding: 6px 2px; }
.task { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; padding: 6px 8px; border-radius: 8px; background: #faf9f7; border: 1px solid #efeeea; align-items: center; }
.task[data-pstatus=""] { background: #fff; border-color: #ececea; }
.task[data-pstatus="Waiting"] { background: #e0f2fe; border-color: #7dd3fc; }
.task[data-pstatus="Proposed"] { background: #c7d2fe; border-color: #818cf8; }
.task[data-pstatus="Later / Next"] { background: #fee2e2; border-color: #fca5a5; }
.task[data-pstatus="In Progress"] { background: #ffedd5; border-color: #fed7aa; }
.task[data-pstatus="Under Review"] { background: #ede9fe; border-color: #c4b5fd; }
.task[data-pstatus="Completed"] { background: #ecfdf3; border-color: #a7f3d0; }
.task[data-pstatus="Completed"] .text { text-decoration: line-through; color: #047857; opacity: 0.85; }
.task[data-pstatus="Archived"] { background: #f5efe6; border-color: #d6c5a8; opacity: 0.85; }
.task[data-pstatus="Archived"] .text { color: #78350f; }
.task[data-pstatus="Discarded"] { background: #f5f5f4; border-color: #d8d6d1; opacity: 0.75; }
.task[data-pstatus="Discarded"] .text { text-decoration: line-through; color: #64748b; }
.task[data-selected="true"] { outline: 2px solid #1a1a1a; outline-offset: -1px; }
.task .text { font-size: 13px; word-break: break-word; line-height: 1.3; font-weight: 500; cursor: pointer; }
.task .checkbox { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #d8d6d1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; flex-shrink: 0; font-size: 11px; line-height: 1; }
.task .checkbox.checked { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.task .checkbox.checked::before { content: "\2713"; }
.task .badges { grid-column: 2 / -1; display: flex; gap: 3px; flex-wrap: wrap; margin-top: 2px; }
/* Compact aggregate mini-badge — inline with the other badges. Rounded, tiny font, pill inside. */
.task-agg {
display: inline-flex; align-items: center; gap: 4px;
padding: 1px 6px;
background: #fff;
border: 1px solid #e6e3da;
border-radius: 999px;
font-size: 9.5px; line-height: 1.4;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
vertical-align: middle;
}
.task-agg .ta-key {
font-size: 8.5px; font-weight: 700; color: #9a9a9a;
text-transform: uppercase; letter-spacing: .04em;
}
.task-agg .ta-pill {
font-size: 9px; font-weight: 700;
border: 1px solid #d8d6d1; border-radius: 999px;
padding: 0 5px;
max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-agg .ta-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 0; line-height: 1; }
.task-agg .ta-val {
font-size: 9.5px; font-weight: 600; color: #1a1a1a;
font-variant-numeric: tabular-nums;
}
.task-agg .ta-val.empty { color: #b3b3b3; font-style: italic; }
.task-agg .ta-val-mini {
font-size: 8px; font-weight: 500; color: #9a9a9a; opacity: 0.85;
font-variant-numeric: tabular-nums;
margin-top: 1px;
}
.task-agg .ta-span {
font-size: 9px; font-weight: 700; color: #6b6b6b;
font-variant-numeric: tabular-nums;
padding: 0 3px;
background: #f5f5f4; border-radius: 999px;
}
.badge { display: inline-flex; padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.badge.prio-Critical { background: #fee4e2; color: #b42318; }
.badge.prio-High { background: #fef0c7; color: #b54708; }
.badge.prio-Medium { background: #d1fadf; color: #027a48; }
.badge.prio-Low { background: #e0f2fe; color: #0369a1; }
.badge.prio-VeryLow { background: #c7d2fe; color: #1e3a8a; }
.badge.type-Project { background: #f4ebff; color: #6941c6; }
.badge.type-Responsability { background: #e0eaff; color: #3538cd; }
.badge.type-Request { background: #ecfdf3; color: #027a48; }
.badge.type-ERROR { background: #fee4e2; color: #b42318; }
.badge.type-Infinite { background: #fef0c7; color: #92400e; }
.badge.slack-status { background: #f0efeb; color: #6b6b6b; }
.badge.due { background: #fff3eb; color: #c2410c; }
.badge.hours { background: #f0f9ff; color: #075985; }
.badge.pending-sync { background: #fef3c7; color: #92400e; }
/* Proposed-by mini avatars on task cards (small overlap, ring color by person section). */
.task-proposers { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 2px; }
.task-proposer {
width: 18px; height: 18px; border-radius: 50%;
overflow: hidden; position: relative;
color: #fff; font-weight: 700; font-size: 8px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
border: 2px solid #fff;
box-shadow: 0 0 0 1.5px #9a9a9a;
}
.task-proposer + .task-proposer { margin-left: -6px; }
.task-proposer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.task-proposer .ini { position: relative; z-index: 0; }
/* Section-ring color: Disabled=gray, Bookline=black, Team=cyan, Supplementary=green. */
.task-proposer.psec-disabled { box-shadow: 0 0 0 1.5px #9a9a9a; }
.task-proposer.psec-bookline { box-shadow: 0 0 0 1.5px #1a1a1a; }
.task-proposer.psec-team { box-shadow: 0 0 0 1.5px #06b6d4; }
.task-proposer.psec-supplementary { box-shadow: 0 0 0 1.5px #16a34a; }
.task-proposer-more { font-size: 10px; color: #6b6b6b; margin-left: 6px; font-weight: 600; }
.task select { appearance: none; -webkit-appearance: none; border: 1px solid #e2e0db; background: #fff; border-radius: 6px; font-size: 11px; padding: 2px 18px 2px 8px; cursor: pointer; flex-shrink: 0; font-family: inherit; }
.task .edit-btn { appearance: none; border: none; background: transparent; cursor: pointer; color: #9a9a9a; font-size: 14px; padding: 0 6px; flex-shrink: 0; }
.task .edit-btn:hover { color: #1a1a1a; }
.task-tag { display: inline-flex; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.add-row { display: flex; gap: 6px; margin-top: 6px; }
.add-row input { flex: 1; min-width: 0; border: 1px solid #d8d6d1; border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.add-row button { appearance: none; border: none; background: #1a1a1a; color: #fff; border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; font-weight: 500; font-family: inherit; }
/* Flat tasks */
.flat-tasks { display: flex; flex-direction: column; gap: 4px; }
.flat-task { display: grid; grid-template-columns: 16px 32px 1fr auto auto; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 8px; background: #faf9f7; border: 1px solid #efeeea; }
.flat-task[data-pstatus=""] { background: #fff; border-color: #ececea; }
.flat-task[data-pstatus="Waiting"] { background: #e0f2fe; border-color: #7dd3fc; }
.flat-task[data-pstatus="Proposed"] { background: #c7d2fe; border-color: #818cf8; }
.flat-task[data-pstatus="Later / Next"] { background: #fee2e2; border-color: #fca5a5; }
.flat-task[data-pstatus="In Progress"] { background: #ffedd5; border-color: #fed7aa; }
.flat-task[data-pstatus="Under Review"] { background: #ede9fe; border-color: #c4b5fd; }
.flat-task[data-pstatus="Completed"] { background: #ecfdf3; border-color: #a7f3d0; }
.flat-task[data-pstatus="Archived"] { background: #f5efe6; border-color: #d6c5a8; opacity: 0.85; }
.flat-task[data-pstatus="Discarded"] { background: #f5f5f4; border-color: #d8d6d1; opacity: 0.75; }
.flat-task .text { font-size: 13px; cursor: pointer; }
.flat-task .av-mini { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; position: relative; color: #fff; font-weight: 600; font-size: 11px; display: inline-flex; }
.flat-task .av-mini .ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; }
.flat-task .av-mini img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.flat-task .checkbox { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #d8d6d1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; }
.flat-task .checkbox.checked { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.flat-task .checkbox.checked::before { content: "\2713"; }
.flat-task .edit-btn { appearance: none; border: none; background: transparent; cursor: pointer; color: #9a9a9a; }
/* Members page grid */
.members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
/* When a section has sub-groups (e.g. Bookline · Con tasks / Sin tasks), don't grid the outer */
.members-grid.members-grid-bookline-with-subs { display: block; }
.members-grid-bookline-with-subs .members-subsection-label { font-size: 12px; font-weight: 600; color: #9a9a9a; text-transform: uppercase; letter-spacing: 0.04em; margin: 14px 0 8px; padding-left: 2px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.members-grid-bookline-with-subs .members-subsection-label:first-child { margin-top: 0; }
.members-grid-bookline-with-subs .members-subsection-label:hover { color: #6b6b6b; }
.members-grid-bookline-with-subs .members-subsection-caret { font-size: 10px; color: #b8b8b8; }
.members-grid-bookline-with-subs .members-subsection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.member-card { padding: 16px; background: #fff; border: 1px solid #ececea; border-radius: 12px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: all .12s; min-width: 0; overflow: hidden; }
.member-card .person-row { min-width: 0; display: flex; align-items: center; gap: 10px; }
.member-card .person-row .meta { min-width: 0; flex: 1; }
/* Edit pencil — visible only on custom members. Sits next to the meta block. */
.member-card .member-edit-btn {
appearance: none; border: 1px solid #ececea; background: #fff; color: #6b6b6b;
width: 28px; height: 28px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; cursor: pointer; flex-shrink: 0;
transition: all .15s;
}
.member-card .member-edit-btn:hover { background: #faf9f7; color: #1a1a1a; border-color: #d8d6d1; }
body.bn-read-only .member-card .member-edit-btn { display: none !important; }
/* People group: chips inside the group's card with each member. Clicking a
chip jumps to that person's profile. */
.member-card.member-people-group { border-color: #d8d6d1; background: linear-gradient(180deg, #faf9f7 0%, #fff 30%); }
.member-group-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 2px; }
.member-group-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px 3px 3px;
background: #fff; border: 1px solid #ececea; border-radius: 999px;
font-size: 11.5px; cursor: pointer;
transition: background .15s, border-color .15s;
}
.member-group-chip:hover { background: #faf9f7; border-color: #d8d6d1; }
.member-group-chip .av-mini {
width: 20px; height: 20px; border-radius: 50%;
background: #9a9a9a; color: #fff; font-weight: 700; font-size: 9px;
display: inline-flex; align-items: center; justify-content: center;
overflow: hidden; flex-shrink: 0; position: relative;
}
.member-group-chip .av-mini img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.member-group-empty { color: #9a9a9a; font-size: 11px; font-style: italic; }
.member-card .name { font-weight: 700; font-size: 14px; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-card .role { font-size: 12px; color: #6b6b6b; }
.member-card .email { font-size: 12px; color: #6b6b6b; word-break: break-all; line-height: 1.3; }
.person-roadmaps-line { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rm-mini-badge {
display: inline-flex; align-items: center; gap: 4px;
background: #f0efeb; color: #1a1a1a; border: 1px solid #ececea;
border-radius: 6px; padding: 2px 6px; font-size: 10.5px; font-weight: 600;
cursor: pointer; transition: background .12s, border-color .12s;
}
.rm-mini-badge:hover { background: #e7e5e0; border-color: #d8d6d1; }
.rm-mini-owner { color: #1a1a1a; font-size: 8px; }
.member-card:hover { border-color: #1a1a1a; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.member-card.deactivated { opacity: 0.55; }
/* Roadmaps page */
.rm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.rm-selector { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.rm-tab.dragging { opacity: .4; }
.rm-tab.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
/* Roadmap title picker — same pattern as Profile name picker */
.rm-name-trigger {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; user-select: none;
border-radius: 8px; padding: 2px 8px; margin-left: -8px;
transition: background .12s;
}
.rm-name-trigger:hover { background: #f7f6f2; }
.rm-name-trigger .arrow { font-size: 14px; color: #6b6b6b; transition: transform .12s; }
.rm-name-trigger.open .arrow { transform: rotate(180deg); }
.rm-name-popover {
position: absolute; z-index: 50;
top: 100%; left: -8px;
margin-top: 4px; min-width: 280px;
background: #fff; border: 1px solid #ececea; border-radius: 12px;
box-shadow: 0 12px 32px rgba(0,0,0,.12);
overflow: hidden;
}
.rm-name-popover .pp-search { padding: 8px; border-bottom: 1px solid #f1efe9; }
.rm-name-popover .pp-search input {
width: 100%; box-sizing: border-box; padding: 6px 10px;
border: 1px solid #ececea; border-radius: 8px;
font-size: 13px; font-family: inherit; outline: none;
}
.rm-name-popover .pp-search input:focus { border-color: #1a1a1a; }
.rm-name-popover .pp-list { max-height: 280px; overflow-y: auto; padding: 4px 0; }
.rm-name-popover .pp-row {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 6px 12px; cursor: pointer;
}
.rm-name-popover .pp-row:hover { background: #f7f6f2; }
.rm-name-popover .pp-row.active { background: #1a1a1a; color: #fff; }
.rm-name-popover .pp-row .nm { flex: 1; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-name-popover .pp-row .cnt { font-size: 11px; opacity: 0.7; }
.rm-name-popover .pp-empty { padding: 16px 12px; text-align: center; color: #9a9a9a; font-size: 12px; }
/* Task modal — per-roadmap rows with dates + jump link.
Flex-wrap lets multiple chips sit side-by-side when there's horizontal room. */
.rm-modal-list { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.rm-modal-row {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 8px;
background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
font-size: 12px;
flex: 0 1 auto; min-width: 0; max-width: 100%;
}
.rm-modal-link {
appearance: none; border: none; background: transparent;
color: #92400e; font-weight: 700; cursor: pointer;
padding: 0; font-family: inherit; font-size: 12px;
text-align: left; flex: 1 1 auto; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-modal-link:hover { text-decoration: underline; color: #78350f; }
/* Per-row Apply-style component: pin + start + N days + end + pin, with source chips below.
(The modal chip no longer renders date editors; this is kept for legacy callers.) */
.rm-modal-row.has-dates { flex-wrap: wrap; align-items: flex-start; flex-basis: 100%; }
.rm-modal-row.has-dates .rm-modal-dates {
display: inline-flex; align-items: flex-start; gap: 6px;
flex-wrap: nowrap;
}
.rm-modal-pin {
background: #fff; border: 1px solid #fde68a; border-radius: 5px;
padding: 2px 4px; cursor: pointer;
font-size: 10.5px; line-height: 1;
opacity: .65; transition: all .12s;
}
.rm-modal-pin:hover { opacity: 1; border-color: #d97706; }
.rm-modal-days-cell input.rm-modal-days {
width: 44px; padding: 2px 4px; font-size: 11px;
border: 1px solid #fde68a; border-radius: 6px;
background: #fff; color: #92400e;
text-align: center;
}
.rm-modal-days-cell input.rm-modal-days:focus { outline: none; border-color: #d97706; box-shadow: 0 0 0 2px rgba(217,119,6,0.15); }
/* Pill that replaces the date input when a source label (start of X / end of X) is set.
The whole pill is a single clickable button — clicking it clears the source and reveals the
date input. The resolved date moves BELOW the pill as a dim "= YYYY-MM-DD" reference (also
clickable). */
.rm-modal-pill-btn {
appearance: none;
display: inline-flex; align-items: center; gap: 4px;
background: #fef3c7; border: 1px solid #fde68a;
color: #78350f; font-weight: 700; font-size: 11px; font-family: inherit;
padding: 2px 6px; border-radius: 6px;
height: 22px; line-height: 18px;
max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.rm-modal-pill-btn:hover { background: #fde68a; border-color: #d97706; color: #5b2e02; }
.rm-modal-pill-btn .bn-pill-x { font-weight: 700; opacity: .65; padding-left: 2px; }
.rm-modal-pill-btn:hover .bn-pill-x { opacity: 1; color: #b91c1c; }
.rm-modal-date-display {
appearance: none; background: transparent; border: none; padding: 0 4px;
font-family: inherit;
font-size: 10px; color: #92400e; opacity: 0.75;
font-variant-numeric: tabular-nums;
margin-top: 1px;
align-self: flex-start;
cursor: pointer;
text-align: left;
}
.rm-modal-date-display:hover { opacity: 1; text-decoration: underline; }
/* Read-only "= N days" indicator below the End date in each roadmap row */
/* Mini avatar used in roadmap rows / picker (replaces the old pin emoji) */
.rm-owner-mini {
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
position: relative;
color: #fff; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
vertical-align: middle;
}
.rm-owner-mini.empty { background: #d8d6d1; color: #6b6b6b; font-weight: 500; }
.rm-owner-mini .ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; }
.rm-owner-mini img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.rm-modal-link { display: inline-flex; align-items: center; gap: 6px; }
.rm-name-popover .pp-row .nm { display: inline-flex; align-items: center; gap: 8px; }
.rm-name-popover .pp-row .nm-text { flex: 1; }
.rm-name-trigger { display: inline-flex; align-items: center; gap: 8px; }
.rm-name-trigger .rm-owner-mini { width: 24px; height: 24px; font-size: 10px; }
/* Subtasks panel inside the task modal */
.subtasks-list { display: flex; flex-direction: column; gap: 4px; }
.subtask-row {
display: flex; align-items: center; gap: 8px;
padding: 5px 8px;
background: #f7f5ee; border: 1px solid #ece8d8; border-radius: 8px;
font-size: 12px;
}
.subtask-link {
appearance: none; border: none; background: transparent;
color: #1a1a1a; font-weight: 600; cursor: pointer;
padding: 0; font-family: inherit; font-size: 12px;
text-align: left; flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; gap: 6px;
}
.subtask-link:hover { text-decoration: underline; color: #d97706; }
.subtask-icon { font-size: 13px; flex-shrink: 0; color: #92400e; }
.subtask-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subtask-status {
flex-shrink: 0;
font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
background: #eef2ff; color: #3730a3;
text-transform: uppercase; letter-spacing: 0.03em;
}
.subtask-detach {
appearance: none; border: none; background: transparent;
color: #6b6b6b; cursor: pointer;
padding: 0; font-size: 16px; line-height: 1;
width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 4px;
flex-shrink: 0;
}
.subtask-detach:hover { background: rgba(0,0,0,0.06); color: #1a1a1a; }
/* Drag-reorder support for subtask rows */
.subtask-row[draggable="true"] { cursor: grab; }
.subtask-row[draggable="true"]:active { cursor: grabbing; }
.subtask-drag-handle {
flex-shrink: 0;
color: #b5b1a0; font-size: 12px; line-height: 1;
padding: 0 2px;
user-select: none;
letter-spacing: -2px;
cursor: grab;
}
.subtask-row:hover .subtask-drag-handle { color: #6b6b6b; }
.subtask-row.subtask-dragging { opacity: 0.4; }
.subtask-row.subtask-drag-over-before {
box-shadow: 0 -2px 0 0 #d97706 inset, 0 -2px 0 0 #d97706;
}
.subtask-row.subtask-drag-over-after {
box-shadow: 0 2px 0 0 #d97706 inset, 0 2px 0 0 #d97706;
}
/* Cross-group drag indicators for list/by-person views.
- .bn-drop-target-group highlights an entire group row / children area
to signal "drop here to make this the new parent".
- .subtask-drag-over-before/after on .flat-task or .task indicates an
in-place reorder within the same group. */
.flat-task.bn-subtask-draggable,
.task.bn-subtask-draggable { cursor: grab; }
.flat-task.bn-subtask-draggable:active,
.task.bn-subtask-draggable:active { cursor: grabbing; }
.flat-task.subtask-dragging,
.task.subtask-dragging { opacity: 0.4; }
.flat-task.bn-drop-target-group,
.task.bn-drop-target-group {
outline: 2px dashed #d97706;
outline-offset: -2px;
background: rgba(217, 119, 6, 0.08);
}
.group-children.bn-drop-target-group,
.card-group-children.bn-drop-target-group {
outline: 2px dashed #d97706;
outline-offset: -2px;
background: rgba(217, 119, 6, 0.06);
border-radius: 6px;
}
.flat-task.subtask-drag-over-before {
box-shadow: 0 -2px 0 0 #d97706 inset, 0 -2px 0 0 #d97706;
}
.flat-task.subtask-drag-over-after {
box-shadow: 0 2px 0 0 #d97706 inset, 0 2px 0 0 #d97706;
}
.task.subtask-drag-over-before {
box-shadow: 0 -2px 0 0 #d97706 inset, 0 -2px 0 0 #d97706;
}
.task.subtask-drag-over-after {
box-shadow: 0 2px 0 0 #d97706 inset, 0 2px 0 0 #d97706;
}
.subtask-picker {
position: relative;
}
.subtask-picker-icon {
position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
font-size: 12px; opacity: 0.55; pointer-events: none;
}
#f_subtasksSearch {
width: 100%; box-sizing: border-box;
padding: 7px 10px 7px 30px;
border: 1px solid #ece8d8; border-radius: 8px;
background: #f7f5ee;
font-size: 12.5px; font-family: inherit;
outline: none;
transition: border-color .12s, background .12s;
}
#f_subtasksSearch:focus { border-color: #1a1a1a; background: #fff; box-shadow: 0 0 0 3px rgba(26,26,26,0.06); }
.subtask-suggestions {
/* Fixed overlay positioned by JS based on the search input's bounding rect.
Same reason as .group-picker-dropdown — keep the modal height stable. */
position: fixed; top: 0; left: 0; width: auto;
margin-top: 4px;
background: #fff; border: 1px solid #e6e3da; border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.14);
max-height: 240px; overflow-y: auto;
z-index: 10000;
padding: 4px;
}
.subtask-suggestion {
display: flex; align-items: center; gap: 8px;
width: 100%; padding: 6px 8px;
background: transparent; border: none; border-radius: 6px;
font-family: inherit; font-size: 12.5px; color: #1a1a1a;
text-align: left; cursor: pointer;
}
.subtask-suggestion:hover { background: #f5f3ed; }
.subtask-suggestion .subtask-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subtask-suggestion-empty { padding: 14px 12px; text-align: center; color: #9a9a9a; font-size: 12px; }
.rm-modal-x {
appearance: none; border: none; background: transparent;
color: #92400e; cursor: pointer;
padding: 0; font-size: 16px; line-height: 1;
width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 4px;
flex-shrink: 0;
}
.rm-modal-x:hover { background: rgba(146,64,14,0.15); }
.rm-summary-card { padding: 14px 18px; background: #fff; border: 1px solid #ececea; border-radius: 12px; margin-bottom: 14px; display: flex; align-items: center; gap: 16px; }
.rm-summary-name { font-size: 18px; font-weight: 700; flex-shrink: 0; }
.rm-summary-meta {
font-size: 12px; color: #6b6b6b;
display: flex; align-items: center; justify-content: center;
gap: 10px; flex-wrap: wrap;
flex: 1; /* center within the space remaining between title and actions */
}
.rm-summary-meta .sep { color: #d8d6d1; }
.rm-summary-actions { display: flex; gap: 6px; flex-shrink: 0; }
/* === Joint Roadmaps (admin-only multi-roadmap 6MFN view) === */
/* Title-as-toggle: "Roadmaps" reads as the page title; "Joint" is a small
pill next to it that turns dark when active. The whole control sits inline
in the page header (no chrome around it). */
.bn-rm-title-block { display: flex; flex-direction: column; gap: 4px; }
.bn-rm-mode-toggle { display: inline-flex; align-items: center; gap: 10px; }
.bn-rm-mode-seg { appearance: none; cursor: pointer; }
/* The "Roadmaps" segment looks like the page title — large, bold, no chrome. */
.bn-rm-title-seg {
font-size: 24px; font-weight: 700;
color: #1a1a1a;
background: transparent; border: none;
padding: 0; line-height: 1.1;
font-family: inherit;
transition: color .12s;
}
.bn-rm-title-seg:hover { color: #d97706; }
.bn-rm-title-seg:not(.active) { color: #9a9a9a; font-weight: 600; }
.bn-rm-title-seg:not(.active):hover { color: #1a1a1a; }
/* The "Joint" segment is a pill that mirrors the title's energy when active. */
.bn-rm-joint-seg {
font-size: 13px; font-weight: 600;
background: transparent;
color: #6b6b6b;
border: 1px solid #ececea;
padding: 5px 14px;
border-radius: 999px;
transition: background .12s, color .12s, border-color .12s;
}
.bn-rm-joint-seg:hover { color: #1a1a1a; border-color: #1a1a1a; }
.bn-rm-joint-seg.active {
background: #1a1a1a; color: #fff; border-color: #1a1a1a;
}
/* ---- Joint summary card (chip picker + "Showing tasks from" label) ---- */
.bn-joint-summary {
display: block;
padding: 14px 18px;
background: #fff; border: 1px solid #ececea; border-radius: 12px;
margin-bottom: 14px;
}
.bn-joint-chips-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px; gap: 12px;
}
.bn-joint-chips-label {
font-size: 11px; color: #9a9a9a;
text-transform: uppercase; letter-spacing: 0.05em;
font-weight: 600;
}
.bn-joint-export-btn {
font-size: 12px;
padding: 5px 12px;
border: 1px solid #ececea;
background: #fff;
border-radius: 999px;
cursor: pointer;
color: #1a1a1a;
transition: background .12s, border-color .12s;
}
.bn-joint-export-btn:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.bn-joint-chips {
display: flex; flex-wrap: wrap;
gap: 6px;
align-items: center;
}
/* ---- Joint rows: wider label column (300px), badges nowrap, cleaner pills ---- */
.cal-year-row.bn-joint-row {
grid-template-columns: 300px 1fr;
align-items: center;
min-height: 36px;
}
.cal-year-row.bn-joint-row:hover { background: #faf9f7; }
.bn-joint-label {
display: flex !important; align-items: center; gap: 8px;
padding: 6px 10px !important;
overflow: hidden;
min-width: 0;
}
.bn-joint-task-name {
appearance: none; background: transparent; border: none;
color: #1a1a1a; padding: 0; font: inherit; font-weight: 600;
cursor: pointer;
text-align: left;
display: inline-flex; align-items: center; gap: 4px;
overflow: hidden;
min-width: 0;
flex: 0 1 auto;
}
.cal-year-row.bn-joint-row.is-group .bn-joint-task-name { font-weight: 700; color: #92400e; }
.bn-joint-task-name:hover .bn-joint-name-text { text-decoration: underline; color: #d97706; }
.bn-joint-name-text {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 180px;
}
.bn-joint-folder { font-size: 13px; flex-shrink: 0; }
.bn-joint-rm-pills {
display: inline-flex; align-items: center; gap: 4px;
flex-shrink: 0;
margin-left: auto;
}
.bn-joint-rm-pill {
font-size: 10px; font-weight: 600;
padding: 1px 7px;
border-radius: 999px;
white-space: nowrap;
line-height: 1.4;
letter-spacing: 0.02em;
}
.bn-joint-rm-more {
background: #f1efe9 !important;
color: #6b6b6b !important;
border: 1px solid #ececea !important;
}
.bn-joint-chip {
appearance: none;
border: 1px solid #ececea;
background: #faf9f7; color: #1a1a1a;
font-size: 12px; font-weight: 500;
padding: 5px 10px;
border-radius: 999px;
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: background .12s, border-color .12s, color .12s;
}
.bn-joint-chip:hover { background: #f1efe9; border-color: #d8d6d1; }
.bn-joint-chip.selected {
background: #1a1a1a; color: #fff; border-color: #1a1a1a;
}
.bn-joint-chip.selected .bn-joint-chip-cnt { color: #d4d4d4; }
.bn-joint-chip-cnt {
font-size: 10.5px;
color: #9a9a9a;
background: rgba(0,0,0,0.06);
padding: 1px 5px; border-radius: 999px;
}
.bn-joint-chip.selected .bn-joint-chip-cnt { background: rgba(255,255,255,0.18); }
.bn-joint-chip-action {
appearance: none;
border: 1px dashed #d8d6d1;
background: transparent; color: #6b6b6b;
font-size: 11.5px; font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
cursor: pointer;
text-transform: uppercase; letter-spacing: 0.04em;
}
.bn-joint-chip-action {
border-style: solid;
background: #fff;
}
.bn-joint-chip-action:hover { color: #1a1a1a; border-color: #1a1a1a; background: #faf9f7; }
/* Older .bn-joint-rm-badge styling removed — joint rows use .bn-joint-rm-pill
defined further up. The badges now nowrap with a hue-stable color. */
/* ===== Breadcrumb rows for tasks whose parent group is filtered out =====
Used in both the Tasks list view and by-person cards. Each row is a
compact "↘ Parent name" line above a task whose parent didn't match the
current filter. Click → opens the parent's modal (when the user can see it).
If the user has no privacy access to the parent, the name renders as
"↘ …" and the click is harmless. */
.bn-bc-row {
display: flex; align-items: center; gap: 6px;
padding: 2px 8px;
font-size: 11px; color: #9a9a9a;
cursor: pointer;
border-radius: 4px;
user-select: none;
line-height: 1.4;
}
.bn-bc-row:hover { background: #faf9f7; color: #1a1a1a; }
.bn-bc-arrow { font-size: 12px; color: #c4b896; flex-shrink: 0; }
.bn-bc-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-bc-row--card {
padding: 1px 6px;
font-size: 10.5px;
}
.bn-bc-wrap { /* wrapper around the promoted task itself so it indents under the breadcrumb chain */ }
.rm-empty { padding: 40px; text-align: center; color: #9a9a9a; font-size: 13px; }
.rm-task-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; margin-top: 6px; }
.rm-task-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center; padding: 6px 8px; background: #faf9f7; border: 1px solid #efeeea; border-radius: 6px; font-size: 12px; }
/* === Roadmap Calendar (Google Calendar-style) === */
.cal-toolbar {
display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.cal-toolbar .cal-nav-group { display: inline-flex; align-items: center; gap: 6px; }
.cal-nav-btn {
appearance: none; border: 1px solid #d8d6d1; background: #fff; color: #1a1a1a;
width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 16px; font-family: inherit;
display: inline-flex; align-items: center; justify-content: center;
}
.cal-nav-btn:hover { background: #f0efeb; }
.cal-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.cal-nav-btn:disabled:hover { background: transparent; }
.cal-month-label { font-size: 18px; font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.cal-today-btn {
appearance: none; border: 1px solid #d8d6d1; background: #fff; color: #1a1a1a;
padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit;
}
.cal-today-btn:hover { background: #f0efeb; }
/* View toggle (Month / Week) */
.cal-view-toggle {
display: inline-flex; border: 1px solid #d8d6d1; border-radius: 8px; overflow: hidden;
background: #fff;
}
.cal-view-btn {
appearance: none; border: none; background: transparent;
padding: 6px 12px; font-size: 12px; font-weight: 600;
color: #1a1a1a; cursor: pointer; font-family: inherit;
transition: background .12s, color .12s;
}
.cal-view-btn:hover { background: #f0efeb; }
.cal-view-btn.active { background: #1a1a1a; color: #fff; }
.cal-view-btn + .cal-view-btn { border-left: 1px solid #d8d6d1; }
/* ============ Year view (horizontal Gantt) ============ */
.cal-year { display: flex; flex-direction: column; background: #fff; border: 1px solid #ececea; border-radius: 12px; overflow: hidden; }
.cal-year-headers {
display: grid; grid-template-columns: 220px 1fr;
border-bottom: 1px solid #ececea; background: #faf9f7;
}
.cal-year-label-spacer {}
.cal-year-months {
display: grid; grid-template-columns: repeat(12, 1fr);
}
.cal-year-month-cell {
font-size: 11px; color: #6b6b6b; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
padding: 8px 6px; text-align: center;
border-left: 1px solid #ececea;
}
.cal-year-rows-wrap { position: relative; }
.cal-year-track-bg {
position: absolute; inset: 0;
display: grid; grid-template-columns: 220px 1fr;
pointer-events: none;
}
.cal-year-track-bg > :first-child { content: ""; }
.cal-year-months-bg {
display: grid; grid-template-columns: repeat(12, 1fr);
grid-column: 2;
position: relative;
}
.cal-year-month-bg { border-left: 1px solid #f3f1ed; }
.cal-year-month-bg.alt { background: #fafaf7; }
.cal-year-today-line {
position: absolute; top: 0; bottom: 0;
width: 0; border-left: 2px solid #dc2626;
pointer-events: none;
z-index: 3;
}
.cal-year-rows { position: relative; z-index: 2; }
.cal-year-row {
display: grid; grid-template-columns: 220px 1fr;
/* Stretch so the track matches the row height when the label wraps to
2-3 lines. Keeps timeline pills aligned with their row regardless of
how tall a label grows. */
align-items: stretch; min-height: 28px;
border-top: 1px solid #f3f1ed;
}
.cal-year-row:first-child { border-top: none; }
.cal-year-row.is-child { font-size: 12px; }
.cal-year-label {
padding: 4px 8px; font-size: 11.5px; line-height: 1.2; color: #1a1a1a;
word-break: break-word; overflow-wrap: break-word;
border-right: 1px solid #ececea;
/* No clamp here — rely on max-height on .cal-year-label-text to cap
at 3 lines. Keeping overflow:visible lets the inner element show its
full clamped content rather than being re-clipped by the flex item. */
overflow: visible;
}
.cal-year-row.is-group .cal-year-label { font-weight: 700; color: #92400e; }
.cal-year-row.is-child .cal-year-label { color: #555; font-weight: 500; }
.cal-year-track {
/* Anchor the 28px bar lane to the TOP of its grid row so bars across all
rows form a continuous horizontal line — even when a sibling row
grew taller because its label wrapped to 2-3 lines. Centering the
track instead made child bars (50px rows) sit 12px lower than their
parent group bar (28px row), which looked broken. */
position: relative; height: 28px;
align-self: start;
}
.cal-year-bar {
/* Bar sits 4px below the top of the (top-anchored) 28px track. Combined
with .cal-year-track align-self:start, every bar across the calendar
is at exactly the same y offset from its row top, so the timeline
reads as a horizontal lane regardless of which rows wrapped their
label to multiple lines. */
position: absolute; top: 4px; height: 20px;
border-radius: 5px; padding: 0 6px;
font-size: 11px; line-height: 20px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.10);
transition: transform .12s, box-shadow .12s;
}
.cal-year-bar:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.18); z-index: 5; }
.cal-year-bar.cal-event-group { font-weight: 700; line-height: 18px; padding: 0 8px; }
.cal-year-label .cal-group-toggle-y,
.cal-year-bar .cal-group-toggle-y {
display: inline-flex; width: 14px; height: 14px;
margin-right: 4px; vertical-align: middle;
align-items: center; justify-content: center;
border: none; background: rgba(255,255,255,0.55);
color: inherit; font-size: 8.5px; line-height: 1; font-weight: 700;
border-radius: 3px; cursor: pointer; padding: 0;
transition: background .12s, transform .15s;
}
.cal-year-bar .cal-group-toggle-y:hover { background: rgba(255,255,255,0.95); }
.cal-year-bar .cal-group-toggle-y.expanded { transform: rotate(90deg); }
/* Same chevron in the label column (left side) */
.cal-year-label .cal-group-toggle-y {
margin-right: 6px;
background: #fff; color: #6b6b6b;
border: 1px solid #ececea;
}
.cal-year-label .cal-group-toggle-y:hover { background: #fff5dc; color: #92400e; border-color: #d6b962; }
.cal-year-label .cal-group-toggle-y.expanded { transform: rotate(90deg); }
/* Flex with align-items:flex-start so chevron + "· " prefix sit inline at
the top-left, and the label-text (block-level flex child) wraps to up
to 3 lines via max-height. Earlier I tried `display:block` here so the
text could clamp, but that pushed "· " to its own line above the name
in 6MFN/Year views. flex-start fixes that AND lets the child reach
its 3.6em max-height because flex-start doesn't constrain cross-axis. */
.cal-year-label { display: flex; align-items: flex-start; gap: 0; }
.cal-year-label .cal-group-toggle-y { flex-shrink: 0; }
.cal-year-label .folder-emoji { margin-right: 4px; flex-shrink: 0; }
.cal-year-label .cal-year-label-text {
flex: 1 1 auto; min-width: 0;
display: block;
word-break: break-word; overflow-wrap: break-word;
line-height: 1.2;
max-height: 3.6em;
overflow: hidden;
}
/* Side toggle (collapse Unscheduled/Archived sidebar) */
.cal-side-toggle {
appearance: none; border: 1px solid #d8d6d1; background: #fff; color: #1a1a1a;
padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600;
font-family: inherit; margin-left: auto;
transition: background .12s;
}
.cal-side-toggle:hover { background: #f0efeb; }
.cal-grid {
display: flex; flex-direction: column;
background: transparent;
border: none; border-radius: 0; overflow: visible;
}
.cal-headers {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #ececea;
}
.cal-day-header {
background: #fff; padding: 10px 8px; font-weight: 700; font-size: 11px; color: #6b6b6b;
text-transform: uppercase; letter-spacing: 0.05em; text-align: center;
box-shadow: 0 0 0 1px #ececea;
}
.cal-week {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: transparent;
position: relative; min-height: 110px;
}
.cal-day {
background: #fff; padding: 6px 8px; font-size: 12px; position: relative;
box-shadow: 0 0 0 1px #ececea;
}
.cal-day.other-month {
background: #f7f7f5 !important;
box-shadow: none !important;
outline: none;
position: relative;
z-index: 1;
}
.cal-day.other-month > * { display: none !important; }
.cal-day .day-num { font-weight: 600; color: #1a1a1a; display: inline-block; }
.cal-day.weekend { background: #fbfaf7; }
.cal-day.today { background: #1a1a1a !important; color: #fff; }
.cal-day.today .day-num { color: #fff; font-weight: 700; }
.cal-day.today .holiday-name { color: rgba(255,255,255,0.7); }
.cal-day.today .day-num.toggle:hover { background: rgba(255,255,255,0.15); }
.cal-events-overlay {
position: absolute; left: 0; right: 0;
top: 30px; bottom: 4px;
pointer-events: none;
}
.cal-event {
position: absolute; height: 20px;
padding: 0 8px; font-size: 11px; font-weight: 600;
color: #fff; line-height: 20px;
border-radius: 5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
cursor: pointer; pointer-events: auto;
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
transition: transform .12s, box-shadow .12s;
}
.cal-event:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.18); z-index: 10; }
.cal-event.continues-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-event.continues-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Group container bar: transparent backdrop tinted by status with a dashed border. Children render on top. */
/* z-index 6 sits ABOVE .no-work-stripes (z-index 5) so the title text isn't crossed by stripes. */
.cal-event.cal-event-group {
font-weight: 700;
border: 1.5px dashed #d97706;
text-align: left;
padding: 2px 8px;
line-height: 22px !important; /* keep title strip at the top regardless of bar height */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
z-index: 6;
}
.cal-event.cal-event-group:hover { transform: none; z-index: 7; filter: brightness(0.96) saturate(1.1); }
.cal-event.cal-event-group.expanded { border-style: solid; }
/* When the group bar hosts children, only the title strip area should catch clicks/hover for the bar itself;
the body below is "open" so children inside receive pointer events directly */
/* Chevron toggle button inline with the group title — appears on every week the group spans */
.cal-event-group .cal-group-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
margin-left: 4px;
vertical-align: middle;
border: none; background: rgba(255,255,255,0.7);
color: inherit; font-size: 10px; line-height: 1; font-weight: 700;
border-radius: 3px; cursor: pointer; padding: 0;
font-family: inherit;
transition: background .12s;
pointer-events: auto;
}
.cal-event-group .cal-group-toggle:hover { background: rgba(255,255,255,0.95); }
/* Nested child inside a group */
.cal-event.cal-event-child {
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
z-index: 8;
padding: 0 4px;
font-weight: 500;
pointer-events: auto;
}
.cal-event.cal-event-child:hover {
z-index: 20;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0,0,0,0.22);
filter: brightness(1.08);
}
.cal-event-child-overflow {
position: absolute; height: 12px;
background: rgba(217,119,6,0.45); color: #fff; font-weight: 700;
font-size: 9.5px; line-height: 12px; text-align: center;
border-radius: 3px; cursor: pointer; z-index: 9;
transition: background .12s;
}
.cal-event-child-overflow:hover { background: rgba(217,119,6,0.7); }
.cal-event-edit-popover {
position: absolute; min-width: 240px; background: #fff;
border: 1px solid #d8d6d1; border-radius: 10px; padding: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.16);
z-index: 200;
font-size: 12px; color: #1a1a1a;
}
.cal-event-edit-popover h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.cal-event-edit-popover .cep-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cal-event-edit-popover .cep-row label { font-size: 11px; color: #6b6b6b; width: 38px; }
.cal-event-edit-popover input[type="date"] { flex: 1; }
.cal-event-edit-popover .cep-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 6px; }
.cal-event-edit-popover .cep-link { background: none; border: none; color: #1a73e8; cursor: pointer; font-size: 11.5px; padding: 0; text-decoration: underline; }
.cal-event-edit-popover button.danger {
background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
padding: 4px 10px; border-radius: 6px; font-size: 11.5px; cursor: pointer;
}
.cal-event-edit-popover button.danger:hover { background: #fee2e2; }
.cal-event-edit-popover .cep-pin {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 5px; border: 1px solid #d8d6d1;
background: #fff;
cursor: pointer; padding: 0; font-size: 11px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
filter: grayscale(1); opacity: .5;
transition: opacity .12s, filter .12s, background .12s, border-color .12s;
}
.cal-event-edit-popover .cep-pin:hover { opacity: .85; filter: grayscale(0.3); }
.cal-event-edit-popover .cep-pin.active {
background: #fef3c7; border-color: #f59e0b;
filter: none; opacity: 1;
}
.cal-event-edit-popover .cep-anchor-hint {
font-size: 10.5px; color: #92400e;
padding: 0 0 6px 44px;
margin-top: -4px;
line-height: 1.4;
}
.cal-event-edit-popover .cep-anchor-hint:empty { display: none; }
.cal-event-edit-popover .cep-anchor-hint strong { color: #1a1a1a; font-weight: 700; }
/* Non-working days (weekends + holidays) */
.cal-day.holiday { background: #ededec; }
.cal-day.holiday .holiday-name {
position: absolute; top: 4px; right: 6px; font-size: 9px; color: #44403c;
font-weight: 600; max-width: 60%; text-align: right;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-transform: uppercase; letter-spacing: 0.02em;
}
.cal-day.weekend { background: #fbfaf7; }
.cal-day.weekend.holiday { background: #fef2f2; }
.cal-day .day-num.toggle {
cursor: pointer; padding: 2px 5px; border-radius: 5px; transition: background .12s;
}
.cal-day .day-num.toggle:hover { background: rgba(0,0,0,0.06); }
.cal-day.worked .day-num.toggle::after {
content: "✓"; margin-left: 4px; color: #16a34a; font-size: 11px;
}
.cal-day.worked { background: #ecfdf3 !important; }
.cal-day.worked .holiday-name { color: #027a48; }
.cal-day.time-off { background: #fef2f2; }
.cal-day.time-off .holiday-name { color: #b42318; }
/* Striped overlay over non-working day columns inside events overlay */
.no-work-stripes {
position: absolute; top: 0; bottom: 0;
background-image: repeating-linear-gradient(
135deg,
transparent 0,
transparent 5px,
var(--stripe-color, rgba(100,116,139,0.30)) 5px,
var(--stripe-color, rgba(100,116,139,0.30)) 7px
);
pointer-events: none;
z-index: 5;
}
.no-work-stripes.time-off { --stripe-color: rgba(220,38,38,0.32); }
/* Time-off day cell */
.cal-day.time-off { background: #fef2f2; }
.cal-day.time-off .holiday-name { color: #b42318; }
.cal-day.time-off .day-num.toggle::before {
content: "🏖"; margin-right: 3px; font-size: 11px;
}
/* Make ALL day numbers clickable to toggle their state */
.cal-day .day-num.toggle { cursor: pointer; padding: 2px 5px; border-radius: 5px; transition: background .12s; }
.cal-day .day-num.toggle:hover { background: rgba(0,0,0,0.06); }
/* Task multi-select for roadmap assign */
.rm-add-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eee; }
.rm-add-panel h4 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.rm-add-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.rm-add-filters input.search-input { flex: 1; min-width: 180px; max-width: none; }
.rm-add-filters select {
border: 1px solid #d8d6d1; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-family: inherit; background: #fff;
}
.rm-add-task-list {
max-height: 280px; overflow-y: auto; border: 1px solid #ececea; border-radius: 8px;
background: #faf9f7;
}
.rm-add-task-row {
display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center;
padding: 6px 10px; border-bottom: 1px solid #efeeea; font-size: 12.5px; cursor: pointer;
}
.rm-add-task-row:last-child { border-bottom: none; }
.rm-add-task-row:hover { background: #f0efeb; }
.rm-add-task-row input[type="checkbox"] { cursor: pointer; }
.rm-add-task-row.selected { background: #ecfdf3; }
.rm-add-task-row .task-resp { font-size: 10.5px; color: #6b6b6b; }
.rm-add-task-row .task-prio { font-size: 9.5px; padding: 1px 6px; border-radius: 999px; font-weight: 600; }
.rm-add-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.rm-add-actions .selected-count { font-size: 12px; color: #6b6b6b; }
/* Roadmap badge on tasks */
.badge.roadmap-badge { background: #e0e7ff; color: #3730a3; }
.badge.roadmap-badge.scheduled { background: #d1fadf; color: #047857; }
.badge.roadmap-badge.partial { background: #fef3c7; color: #92400e; }
.badge.roadmap-badge .rm-dates { opacity: 0.85; font-weight: 600; margin-left: 4px; }
/* Owner avatar inside the roadmap badge: small, vertically centred with the text. */
.badge.roadmap-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 3px; }
.badge.roadmap-badge .rm-owner-mini { width: 14px; height: 14px; font-size: 8px; flex: 0 0 auto; vertical-align: middle; }
.badge.roadmap-badge .rm-owner-mini .ini { font-size: 8px; }
/* Roadmap page — full viewport, no outer scroll */
body.view-roadmaps-active { overflow: hidden !important; height: 100vh; }
body.view-roadmaps-active .main-content {
height: 100vh; min-height: 0 !important;
padding-top: 0 !important; padding-bottom: 16px !important;
display: flex; flex-direction: column; overflow: hidden;
}
body.view-roadmaps-active footer.bot { display: none; }
body.view-roadmaps-active #view-roadmaps {
flex: 1; min-height: 0; padding-top: 8px !important;
}
#view-roadmaps {
display: flex; flex-direction: column; overflow: hidden;
}
#view-roadmaps .page-header,
#view-roadmaps .rm-toolbar { flex-shrink: 0; }
#view-roadmaps #rmPageContent {
flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
/* Roadmap calendar split layout (calendar left, unscheduled right) */
.rm-content-row {
display: grid; grid-template-columns: 1fr 320px; gap: 16px;
flex: 1; min-height: 0; align-items: stretch;
}
.rm-content-row.no-side { grid-template-columns: 1fr; }
@media (max-width: 1200px) { .rm-content-row { grid-template-columns: 1fr; } }
.rm-cal-area { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.rm-cal-area > * { min-height: 0; }
/* The actual calendar grid scrolls internally if needed */
.rm-cal-area .cal-grid { flex: 1; min-height: 0; overflow-y: auto; }
/* Year / 6 MFN view uses .cal-year instead of .cal-grid. Needs the same
vertical scroll behaviour so long lists of task rows don't get clipped. */
.rm-cal-area .cal-year { flex: 1; min-height: 0; overflow-y: auto; }
.rm-side-area {
min-width: 0; min-height: 0;
display: flex; flex-direction: column; align-items: stretch;
overflow: hidden;
}
.rm-side-area .rm-unscheduled {
margin-top: 0 !important;
/* Shrink-to-fit when there are few tasks; cap to available viewport height */
flex: 0 1 auto;
max-height: 100%;
overflow-y: auto;
display: flex; flex-direction: column; gap: 6px;
}
.rm-side-area .rm-unscheduled .rm-unscheduled-head {
position: sticky; top: -12px;
background: #fffbeb !important;
margin: -12px -12px 8px; padding: 14px 12px 10px;
border-bottom: 1px solid #fde68a;
box-shadow: 0 6px 8px -6px rgba(0,0,0,0.18);
z-index: 10;
}
/* Collapsible Unscheduled section: caret rotates 0→90deg when expanded.
Default (no class) is expanded; the .collapsed class is added by JS when
the user folds it. Caret styling matches the Archived/Files sections. */
.rm-side-area .rm-unscheduled .rm-unscheduled-toggle .rm-arch-caret {
font-size: 10px; color: #6b6b6b;
transition: transform .15s;
display: inline-flex; align-items: center; justify-content: center;
width: 14px;
}
.rm-side-area .rm-unscheduled.expanded .rm-unscheduled-toggle .rm-arch-caret { transform: rotate(90deg); }
.rm-side-area .rm-unscheduled.collapsed { padding-bottom: 12px !important; }
.rm-side-area .rm-unscheduled.collapsed .rm-unscheduled-head {
border-bottom: none; box-shadow: none;
}
/* Fixed full-height sidebar (independent of scroll) */
.wrap { padding: 0 !important; margin: 0 !important; max-width: none !important; min-height: 100vh; }
.app-layout { display: block !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; }
.sidebar {
position: fixed !important;
top: 0; left: 0; bottom: 0;
width: 220px;
border-radius: 0 !important;
border: none !important;
border-right: 1px solid #ececea !important;
padding: 16px 14px !important;
overflow-y: auto;
z-index: 50;
background: #fff !important;
}
header.top { padding: 14px 24px; margin-left: 220px; }
.main-content { margin-left: 220px; padding: 0 24px 32px 24px; min-height: calc(100vh - 80px); }
footer.bot { margin-left: 220px; padding: 24px 24px 16px 24px; }
/* On narrow screens collapse to top bar */
@media (max-width: 800px) {
.sidebar {
position: static !important;
width: auto;
border-right: none !important;
border-bottom: 1px solid #ececea !important;
}
header.top, .main-content, footer.bot { margin-left: 0; }
}
.cal-toggle {
display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6b6b6b;
cursor: pointer; user-select: none; padding: 4px 8px; border-radius: 6px;
}
.cal-toggle:hover { background: #f0efeb; }
.cal-toggle input { cursor: pointer; margin: 0; }
/* Compact unscheduled rows in side panel */
.rm-side-area .rm-unscheduled { padding: 12px; max-width: 100%; }
/* Archived section (under Unscheduled) — collapsible */
.rm-side-area .rm-archived { max-width: 100%; }
.rm-side-area .rm-archived-head {
display: flex; align-items: center; gap: 8px;
width: 100%;
appearance: none; border: none; background: transparent;
padding: 10px 12px;
cursor: pointer; user-select: none;
text-align: left; font-family: inherit;
border-radius: 10px;
transition: background .12s;
}
.rm-side-area .rm-archived-head:hover { background: #ececea; }
.rm-side-area .rm-archived-head .rm-arch-caret {
font-size: 10px; color: #6b6b6b;
transition: transform .15s;
display: inline-flex; align-items: center; justify-content: center;
width: 14px;
}
.rm-side-area .rm-archived.expanded .rm-arch-caret { transform: rotate(90deg); }
/* Archived (and Files) sections can grow tall — give the body its own scroll
so they don't get cut off when Unscheduled has eaten the available height.
Cap with vh so the section never grows past ~half the viewport. */
.rm-side-area .rm-archived-body {
display: flex; flex-direction: column; gap: 6px;
max-height: 50vh; overflow-y: auto;
}
.rm-side-area .rm-archived-body .rm-task-row {
background: #ebebe8 !important;
opacity: 0.85;
}
.rm-side-area .rm-task-row {
display: flex !important; flex-direction: column;
gap: 6px;
padding: 8px; font-size: 12px;
border-radius: 8px;
}
.rm-side-area .rm-task-row > span:first-child {
font-weight: 500; line-height: 1.3; word-break: break-word;
}
.rm-side-area .rm-task-row .rmt-start,
.rm-side-area .rm-task-row .rmt-end {
width: 100%; font-size: 11px; padding: 3px 22px 3px 6px; min-width: 0;
}
.rm-side-area .rm-task-row .rmt-head {
display: flex; gap: 6px; align-items: flex-start; justify-content: space-between;
}
.rm-side-area .rm-task-row .rmt-head > span { flex: 1; min-width: 0; }
.rm-side-area .rm-task-row .rmt-title-btn {
appearance: none; border: none; background: transparent;
flex: 1; min-width: 0;
padding: 2px 4px; margin: -2px -4px;
border-radius: 5px;
font-family: inherit; font-size: 12px; font-weight: 500;
line-height: 1.3; color: #1a1a1a;
text-align: left; cursor: pointer;
word-break: break-word; white-space: normal;
transition: background .12s, color .12s;
}
.rm-side-area .rm-task-row .rmt-title-btn:hover {
background: rgba(217,119,6,0.10); color: #92400e;
text-decoration: underline;
}
.rm-side-area .rm-task-row .rmt-group-row { display: flex; }
/* Legacy fallback (kept for any old saved DOM nodes) */
.rm-side-area .rm-task-row .rmt-group-row .rmt-group-pick {
width: 100%; max-width: none; font-size: 11px; padding: 3px 6px;
}
/* Compact chip variant for the calendar sidebar group picker */
.rm-side-area .rm-task-row .rmt-gp-box { position: relative; width: 100%; }
.rm-side-area .rm-task-row .rmt-gp-chip {
padding: 4px 8px; font-size: 11px; min-height: 0; gap: 5px;
border-radius: 6px;
}
.rm-side-area .rm-task-row .rmt-gp-chip .folder-emoji { font-size: 12px; }
.rm-side-area .rm-task-row .rmt-gp-chip .gp-empty { font-size: 11px; }
.rm-side-area .rm-task-row .rmt-gp-chip .gp-caret { font-size: 9px; }
.rm-side-area .rm-task-row .rmt-gp-dropdown { font-size: 12px; }
.rm-side-area .rm-task-row .rmt-duration-row {
display: flex; align-items: center; gap: 4px;
margin-top: 2px; font-size: 10.5px; color: #6b6b6b;
justify-content: flex-end;
}
.rm-side-area .rm-task-row .rmt-duration {
width: 44px; padding: 2px 4px; font-size: 11px;
border: 1px solid #ece8d8; border-radius: 4px;
background: #fff; font-family: inherit;
text-align: center;
}
.rm-side-area .rm-task-row .rmt-duration:focus { outline: none; border-color: #d97706; }
.rm-side-area .rm-task-row .rmt-duration:disabled { background: #f5f5f4; color: #9a9a9a; cursor: not-allowed; }
.rm-side-area .rm-task-row .rmt-dates-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.rm-side-area .rm-task-row .rmt-pair {
display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.rm-side-area .rm-task-row .rmt-pair .rmt-label {
font-size: 10px; color: #6b6b6b; text-transform: uppercase; letter-spacing: 0.04em; padding-left: 2px;
}
.rm-side-area .rm-task-row .rmt-input-wrap {
display: flex; align-items: center; gap: 3px; min-width: 0;
}
.rm-side-area .rm-task-row .rmt-input-wrap input[type="date"] {
flex: 1; min-width: 0; max-width: none;
font-size: 10.5px; padding: 2px 18px 2px 4px;
}
.rm-side-area .rm-task-row .rmt-input-wrap input[type="date"]:disabled {
background: #fff7e6; color: #92400e; opacity: 0.7;
}
.rm-side-area .rm-task-row .rmt-pin {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 5px; border: 1px solid #d8d6d1;
background: #fff;
cursor: pointer; padding: 0; font-size: 11px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
filter: grayscale(1); opacity: .5;
transition: opacity .12s, filter .12s, background .12s, border-color .12s;
}
.rm-side-area .rm-task-row .rmt-pin:hover {
opacity: .85; filter: grayscale(0.3);
}
.rm-side-area .rm-task-row .rmt-pin.active {
background: #fef3c7; border-color: #f59e0b;
filter: none; opacity: 1;
}
/* Task modal — quick "Apply to all roadmaps" row at top of the Roadmaps field */
.bn-quick-apply {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: #f5f3ed; border: 1px solid #ececea; border-radius: 8px;
padding: 8px 10px; margin-bottom: 8px;
}
.bn-quick-apply-inputs {
display: flex; align-items: center; gap: 6px;
}
.bn-quick-apply-input {
width: 140px; padding: 4px 6px; font-size: 12px;
background: #fff; border: 1px solid #d6d3c8; border-radius: 6px;
}
.bn-quick-apply-days { width: 56px; text-align: center; }
.bn-quick-apply-days-unit { font-size: 11px; color: #6b6b6b; }
.bn-quick-apply-days-cell { min-width: 0; }
.bn-quick-apply-cell {
display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.bn-quick-apply-input-wrap {
display: flex; align-items: center; gap: 4px;
}
.bn-quick-apply-pin {
background: #fff; border: 1px solid #d6d3c8; border-radius: 6px;
padding: 3px 6px; cursor: pointer;
font-size: 12px; line-height: 1;
opacity: .65; transition: all .12s;
}
.bn-quick-apply-pin:hover { opacity: 1; border-color: #999; }
/* Source slot wrapper — pass-through; the actual chip/display is now a .rm-modal-date-display button. */
.bn-quick-apply-src { display: inline-flex; align-self: flex-start; }
.bn-quick-apply-feedback {
font-size: 11px; color: #16a34a; font-weight: 600;
background: #dcfce7; padding: 3px 8px; border-radius: 4px;
animation: bnFadeOut 2.4s ease-in-out forwards;
}
.bn-quick-apply-feedback.error {
color: #92400e; background: #fef3c7;
}
@keyframes bnFadeOut {
0%, 70% { opacity: 1; }
100% { opacity: 0; }
}
/* Task modal — simple aggregated display (read-only, min start / max end across roadmaps) */
.bn-agg-display {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
margin-top: 12px; padding: 10px 12px;
background: #f5f3ed; border: 1px dashed #d6d3c8; border-radius: 8px;
}
.bn-agg-display-val {
font-size: 13px; font-weight: 700; color: #1a1a1a;
font-variant-numeric: tabular-nums;
}
.bn-agg-display-val.empty { color: #b3b3b3; font-weight: 500; font-style: italic; }
/* Plain "N days" indicator between Start and End — no pill, just dim text. */
/* Date-below variant: smaller + "= " prefix — used only when a pill is present above it */
.bn-agg-display-val.below {
font-size: 11px; font-weight: 500; opacity: 0.75; color: #92400e;
}
.bn-agg-display-val.below::before { content: '= '; opacity: 0.6; }
.bn-agg-display-stack .bn-agg-display-val { padding: 0 2px; }
/* Task modal — Schedule sections (Apply-to-all editable + Aggregated read-only) */
.bn-sched-cell.bn-sched-apply-cell .btn { font-size: 12px; padding: 6px 14px; white-space: nowrap; }
.bn-sched-cell.bn-sched-dur input[type=number] { width: 64px; }
.bn-sched-pin.active {
background: #fef3c7; border-color: #f59e0b;
opacity: 1;
}
.bn-sched-agg-summary .bn-agg-value.empty { color: #b3b3b3; font-weight: 500; font-style: italic; }
.bn-sched-agg-row .bn-agg-cell.empty { color: #b3b3b3; font-style: italic; }
/* Floating anchor picker menu — modern UI with search + filter chips + per-task start/end */
.bn-anchor-menu {
position: absolute; z-index: 300;
background: #fff; border: 1px solid #e6e3da; border-radius: 12px;
box-shadow: 0 16px 40px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.08);
width: 340px;
padding: 12px;
font-size: 12.5px; color: #1a1a1a;
box-sizing: border-box;
}
.bn-anchor-menu .bam-head {
display: flex; align-items: center; justify-content: space-between;
padding: 0 2px 8px;
border-bottom: 1px solid #f1efe9;
}
.bn-anchor-menu .bam-head strong { font-size: 13px; font-weight: 700; color: #1a1a1a; }
.bn-anchor-menu .bam-close {
width: 22px; height: 22px;
background: transparent; border: none; cursor: pointer;
font-size: 13px; color: #999; line-height: 1;
border-radius: 6px; padding: 0;
font-family: inherit;
}
.bn-anchor-menu .bam-close:hover { background: #f5f3ed; color: #444; }
.bn-anchor-menu .bam-search-wrap {
position: relative; margin-top: 10px;
}
.bn-anchor-menu .bam-search-icon {
position: absolute; left: 10px; top: 50%;
transform: translateY(-50%); font-size: 12px;
pointer-events: none; opacity: 0.55;
}
.bn-anchor-menu .bam-search {
width: 100%; box-sizing: border-box;
padding: 7px 10px 7px 30px;
background: #f7f5ee;
border: 1px solid #ede9dd;
border-radius: 8px;
font-size: 12.5px;
font-family: inherit;
color: #1a1a1a;
outline: none;
transition: border-color .12s, background .12s;
}
.bn-anchor-menu .bam-search:focus {
border-color: #d97706; background: #fff;
box-shadow: 0 0 0 3px rgba(217,119,6,0.12);
}
.bn-anchor-menu .bam-filters {
display: flex; gap: 6px;
margin: 10px 0 6px;
}
.bn-anchor-menu .bam-chip {
flex: 0 0 auto;
padding: 4px 10px;
background: #f5f3ed;
border: 1px solid transparent;
border-radius: 999px;
font-size: 11px; font-weight: 600;
color: #555;
cursor: pointer; font-family: inherit;
transition: background .12s, color .12s;
display: inline-flex; align-items: center; gap: 5px;
}
.bn-anchor-menu .bam-chip:hover { background: #ede9dd; }
.bn-anchor-menu .bam-chip.active { background: #1a1a1a; color: #fff; }
.bn-anchor-menu .bam-count {
display: inline-block;
padding: 0 5px; min-width: 16px;
background: rgba(0,0,0,0.08);
border-radius: 999px;
font-size: 10px; font-weight: 700;
text-align: center; line-height: 14px;
}
.bn-anchor-menu .bam-chip.active .bam-count {
background: rgba(255,255,255,0.25); color: #fff;
}
.bn-anchor-menu .bam-list {
max-height: 280px; overflow-y: auto;
display: flex; flex-direction: column; gap: 1px;
margin-top: 4px;
}
.bn-anchor-menu .bam-row {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 8px;
background: transparent;
border-radius: 8px;
font-family: inherit; font-size: 12.5px; color: #1a1a1a;
gap: 8px;
cursor: default;
}
.bn-anchor-menu .bam-row:hover { background: #fafaf6; }
.bn-anchor-menu .bam-row.bam-custom {
cursor: pointer;
margin-bottom: 4px;
padding-bottom: 8px;
border-bottom: 1px dashed #ede9dd;
border-radius: 8px 8px 0 0;
}
.bn-anchor-menu .bam-row.bam-custom.selected { background: #fef3c7; color: #92400e; font-weight: 600; }
.bn-anchor-menu .bam-icon-custom { display: inline-block; width: 14px; text-align: center; color: #999; font-weight: 700; }
.bn-anchor-menu .bam-row-name {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; gap: 6px;
}
.bn-anchor-menu .bam-row-label {
flex: 1 1 auto; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bn-anchor-menu .bam-icon { font-size: 13px; flex-shrink: 0; }
.bn-anchor-menu .bam-icon-task {
display: inline-block; width: 14px; text-align: center;
color: #999; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.bn-anchor-menu .bam-parent-tag {
display: inline-block; flex-shrink: 0;
font-size: 8.5px; font-weight: 700;
padding: 1px 5px;
background: #fef3c7; color: #92400e;
border: 1px solid #fde68a;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.bn-anchor-menu .bam-row-actions {
display: flex; gap: 4px; flex-shrink: 0;
}
.bn-anchor-menu .bam-side-btn {
padding: 3px 10px;
background: #fff;
border: 1px solid #e6e3da;
border-radius: 999px;
font-size: 10.5px; font-weight: 700;
color: #555;
cursor: pointer; font-family: inherit;
text-transform: uppercase;
letter-spacing: 0.3px;
transition: background .12s, border-color .12s, color .12s;
}
.bn-anchor-menu .bam-side-btn:hover {
background: #fffbeb; border-color: #fbbf24; color: #92400e;
}
.bn-anchor-menu .bam-side-btn.selected {
background: #fbbf24; border-color: #d97706; color: #1a1a1a;
}
.bn-anchor-menu .bam-empty {
text-align: center;
padding: 18px 12px;
color: #999; font-size: 12px;
}
.rm-side-area .rm-task-row .rm-task-del {
background: transparent; color: #dc2626;
border: 1px solid #fecaca;
width: 26px; height: 26px;
border-radius: 6px;
cursor: pointer; font-size: 16px; line-height: 1;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; padding: 0;
font-family: inherit; font-weight: 600;
transition: background .12s, border-color .12s;
}
.rm-side-area .rm-task-row .rm-task-del:hover {
background: #fee2e2; border-color: #fca5a5;
}
.rm-side-area .rm-task-row.ready {
background: #ecfdf3; border: 1px solid #86efac; border-radius: 8px;
}
/* Status-tinted backgrounds for Unscheduled rows (overridden by .ready when scheduled) */
.rm-side-area .rm-task-row[data-pstatus="Waiting"] { background: #e0f2fe; border-color: #7dd3fc; }
.rm-side-area .rm-task-row[data-pstatus="Proposed"] { background: #c7d2fe; border-color: #818cf8; }
.rm-side-area .rm-task-row[data-pstatus="Later / Next"] { background: #fee2e2; border-color: #fca5a5; }
.rm-side-area .rm-task-row[data-pstatus="In Progress"] { background: #ffedd5; border-color: #fed7aa; }
.rm-side-area .rm-task-row[data-pstatus="Under Review"] { background: #ede9fe; border-color: #c4b5fd; }
.rm-side-area .rm-task-row[data-pstatus="Completed"] { background: #ecfdf3; border-color: #a7f3d0; }
.rm-side-area .rm-task-row[data-pstatus="Archived"] { background: #f5efe6; border-color: #d6c5a8; opacity: 0.9; }
.rm-side-area .rm-task-row[data-pstatus="Discarded"] { background: #f5f5f4; border-color: #d8d6d1; opacity: 0.75; }
.rm-unscheduled-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 10px; gap: 8px;
}
.rm-unscheduled-head .btn {
padding: 4px 12px; font-size: 11.5px;
}
.rm-unscheduled-head .btn[disabled] { opacity: .35; cursor: not-allowed; }
.rm-side-area .rm-task-row .rm-task-del {
align-self: flex-end; padding: 0 6px;
}
.rm-owner-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 10px 2px 2px; background: #f0efeb; border-radius: 999px;
cursor: pointer; transition: background .12s;
font-weight: 600; color: #1a1a1a;
}
.rm-owner-chip:hover { background: #e2e0db; }
.rm-owner-chip .rm-owner-name { font-size: 13px; }
.members-section-heading {
font-size: 14px; font-weight: 700; color: #6b6b6b;
margin: 24px 0 10px; padding-top: 14px; border-top: 1px solid #ececea;
display: flex; align-items: center; gap: 8px;
}
.members-section-heading.members-section-toggle { cursor: pointer; user-select: none; }
.members-section-heading.members-section-toggle:hover { color: #1a1a1a; }
.members-section-heading .members-section-caret { font-size: 11px; color: #9a9a9a; min-width: 12px; display: inline-block; }
.members-grid-collapsed { display: none !important; }
.members-section-heading.members-section-bookline {
color: #060818;
background: #060818;
color: #fff;
padding: 10px 14px;
border-radius: 10px;
border-top: none;
}
.members-section-heading.members-section-bookline .members-section-caret { color: #b4c6e0; }
.members-section-heading.members-section-bookline:hover { color: #fff; background: #0c1230; }
.bookline-logo-img { height: 26px; width: auto; display: inline-block; vertical-align: middle; }
.member-card.member-bookline {
border-color: #c7d2e0;
background: #f8fafc;
}
.member-card.member-bookline:hover { border-color: #0F2A4F; box-shadow: 0 0 0 1px #0F2A4F inset; }
.member-card.member-bookline .role { color: #0F2A4F; font-weight: 600; font-size: 11.5px; }
.members-grid-disabled .member-card {
opacity: 0.7;
filter: grayscale(0.7);
background: #f5f5f4 !important;
border-color: #e7e5e4 !important;
}
.members-grid-disabled .member-card .name,
.members-grid-disabled .member-card .role,
.members-grid-disabled .member-card .email a { color: #6b6b6b !important; }
.members-grid-disabled .member-card .email a { color: #6b6b6b !important; text-decoration: none; }
/* Profile page */
#view-profile { padding-top: 18px; }
/* === Profile: personal roadmap (6-month horizontal Gantt) === */
.profile-pr-wrap { margin-top: 8px; }
.profile-pr-toolbar {
display: flex; align-items: center; gap: 12px;
margin-bottom: 8px;
}
.profile-pr-nav { display: inline-flex; align-items: center; gap: 6px; }
.profile-pr-btn {
appearance: none; border: 1px solid #d8d6d1; background: #fff; color: #1a1a1a;
width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; font-family: inherit;
display: inline-flex; align-items: center; justify-content: center;
}
.profile-pr-btn:hover { background: #f0efeb; }
.profile-pr-today-btn { width: auto; padding: 0 12px; font-size: 12px; font-weight: 600; }
.profile-pr-period { font-size: 13px; font-weight: 600; color: #1a1a1a; }
.profile-pr-gantt .cal-year-headers,
.profile-pr-gantt .cal-year-track-bg,
.profile-pr-gantt .cal-year-row { grid-template-columns: 200px 1fr; }
.profile-pr-gantt .cal-year-label { font-size: 12px; padding: 3px 8px; }
.profile-pr-gantt .cal-year-track { height: 24px; }
.profile-pr-gantt .cal-year-bar { top: 3px; height: 18px; line-height: 18px; font-size: 10.5px; padding: 0 4px; }
/* Force the bar text to a single line with ellipsis (was breaking into two lines on narrow bars). */
.profile-pr-bar-text {
display: block;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 100%;
line-height: inherit;
}
/* Clickable label name button — looks like the surrounding text but acts as a link. */
.profile-pr-label-btn {
appearance: none; border: none; background: transparent;
color: inherit; font: inherit;
padding: 0; margin: 0; cursor: pointer;
text-align: left; flex: 1; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-pr-label-btn:hover { text-decoration: underline; color: #d97706; }
.profile-pr-expand-btn {
appearance: none; border: 1px solid #d8d6d1; background: #fff; color: #1a1a1a;
font-family: inherit; font-size: 12px; font-weight: 600;
padding: 4px 10px; border-radius: 8px; cursor: pointer;
}
.profile-pr-expand-btn:hover { background: #f0efeb; }
#view-roadmaps { padding-top: 18px; }
#view-members { padding-top: 18px; }
#view-requests { padding-top: 18px; }
#view-files { padding-top: 18px; }
/* Files page */
/* ============ Files grid view (cards with previews) ============ */
.files-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.file-card {
display: flex; flex-direction: column; gap: 0;
background: #fff; border: 1px solid #ececea; border-radius: 12px;
transition: box-shadow .12s, border-color .12s;
cursor: pointer; min-width: 0; overflow: hidden;
}
.file-card:hover { border-color: #1a1a1a; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.file-card .file-preview {
position: relative; width: 100%; aspect-ratio: 16/10;
background: #f7f6f2; display: flex; align-items: center; justify-content: center;
overflow: hidden; border-bottom: 1px solid #ececea;
}
.file-card .file-preview img.file-thumb {
width: 100%; height: 100%; object-fit: cover; object-position: top center;
transition: opacity .15s; opacity: 0;
}
.file-card .file-preview img.file-thumb.loaded { opacity: 1; }
.file-card .file-preview iframe.file-iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
border: 0; pointer-events: none; background: #fff;
/* Scale the preview down so docs/sheets fit nicely in the card */
transform: scale(0.55); transform-origin: top left;
width: 181.8%; height: 181.8%;
}
.file-card .file-preview .file-icon-fallback {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
padding: 18%;
}
.file-card .file-preview .file-icon-fallback svg { width: 100%; height: 100%; }
.file-card .file-body { padding: 10px 14px 14px; display: flex; align-items: flex-start; gap: 10px; }
.file-card .file-type-mini {
width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.file-card .file-type-mini svg { width: 18px; height: 22px; }
/* Legacy classes kept for compat */
.file-card .file-icon {
width: 40px; height: 40px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 16px; font-weight: 700;
flex-shrink: 0;
}
.file-card .file-info { flex: 1; min-width: 0; }
.file-card .file-name {
font-size: 13.5px; font-weight: 600; color: #1a1a1a;
margin-bottom: 4px; line-height: 1.3;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.file-card .file-meta {
font-size: 11.5px; color: #6b6b6b;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.file-card .file-share {
display: inline-block; font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
padding: 2px 8px; border-radius: 999px;
}
.file-card .file-share.private { background: #f0efeb; color: #6b6b6b; }
.file-card .file-share.team { background: #dbeafe; color: #1e40af; }
.file-card .file-actions {
display: flex; gap: 4px; opacity: 0;
transition: opacity .12s;
}
.file-card:hover .file-actions { opacity: 1; }
.file-card .file-action-btn {
background: transparent; border: 1px solid #ececea; border-radius: 6px;
padding: 4px 8px; font-size: 11px; cursor: pointer; color: #6b6b6b;
font-family: inherit;
}
.file-card .file-action-btn:hover { background: #f7f6f2; color: #1a1a1a; }
.file-card .file-action-btn.danger { color: #dc2626; border-color: #fecaca; }
.file-card .file-action-btn.danger:hover { background: #fef2f2; }
/* Grid: float action buttons over the preview */
.files-view-grid .file-card .file-actions {
position: absolute; top: 6px; right: 6px; gap: 4px; z-index: 2;
}
.files-view-grid .file-card .file-action-btn {
background: rgba(255,255,255,.92);
backdrop-filter: blur(4px);
border: 1px solid rgba(0,0,0,.06);
}
/* ============ Files list view ============ */
.files-list { display: flex; flex-direction: column; }
.files-view-list .file-card {
flex-direction: row; align-items: center; gap: 12px;
padding: 8px 12px; border-radius: 0;
border-left: none; border-right: none; border-top: none;
border-bottom: 1px solid #ececea;
}
.files-view-list .file-card:first-child { border-top: 1px solid #ececea; }
.files-view-list .file-card:hover { background: #faf9f7; box-shadow: none; border-color: #ececea; }
.files-view-list .file-card .file-preview { display: none; }
.files-view-list .file-card .file-body { padding: 0; flex: 1; min-width: 0; align-items: center; gap: 10px; }
.files-view-list .file-card .file-type-mini { width: 32px; height: 32px; }
.files-view-list .file-card .file-type-mini svg { width: 24px; height: 30px; }
.files-view-list .file-card .file-name {
font-size: 14px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
display: block; margin: 0; flex: 1;
}
.files-view-list .file-card .file-meta { flex-shrink: 0; min-width: 0; gap: 12px; }
.files-view-list .file-card .file-actions { opacity: 1; flex-shrink: 0; }
/* View toggle pill */
.files-view-toggle { display: inline-flex; gap: 0; border: 1px solid #d8d6d1; border-radius: 8px; overflow: hidden; }
.files-view-toggle button {
appearance: none; background: #fff; border: none; padding: 6px 10px;
cursor: pointer; color: #6b6b6b; font-family: inherit; font-size: 12px;
display: inline-flex; align-items: center; gap: 4px;
}
.files-view-toggle button.active { background: #1a1a1a; color: #fff; }
.files-view-toggle button:not(.active):hover { background: #f7f6f2; color: #1a1a1a; }
.files-empty {
padding: 48px 24px; text-align: center; color: #6b6b6b; font-size: 13px;
background: #fff; border: 1px dashed #ececea; border-radius: 12px;
}
.files-filter-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px; border-radius: 999px;
border: 1px solid #d8d6d1; background: #fff; cursor: pointer;
font-size: 12px; font-weight: 600; margin-right: 6px;
color: #1a1a1a; font-family: inherit;
}
.files-filter-pill.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.files-filter-pill .count { color: #9a9a9a; font-weight: 600; margin-left: 4px; }
.files-filter-pill.active .count { color: rgba(255,255,255,0.7); }
/* Requests page */
.rq-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rq-toolbar .rq-sync-info { font-size: 11.5px; color: #6b6b6b; }
.rq-section-title {
font-size: 13px; font-weight: 700; color: #1a1a1a;
text-transform: uppercase; letter-spacing: .04em; margin: 20px 0 10px;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.rq-section-title .count { color: #9a9a9a; font-weight: 600; }
.rq-section-toggle { cursor: pointer; user-select: none; padding: 4px 0; }
.rq-section-toggle .caret { display: inline-block; min-width: 14px; color: #9a9a9a; font-size: 11px; }
.rq-empty { padding: 28px; text-align: center; color: #9a9a9a; font-size: 13px; background: #fff; border: 1px dashed #ececea; border-radius: 12px; }
.rq-list { display: flex; flex-direction: column; gap: 12px; }
.rq-card {
background: #fff; border: 1px solid #ececea; border-radius: 14px;
padding: 16px 18px; transition: box-shadow .12s;
}
.rq-card.handled { background: #f7f6f2; opacity: 0.8; }
.rq-card .rq-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rq-card h4 { margin: 0; font-size: 16px; font-weight: 700; color: #1a1a1a; }
.rq-card .rq-meta { font-size: 11.5px; color: #6b6b6b; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rq-card .rq-meta .sep { color: #d8d6d1; }
.rq-card .rq-meta .av { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700; overflow: hidden; }
.rq-card .rq-meta .av img { width: 18px; height: 18px; object-fit: cover; }
.rq-card .rq-section { margin-top: 8px; }
.rq-card .rq-label { font-size: 10.5px; color: #9a9a9a; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.rq-card .rq-comments { font-size: 13px; color: #1a1a1a; line-height: 1.45; white-space: pre-wrap; }
.rq-card .rq-proposed { display: flex; gap: 6px; flex-wrap: wrap; }
.rq-card .rq-proposed .chip {
display: inline-flex; align-items: center; gap: 5px;
background: #f0efeb; padding: 3px 9px 3px 3px; border-radius: 999px;
font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.rq-card .rq-proposed .chip:hover { background: #e7e5e0; }
.rq-card .rq-proposed .chip .av { width: 18px; height: 18px; }
.rq-card .rq-proposed .chip .av img { width: 18px; height: 18px; object-fit: cover; }
.rq-card .av img { width: 100%; height: 100%; object-fit: cover; }
.rq-card .rq-privacy {
display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; padding: 2px 8px; border-radius: 999px;
background: #f0efeb; color: #6b6b6b;
}
.rq-card .rq-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0efeb; }
.rq-card .rq-actions .btn.approve { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.rq-card .rq-actions .btn.reject { background: #fff; color: #dc2626; border-color: #fecaca; }
.rq-card .rq-actions .btn.dismiss { background: #fff; color: #6b6b6b; border-color: #d8d6d1; }
.rq-card .rq-actions .rq-link { margin-left: auto; font-size: 11.5px; color: #6b6b6b; text-decoration: none; align-self: center; }
.rq-card .rq-actions .rq-link:hover { color: #1a1a1a; }
.rq-card .rq-handled-badge {
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px; letter-spacing: .04em;
}
.rq-card .rq-handled-badge.approved { background: #dcfce7; color: #15803d; }
.rq-card .rq-handled-badge.rejected { background: #fee2e2; color: #b91c1c; }
.rq-card .rq-handled-badge.dismissed { background: #f0efeb; color: #6b6b6b; }
/* Member search results in "+ Member" modal */
.member-result {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border: 1px solid #ececea; border-radius: 10px;
background: #fff;
}
.member-result.in-team { opacity: 0.55; }
.member-result .av {
width: 32px; height: 32px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: #fff; font-size: 11px; font-weight: 700;
flex-shrink: 0; overflow: hidden; position: relative;
}
.member-result .av img { width: 32px; height: 32px; object-fit: cover; }
.member-result .av .ini { position: absolute; }
.member-result .av img + .ini { display: none; }
.member-result .info { flex: 1; min-width: 0; }
.member-result .info .name { font-size: 13px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-result .info .email { font-size: 11.5px; color: #6b6b6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-result .btn { flex-shrink: 0; padding: 5px 12px; font-size: 12px; }
.rq-card .rq-undo-btn {
background: #fff; color: #1a1a1a; border: 1px solid #d8d6d1;
padding: 6px 14px; font-size: 12.5px; font-weight: 600;
border-radius: 8px; cursor: pointer; font-family: inherit;
display: inline-flex; align-items: center; gap: 6px;
transition: background .12s, border-color .12s;
}
.rq-card .rq-undo-btn:hover { background: #f7f6f2; border-color: #1a1a1a; }
/* Submitter chip in the meta line — same style as proposed-by chips */
.rq-card .rq-meta .chip {
display: inline-flex; align-items: center; gap: 5px;
background: #f0efeb; padding: 3px 9px 3px 3px; border-radius: 999px;
font-size: 11.5px; font-weight: 600; cursor: pointer;
color: #1a1a1a; border: 1px solid #ececea;
transition: background .12s;
}
.rq-card .rq-meta .chip:hover { background: #e7e5e0; }
.rq-card .rq-meta .chip .av { width: 18px; height: 18px; }
.rq-card .rq-meta .chip .av img { width: 18px; height: 18px; object-fit: cover; }
.rq-locked-card {
max-width: 480px; margin: 48px auto;
background: #fff; border: 1px solid #ececea; border-radius: 14px; padding: 24px;
}
.rq-locked-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.rq-locked-card p { font-size: 13px; color: #6b6b6b; margin: 0 0 16px; line-height: 1.45; }
.rq-locked-card input { width: 100%; margin-bottom: 8px; }
.rq-locked-card .rq-pp-err { color: #dc2626; font-size: 12px; margin-top: 8px; display: none; }
/* Compact date inputs — tight to content + calendar icon + custom popup */
input[type="date"] {
border: 1px solid #d8d6d1; border-radius: 6px;
padding: 3px 22px 3px 6px; /* extra right padding for the calendar icon */
font-size: 11.5px; font-family: inherit;
color: #1a1a1a; background: #fff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 6px center;
background-size: 12px 12px;
appearance: none; -webkit-appearance: none;
cursor: pointer; outline: none;
transition: border-color .12s, box-shadow .12s;
width: 110px; /* tight: dd/mm/yyyy + icon */
line-height: 1.2; box-sizing: border-box;
}
input[type="date"]:hover { border-color: #1a1a1a; }
input[type="date"]:focus { border-color: #1a1a1a; box-shadow: 0 0 0 2px rgba(26,26,26,0.08); }
/* hide the native indicator: we render our own icon and own picker */
input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0; width: 0; padding: 0; margin: 0;
}
input[type="date"]::-webkit-datetime-edit { color: #1a1a1a; padding: 0; }
input[type="date"]:placeholder-shown::-webkit-datetime-edit { color: #9a9a9a; }
/* Custom date picker popover */
.bn-datepicker {
position: absolute; z-index: 100001;
background: #fff; border: 1px solid #ececea; border-radius: 12px;
box-shadow: 0 12px 32px rgba(0,0,0,0.12);
padding: 12px; width: 252px;
font-family: inherit; user-select: none;
}
.bn-dp-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px; gap: 6px;
}
.bn-dp-nav {
width: 24px; height: 24px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: #6b6b6b; font-size: 14px; font-weight: 700;
border: 1px solid transparent;
}
.bn-dp-nav:hover { background: #f7f6f2; color: #1a1a1a; }
.bn-dp-month {
flex: 1; text-align: center; font-size: 13px; font-weight: 700;
color: #1a1a1a; cursor: pointer;
padding: 4px 8px; border-radius: 6px;
text-transform: capitalize;
}
.bn-dp-month:hover { background: #f7f6f2; }
.bn-dp-weekdays {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
margin-bottom: 4px;
}
.bn-dp-wd {
text-align: center; font-size: 10px; color: #9a9a9a;
font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
padding: 4px 0;
}
.bn-dp-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.bn-dp-day {
aspect-ratio: 1;
display: flex; align-items: center; justify-content: center;
font-size: 12px; cursor: pointer; border-radius: 6px;
color: #1a1a1a; font-weight: 500;
transition: background .1s;
}
.bn-dp-day:hover { background: #f0efeb; }
.bn-dp-day.other-month { color: #c4c2bd; }
.bn-dp-day.today { font-weight: 700; color: #1a1a1a; box-shadow: 0 0 0 1px #d8d6d1 inset; }
.bn-dp-day.selected { background: #1a1a1a !important; color: #fff !important; font-weight: 700; }
.bn-dp-day.disabled { color: #d8d6d1; cursor: not-allowed; pointer-events: none; }
.bn-dp-foot {
display: flex; justify-content: space-between; align-items: center;
margin-top: 10px; padding-top: 10px; border-top: 1px solid #ececea;
}
.bn-dp-clear, .bn-dp-today {
font-size: 11px; font-weight: 600; color: #6b6b6b;
cursor: pointer; padding: 4px 8px; border-radius: 6px;
background: none; border: none; font-family: inherit;
}
.bn-dp-clear:hover, .bn-dp-today:hover { background: #f7f6f2; color: #1a1a1a; }
.bn-dp-yearpicker {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
padding: 8px 0;
}
.bn-dp-year {
text-align: center; padding: 8px; border-radius: 6px;
cursor: pointer; font-size: 12px; font-weight: 600; color: #1a1a1a;
}
.bn-dp-year:hover { background: #f0efeb; }
.bn-dp-year.selected { background: #1a1a1a; color: #fff; }
.bn-dp-monthpicker {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
padding: 8px 0;
}
.bn-dp-mo {
text-align: center; padding: 8px; border-radius: 6px;
cursor: pointer; font-size: 12px; font-weight: 600; color: #1a1a1a;
text-transform: capitalize;
}
.bn-dp-mo:hover { background: #f0efeb; }
.bn-dp-mo.selected { background: #1a1a1a; color: #fff; }
.profile-empty { padding: 40px 0; text-align: center; color: #6b6b6b; font-size: 14px; }
.profile-picker {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
padding: 14px; background: #fff; border: 1px solid #ececea; border-radius: 12px; margin-bottom: 16px;
}
.profile-picker .picker-search { flex: 1; min-width: 200px; }
.profile-picker .picker-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.profile-chip.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.profile-chip .av { width: 22px; height: 22px; border-radius: 50%; }
.profile-chip .av img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.profile-header {
background: #fff; border: 1px solid #ececea; border-radius: 14px;
padding: 20px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: start;
margin-bottom: 16px;
}
.profile-name-trigger {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; user-select: none;
border-radius: 8px; padding: 2px 8px; margin-left: -8px;
transition: background .12s;
}
.profile-name-trigger:hover { background: #f7f6f2; }
.profile-name-trigger .arrow {
font-size: 14px; color: #6b6b6b; transition: transform .12s;
}
.profile-name-trigger.open .arrow { transform: rotate(180deg); }
.profile-picker-popover {
position: absolute; z-index: 50;
top: 100%; left: -8px;
margin-top: 4px; min-width: 280px;
background: #fff; border: 1px solid #ececea; border-radius: 12px;
box-shadow: 0 12px 32px rgba(0,0,0,.12);
overflow: hidden;
}
.profile-picker-popover .pp-search {
padding: 8px;
border-bottom: 1px solid #ececea;
}
.profile-picker-popover .pp-search input {
width: 100%; border: 1px solid #d8d6d1; border-radius: 8px;
padding: 7px 10px; font-size: 13px; font-family: inherit; outline: none;
}
.profile-picker-popover .pp-list { max-height: 280px; overflow-y: auto; padding: 4px 0; }
.profile-picker-popover .pp-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; cursor: pointer; font-size: 13px;
}
.profile-picker-popover .pp-row:hover { background: #f7f6f2; }
.profile-picker-popover .pp-row.active { background: #1a1a1a; color: #fff; }
.profile-picker-popover .pp-row .av {
width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 10px; font-weight: 700;
overflow: hidden;
}
.profile-picker-popover .pp-row .av img { width: 26px; height: 26px; object-fit: cover; }
.profile-picker-popover .pp-row .nm { flex: 1; font-weight: 600; }
.profile-picker-popover .pp-empty { padding: 16px 12px; text-align: center; color: #9a9a9a; font-size: 12px; }
.profile-header .av-big { width: 72px; height: 72px; border-radius: 50%; background: #ececea; overflow: hidden; }
.profile-header .av-big img { width: 72px; height: 72px; object-fit: cover; }
.profile-header h3 { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.profile-header .meta-line { font-size: 12.5px; color: #6b6b6b; margin-bottom: 10px; }
.profile-header .meta-line span + span::before { content: " · "; padding: 0 4px; color: #c4c2bd; }
.profile-header .tags-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.profile-header .actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.profile-fields-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px; margin-top: 10px;
}
.profile-field {
display: flex; flex-direction: column; gap: 4px;
background: #faf9f6; border: 1px solid #ececea; border-radius: 10px; padding: 8px 10px;
}
.profile-field label { font-size: 10.5px; color: #6b6b6b; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.profile-field input, .profile-field select, .profile-field textarea {
border: none; background: transparent; padding: 0; font-size: 13px; font-family: inherit; color: #1a1a1a;
outline: none; width: 100%;
}
.profile-field textarea { resize: vertical; min-height: 36px; }
.profile-field.checkbox { flex-direction: row; align-items: center; gap: 8px; }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.profile-stat-card {
background: #fff; border: 1px solid #ececea; border-radius: 12px; padding: 14px;
position: relative; overflow: hidden;
}
.profile-stat-card.status-card {
border-top: 3px solid var(--status-color, #ececea);
padding-top: 11px;
}
.profile-stat-card .num { font-size: 26px; font-weight: 700; color: #1a1a1a; }
.profile-stat-card.status-card .num { color: var(--status-color, #1a1a1a); }
.profile-stat-card .lbl {
font-size: 11px; color: #6b6b6b; text-transform: uppercase;
letter-spacing: .04em; font-weight: 600;
display: flex; align-items: center; gap: 6px;
}
.profile-stat-card .lbl-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--status-color, #cbd5e1);
flex: 0 0 8px;
}
.profile-stat-card .sub { font-size: 11px; color: #9a9a9a; margin-top: 2px; }
.profile-stat-card.summary-card { background: #1a1a1a; color: #fff; }
.profile-stat-card.summary-card .num { color: #fff; }
.profile-stat-card.summary-card .lbl { color: #9a9a9a; }
.profile-stat-card.summary-card .sub { color: #6b6b6b; }
.profile-section-title {
font-size: 13px; font-weight: 700; color: #1a1a1a;
text-transform: uppercase; letter-spacing: .04em; margin: 20px 0 10px;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.profile-section-title .count { color: #9a9a9a; font-weight: 600; }
.profile-section-toggle {
cursor: pointer; user-select: none;
padding: 4px 0;
}
.profile-section-toggle:hover { color: #6b6b6b; }
.profile-section-toggle .caret {
display: inline-block; min-width: 14px; color: #9a9a9a; font-size: 11px;
}
.profile-rm-list { display: flex; flex-direction: column; gap: 10px; }
.profile-rm-card {
background: #fff; border: 1px solid #ececea; border-radius: 12px;
padding: 12px 14px;
}
.profile-rm-card .rm-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-bottom: 10px;
}
.profile-rm-card .rm-head .lhs { display: flex; align-items: center; gap: 8px; }
.profile-rm-card .rm-name {
font-size: 14px; font-weight: 700; color: #1a1a1a; cursor: pointer;
}
.profile-rm-card .rm-name:hover { text-decoration: underline; }
.profile-rm-card .rm-meta { font-size: 11.5px; color: #6b6b6b; }
.profile-rm-card .rm-role-pill {
font-size: 10px; font-weight: 700; text-transform: uppercase;
padding: 2px 8px; border-radius: 999px; letter-spacing: .04em;
}
.profile-rm-card .rm-role-pill.owner { background: #1a1a1a; color: #fff; }
.profile-rm-card .rm-role-pill.assigned { background: #f0efeb; color: #6b6b6b; }
.mini-7day-wrap {
position: relative;
}
.mini-7day {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px; margin-bottom: 0;
}
.mini-7day-events-overlay {
position: absolute;
left: 0; right: 0;
top: 38px;
pointer-events: none;
z-index: 4;
}
/* Stripes overlay rendered AFTER the events overlay so weekends/holidays/time-off
are still visible when they cross a task bar. The per-column stripe pieces are
positioned by the renderer at the same percentages as the day cells underneath. */
.mini-7day-noworking-overlay {
position: absolute; inset: 0;
pointer-events: none;
z-index: 6;
}
.mini-7day-noworking-overlay .mini-noworking-stripe {
position: absolute; top: 38px; bottom: 0;
background-image: repeating-linear-gradient(
135deg,
transparent 0,
transparent 5px,
var(--stripe-color, rgba(100,116,139,0.30)) 5px,
var(--stripe-color, rgba(100,116,139,0.30)) 7px
);
}
.mini-7day-noworking-overlay .mini-noworking-stripe.time-off { --stripe-color: rgba(220,38,38,0.32); }
.mini-7day-events-overlay .mini-event-bar {
position: absolute;
height: 16px;
border-radius: 4px;
padding: 0 5px;
font-size: 9.5px;
font-weight: 600;
color: #fff;
line-height: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
pointer-events: auto;
box-sizing: border-box;
transition: transform .1s, box-shadow .1s;
}
.mini-7day-events-overlay .mini-event-bar:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,.18);
z-index: 6;
}
.mini-7day-events-overlay .mini-event-bar.is-group { font-style: italic; opacity: 0.95; }
.mini-7day-events-overlay .mini-event-bar.is-kid {
height: 14px; line-height: 14px;
font-size: 9px;
opacity: 0.92;
box-shadow: inset 2px 0 0 rgba(255,255,255,0.45);
}
.mini-7day .mini-day {
background: #fff; border: 1px solid #ececea; border-radius: 8px;
min-height: var(--day-min-h, 70px); padding: 5px 7px;
display: flex; flex-direction: column; gap: 2px;
position: relative; min-width: 0; overflow: hidden;
}
.mini-7day .mini-day.weekend::before,
.mini-7day .mini-day.holiday::before {
content: ""; position: absolute;
left: 0; right: 0; bottom: 0; top: 38px;
background-image: repeating-linear-gradient(
135deg,
transparent 0,
transparent 5px,
rgba(100,116,139,0.30) 5px,
rgba(100,116,139,0.30) 7px
);
pointer-events: none; z-index: 3;
}
.mini-7day .mini-day.timeoff::after {
content: ""; position: absolute;
left: 0; right: 0; bottom: 0; top: 38px;
background-image: repeating-linear-gradient(
135deg,
transparent 0,
transparent 5px,
rgba(220,38,38,0.32) 5px,
rgba(220,38,38,0.32) 7px
);
pointer-events: none; z-index: 3;
}
.mini-7day .mini-day.today { box-shadow: 0 0 0 2px #1a1a1a inset; }
.mini-7day .mini-day .mini-dnum {
font-size: 12px; font-weight: 700; color: #1a1a1a;
position: relative; z-index: 2;
}
.mini-7day .mini-day .mini-dwd {
font-size: 9px; color: #9a9a9a; text-transform: uppercase; font-weight: 700; letter-spacing: .04em;
position: relative; z-index: 2;
}
.mini-7day .mini-day.weekend .mini-dwd,
.mini-7day .mini-day.holiday .mini-dwd { color: #6b6b6b; }
.mini-7day .mini-day .mini-hol {
font-size: 9px; font-weight: 600; color: #6b6b6b;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
position: relative; z-index: 2;
}
.mini-7day .mini-day .mini-event {
font-size: 9.5px; font-weight: 600; color: #fff;
padding: 2px 5px; border-radius: 4px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
line-height: 1.3; cursor: pointer; position: relative; z-index: 2;
transition: transform .1s, box-shadow .1s;
}
.mini-7day .mini-day .mini-event:hover {
transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.mini-7day .mini-day .mini-event.is-group { font-style: italic; opacity: 0.95; }
.mini-7day .mini-day .mini-event.is-kid {
font-size: 9px; padding: 1px 4px;
opacity: 0.92;
box-shadow: inset 2px 0 0 rgba(255,255,255,0.45);
}
/* Profile roadmap card: inline group expand chevron inside mini-event */
.mini-event-bar .mini-event-caret {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px;
border: 1px solid rgba(0,0,0,0.10);
background: rgba(255,255,255,0.75);
color: inherit; font-size: 8.5px; font-weight: 700; line-height: 1;
border-radius: 3px; cursor: pointer; padding: 0; margin-right: 4px;
vertical-align: middle;
transition: background .12s, transform .15s, border-color .12s;
pointer-events: auto;
}
.mini-event-bar .mini-event-caret:hover { background: #fff; border-color: rgba(0,0,0,0.22); }
.mini-event-bar .mini-event-caret.expanded { transform: rotate(90deg); }
.profile-rm-card .rm-task-row {
display: flex; align-items: center; gap: 8px; padding: 6px 0;
border-top: 1px solid #f0efeb; font-size: 12.5px;
}
.profile-rm-card .rm-task-row:first-of-type { border-top: none; }
.profile-rm-card .rm-task-row .dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.profile-rm-card .rm-task-row .text { flex: 1; cursor: pointer; }
.profile-rm-card .rm-task-row .text:hover { color: #1a1a1a; text-decoration: underline; }
.profile-rm-card .rm-task-row .dates { font-size: 11px; color: #9a9a9a; }
.profile-tasks-toolbar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-bottom: 10px;
}
.profile-tasks-toolbar label { font-size: 11px; color: #6b6b6b; text-transform: uppercase; font-weight: 600; letter-spacing: .04em; }
.profile-tasks-toolbar select {
border: 1px solid #d8d6d1; border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-family: inherit; background: #fff; cursor: pointer;
}
.profile-task-group {
background: #fff; border: 1px solid #ececea; border-radius: 12px;
margin-bottom: 10px; overflow: hidden;
}
.profile-task-group .group-head {
padding: 10px 14px; background: #faf9f6; border-bottom: 1px solid #ececea;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: 12.5px; font-weight: 700; color: #1a1a1a; cursor: pointer;
}
.profile-task-group .group-head:hover { background: #f5f4ef; }
.profile-task-group .group-head .gh-count { font-size: 11px; color: #6b6b6b; font-weight: 600; }
.profile-task-group.collapsed .group-body { display: none; }
.profile-task-group .group-body { padding: 4px 0; }
.profile-task-row {
display: flex; align-items: center; gap: 10px; padding: 8px 14px;
border-top: 1px solid #f0efeb; font-size: 13px;
}
.profile-task-row:first-child { border-top: none; }
.profile-task-row:hover { background: #faf9f6; }
.profile-task-row .text { flex: 1; cursor: pointer; }
.profile-task-row .badges { display: flex; gap: 4px; flex-wrap: wrap; }
/* Modals */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-bg.show { display: flex; }
.modal { background: #fff; border-radius: 14px; max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 24px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modal h2 { margin: 0 0 16px; font-size: 18px; font-weight: 650; }
.modal .close-x { float: right; cursor: pointer; opacity: .5; font-size: 22px; line-height: 1; padding: 0 4px; }
/* Title bar inside the task modal: title left, inline task tags middle, × right */
.modal-header {
display: flex; align-items: center; gap: 10px;
margin-bottom: 16px;
}
.modal-header h2 { margin: 0; }
.modal-header .close-x { float: none; margin-left: auto; flex-shrink: 0; }
.modal-header .task-tags-row {
flex: 1; min-width: 0;
overflow-x: auto; overflow-y: hidden;
padding: 2px 0; margin: 0;
flex-wrap: nowrap;
scrollbar-width: thin;
}
.modal-header .task-tags-row::-webkit-scrollbar { height: 6px; }
.modal-header .task-tags-row::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 3px; }
/* Side-by-side rows of fields inside the modal (different from .field-row which is a strict 1fr 1fr grid) */
.bn-modal-row {
display: flex; gap: 12px; align-items: flex-start;
margin-bottom: 12px;
flex-wrap: wrap;
}
.bn-modal-row > .field { margin-bottom: 0; }
/* Standalone Task dates row: drops the leading "Task dates" label pill since the field now has its own label */
.bn-quick-apply--standalone { padding-left: 0; justify-content: center; }
.bn-quick-apply--standalone .bn-quick-apply-lbl { display: none; }
.bn-quick-apply--standalone .bn-quick-apply-inputs { justify-content: center; flex: 1; }
/* Compact hours fields next to Task dates */
.bn-hours-field { width: 64px; flex-shrink: 0; }
.bn-hours-field input { padding: 8px 6px; text-align: right; }
.bn-hours-field label { white-space: nowrap; }
/* Admin-only timing date fields next to Task dates. Kept compact so Task Dates
keeps its original width (the start/days/end triplet needs ~270px of horizontal
room). Native date inputs need ~100px to render the dd/mm/yyyy + calendar icon
without truncation. */
.bn-started-field { width: 108px; flex-shrink: 0; }
.bn-started-field input { padding: 6px 4px; font-size: 12px; }
.bn-started-field label { white-space: nowrap; font-size: 11px; }
/* Responsible field locked to the same width as the Status column above (Status
lives in field-row-3 → 3 equal columns), so the two rows align visually. */
.bn-resp-field { width: calc((100% - 24px) / 3); flex-shrink: 0; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label { font-size: 11px; color: #6b6b6b; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.field input, .field select, .field textarea { border: 1px solid #d8d6d1; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; background: #fff; }
.field textarea { resize: vertical; min-height: 80px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-actions {
display: flex; gap: 8px; justify-content: space-between;
margin: 16px -24px -24px;
padding: 14px 24px;
border-top: 1px solid #eee;
background: #fff;
position: sticky;
bottom: -24px;
z-index: 5;
box-shadow: 0 -6px 12px -10px rgba(0,0,0,0.25);
}
/* Info banners */
.info-banner { background: #fffbeb; border: 1px solid #fde68a; color: #713f12; padding: 10px 14px; border-radius: 10px; font-size: 12.5px; margin-bottom: 14px; }
.info-banner.blue { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.info-banner code { background: rgba(255,255,255,.6); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }
.info-banner .close { float: right; cursor: pointer; opacity: .6; }
/* Bulk bar */
.bulk-bar { position: sticky; bottom: 0; z-index: 50; background: #1a1a1a; color: #fff; border-radius: 12px; padding: 10px 16px; margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.bulk-bar .count { font-size: 13px; font-weight: 600; }
.bulk-bar select, .bulk-bar button { appearance: none; -webkit-appearance: none; background: #2d2d2d; color: #fff; border: 1px solid #444; border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.bulk-bar button.danger { background: #b42318; border-color: #b42318; color: #fff; }
.bulk-bar .sep { width: 1px; height: 20px; background: #444; }
.bulk-bar .bulk-rm-btn { background: #2d2d2d; color: #fff; border: 1px solid #444; border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.bulk-bar .bulk-rm-btn:hover { background: #3a3a3a; }
.bulk-rm-popover {
position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 280px; max-width: 340px; max-height: 320px; overflow-y: auto;
background: #fff; color: #1a1a1a; border: 1px solid #d8d6d1; border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 100; padding: 8px;
}
.bulk-rm-popover .bulk-rm-empty { padding: 14px; text-align: center; color: #9a9a9a; font-size: 12px; }
.bulk-rm-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; cursor: pointer; border-radius: 6px; user-select: none; font-size: 13px; }
.bulk-rm-row:hover { background: #f7f6f2; }
.bulk-rm-row .bulk-rm-cb {
width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #d8d6d1;
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
background: #fff; font-size: 11px; color: #fff; line-height: 1; font-weight: 700;
}
.bulk-rm-row.checked .bulk-rm-cb { background: #1a1a1a; border-color: #1a1a1a; }
.bulk-rm-row.checked .bulk-rm-cb::before { content: "\2713"; }
.bulk-rm-row.partial .bulk-rm-cb { background: #fff; border-color: #1a1a1a; }
.bulk-rm-row.partial .bulk-rm-cb::before { content: "−"; color: #1a1a1a; }
.bulk-rm-row .bulk-rm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-rm-row .bulk-rm-counter { font-size: 11px; color: #9a9a9a; flex-shrink: 0; }
.bulk-rm-popover .bulk-rm-header { font-size: 11px; color: #6b6b6b; padding: 4px 8px 8px; border-bottom: 1px solid #f0efeb; margin-bottom: 4px; }
.bulk-rm-popover .bulk-rm-search-wrap { padding: 4px 0 8px; }
.bulk-rm-popover .bulk-rm-search-wrap input {
width: 100%; box-sizing: border-box;
padding: 6px 10px; border: 1px solid #ececea; border-radius: 8px;
font-size: 12.5px; font-family: inherit; outline: none;
background: #faf9f7;
}
.bulk-rm-popover .bulk-rm-search-wrap input:focus { border-color: #1a1a1a; background: #fff; }
.bulk-rm-row.bulk-parent-detach { border-bottom: 1px dashed #ececea; margin-bottom: 4px; padding-bottom: 9px; border-radius: 6px 6px 0 0; color: #b91c1c; }
.bulk-rm-row.bulk-parent-detach .bulk-rm-cb { color: #b91c1c; border-color: #fecaca; }
.bulk-rm-row.bulk-parent-detach:hover { background: #fef2f2; }
/* Person tags */
.tag { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; margin-right: 3px; }
.tag-remove { margin-left: 4px; cursor: pointer; opacity: 0.6; font-weight: 700; }
.tag.tag-default { background: #e0e7ff; color: #3730a3; }
.person-tags-line { font-size: 11px; margin-top: 3px; line-height: 1.4; }
.person-modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; min-height: 28px; }
.preset-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.preset-tag { cursor: pointer; opacity: 0.85; font-size: 10px; }
.preset-tag.in-use { opacity: 0.35; pointer-events: none; }
/* Tag manager */
.tag-manager-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; padding: 4px 2px; }
.tag-manager-row { display: grid; grid-template-columns: auto auto 1fr auto auto auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid #ececea; border-radius: 8px; background: #faf9f7; cursor: grab; }
.tag-manager-row .preview-pill { padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.tag-manager-row input[type="color"] { width: 32px; height: 32px; padding: 0; border: 1px solid #d8d6d1; border-radius: 6px; background: #fff; cursor: pointer; }
.tag-manager-row .del-tag { appearance: none; border: none; background: #fef3f2; cursor: pointer; color: #b42318; font-size: 16px; padding: 4px 10px; border-radius: 6px; margin-left: 8px; }
.tag-manager-add { display: grid; grid-template-columns: 32px auto 1fr auto auto auto; gap: 8px; align-items: center; padding: 8px; border: 1px dashed #d8d6d1; border-radius: 8px; }
.drag-handle { color: #9a9a9a; padding: 6px 8px; user-select: none; cursor: grab; font-size: 14px; }
.show-counts-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #6b6b6b; user-select: none; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.show-counts-toggle input { cursor: pointer; margin: 0; }
kbd { background: #f0efeb; border: 1px solid #d8d6d1; border-radius: 4px; padding: 0 5px; font-size: 11px; font-family: inherit; }
footer.bot { margin-top: 28px; font-size: 11.5px; color: #9a9a9a; text-align: center; }
/* Home / Dashboard styles (light theme compatible) */
.home-header {
display: flex; align-items: center; gap: 14px;
margin: 0 0 24px;
}
.home-logo {
height: 56px; width: auto; max-width: 120px;
object-fit: contain;
border-radius: 10px;
flex-shrink: 0;
}
.home-greeting { font-size: 28px; font-weight: 700; margin: 0; color: #1a1a1a; letter-spacing: -0.02em; }
/* ---------- KPI hero row: 4 at-a-glance metric cards ---------- */
.kpi-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 14px; margin-bottom: 16px;
}
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-card {
background: #fff; border: 1px solid #ececea; border-radius: 16px;
padding: 18px 18px 16px;
display: flex; flex-direction: column; gap: 6px;
position: relative; overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.kpi-card .kpi-label {
font-size: 11px; color: #6b6b6b; text-transform: uppercase;
letter-spacing: 0.08em; font-weight: 700;
}
.kpi-card .kpi-value {
font-size: 36px; font-weight: 700; color: #1a1a1a;
letter-spacing: -0.02em; line-height: 1;
font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.kpi-card .kpi-bar { flex: 1; height: 6px; background: #f0efeb; border-radius: 999px; overflow: hidden; }
.kpi-card .kpi-bar > span { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }
.kpi-card .kpi-pct { font-size: 11px; font-weight: 700; color: #6b6b6b; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
/* ---------- Dashboard cards ---------- */
.dashboard-grid { display: grid; grid-template-columns: 360px 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } }
.dashboard-card {
background: #fff; border: 1px solid #ececea; border-radius: 16px; padding: 22px;
transition: box-shadow .2s ease;
}
.dashboard-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.04); }
.dashboard-card h3 { margin: 0 0 16px; font-size: 13px; font-weight: 700; color: #1a1a1a; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.dashboard-card h3 .icon { width: 16px; height: 16px; opacity: 0.5; }
/* ---------- Donut chart (modern, refined) ---------- */
.donut-card { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.donut-card .donut-label { font-size: 11px; color: #6b6b6b; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-align: center; }
.donut-svg { width: 220px; height: 220px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.04)); }
.donut-text { font-size: 34px; font-weight: 700; fill: #1a1a1a; letter-spacing: -0.02em; }
.donut-sub { font-size: 11px; fill: #9a9a9a; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.donut-wrap { position: relative; }
.donut-bucket-arc { transition: opacity .15s; }
.donut-bucket-arc:hover { opacity: 0.78; cursor: pointer; }
.donut-legend {
display: grid; grid-template-columns: 1fr 1fr;
gap: 4px 14px;
width: 100%; max-width: 300px;
font-size: 12px;
}
.donut-legend .leg-row {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px; border-radius: 8px;
transition: background .15s;
}
.donut-legend .leg-row:hover { background: #faf9f7; }
.donut-legend .leg-dot { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.donut-legend .leg-name { color: #1a1a1a; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donut-legend .leg-num { color: #1a1a1a; font-variant-numeric: tabular-nums; font-weight: 700; }
.donut-legend .leg-pct { color: #9a9a9a; font-size: 10.5px; font-variant-numeric: tabular-nums; }
/* ---------- Pipeline by status — horizontal rows with mini progress bars ---------- */
.pipeline-rows { display: flex; flex-direction: column; gap: 8px; }
.pipeline-row {
display: grid; grid-template-columns: 12px 110px 1fr 36px 40px;
align-items: center; gap: 12px;
padding: 6px 4px; border-radius: 8px;
transition: background .15s;
}
.pipeline-row:hover { background: #faf9f7; }
.pipeline-row .pr-dot { width: 10px; height: 10px; border-radius: 999px; }
.pipeline-row .pr-name { font-size: 12.5px; font-weight: 600; color: #1a1a1a; }
.pipeline-row .pr-bar { height: 8px; background: #f0efeb; border-radius: 999px; overflow: hidden; }
.pipeline-row .pr-fill { height: 100%; border-radius: 999px; transition: width .5s ease; }
.pipeline-row .pr-num { font-size: 12.5px; font-weight: 700; color: #1a1a1a; font-variant-numeric: tabular-nums; text-align: right; }
.pipeline-row .pr-pct { font-size: 11px; color: #9a9a9a; font-variant-numeric: tabular-nums; text-align: right; }
/* ---------- Top contributors ---------- */
.dash-contrib-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 12px;
}
.contrib-card {
display: grid; grid-template-columns: 28px 44px 1fr;
gap: 10px; align-items: center;
padding: 12px 14px;
background: #faf9f7; border: 1px solid #ececea; border-radius: 12px;
transition: transform .2s ease, box-shadow .2s ease;
}
.contrib-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.contrib-rank {
font-size: 11px; font-weight: 700; color: #9a9a9a;
font-variant-numeric: tabular-nums;
}
.contrib-card[data-rank="1"] .contrib-rank { color: #f59e0b; }
.contrib-card[data-rank="2"] .contrib-rank { color: #9ca3af; }
.contrib-card[data-rank="3"] .contrib-rank { color: #b45309; }
.contrib-av { width: 44px; height: 44px; font-size: 14px; }
.contrib-body { min-width: 0; }
.contrib-name { font-size: 13px; font-weight: 700; color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contrib-stats { font-size: 11px; color: #6b6b6b; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.contrib-total { font-weight: 700; color: #1a1a1a; }
.contrib-sep { opacity: 0.4; }
.contrib-bar { height: 4px; background: #ececea; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.contrib-fill { height: 100%; border-radius: 999px; transition: width .5s ease; }
/* ---------- Activity stats (priority / type) — bigger cards with colored accent ---------- */
.activity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 10px; }
.activity-card {
position: relative; padding: 16px 14px;
background: #faf9f7; border: 1px solid #ececea; border-radius: 12px;
text-align: left; overflow: hidden;
transition: transform .2s ease;
}
.activity-card::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--c, #94a3b8); border-radius: 12px 0 0 12px;
}
.activity-card:hover { transform: translateY(-2px); }
.activity-card-value { font-size: 26px; font-weight: 700; color: #1a1a1a; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.activity-card-label { font-size: 11px; color: #6b6b6b; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-top: 6px; }
/* Sidebar polish for icons + brand */
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; border-bottom: 1px solid #f0efeb; margin-bottom: 8px; }
.sidebar .brand-logo { width: 32px; height: 32px; border-radius: 8px; background: #f0efeb; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; overflow: hidden; flex-shrink: 0; }
.sidebar .brand-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar .brand-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: #1a1a1a; }
.sidebar h1 { display: none; }
.sidebar .sub { display: none; }
.nav-item { gap: 10px; padding: 9px 12px !important; }
.nav-item .nav-icon { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item .nav-label { flex: 1; text-align: left; }
/* "+ New task(s)" — clickable (s) as an inset WHITE pill button inside the dark New task button */
.bn-task-s-toggle { display: inline-block; background: #fff; color: #1a1a1a; margin-left: 6px; padding: 0 7px; height: 18px; line-height: 18px; vertical-align: middle; border-radius: 5px; font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.18); transition: transform .12s, background .12s; }
.bn-task-s-toggle:hover { background: #f0f0eb; transform: scale(1.08); }
.bn-task-s-toggle:active { transform: scale(0.96); }
/* Bulk mode toggle */
.bn-bulk-mode-toggle { display: inline-flex; gap: 4px; padding: 3px; background: #f5f5f3; border-radius: 8px; margin: 4px 0 14px; }
.bn-bulk-mode-toggle label { padding: 5px 12px; font-size: 12px; font-weight: 600; color: #6b6b6b; cursor: pointer; border-radius: 6px; transition: all .12s; }
.bn-bulk-mode-toggle label:has(input:checked) { background: #fff; color: #1a1a1a; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.bn-bulk-mode-toggle input { display: none; }
/* Paste mode: two parallel textareas with line-number gutter */
.bn-bulk-paste-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bn-bulk-paste-cols > div { display: flex; flex-direction: column; gap: 6px; }
.bn-bulk-paste-cols label { font-size: 12px; font-weight: 700; color: #6b6b6b; text-transform: uppercase; letter-spacing: 0.04em; }
.bn-paste-area-wrap { display: flex; border: 1px solid #ececea; border-radius: 8px; overflow: hidden; background: #fff; }
.bn-paste-area-wrap:focus-within { border-color: #1a1a1a; box-shadow: 0 0 0 2px rgba(0,0,0,0.05); }
.bn-paste-gutter { background: #fafaf8; color: #9a9a9a; padding: 10px 6px 10px 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.55; text-align: right; min-width: 32px; user-select: none; overflow: hidden; border-right: 1px solid #ececea; white-space: pre; }
.bn-paste-gutter .num { display: block; }
.bn-paste-gutter .num.empty { color: #d8d6d1; }
.bn-bulk-paste-cols textarea { flex: 1; min-height: 280px; max-height: 75vh; padding: 10px 12px; border: none; outline: none; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; resize: vertical; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; overflow-x: hidden; background: #fff; }
.bn-bulk-paste-hint { font-size: 12px; color: #9a9a9a; margin-top: 6px; }
/* Stage 2 — per-task edit card (replica del task modal, layout horizontal) */
.bn-bulk-field-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; background: linear-gradient(180deg, #fafaf8 0%, #f5f5f3 100%); border: 1px solid #ececea; border-radius: 10px; margin-bottom: 14px; font-size: 12px; }
.bn-bulk-field-toggles .toggles-label { color: #6b6b6b; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; padding: 4px 6px 4px 0; }
.bn-eye-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: #fff; border: 1px solid #ececea; border-radius: 14px; cursor: pointer; user-select: none; font-size: 12px; font-weight: 600; color: #1a1a1a; transition: all .15s; line-height: 1; }
.bn-eye-toggle:hover { border-color: #1a1a1a; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transform: translateY(-1px); }
.bn-eye-toggle:active { transform: translateY(0); }
.bn-eye-toggle .eye-svg { width: 14px; height: 14px; flex-shrink: 0; }
.bn-eye-toggle .eye-slash { display: none; }
.bn-eye-toggle.is-off { background: #f5f5f3; color: #9a9a9a; border-color: #e8e6e1; }
.bn-eye-toggle.is-off .eye-slash { display: inline; }
.bn-eye-toggle.is-off .label-text { text-decoration: line-through; opacity: 0.7; }
.bn-eye-toggle .label-text { white-space: nowrap; }
.bn-bulk-stage2-list { display: flex; flex-direction: column; gap: 14px; max-height: 62vh; overflow: auto; padding: 4px 2px; }
.bn-bulk-task-card { background: #fff; border: 1px solid #ececea; border-radius: 12px; padding: 14px 18px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); transition: box-shadow .15s, border-color .15s; }
.bn-bulk-task-card:hover { border-color: #d8d6d1; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.bn-bulk-task-card .card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.bn-bulk-task-card .card-head .idx { font-size: 11px; color: #9a9a9a; font-weight: 700; min-width: 26px; padding: 3px 8px; background: #f5f5f3; border-radius: 10px; }
.bn-bulk-task-card .card-head .subject { font-size: 15px; font-weight: 700; color: #1a1a1a; flex: 1; line-height: 1.3; }
.bn-bulk-task-card .card-head .card-del { padding: 5px 12px; font-size: 11px; font-weight: 600; background: transparent; color: #991b1b; border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: all .15s; }
.bn-bulk-task-card .card-head .card-del:hover { background: #fef2f2; border-color: #fecaca; }
.bn-bulk-task-card .comments { font-size: 12.5px; color: #6b6b6b; font-style: italic; margin: 0 0 12px 36px; padding: 6px 10px; background: #fafaf8; border-left: 3px solid #d8d6d1; border-radius: 0 6px 6px 0; }
.bn-bulk-task-card .bn-bulk-fields-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }
.bn-bulk-task-card .bnf { display: flex; flex-direction: column; gap: 3px; min-width: 130px; }
.bn-bulk-task-card .bnf-label { font-size: 10px; font-weight: 700; color: #9a9a9a; text-transform: uppercase; letter-spacing: 0.04em; }
.bn-bulk-task-card .bnf select, .bn-bulk-task-card .bnf input[type="date"], .bn-bulk-task-card .bnf input[type="number"], .bn-bulk-task-card .bnf input[type="text"] { padding: 5px 8px; font-size: 12px; border: 1px solid #ececea; border-radius: 6px; background: #fff; font-family: inherit; }
.bn-bulk-task-card .bnf select:focus, .bn-bulk-task-card .bnf input:focus { outline: none; border-color: #1a1a1a; box-shadow: 0 0 0 2px rgba(0,0,0,0.04); }
.bn-bulk-task-card .bnf.bnf-isgroup { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 4px; min-width: 0; }
.bn-bulk-task-card .bnf.bnf-isgroup input { margin: 0; }
.bn-bulk-task-card .bnf-dates { flex: 1; min-width: 290px; }
.bn-bulk-task-card .bnf-dates .bn-bulk-date-cells { display: grid; grid-template-columns: 28px 1fr 70px 1fr 28px; gap: 4px; align-items: center; }
.bn-bulk-task-card .bnf-mtags, .bn-bulk-task-card .bnf-mrm { flex: 1; min-width: 200px; }
.bn-bulk-task-card .bnf-pills { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px 6px; min-height: 30px; border: 1px solid #ececea; border-radius: 6px; background: #fff; max-height: 60px; overflow: auto; }
.bn-bulk-task-card .bnf-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 600; cursor: pointer; user-select: none; background: #f5f5f3; color: #6b6b6b; border: 1px solid transparent; transition: all .12s; line-height: 1.2; }
.bn-bulk-task-card .bnf-pill:hover { background: #e5e5e1; transform: translateY(-1px); }
.bn-bulk-task-card .bnf-pill.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.bn-bulk-task-card .bnf-pill.active:hover { background: #333; }
/* Person picker chip — uses bn-cp-chip with avatar */
.bn-bulk-person-chip .bn-cp-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-bulk-person-chip .bn-cp-caret { font-size: 10px; opacity: 0.6; flex-shrink: 0; }
.bn-bulk-person-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-bulk-person-list .bn-bulk-person-row.active { background: #ececea; }
.bn-bulk-person-list .bn-bulk-person-row .check { margin-left: auto; color: #1a1a1a; font-weight: 700; }
/* Override bn-cp-dropdown positioning when used inside bulk card (it's normally inline-positioned by task modal) */
.bn-bulk-task-card .bn-cp-box { position: relative; min-width: 130px; }
.bn-bulk-task-card .bn-cp-dropdown { position: absolute; z-index: 100000; top: calc(100% + 4px); left: 0; min-width: 180px; max-width: 260px; width: max-content; background: #fff; border: 1px solid #ececea; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 4px; max-height: 320px; overflow: auto; }
/* Bulk responsible / proposed-by boxes — compact resp-picker clones */
.bn-bulk-task-card .bn-bulk-resp-box { position: relative; min-width: 170px; }
.bn-bulk-task-card .bn-bulk-resp-chip { display: flex; align-items: center; gap: 6px; border: 1px solid #d8d6d1; border-radius: 6px; padding: 3px 6px; background: #fff; cursor: pointer; min-height: 28px; height: 28px; font-size: 12px; color: #1a1a1a; outline: none; }
.bn-bulk-task-card .bn-bulk-resp-chip:hover, .bn-bulk-task-card .bn-bulk-resp-chip:focus { border-color: #1a1a1a; }
.bn-bulk-task-card .bn-bulk-resp-chip .av-mini { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; position: relative; background: #9aa0a6; color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bn-bulk-task-card .bn-bulk-resp-chip .av-mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; position: absolute; inset: 0; }
.bn-bulk-task-card .bn-bulk-resp-chip .resp-picker-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.bn-bulk-task-card .bn-bulk-resp-chip .resp-picker-empty { color: #9a9a9a; font-size: 12px; }
.bn-bulk-task-card .bn-bulk-resp-chip .resp-picker-clear { appearance: none; border: none; background: transparent; color: #6b6b6b; font-size: 13px; cursor: pointer; padding: 0 2px; line-height: 1; }
.bn-bulk-task-card .bn-bulk-resp-chip .resp-picker-clear:hover { color: #dc2626; }
.bn-bulk-task-card .bn-bulk-resp-chip .resp-picker-caret { color: #9a9a9a; font-size: 10px; }
/* Proposed-by section colors (only when this box is the proposed picker) */
.bn-bulk-task-card .bn-bulk-resp-chip.psec-team { background: #cffafe; border-color: #67e8f9; color: #0e7490; }
.bn-bulk-task-card .bn-bulk-resp-chip.psec-supplementary { background: #dcfce7; border-color: #86efac; color: #15803d; }
.bn-bulk-task-card .bn-bulk-resp-chip.psec-disabled { background: #e5e7eb; border-color: #cbd5e1; color: #4b5563; }
.bn-bulk-task-card .bn-bulk-resp-chip.psec-bookline { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.bn-bulk-task-card .bn-bulk-resp-chip.psec-bookline .resp-picker-caret { color: #d8d6d1; }
.bn-bulk-task-card .bn-bulk-resp-chip.psec-bookline .resp-picker-clear { color: #d8d6d1; }
/* Dropdown for resp/proposed: fixed via JS, uses resp-picker-dropdown defaults but with own width */
.bn-bulk-task-card .bn-bulk-resp-dd { position: absolute; z-index: 100000; top: calc(100% + 4px); left: 0; min-width: 280px; max-width: 360px; width: max-content; background: #fff; border: 1px solid #d8d6d1; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.10); max-height: 320px; display: flex; flex-direction: column; overflow: hidden; }
/* Compact group-picker-box for bulk */
.bn-bulk-task-card .bn-bulk-group-box { position: relative; min-width: 160px; }
.bn-bulk-task-card .bn-bulk-group-chip { display: flex; align-items: center; gap: 6px; border: 1px solid #d8d6d1; border-radius: 6px; padding: 3px 8px; background: #fff; cursor: pointer; min-height: 28px; height: 28px; font-size: 12px; outline: none; }
.bn-bulk-task-card .bn-bulk-group-chip:hover, .bn-bulk-task-card .bn-bulk-group-chip:focus { border-color: #1a1a1a; }
.bn-bulk-task-card .bn-bulk-group-chip .gp-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.bn-bulk-task-card .bn-bulk-group-chip .gp-empty { color: #9a9a9a; font-size: 12px; }
.bn-bulk-task-card .bn-bulk-group-chip .gp-clear { appearance: none; border: none; background: transparent; color: #6b6b6b; font-size: 13px; cursor: pointer; padding: 0 2px; }
.bn-bulk-task-card .bn-bulk-group-chip .gp-clear:hover { color: #dc2626; }
.bn-bulk-task-card .bn-bulk-group-chip .gp-caret { color: #9a9a9a; font-size: 10px; }
.bn-bulk-task-card .bn-bulk-group-dd { position: absolute; z-index: 100000; top: calc(100% + 4px); left: 0; min-width: 240px; max-width: 320px; width: max-content; background: #fff; border: 1px solid #d8d6d1; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.10); max-height: 280px; display: flex; flex-direction: column; overflow: hidden; }
.bn-bulk-task-card .bn-bulk-group-dd .group-picker-search { border: none; outline: none; padding: 8px 10px; font-size: 12px; border-bottom: 1px solid #ececec; background: #fafafa; }
.bn-bulk-task-card .bn-bulk-group-dd .group-picker-list { overflow-y: auto; flex: 1; padding: 4px 0; }
.bn-bulk-task-card .bn-bulk-group-dd .group-picker-item { padding: 6px 10px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.bn-bulk-task-card .bn-bulk-group-dd .group-picker-item:hover, .bn-bulk-task-card .bn-bulk-group-dd .group-picker-item.active { background: #f1f3f4; }
/* Compact hours fields */
.bn-bulk-task-card .bn-bulk-hours { min-width: 0 !important; width: auto; }
.bn-bulk-task-card .bn-bulk-hours input[type=number] { width: 56px; padding: 4px 6px; font-size: 12px; text-align: center; }
/* Proposed-by multi-select box */
.bn-bulk-task-card .bn-bulk-proposed-box { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 28px; min-width: 200px; }
.bn-bulk-task-card .bn-bulk-proposed-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bn-bulk-task-card .bn-bulk-proposed-chips .proposed-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 2px; border-radius: 14px; font-size: 11px; line-height: 1; border: 1px solid #e2e4e7; background: #f1f3f4; color: #1a1a1a; }
.bn-bulk-task-card .bn-bulk-proposed-chips .proposed-chip .av-mini { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; position: relative; flex-shrink: 0; color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bn-bulk-task-card .bn-bulk-proposed-chips .proposed-chip .av-mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; position: absolute; inset: 0; }
.bn-bulk-task-card .bn-bulk-proposed-chips .proposed-chip-name { font-size: 11px; font-weight: 500; color: #1a1a1a; }
/* In the bulk view, chips are always light-grey background — override any section-specific
text colors (Bookline's white-on-dark) that would otherwise render unreadably on grey. */
.bn-bulk-task-card .bn-bulk-proposed-chips .proposed-chip.psec-bookline,
.bn-bulk-task-card .bn-bulk-proposed-chips .proposed-chip.psec-team,
.bn-bulk-task-card .bn-bulk-proposed-chips .proposed-chip.psec-supplementary,
.bn-bulk-task-card .bn-bulk-proposed-chips .proposed-chip.psec-disabled { background: #f1f3f4; border-color: #e2e4e7; }
.bn-bulk-task-card .bn-bulk-proposed-chips .proposed-chip.psec-bookline .proposed-chip-name,
.bn-bulk-task-card .bn-bulk-proposed-chips .proposed-chip.psec-team .proposed-chip-name,
.bn-bulk-task-card .bn-bulk-proposed-chips .proposed-chip.psec-supplementary .proposed-chip-name,
.bn-bulk-task-card .bn-bulk-proposed-chips .proposed-chip.psec-disabled .proposed-chip-name { color: #1a1a1a; }
.bn-bulk-task-card .bn-bulk-proposed-chips .proposed-chip-x { appearance: none; border: none; background: transparent; cursor: pointer; color: #6b6b6b; font-size: 13px; padding: 0 3px 0 1px; line-height: 1; }
.bn-bulk-task-card .bn-bulk-proposed-chips .proposed-chip-x:hover { color: #dc2626; }
.bn-bulk-task-card .bn-bulk-proposed-add { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px dashed #d8d6d1; border-radius: 12px; background: #fff; font-size: 11px; color: #6b6b6b; cursor: pointer; height: 22px; }
.bn-bulk-task-card .bn-bulk-proposed-add:hover, .bn-bulk-task-card .bn-bulk-proposed-add:focus { border-color: #1a1a1a; color: #1a1a1a; outline: none; }
.bn-bulk-task-card .bn-bulk-proposed-dd { position: absolute; z-index: 100000; top: calc(100% + 4px); left: 0; min-width: 280px; max-width: 340px; width: max-content; background: #fff; border: 1px solid #d8d6d1; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.10); max-height: 320px; display: flex; flex-direction: column; overflow: hidden; }
/* Generic multi-select (tags, roadmaps) — chip + search pattern */
.bn-bulk-multi-box { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 28px; }
.bn-bulk-multi-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bn-bulk-multi-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 12px; font-size: 11px; line-height: 1; border: 1px solid #d6e4ff; background: #eef4ff; color: #1e40af; }
.bn-bulk-tag-box .bn-bulk-multi-chip { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.bn-bulk-multi-x { appearance: none; border: none; background: transparent; cursor: pointer; color: inherit; opacity: 0.6; font-size: 13px; padding: 0 2px; line-height: 1; }
.bn-bulk-multi-x:hover { opacity: 1; color: #dc2626; }
.bn-bulk-multi-add { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px dashed #d8d6d1; border-radius: 12px; background: #fff; font-size: 11px; color: #6b6b6b; cursor: pointer; height: 22px; white-space: nowrap; }
.bn-bulk-multi-add:hover, .bn-bulk-multi-add:focus { border-color: #1a1a1a; color: #1a1a1a; outline: none; }
.bn-bulk-multi-dd { position: absolute; z-index: 100000; top: calc(100% + 4px); left: 0; min-width: 240px; max-width: 320px; width: max-content; background: #fff; border: 1px solid #d8d6d1; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.10); max-height: 280px; display: flex; flex-direction: column; overflow: hidden; }
.bn-bulk-multi-dd .bn-bulk-multi-search { border: none; outline: none; padding: 8px 10px; font-size: 12px; border-bottom: 1px solid #ececec; background: #fafafa; }
.bn-bulk-multi-dd .bn-bulk-multi-list { overflow-y: auto; flex: 1; padding: 4px 0; }
.bn-bulk-multi-dd .bn-bulk-multi-item { padding: 6px 10px; font-size: 12px; cursor: pointer; }
.bn-bulk-multi-dd .bn-bulk-multi-item:hover { background: #f1f3f4; }
.bn-bulk-task-card .bn-cp-chip { width: 100%; min-height: 28px; padding: 5px 10px; }
/* Colored select styling — match task modal CSS conventions */
.bn-bulk-task-card select.bnf-colored { font-weight: 600; }
.bn-bulk-task-card select.bnf-colored[data-cv="Critical"], .bn-bulk-task-card select.bnf-colored[data-cv="ERROR"] { background: #fee4e2; color: #b42318; border-color: #fecaca; }
.bn-bulk-task-card select.bnf-colored[data-cv="High"] { background: #fee4e2; color: #b91c1c; border-color: #fca5a5; }
.bn-bulk-task-card select.bnf-colored[data-cv="Medium"] { background: #fef0c7; color: #92400e; border-color: #fde68a; }
.bn-bulk-task-card select.bnf-colored[data-cv="Low"] { background: #e0f2fe; color: #0369a1; border-color: #7dd3fc; }
.bn-bulk-task-card select.bnf-colored[data-cv="Very Low"] { background: #c7d2fe; color: #1e3a8a; border-color: #818cf8; }
.bn-bulk-task-card select.bnf-colored[data-cv="Waiting"] { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.bn-bulk-task-card select.bnf-colored[data-cv="Proposed"] { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
.bn-bulk-task-card select.bnf-colored[data-cv="In Progress"] { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.bn-bulk-task-card select.bnf-colored[data-cv="Under Review"] { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.bn-bulk-task-card select.bnf-colored[data-cv="Completed"] { background: #dcfce7; color: #166534; border-color: #86efac; }
.bn-bulk-task-card select.bnf-colored[data-cv="Archived"] { background: #f5f5f4; color: #57534e; border-color: #d6d3d1; }
.bn-bulk-task-card select.bnf-colored[data-cv="Discarded"] { background: #e7e5e4; color: #57534e; border-color: #d6d3d1; }
.bn-bulk-task-card select.bnf-colored[data-cv="Later / Next"] { background: #fce7f3; color: #9d174d; border-color: #f9a8d4; }
.bn-bulk-task-card select.bnf-colored[data-cv="Project"] { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.bn-bulk-task-card select.bnf-colored[data-cv="Responsability"] { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
.bn-bulk-task-card select.bnf-colored[data-cv="Request"] { background: #ecfdf3; color: #027a48; border-color: #a7f3d0; }
.bn-bulk-task-card select.bnf-colored[data-cv="Infinite"] { background: #fef0c7; color: #92400e; border-color: #fde68a; }
.bn-bulk-task-card select.bnf-colored[data-cv="Private"] { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.bn-bulk-task-card select.bnf-colored[data-cv="Team"] { background: #cffafe; color: #0e7490; border-color: #67e8f9; }
.bn-bulk-task-card select.bnf-colored[data-cv="Everyone"] { background: #1a1a1a; color: #ffffff; border-color: #1a1a1a; }
/* Field visibility classes — toggled by the top toolbar */
.bn-bulk-hide-type .bnf-type, .bn-bulk-hide-slackStatus .bnf-slackStatus,
.bn-bulk-hide-priority .bnf-priority, .bn-bulk-hide-responsibleId .bnf-responsibleId,
.bn-bulk-hide-proposedById .bnf-proposedById, .bn-bulk-hide-shareWith .bnf-shareWith,
.bn-bulk-hide-estimatedHours .bnf-estimatedHours, .bn-bulk-hide-dedicatedHours .bnf-dedicatedHours,
.bn-bulk-hide-dates .bnf-dates, .bn-bulk-hide-parentGroupId .bnf-parentGroupId,
.bn-bulk-hide-taskTag .bnf-taskTag, .bn-bulk-hide-roadmapId .bnf-roadmapId,
.bn-bulk-hide-isGroup .bnf-isGroup, .bn-bulk-hide-comments .bn-bulk-task-card .comments
{ display: none !important; }
/* Date row inside bulk card (pin + start + days + end + pin) */
.bn-bulk-date-cells { display: grid; grid-template-columns: 28px 1fr 90px 1fr 28px; gap: 4px; align-items: center; }
.bn-bulk-date-cells .pin { width: 26px; height: 28px; padding: 0; border: 1px solid #ececea; background: #fff; border-radius: 6px; cursor: pointer; font-size: 13px; }
.bn-bulk-date-cells .pin:hover { background: #f5f5f3; }
.bn-bulk-date-cells .pin.has-anchor { background: #dbeafe; border-color: #93c5fd; color: #1e3a8a; }
.bn-bulk-date-cells input[type="date"], .bn-bulk-date-cells input[type="number"] { padding: 5px 8px; font-size: 12px; border: 1px solid #ececea; border-radius: 6px; background: #fff; font-family: inherit; width: 100%; }
.bn-bulk-date-cells .days-wrap { position: relative; }
.bn-bulk-date-cells .days-wrap::after { content: 'days'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #9a9a9a; font-size: 11px; pointer-events: none; }
.bn-bulk-date-cells .days-wrap input { padding-right: 38px; text-align: center; }
.bn-bulk-anchor-info { font-size: 11px; color: #2563eb; margin-top: 2px; min-height: 14px; }
.bn-bulk-anchor-info .clear-anchor { margin-left: 6px; cursor: pointer; color: #991b1b; text-decoration: underline; }
/* Bulk anchor picker (popup) */
.bn-bulk-anchor-pop { position: absolute; z-index: 100000; background: #fff; border: 1px solid #ececea; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.18); padding: 10px; min-width: 340px; max-width: 420px; max-height: 60vh; overflow: auto; }
.bn-bulk-anchor-pop .head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.bn-bulk-anchor-pop .head strong { font-size: 12px; flex: 1; }
.bn-bulk-anchor-pop .head .close { background: transparent; border: none; cursor: pointer; font-size: 14px; color: #6b6b6b; }
.bn-bulk-anchor-pop input.search { width: 100%; padding: 6px 8px; font-size: 12px; border: 1px solid #ececea; border-radius: 6px; margin-bottom: 6px; }
.bn-bulk-anchor-pop .group-label { font-size: 10px; font-weight: 700; color: #9a9a9a; text-transform: uppercase; letter-spacing: 0.04em; margin: 6px 4px 3px; }
.bn-bulk-anchor-pop .row { display: grid; grid-template-columns: 1fr auto auto; gap: 4px; align-items: center; padding: 4px 6px; border-radius: 5px; font-size: 12px; }
.bn-bulk-anchor-pop .row:hover { background: #f5f5f3; }
.bn-bulk-anchor-pop .row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-bulk-anchor-pop .row .name .ico { color: #9a9a9a; margin-right: 4px; }
.bn-bulk-anchor-pop .row button { padding: 2px 7px; font-size: 10px; font-weight: 700; border: 1px solid #ececea; background: #fff; border-radius: 4px; cursor: pointer; color: #1a1a1a; }
.bn-bulk-anchor-pop .row button:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.bn-bulk-anchor-pop .row button.disabled { opacity: 0.3; pointer-events: none; }
.bn-bulk-anchor-pop .empty { color: #9a9a9a; font-size: 12px; text-align: center; padding: 16px; }
/* Bulk Create modal */
.bn-bulk-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 99998; display: none; align-items: flex-start; justify-content: center; padding: 32px 16px; overflow-y: auto; }
.bn-bulk-modal.open { display: flex; }
.bn-bulk-modal-content { background: #fff; border-radius: 12px; max-width: 1500px; width: 100%; max-height: calc(100vh - 64px); overflow: auto; padding: 22px 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.25); }
.bn-bulk-modal h2 { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.bn-bulk-hint code { background: #f5f5f3; padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, monospace; }
.bn-bulk-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid #f0efeb; }
/* Sticky bottom action bar inside the bulk modal — always visible while scrolling */
#bnBulkStage2 .bn-bulk-actions { position: sticky; bottom: -22px; background: #fff; z-index: 10; padding-bottom: 14px; margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; box-shadow: 0 -2px 8px rgba(0,0,0,0.04); }
/* Visible fields bar — collapsible */
.bn-bulk-field-toggles { position: relative; }
.bn-bulk-field-toggles.collapsed > *:not(.toggles-collapse-btn):not(.toggles-label) { display: none; }
.bn-bulk-field-toggles.collapsed .toggles-label { display: inline-flex; align-items: center; }
.toggles-collapse-btn { position: absolute; top: 4px; right: 4px; background: transparent; border: 1px solid #ececea; border-radius: 6px; padding: 2px 8px; font-size: 11px; color: #6b6b6b; cursor: pointer; }
.toggles-collapse-btn:hover { color: #1a1a1a; border-color: #1a1a1a; }
.bn-bulk-apply-row strong { margin-right: 4px; color: #6b6b6b; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.bn-bulk-apply-row select, .bn-bulk-apply-row input { padding: 4px 6px; font-size: 12px; border: 1px solid #ececea; border-radius: 6px; background: #fff; font-family: inherit; }
.bn-bulk-apply-row .apply-btn { padding: 4px 10px; background: #1a1a1a; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; }
.bn-bulk-apply-row .apply-btn:hover { background: #333; }
.bn-bulk-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #ececea; border-radius: 8px; overflow: hidden; font-size: 12px; }
.bn-bulk-table th, .bn-bulk-table td { padding: 6px 8px; border-bottom: 1px solid #f5f5f3; text-align: left; vertical-align: top; }
.bn-bulk-table th { background: #fafaf8; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #9a9a9a; position: sticky; top: 0; z-index: 2; }
.bn-bulk-table tr:last-child td { border-bottom: none; }
.bn-bulk-table input[type="text"], .bn-bulk-table select, .bn-bulk-table input[type="date"] { width: 100%; padding: 4px 6px; font-size: 12px; border: 1px solid transparent; background: transparent; border-radius: 4px; font-family: inherit; }
.bn-bulk-table input[type="text"]:hover, .bn-bulk-table select:hover, .bn-bulk-table input[type="date"]:hover { background: #f7f7f5; border-color: #ececea; }
.bn-bulk-table input[type="text"]:focus, .bn-bulk-table select:focus, .bn-bulk-table input[type="date"]:focus { outline: none; background: #fff; border-color: #1a1a1a; box-shadow: 0 0 0 2px rgba(0,0,0,0.05); }
.bn-bulk-table .bn-bulk-row-del { padding: 4px 8px; font-size: 11px; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 4px; cursor: pointer; }
.bn-bulk-table .bn-bulk-row-del:hover { background: #fee2e2; }
.bn-bulk-table .bn-isgroup-cell { text-align: center; }
.bn-bulk-summary { font-size: 13px; color: #6b6b6b; }
.bn-bulk-summary strong { color: #1a1a1a; }
/* Trash view styles */
.bn-trash-empty { padding: 40px 20px; text-align: center; color: #9a9a9a; font-size: 14px; }
.bn-trash-toolbar { display: flex; gap: 8px; align-items: center; margin: 12px 0 16px; padding: 12px 14px; background: #fff; border: 1px solid #ececea; border-radius: 10px; }
.bn-trash-toolbar .count { font-size: 13px; color: #6b6b6b; }
.bn-trash-toolbar .count strong { color: #1a1a1a; }
.bn-trash-toolbar .spacer { flex: 1; }
.bn-trash-table { width: 100%; background: #fff; border: 1px solid #ececea; border-radius: 10px; overflow: hidden; }
.bn-trash-row { display: grid; grid-template-columns: 1fr 110px 110px 120px 160px; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #f5f5f3; font-size: 13px; }
.bn-trash-row:last-child { border-bottom: none; }
.bn-trash-row.header { background: #fafaf8; font-weight: 700; font-size: 11px; text-transform: uppercase; color: #9a9a9a; letter-spacing: 0.04em; }
.bn-trash-row .subj { font-weight: 600; color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-trash-row .subj.is-group::before { content: "📁 "; }
.bn-trash-row .meta { color: #6b6b6b; font-size: 12px; }
.bn-trash-row .actions { display: flex; gap: 6px; justify-content: flex-end; }
.bn-trash-row .actions button { padding: 5px 10px; font-size: 12px; }
.bn-trash-row .actions .restore { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.bn-trash-row .actions .restore:hover { background: #d1fae5; }
.bn-trash-row .actions .permanent { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.bn-trash-row .actions .permanent:hover { background: #fee2e2; }
/* Sidebar Backup section */
.sidebar-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0efeb; display: flex; flex-direction: column; gap: 4px; }
.sidebar-foot-label { font-size: 10px; font-weight: 700; color: #9a9a9a; letter-spacing: 0.05em; text-transform: uppercase; padding: 0 12px 4px; }
.nav-item.secondary { color: #6b6b6b; font-weight: 500; font-size: 12px; }
.nav-item.secondary:hover { background: #f7f7f5; color: #1a1a1a; }
/* Backup import preview modal */
.bn-bup-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.bn-bup-modal-content { background: #fff; border-radius: 12px; max-width: 640px; width: 100%; max-height: 85vh; overflow: auto; padding: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.25); }
.bn-bup-modal h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.bn-bup-diff-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0efeb; align-items: center; }
.bn-bup-diff-row .label { font-size: 13px; color: #6b6b6b; }
.bn-bup-diff-row .v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bn-bup-diff-row .v.cur { color: #9a9a9a; }
.bn-bup-diff-row .v.new { color: #1a1a1a; }
.bn-bup-diff-row.changed .v.new { color: #2563eb; }
.bn-bup-diff-row .arrow { color: #c5c5c0; padding: 0 4px; }
.bn-bup-modal-actions { display: flex; gap: 8px; margin-top: 18px; justify-content: flex-end; }
.bn-bup-warning { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #9a3412; margin: 8px 0; }
.bn-bup-info { font-size: 12px; color: #6b6b6b; margin: 8px 0; }
/* Tab navigation */
.tab {
appearance: none; border: none; background: transparent; cursor: pointer;
padding: 10px 18px; font-size: 14px; font-weight: 600; color: #9a9a9a;
border-bottom: 2px solid transparent; transition: all .12s; font-family: inherit;
display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { color: #1a1a1a; }
.tab.active { color: #1a1a1a; border-bottom-color: #1a1a1a; }
.tab .tab-count { font-size: 11px; padding: 1px 7px; background: #f0efeb; border-radius: 999px; font-weight: 700; color: #6b6b6b; }
.tab.active .tab-count { background: #1a1a1a; color: #fff; }
/* Flat tasks list */
.flat-tasks { display: flex; flex-direction: column; gap: 4px; }
.flat-task {
display: grid; grid-template-columns: 16px 32px 1fr auto auto; gap: 8px; align-items: center;
padding: 8px 12px; border-radius: 8px; background: #faf9f7; border: 1px solid #efeeea;
}
.flat-task[data-pstatus=""] { background: #fff; border-color: #ececea; }
.flat-task[data-pstatus="Waiting"] { background: #e0f2fe; border-color: #7dd3fc; }
.flat-task[data-pstatus="Proposed"] { background: #c7d2fe; border-color: #818cf8; }
.flat-task[data-pstatus="Later / Next"] { background: #fee2e2; border-color: #fca5a5; }
.flat-task[data-pstatus="In Progress"] { background: #ffedd5; border-color: #fed7aa; }
.flat-task[data-pstatus="Under Review"] { background: #ede9fe; border-color: #c4b5fd; }
.flat-task[data-pstatus="Completed"] { background: #ecfdf3; border-color: #a7f3d0; }
.flat-task[data-pstatus="Completed"] .text { text-decoration: line-through; color: #047857; opacity: 0.85; }
.flat-task[data-pstatus="Archived"] { background: #f5efe6; border-color: #d6c5a8; opacity: 0.85; }
.flat-task[data-pstatus="Archived"] .text { color: #78350f; }
.flat-task[data-pstatus="Discarded"] { background: #f5f5f4; border-color: #d8d6d1; opacity: 0.75; }
.flat-task[data-pstatus="Discarded"] .text { text-decoration: line-through; color: #64748b; }
.flat-task[data-selected="true"] { outline: 2px solid #1a1a1a; outline-offset: -1px; }
.flat-task .av-mini { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; position: relative; color: #fff; font-weight: 600; font-size: 11px; display: inline-flex; }
.flat-task .av-mini .ini { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; }
.flat-task .av-mini img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.flat-task .text { font-size: 13px; font-weight: 500; cursor: pointer; word-break: break-word; line-height: 1.3; }
.flat-task .text:hover { color: #1a1a1a; }
.flat-task .meta-line { font-size: 11px; color: #6b6b6b; margin-top: 2px; }
.flat-task .badges-inline { display: inline-flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.flat-task .checkbox { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #d8d6d1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; flex-shrink: 0; font-size: 11px; line-height: 1; }
.flat-task .checkbox.checked { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.flat-task .checkbox.checked::before { content: "\2713"; }
.flat-task .edit-btn { appearance: none; border: none; background: transparent; cursor: pointer; color: #9a9a9a; font-size: 14px; padding: 0 6px; }
.flat-task .edit-btn:hover { color: #1a1a1a; }
/* Responsible single-select photo picker */
.resp-picker-box { position: relative; }
.resp-picker-chip {
display: flex; align-items: center; gap: 8px;
border: 1px solid #d8d6d1; border-radius: 6px; padding: 6px 10px; background: #fff;
cursor: pointer; min-height: 36px; font-size: 13px; color: #1a1a1a; outline: none;
}
.resp-picker-chip:hover, .resp-picker-chip:focus { border-color: #1a1a1a; }
.resp-picker-chip .av-mini { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; position: relative; background: #9aa0a6; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.resp-picker-chip .av-mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; position: absolute; inset: 0; }
.resp-picker-chip .resp-picker-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resp-picker-chip .resp-picker-empty { color: #9a9a9a; }
.resp-picker-chip .resp-picker-clear { appearance: none; border: none; background: transparent; color: #6b6b6b; font-size: 14px; cursor: pointer; padding: 0 4px; line-height: 1; }
.resp-picker-chip .resp-picker-clear:hover { color: #dc2626; }
.resp-picker-chip .resp-picker-caret { color: #9a9a9a; font-size: 10px; margin-left: 2px; }
.resp-picker-dropdown {
position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
background: #fff; border: 1px solid #d8d6d1; border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.10); z-index: 100;
max-height: 280px; display: flex; flex-direction: column; overflow: hidden;
}
.resp-picker-search { border: none; outline: none; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid #ececec; background: #fafafa; }
.resp-picker-list { overflow-y: auto; flex: 1; padding: 4px 0; }
.resp-picker-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; }
.resp-picker-item:hover, .resp-picker-item.active { background: #f1f3f4; }
.resp-picker-item .av-mini { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; position: relative; flex-shrink: 0; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.resp-picker-item .av-mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; position: absolute; inset: 0; }
.resp-picker-item-name { font-size: 13px; color: #1a1a1a; }
.resp-picker-item-email { font-size: 11px; color: #6b6b6b; }
.resp-picker-item-meta { flex: 1; min-width: 0; }
/* Inline "+ Create custom person" rows in pickers */
.resp-picker-create, .proposed-dd-create {
display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
border-top: 1px dashed #ececea;
}
.resp-picker-create:hover, .proposed-dd-create:hover { background: #faf9f7; }
.resp-picker-create .resp-picker-item-name,
.proposed-dd-create .proposed-dd-name { color: #1d4ed8; font-weight: 600; }
body.bn-read-only .resp-picker-create,
body.bn-read-only .proposed-dd-create { display: none !important; }
.resp-picker-section-label { font-size: 10px; font-weight: 700; color: #9a9a9a; text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 12px 4px; }
.resp-picker-empty-state { padding: 14px 12px; color: #9a9a9a; font-size: 12px; text-align: center; }
/* Multi-select Proposed By picker */
.proposed-box { position: relative; border: 1px solid #d8d6d1; border-radius: 6px; padding: 4px; background: #fff; min-height: 36px; cursor: text; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.proposed-box:focus-within { border-color: #1a1a1a; }
.proposed-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.proposed-chip { display: inline-flex; align-items: center; gap: 6px; background: #f1f3f4; border: 1px solid #e2e4e7; padding: 2px 4px 2px 2px; border-radius: 16px; font-size: 12px; color: #1a1a1a; }
.proposed-chip.proposed-chip-external { background: #fff7ed; border-color: #fed7aa; }
/* Section-based coloring of Proposed By chips/picker rows.
Background is the primary signal; text stays readable in dark/light tones. */
.proposed-chip.psec-disabled { background: #e5e7eb; border-color: #cbd5e1; }
.proposed-chip.psec-disabled .proposed-chip-name { color: #4b5563; }
.proposed-chip.psec-bookline { background: #1a1a1a; border-color: #1a1a1a; }
.proposed-chip.psec-bookline .proposed-chip-name { color: #ffffff; }
.proposed-chip.psec-bookline .proposed-chip-x { color: #d8d6d1; }
.proposed-chip.psec-bookline .proposed-chip-x:hover { color: #fca5a5; }
.proposed-chip.psec-team { background: #cffafe; border-color: #67e8f9; }
.proposed-chip.psec-team .proposed-chip-name { color: #0e7490; }
.proposed-chip.psec-supplementary { background: #dcfce7; border-color: #86efac; }
.proposed-chip.psec-supplementary .proposed-chip-name { color: #15803d; }
.proposed-dd-item.psec-disabled { background: #f3f4f6; }
.proposed-dd-item.psec-disabled .proposed-dd-name { color: #4b5563; }
.proposed-dd-item.psec-bookline { background: #f5f5f4; }
.proposed-dd-item.psec-bookline .proposed-dd-name { color: #1a1a1a; font-weight: 600; }
.proposed-dd-item.psec-team { background: #ecfeff; }
.proposed-dd-item.psec-team .proposed-dd-name { color: #0e7490; }
.proposed-dd-item.psec-supplementary { background: #f0fdf4; }
.proposed-dd-item.psec-supplementary .proposed-dd-name { color: #15803d; }
.proposed-dd-item.psec-disabled:hover { background: #e5e7eb; }
.proposed-dd-item.psec-bookline:hover { background: #e7e5e4; }
.proposed-dd-item.psec-team:hover { background: #cffafe; }
.proposed-dd-item.psec-supplementary:hover { background: #dcfce7; }
.proposed-chip .av-mini { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; overflow: hidden; position: relative; }
.proposed-chip .av-mini img,
.proposed-dd-item .av-mini img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; position: absolute; top: 0; left: 0; }
.proposed-dd-item .av-mini { overflow: hidden; position: relative; }
.proposed-chip-name { font-size: 12px; font-weight: 500; line-height: 1; }
.proposed-chip-x { appearance: none; border: none; background: transparent; cursor: pointer; color: #6b6b6b; font-size: 14px; padding: 0 4px 0 2px; line-height: 1; }
.proposed-chip-x:hover { color: #dc2626; }
.proposed-input { flex: 1; min-width: 100px; border: none; outline: none; padding: 4px 6px; font-size: 13px; background: transparent; }
.proposed-dropdown { position: absolute; top: 100%; left: 0; right: 0; max-height: 320px; overflow-y: auto; margin-top: 2px; background: #fff; border: 1px solid #d8d6d1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); z-index: 100; }
.proposed-dropdown .proposed-dd-section { position: sticky; top: 0; background: #f9fafb; color: #6b7280; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 10px; border-bottom: 1px solid #ececec; }
.proposed-dd-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; }
.proposed-dd-item:hover { background: #f1f3f4; }
.proposed-dd-item .av-mini { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; }
.proposed-dd-meta { flex: 1; min-width: 0; }
.proposed-dd-name { font-size: 13px; font-weight: 500; color: #1a1a1a; }
.proposed-dd-email { font-size: 11px; color: #6b6b6b; }
.proposed-dd-ext { font-size: 10px; padding: 2px 6px; background: #fff7ed; color: #c2410c; border-radius: 999px; flex-shrink: 0; }
/* === Colored selects in the task modal === */
/* Status select: tint with the status' palette, mirrored from the task cards. */
select.f-colored-status { font-weight: 600; }
select.f-colored-status[data-value=""] { background: #fff; color: #1a1a1a; border-color: #d8d6d1; }
select.f-colored-status[data-value="Waiting"] { background: #e0f2fe; color: #0369a1; border-color: #7dd3fc; }
select.f-colored-status[data-value="Proposed"] { background: #c7d2fe; color: #1e3a8a; border-color: #818cf8; }
select.f-colored-status[data-value="Later / Next"] { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
select.f-colored-status[data-value="In Progress"] { background: #ffedd5; color: #9a3412; border-color: #fed7aa; }
select.f-colored-status[data-value="Under Review"] { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
select.f-colored-status[data-value="Completed"] { background: #ecfdf3; color: #027a48; border-color: #a7f3d0; }
select.f-colored-status[data-value="Archived"] { background: #f5efe6; color: #78350f; border-color: #d6c5a8; }
select.f-colored-status[data-value="Discarded"] { background: #f1f5f9; color: #64748b; border-color: #d8d6d1; }
/* Color the individual