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

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

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

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

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

/* ─── Main area ────────────────────────────────────────────────────────────── */
.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ─── Sidebar collapse / hide (desktop) ─────────────────────────────────────
   A « button in the sidebar header hides the whole menu; a floating ☰ button
   (top-left) brings it back. State persists in localStorage. Only active on
   the full desktop layout — the icon rail (≤900) and mobile (≤760) already
   have their own compact chrome. */
.sidebar-collapse-btn {
    display: none;            /* enabled on desktop via the media query below */
    margin-left: auto;
    width: 30px; height: 30px;
    align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    color: #cfcfcf;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar-collapse-btn:hover { background: #fff; color: #1a1a1a; border-color: #fff; }
.sidebar-show-btn {
    display: none;
    position: fixed;
    top: 14px; left: 14px;
    z-index: 1200;
    width: 38px; height: 38px;
    align-items: center; justify-content: center;
    background: #1a1a1a; color: #fff;
    border: none; border-radius: 8px;
    font-size: 1.1rem; line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.sidebar-show-btn:hover { background: #000; }
@media (min-width: 901px) {
    .sidebar-collapse-btn { display: inline-flex; }
    html.sidebar-collapsed .sidebar { display: none; }
    html.sidebar-collapsed .sidebar-show-btn { display: inline-flex; }
}
.main-inner {
    padding: 2rem 2.5rem 4rem;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

/* ─── Page header ──────────────────────────────────────────────────────────── */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    /* The reminder bell is position:fixed in the top-right corner. Without
       this gutter the page's own action buttons slide underneath it as soon
       as the window narrows. */
    padding-right: 52px;
}
@media (max-width: 760px) { .page-head { padding-right: 44px; } }
.page-title h1 { margin-bottom: .25rem; }
.page-title .subtitle { color: #6b6b6b; font-size: .9rem; margin: 0; }

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

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

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

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

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

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

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

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

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

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

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

/* My Tasks page rows: check, #, title, due, status, completed-date, schedule, ⋯ */
.list-cols.mt-row, .list-row.mt-row {
    grid-template-columns: 28px 38px minmax(0, 1fr) 130px 130px 130px 130px 110px 36px;
}
/* /todos page rows: title, due, owner, status, company, completed-date, ⋯. */
.list-cols.todo-row, .list-row.todo-row {
    grid-template-columns: var(--todo-title-w, minmax(280px, 2.4fr)) minmax(72px, .85fr) minmax(120px, 1.15fr) minmax(96px, .95fr) minmax(96px, 1fr) 76px;
    align-items: center;
}
.list-row.todo-row > * { min-width: 0; }
.row-archive form { margin: 0; }
/* /issues page rows: title, company, added-by, status, ⋯. */
.list-cols.issues-row, .list-row.issues-row {
    grid-template-columns: minmax(0, 1fr) 150px 180px 180px 36px;
    align-items: center;
}
/* Column-aligned filter row that sits ABOVE the list-cols header on
   /issues, /todos, /rocks. Re-uses the same grid template as the row
   beneath so each filter sits directly over its column. */
.list-row.filter-row {
    background: #fafbfc;
    border-bottom: 1px solid #eee;
    padding: .55rem 1.5rem;
    gap: .55rem;
    align-items: center;
}
.list-row.filter-row .filter-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b6b6b;
    font-weight: 700;
}
.list-row.filter-row select {
    width: 100%;
    box-sizing: border-box;
    padding: .32rem .5rem;
    font-size: .8rem;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    background: #fff;
}
.list-row.filter-row select.is-set {
    background: #eef6ff;
    border-color: #6ea8fe;
    font-weight: 600;
}
.list-row.filter-row:hover { background: #fafbfc; }
.filter-row-clear {
    font-size: .72rem;
    color: #888;
    text-decoration: none;
    white-space: nowrap;
}
.filter-row-clear:hover { color: #444; }
/* Multi-select filter (e.g. Owner) — a checkbox dropdown that matches the
   look of the plain filter selects but allows picking several people. */
.filter-multi { position: relative; font-size: .82rem; }
.filter-multi > summary {
    list-style: none; cursor: pointer; padding: .3rem .5rem;
    border: 1px solid #d8dbe0; border-radius: 6px; background: #fff;
    color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filter-multi > summary::-webkit-details-marker { display: none; }
.filter-multi > summary::after { content: ' ▾'; color: #9ca3af; }
.filter-multi.is-set > summary { border-color: #2c5fa3; background: #eef4ff; color: #1e40af; font-weight: 600; }
.filter-multi-panel {
    position: absolute; z-index: 40; top: calc(100% + 3px); left: 0;
    min-width: 220px; max-height: 320px; overflow-y: auto;
    background: #fff; border: 1px solid #d8dbe0; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .35rem;
}
.filter-multi-row {
    display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem;
    border-radius: 6px; cursor: pointer; font-weight: 400; text-transform: none;
    letter-spacing: 0; color: #374151;
}
.filter-multi-row:hover { background: #f3f4f6; }
.filter-multi-row input { width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }

/* Type-to-filter combobox (Client Meetings client picker). Sits below the
   text input as an absolutely-positioned scrollable list of suggestions. */
.combobox-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 200;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.combobox-list.open { display: block; }
.combobox-row {
    padding: .5rem .7rem;
    cursor: pointer;
    font-size: .88rem;
    border-top: 1px solid #f3f3f3;
}
.combobox-row:first-child { border-top: none; }
.combobox-row:hover { background: #eef6ff; }
.combobox-row.muted { color: #888; }
.combobox-sep {
    padding: .45rem .7rem .25rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #888;
    font-weight: 600;
    background: #fafbfc;
    border-top: 1px solid #eee;
}
.combobox-sep:first-child { border-top: none; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Cleaner Add-To-Do form inside a Rock — each control gets a fixed
   sensible width so labels and date pickers don't overlap. */
.rock-todo-add {
    display: grid;
    grid-template-columns: 1fr 180px 160px auto;
    gap: .5rem;
    align-items: center;
}
@media (max-width: 720px) {
    .list-cols.rock-todo-row, .list-row.rock-todo-row {
        grid-template-columns: 30px 1fr auto;
        gap: .35rem;
    }
    .list-cols.rock-todo-row > div:nth-child(n+3),
    .list-row.rock-todo-row > div:nth-child(n+4) { display: none; }
    .rock-todo-add { grid-template-columns: 1fr; }
}
.schedule-menu { position: relative; }
.schedule-menu summary.schedule-btn {
    list-style: none;
    cursor: pointer;
    padding: .35rem .7rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    /* Unscheduled state: outlined (green border + green text on white) so it
       reads as "available action" — easy to distinguish from the filled
       Scheduled badge below. */
    border: 1px solid #FF0000;
    background: #fff;
    color: #FF0000;
    border-radius: 6px;
    font-weight: 600;
    user-select: none;
    line-height: 1;
}
.schedule-menu summary.schedule-btn::-webkit-details-marker { display: none; }
.schedule-menu summary.schedule-btn:hover {
    background: #FFF5F5;
}
.schedule-menu[open] summary.schedule-btn {
    background: #FF0000;
    color: #fff;
}
/* Scheduled state: solid green fill so it pops as a confirmed status. Same
   dimensions as the outlined button above so the column doesn't shift. */
.schedule-menu summary.schedule-btn.schedule-btn-on {
    background: #FF0000;
    color: #fff;
    border-color: #FF0000;
}
.schedule-menu summary.schedule-btn.schedule-btn-on:hover,
.schedule-menu[open] summary.schedule-btn.schedule-btn-on {
    background: #CC0000;
    border-color: #CC0000;
}
/* Disabled variant — same dimensions but greyed out, used when the user
   hasn't connected a calendar yet. Click pops an alert. */
.schedule-btn.schedule-btn-disabled {
    list-style: none;
    cursor: pointer;
    padding: .35rem .7rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    border: 1px dashed #c0c0c0;
    background: #fafafa;
    color: #999;
    border-radius: 6px;
    font-weight: 600;
    user-select: none;
    line-height: 1;
    font-family: inherit;
}
.schedule-btn.schedule-btn-disabled:hover { background: #f0f0f0; color: #666; }

/* ─── Sidebar Undo button ──────────────────────────────────────────────── */
.sidebar-undo {
    margin: .5rem 1rem .25rem;
}
.sidebar-undo button {
    width: 100%;
    background: transparent;
    color: #c9c9c9;
    border: 1px solid #444;
    padding: .42rem .6rem;
    border-radius: 6px;
    font-size: .8rem;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-undo button:hover:not(:disabled) {
    background: #2a2a2a;
    color: #fff;
    border-color: #FF0000;
}
.sidebar-undo button:disabled {
    opacity: .45;
    cursor: not-allowed;
    border-color: #333;
}
.sidebar-undo .undo-label { color: #888; font-size: .72rem; }

.list-empty {
    padding: 2.25rem 1.5rem;
    text-align: center;
    color: #8a8a8a;
    font-size: .9rem;
}
/* Optional icon above the message — gives an empty card something to look at
   without turning it into dead space. */
.list-empty .empty-ico {
    display: block;
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: .5rem;
    opacity: .5;
}

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

/* ─── Badges ───────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .65rem;
    border: 1px solid #d4d4d4;
    background: #fff;
    color: #4b4b4b;
    font-size: .72rem;
    font-weight: 500;
    border-radius: 999px;
    line-height: 1.4;
}
.badge.solid { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.badge.muted { color: #888; border-color: #e5e5e5; }
.badge.priority-High   { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.badge.priority-Medium { background: #f0f0f0; color: #1a1a1a; border-color: #d4d4d4; }
.badge.priority-Low    { background: #fff; color: #888; border-color: #e5e5e5; }
/* My Tasks status categories — Scheduled = green, Waiting on Other = light red */
.badge.mtprio-today     { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.badge.mtprio-scheduled { background: #FFE4E4; color: #7A0000; border-color: #FF6B6B; }
.badge.mtprio-waiting   { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.badge.mtprio-in_progress    { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.badge.mtprio-waiting_client { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
/* Inline owner/status dropdowns on the To-Do's list (managers/admins). */
.inline-cell-select {
    max-width: 100%; padding: .25rem .35rem; font-size: .8rem;
    border: 1px solid #e2e5ea; border-radius: 6px; background: #fff;
    color: #374151; cursor: pointer;
}
.inline-cell-select:hover { border-color: #c7cbd1; }
.inline-cell-select.state-in_progress    { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.inline-cell-select.state-waiting_client { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.inline-cell-select.state-complete       { background: #FFE4E4; color: #8F0000; border-color: #FFB3B3; }
.inline-cell-select.state-canceled       { background: #f3f4f6; color: #6b7280; border-color: #d1d5db; }
/* Terminal-state badges shown in the Status column when a task is done. */
.badge.status-complete  { background: #FF0000; color: #fff; border-color: #FF0000; }
.badge.status-canceled  { background: #f3f4f6; color: #6b7280; border-color: #d1d5db; }
/* Tiny timestamp shown under the Completed/Canceled badge (legacy; kept for compat). */
.status-when {
    margin-top: .2rem;
    font-size: .7rem;
    color: #6b7280;
    line-height: 1.1;
}
/* Dedicated "Completed Date" column to the right of Status. */
.row-completed-when {
    font-size: .8rem;
    color: #6b7280;
}
.badge.dot::before {
    content: '';
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ─── Client Meetings: section headers + inline editable rows ───────── */
/* Brand-red header for the workflow sections (Discussion / Agency / Client /
   Completed). */
.card-head.card-head-green {
    background: #FF0000;
    color: #fff;
    padding: .65rem 1.5rem;
    border-bottom: 1px solid #CC0000;
}
.card-head.card-head-green .card-title { color: #fff; font-weight: 700; }
.card-head.card-head-green .count-chip {
    background: rgba(255,255,255,.22);
    color: #fff;
}

/* Inline add-only row at the bottom of Agency / Client sections. Flex
   layout so a Title input + Priority select + Add button sit side-by-side
   without the title input blowing out to 100% width. */
.meeting-todo-add-simple {
    padding: .65rem 1.5rem;
    background: #fafbfc;
    border-top: 2px dashed #e0e0e0;
    display: flex;
    gap: .5rem;
    align-items: stretch;
    flex-wrap: wrap;
}
.meeting-todo-add-simple input[type="text"] {
    flex: 1 1 220px;
    min-width: 0;
    box-sizing: border-box;
    padding: .5rem .65rem;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    font-size: .9rem;
    font-family: inherit;
}
.meeting-todo-add-simple select {
    padding: .5rem .55rem;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    font-size: .85rem;
    background: #fff;
    font-family: inherit;
    cursor: pointer;
}
.meeting-todo-add-simple button[type="submit"] {
    padding: .5rem .95rem;
    border: 1px solid #FF0000;
    background: #FF0000;
    color: #fff;
    border-radius: 5px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.meeting-todo-add-simple button[type="submit"]:hover { background: #CC0000; }

/* Red X to delete a meeting To-Do from its row. Subtle by default,
   filled red on hover so it's clearly destructive. */
.todo-delete-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.todo-delete-btn:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

/* Title cell wrapper — keeps the (truncated) title next to a small note
   badge so they share the first grid column without breaking the ellipsis. */
.cm-title-cell {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}
.cm-title-cell .row-title { min-width: 0; }
/* "Has notes" badge — a little speech bubble with the note count so people
   know there's something to read on a task. */
.note-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    padding: .2rem .4rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    white-space: nowrap;
    cursor: default;
}

/* Per-row grid for the Agency / Client To-Do lists. Same columns as the
   header above so the inline editors line up cleanly. */
.meeting-todo-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 180px 140px 36px;
    gap: .55rem;
    align-items: center;
    padding: .5rem 1.5rem;
}
/* Color-coded Priority dropdown so urgency reads at a glance. The
   .cmprio-none state (no priority picked yet) is intentionally neutral
   so an unset row is visually distinct from a Medium one. */
.meeting-todo-inline select.cmprio-none {
    background: #fff; color: #6b7280; border-color: #d0d0d0; font-style: italic;
}
.meeting-todo-inline select.cmprio-high {
    background: #fee2e2; color: #b91c1c; border-color: #fca5a5; font-weight: 600;
}
.meeting-todo-inline select.cmprio-medium {
    background: #fef3c7; color: #a16207; border-color: #fcd34d; font-weight: 600;
}
.meeting-todo-inline select.cmprio-low {
    background: #FFF1F1; color: #8F0000; border-color: #FFB3B3; font-weight: 600;
}
.meeting-todo-inline select.cmprio-later {
    background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; font-weight: 600;
}
/* Locked / non-owner due-date input — visually mute it so people know
   the field is read-only for them (and why — see the title tooltip). */
.meeting-todo-inline input[type="date"]:disabled {
    background: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
}
/* Priority pill badges used inside the To-Do detail popup. */
.badge.cmprio-high   { background:#fee2e2; color:#b91c1c; }
.badge.cmprio-medium { background:#fef3c7; color:#a16207; }
.badge.cmprio-low    { background:#FFF1F1; color:#8F0000; }
.badge.cmprio-later  { background:#eff6ff; color:#1d4ed8; }

/* ─── Sales pipeline ──────────────────────────────────────────────────── */
/* Status badges per appointment outcome. */
.badge.sales-status-sold       { background:#FFE4E4; color:#8F0000; }
.badge.sales-status-no_show    { background:#fee2e2; color:#b91c1c; }
.badge.sales-status-dnq        { background:#fef3c7; color:#a16207; }
.badge.sales-status-follow_up  { background:#dbeafe; color:#1e40af; }
.badge.sales-status-reschedule { background:#ede9fe; color:#6d28d9; }
.badge.sales-status-not_interested { background:#fce7f3; color:#be185d; }

/* Seller picker (Closers filter on /kpis). <details> dropdown with a
   checkbox panel — click the summary to open/close. */
.seller-picker { position: relative; }
.seller-picker > summary {
    list-style: none;
    cursor: pointer;
    padding: .35rem .7rem .35rem .8rem;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 600;
    color: #1a1a1a;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.seller-picker > summary::-webkit-details-marker { display: none; }
.seller-picker > summary::after { content: '▾'; color: #6b7280; font-weight: 400; }
.seller-picker[open] > summary {
    border-color: #FF0000;
    background: #FFF5F5;
}
.seller-picker-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    z-index: 100;
    min-width: 220px;
    max-height: 360px;
    overflow-y: auto;
    padding: .35rem 0;
}
.seller-picker-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
    font-size: .88rem;
    cursor: pointer;
}
.seller-picker-row:hover { background: #f5f5f5; }
.seller-picker-row input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: #FF0000;
    cursor: pointer;
    margin: 0;
}
.seller-picker-sep {
    height: 1px;
    background: #ececec;
    margin: .3rem 0;
}
/* When a picker dropdown is open, let it overflow the card (the card
   normally clips with overflow:hidden, which cut off long closer lists). */
.kpi-card:has(.seller-picker[open]) { overflow: visible; }

/* Top-of-card stat tiles (Apps | No Show | DNQ | Sold | % Sold). */
.sales-stats {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .55rem;
    padding: 0 .25rem;
    margin-top: .5rem;
}
.sales-stat-card {
    background: #fafbfc;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: .55rem .55rem;
}
.sales-stat-label {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    font-weight: 700;
}
.sales-stat-value {
    margin-top: .22rem;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
}
.sales-stat-sub {
    margin-top: .2rem;
    font-size: .68rem;
    color: #6b7280;
}
.sales-stat-formula {
    margin-top: .2rem;
    font-size: .62rem;
    line-height: 1.3;
    color: #9ca3af;
}
@media (max-width: 1100px) {
    .sales-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .sales-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tab bar at the top of the All Clients To-Do's modal. */
.outstanding-tabs {
    display: flex;
    gap: .25rem;
    padding: .5rem .85rem 0;
    border-bottom: 1px solid #ececec;
    background: #fafbfc;
    flex-wrap: wrap;
}
.outstanding-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: .55rem .9rem;
    font-size: .88rem;
    color: #555;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    border-radius: 6px 6px 0 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.outstanding-tab:hover { background: #fff; color: #222; }
.outstanding-tab.active {
    background: #fff;
    color: #FF0000;
    border-bottom-color: #FF0000;
}
.outstanding-tab .count-chip { font-size: .68rem; }
.outstanding-tab .count-chip.danger {
    background: #dc2626;
    color: #fff;
}

/* Red-tinted past-due row inside the popup. */
.outstanding-row.is-overdue-row {
    background: linear-gradient(to right, #fef2f2 0%, transparent 12%);
    border-left: 3px solid #dc2626;
}
.open-meeting-row:hover { background: #f0f6ff; }

/* ─── ALL CLIENTS TO-DO's popup (cross-client outstanding view) ───────── */
.outstanding-client-block {
    margin-bottom: 1.4rem;
    border: 1px solid #ececec;
    border-radius: 8px;
    overflow: hidden;
}
.outstanding-client-head {
    background: #f5f7f9;
    padding: .55rem .85rem;
    font-weight: 700;
    font-size: .92rem;
    border-bottom: 1px solid #ececec;
}
.outstanding-list-head,
.outstanding-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px 140px 40px;
    gap: .55rem;
    align-items: center;
    padding: .5rem .85rem;
}
.cm-complete-btn {
    width: 30px; height: 30px; border-radius: 7px; border: 1px solid #FF0000;
    background: #fff; color: #FF0000; font-weight: 700; cursor: pointer; font-size: .95rem;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.cm-complete-btn:hover { background: #FF0000; color: #fff; }
.cm-complete-btn:disabled { opacity: .5; cursor: default; }
.outstanding-list-head {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #888;
    font-weight: 700;
    background: #fafbfc;
    border-bottom: 1px solid #eee;
}
.outstanding-row {
    border-bottom: 1px solid #f3f3f3;
    font-size: .88rem;
}
.outstanding-row:last-child { border-bottom: none; }
.outstanding-row:hover { background: #fafafa; }
.outstanding-row > * { min-width: 0; }
.outstanding-row select,
.outstanding-row input[type="date"] {
    width: 100%;
    box-sizing: border-box;
    padding: .35rem .5rem;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    font-size: .82rem;
    background: #fff;
    font-family: inherit;
    cursor: pointer;
}
/* Re-use the priority color coding inside this popup. */
.outstanding-row select.cmprio-none   { background:#fff;     color:#6b7280; border-color:#d0d0d0; font-style: italic; }
.outstanding-row select.cmprio-high   { background:#fee2e2; color:#b91c1c; border-color:#fca5a5; font-weight:600; }
.outstanding-row select.cmprio-medium { background:#fef3c7; color:#a16207; border-color:#fcd34d; font-weight:600; }
.outstanding-row select.cmprio-low    { background:#FFF1F1; color:#8F0000; border-color:#FFB3B3; font-weight:600; }
.outstanding-row select.cmprio-later  { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; font-weight:600; }
.outstanding-row input[type="date"]:disabled {
    background:#f3f4f6; color:#6b7280; cursor:not-allowed;
}
@media (max-width: 720px) {
    .outstanding-list-head { display: none; }
    .outstanding-row {
        grid-template-columns: 1fr;
        gap: .4rem;
    }
}
/* Client-side TO-DO row: same look as the agency one but only 3 columns
   (no status — the client owns these, we don't track agency status). */
.meeting-client-todo-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 180px 140px 36px;
    gap: .55rem;
    align-items: center;
    padding: .5rem 1.5rem;
}
.list-cols.meeting-client-todo-row {
    font-size: .72rem;
    text-transform: uppercase;
    color: #888;
    letter-spacing: .05em;
    padding-top: .4rem;
    padding-bottom: .4rem;
}
.meeting-client-todo-row > * { min-width: 0; }
.list-cols.meeting-todo-row {
    font-size: .72rem;
    text-transform: uppercase;
    color: #888;
    letter-spacing: .05em;
    padding-top: .4rem;
    padding-bottom: .4rem;
}
.meeting-todo-row > * { min-width: 0; }

/* Inline editors (date / select) — small, neat, auto-submit on change. */
.meeting-todo-inline input[type="date"],
.meeting-todo-inline select {
    width: 100%;
    box-sizing: border-box;
    padding: .35rem .5rem;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    font-size: .82rem;
    background: #fff;
    font-family: inherit;
    cursor: pointer;
}
/* Status select colour-codes itself based on the current value. */
.meeting-todo-inline select.status-complete {
    background: #FF0000; color: #fff; border-color: #FF0000; font-weight: 600;
}
.meeting-todo-inline select.status-canceled {
    background: #f3f4f6; color: #6b7280; border-color: #d1d5db;
}

@media (max-width: 640px) {
    .meeting-todo-row { grid-template-columns: 1fr 1fr; }
    .list-cols.meeting-todo-row > div:nth-child(n+3) { display: none; }
    .meeting-todo-row > :nth-child(n+4) { display: none; }
}

/* ─── Account: per-person admin cards ───────────────────────────────────── */
.team-admin-card {
    border: 1px solid #ececec;
    border-radius: 8px;
    margin-bottom: .55rem;
    background: #fff;
    overflow: hidden;
}
.team-admin-card[open] { border-color: #d4d4d4; }
.team-admin-card > summary {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    padding: .7rem .95rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.team-admin-card > summary::-webkit-details-marker { display: none; }
.team-admin-card > summary::before {
    content: '▸';
    font-size: .75rem;
    color: #888;
    transition: transform .12s;
}
.team-admin-card[open] > summary::before { transform: rotate(90deg); }
.team-admin-card > summary:hover { background: #fafafa; }
.team-admin-name { font-weight: 600; font-size: .95rem; }
.team-admin-body {
    padding: .85rem 1.1rem 1.1rem;
    border-top: 1px solid #f0f0f0;
    background: #fafbfc;
}

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

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

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

/* ─── Login ────────────────────────────────────────────────────────────────── */
/* min-height + padding (not a margin on .login-wrap) so the dark backdrop
   fills the viewport — a top margin collapses out of the body and leaves a
   white band above the card. */
body.login-body { background: #1a1a1a; min-height: 100vh; padding: 8rem 1rem; box-sizing: border-box; }
.login-wrap {
    max-width: 400px;
    margin: 0 auto;
    padding: 2.25rem 2rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.login-wrap h1 {
    text-align: center;
    letter-spacing: .04em;
    margin-bottom: 1.5rem;
}
/* Login splash: the OnPoint wordmark centered above the form. */
.login-wordmark { display: block; width: 190px; max-width: 70%; height: auto; margin: .25rem auto 1.75rem; }
.login-mark { width: 64px; height: 64px; border-radius: 12px; display: block; margin: 0 auto 1rem; }
.login-wrap .brand-mark {
    width: 48px; height: 48px; font-size: 1.1rem;
    margin: 0 auto 1rem; display: flex;
}

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

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

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

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

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

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

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

    /* Integrations rows: stack icon+info on top of the action button on
       narrow screens so the Connect/Disconnect button never gets pushed
       off-screen. */
    .integration-row {
        flex-wrap: wrap;
        row-gap: .5rem;
    }
    .integration-action {
        flex: 1 1 100%;
        display: flex;
        justify-content: flex-end;
    }
    .integration-action .btn { width: 100%; }

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

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

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

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

/* Draggable Title-column resizer on the To-Do's table. */
.list-cols.todo-row > div:first-child { position: relative; }
.todo-col-resize {
    position: absolute; top: 0; right: -5px; width: 10px; height: 100%;
    cursor: col-resize; user-select: none; z-index: 6;
}
.todo-col-resize::after {
    content: ''; position: absolute; top: 15%; bottom: 15%; left: 4px;
    width: 2px; background: #d5d8dd; border-radius: 2px;
}
.todo-col-resize:hover::after { background: #2c5fa3; }

/* The filter row keeps a stable grid (independent of the Title resizer) so its
   dropdowns don't shift when the Title column is resized. */
.list-row.todo-row.filter-row {
    grid-template-columns: minmax(280px, 2.4fr) minmax(72px, .85fr) minmax(120px, 1.15fr) minmax(96px, .95fr) minmax(96px, 1fr) 76px;
}
/* Never let the table overflow its card horizontally. */
#todos-card { overflow-x: hidden; }

/* ─── My Tasks toolbar ──────────────────────────────────────────────────────
   Search + the two dropdowns + Clear on ONE row. The global
   `input, select { width: 100% }` rule above forces each control onto its own
   line, so everything in here opts out of it explicitly. */
.mt-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.mt-toolbar select {
    width: auto;
    min-width: 150px;
    padding: .45rem 2rem .45rem .7rem;
    font-size: .88rem;
    border: 1px solid #dcdfe4;
    border-radius: 8px;
    background: #fff;
    color: #3a3a3a;
    cursor: pointer;
}
.mt-toolbar select:hover { border-color: #c2c6cc; }

/* Search keeps the magnifier inside the field instead of in the placeholder,
   so the hint text reads as a sentence and stays legible when typing. */
.mt-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 200px;
}
.mt-search-icon {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .85rem;
    opacity: .45;
    pointer-events: none;
}
.mt-toolbar .mt-search input[type="text"] {
    width: 100%;
    padding: .45rem .7rem .45rem 2.1rem;
    font-size: .88rem;
    border: 1px solid #dcdfe4;
    border-radius: 8px;
    background: #fff;
}
.mt-toolbar .mt-search input[type="text"]:focus {
    border-color: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(26,26,26,.07);
}
.mt-clear {
    border: none;
    background: transparent;
    color: #6b7280;
    font: inherit;
    font-size: .85rem;
    padding: .45rem .55rem;
    border-radius: 7px;
    cursor: pointer;
}
.mt-clear:hover { background: #f1f2f4; color: #1a1a1a; }
/* Hidden by an inline style; the JS clears it to show. Only size here. */
.mt-nomatch { font-size: .85rem; }

/* Section sub-label: what this list actually is, in plain words. `.card-title`
   is a flex row, so this rides along after the count chip rather than stacking
   — keeps the header one line tall. Drops off on small screens where the
   title alone has to fit. */
.card-note {
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #9a9a9a;
    padding-left: .65rem;
    border-left: 1px solid #e8e8e8;
}
.card-head .card-title { line-height: 1.3; min-width: 0; }
@media (max-width: 760px) { .card-note { display: none; } }

@media (max-width: 640px) {
    .mt-toolbar select { flex: 1 1 100%; min-width: 0; }
}