/**
 * Portal CSS — Client Portal styles.
 * Extracted from WP portal.php template inline styles.
 */

/* ── Base ── */
* { box-sizing: border-box; }
body { margin: 0 !important; padding: 0 !important; }

.portal {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: #f2f6fb;
    color: #1e293b;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ── Header ── */
.portal-header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.portal-header__left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.portal-header__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #111827;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.portal-header__logo-icon { color: #145fff; }

.portal-header__divider {
    width: 1px;
    height: 28px;
    background: #e5e7eb;
    margin: 0 6px 0 12px;
}

.portal-header__client-switch {
    position: relative;
}

.portal-header__client-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    border-radius: 6px;
    transition: background 0.1s;
}

.portal-header__client-btn:hover { background: #f2f6fb; }
.portal-header__client-btn svg { color: #9ca3af; transition: transform 0.15s; }
.portal-header__client-switch.open .portal-header__client-btn svg { transform: rotate(180deg); }

.portal-header__client-dropdown {
    display: none;
    position: absolute;
    top: 42px;
    left: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    min-width: 240px;
    width: max-content;
    max-height: 320px;
    overflow-y: auto;
    z-index: 200;
}

.portal-header__client-switch.open .portal-header__client-dropdown { display: block; }

.portal-header__client-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 40px 10px 16px;
    font-size: 14px;
    color: #374151;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.1s;
}

.portal-header__client-option:hover { background: #f2f6fb; }
.portal-header__client-option--active { background: #eff6ff; color: #145fff; font-weight: 600; }

.portal-header__client-avatar {
    width: 28px; height: 28px; border-radius: 7px;
    background: #8a98b2; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}

/* Nav — always centered to viewport */
.portal-header__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.portal-header__nav-item {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    transition: all 0.12s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.portal-header__nav-item svg { flex-shrink: 0; }
.portal-header__nav-item:hover { background: #f2f6fb; color: #111827; }
.portal-header__nav-item--active { background: #eff6ff; color: #145fff; }
.portal-header__nav-label { display: none; }

/* Right actions */
.portal-header__right {
    display: flex;
    align-items: center;
    gap: 2px;
}

.portal-header__user-btn {
    width: 34px; height: 34px; border-radius: 50%;
    background: #111827; color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; position: relative;
}

.portal-header__dropdown {
    display: none;
    position: absolute;
    top: 44px;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    min-width: 180px;
    z-index: 200;
    overflow: hidden;
}

.portal-header__dropdown.open { display: block; }

.portal-header__dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    color: #374151;
    text-decoration: none;
    transition: background 0.1s;
}

.portal-header__dropdown-item:hover { background: #f2f6fb; }
.portal-header__dropdown-item--danger { color: #dc2626; }
.portal-header__dropdown-item--danger:hover { background: #fef2f2; }
.portal-header__dropdown-sep { border-top: 1px solid #dde5f1; }

.portal-header__logout {
    width: 34px; height: 34px; border-radius: 8px;
    background: none; border: 1px solid #e5e7eb; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #9ca3af; transition: all 0.12s;
}
.portal-header__logout:hover { color: #ef4444; border-color: #fecaca; background: #fef2f2; }

/* ── Content ── */
.portal-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 32px;
}
.portal-content.portal-content--full { max-width: none; }

/* ── Shared portal styles ── */
.portal-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; background: #145fff; color: #fff; border: none;
    border-radius: 6px; font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; text-decoration: none; transition: background 150ms;
}
.portal-btn-primary:hover { background: #0f4fd6; color: #fff; }

.portal-btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; background: #fff; color: #374151;
    border: 1px solid #d1d5db; border-radius: 6px; font-family: inherit;
    font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none;
    transition: all 150ms;
}
.portal-btn-secondary:hover { background: #f9fafb; border-color: #9ca3af; }

.portal-btn-danger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; background: #ef4444; color: #fff; border: none;
    border-radius: 6px; font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; text-decoration: none; transition: background 150ms;
}
.portal-btn-danger:hover { background: #dc2626; }

.comment-content ul, .comment-content ol { padding-left: 30px; margin: 6px 0; }
.comment-content ul ul, .comment-content ol ol, .comment-content ul ol, .comment-content ol ul { margin: 2px 0; }
.comment-content li { margin-bottom: 3px; line-height: 1.6; }
.comment-content h3 { font-size: 16px; font-weight: 700; margin: 10px 0 4px; }
/* Matches .se__body in partials/simple-editor: what you typed is what you
   see. `> div` covers content saved before the editor emitted <p>. */
.comment-content p, .comment-content > div { margin: 0 0 10px; }
.comment-content p:last-child, .comment-content > div:last-child { margin-bottom: 0; }
.comment-content img { max-width: 100%; border-radius: 8px; margin: 6px 0; }
/* Same divider as the dashboard: the default <hr> groove has no place in
   prose, and a comment posted from either side should look identical. */
.comment-content hr, .rich-prose hr {
    border: 0; height: 1px; padding: 0; margin: 24px 0; overflow: visible;
    background: linear-gradient(90deg, transparent, var(--color-border, #d1d5db) 15%, var(--color-border, #d1d5db) 85%, transparent);
}

/* ── Reading text ──
   The words people open the portal to READ: a project's description, a
   message, comments, replies, the activity feed. They were all 14px — the
   app's size for a value in a table — and under 16px task titles a comment
   read like a footnote. Normal is 16px; Small keeps the old 14 for anyone who
   liked the density; Large is 18. Chosen per person in Preferences
   (user_portal_text_size()) and stamped on <html> by the portal layout.

   --portal-read-meta is the timestamp beside a name and the feed's time
   column: two below the text it sits with, so it scales along with it rather
   than staying 12px under an 18px reply.

   Only reading text moves. Labels, buttons, tabs and card titles keep their
   sizes — this is not a zoom, and scaling the chrome too is how a Large
   setting stops fitting the screen. */
html { --portal-read: 16px; --portal-read-meta: 14px; }
html[data-portal-text="small"] { --portal-read: 14px; --portal-read-meta: 12px; }
html[data-portal-text="large"] { --portal-read: 18px; --portal-read-meta: 16px; }

/* ── Reading leading ──
   The third thing that has to travel with size and ink, and the last one that
   was still being written by hand: every reading surface set its own
   line-height inline, and they did not agree. A comment, a reply and a
   message thread were 1.6; a project description, a custom field and a note
   were 1.7. Same words, same size, two rhythms, depending which page you
   opened — and the box you typed them into was a third decision again.

   1.6 is the comments' value, which is the one most of them already used and
   the one the editor was already drawn at. A token, for the reason the ink is
   a token: three inline copies is exactly how the other two drifted. */
html { --portal-read-lh: 1.6; }

/* ── Reading ink ──
   Size was unified here and colour was not, so once every reading surface
   shared one size the two inks that had always been there stopped hiding
   behind the difference: a message and a reply were #374151, while a comment
   and a project description were --color-text (#111827). Side by side at the
   same size, the same paragraph looks like two different kinds of text.

   #374151 is the one that wins — the softer one, off the message thread. It
   is a step down from --color-text, which stays the strongest ink in the
   portal and still marks an author's name and a heading; body copy sitting
   one step below its own heading is what makes a wall of text readable.

   It is a token and not a literal because the portal has a dark mode.
   #374151 on #0f1117 is near-invisible, and every place this colour was
   written inline was a dark-mode bug waiting for somebody to switch themes.
   Colour now travels with size on .portal-read, so there is ONE place that
   decides how the portal reads and no inline colour to drift from it. */
/* ── Row rhythm ──
   How much air a reading row gets above and below the line that separates it
   from the next one. The message thread's replies were 20px each side and the
   two surfaces beside them were 16px, so the same list of the same kind of
   thing breathed differently depending which page you opened. 24px is the
   reply spacing the owner picked, plus four.

   ONE value, for the same reason the ink is one value: three separate
   declarations is how the ink drifted, and this is the same three places.
   Chrome, not reading text, so it does NOT scale with --portal-read — a Large
   setting should give you bigger words, not a page that stops fitting. */
html { --portal-row-gap: 24px; }

/* Gutter between attachment tiles. 10px was drawn for the 140x90 tile this
   grid used to hold; at 180x120, four across, the cards read as one block
   with hairlines in it. The space ABOVE a grid is --portal-row-gap and not a
   number of its own, because the space below it is the row's own padding —
   "the same gap top and bottom" has to stay true by construction, not by two
   values that happen to match today. */
html { --portal-attach-gap: 20px; }

html { --portal-read-ink: #374151; }
[data-theme="dark"] { --portal-read-ink: #c3c9d4; }

.portal-read { font-size: var(--portal-read); line-height: var(--portal-read-lh); color: var(--portal-read-ink); }
.portal-read-meta { font-size: var(--portal-read-meta); }

/* Headings inside a comment or description are sized against the text around
   them, so a heading stays a heading at every setting. dashboard.css fixes
   them in px (h3 16px), which is body size at Normal and smaller than the
   body at Large. Same specificity, later file. */
.portal-read.rich-prose h1 { font-size: 1.4em; }
.portal-read.rich-prose h2 { font-size: 1.25em; }
.portal-read.rich-prose h3 { font-size: 1.125em; }
.portal-read.rich-prose h4,
.portal-read.rich-prose h5,
.portal-read.rich-prose h6 { font-size: 1.05em; }

/* The box you type into is the size of what it posts as — writing at 14 and
   watching it land at 18 reads as a bug. The editor's own <style> is printed
   in the body, after this file, so the attribute is what outranks it. */
html[data-portal-text] .se__body { font-size: var(--portal-read); line-height: var(--portal-read-lh); }

/* …and the INK of what it posts as. Size was matched here and colour was not,
   so the portal's reading grey (--portal-read-ink, see above) arrived only
   after you pressed Post: you wrote in near-black and it landed a step
   lighter. Same tie the size had — `.se__body` and `.portal-read` are both
   one class, and the editor's own <style> sits later in the document — so the
   attribute breaks it here too.

   Only the boxes that asked for it: `prose` on partials/simple-editor is what
   puts .portal-read on the body, and it is set on the surfaces that render
   into .rich-prose. A blog post or a public form is not this kind of text. */
html[data-portal-text] .se__body.portal-read { color: var(--portal-read-ink); }
html[data-portal-text] .se__body h3 { font-size: 1.125em; }

.ccs-tip-wrap { position: relative; }
.ccs-tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1264FF; color: #fff; font-size: 11px; font-weight: 500; padding: 4px 8px; border-radius: 5px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 50; }
.ccs-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #1264FF; }
.ccs-tip-wrap:hover .ccs-tooltip { opacity: 1; }

/* Global select styling */
.portal-content select {
    -webkit-appearance: none;
    appearance: none;
    background: #f2f6fb url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239ca3af%22 stroke-width=%222%22><polyline points=%226 9 12 15 18 9%22/></svg>') no-repeat right 8px center;
    padding-right: 28px !important;
    cursor: pointer;
}

.portal-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
/* overflow:hidden keeps a card's contents inside its rounded corners, and also
   guillotines any menu that opens downward out of one. A card that hosts a
   dropdown asks for this instead; there is nothing bleeding to the edge in
   those, so the corners lose nothing. */
.portal-card--menu { overflow: visible; }
.portal-card__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid #dde5f1; }
.portal-card__title { font-size: 15px; font-weight: 600; color: #111827; margin: 0; }
.portal-card__body { padding: 24px; }

.portal-input { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 6px; font-family: inherit; font-size: 14px; color: #111827; background: #f2f6fb; transition: border-color 150ms; }
.portal-input:focus { outline: none; border-color: #145fff; box-shadow: 0 0 0 3px rgba(20,95,255,0.1); }
.portal-label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.portal-select { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 6px; font-family: inherit; font-size: 14px; color: #111827; background: #fff; appearance: auto; }
.portal-textarea { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 6px; font-family: inherit; font-size: 14px; color: #111827; background: #fff; resize: vertical; }

/* Reusable search bar */
.portal-search { position: relative; flex: 1; max-width: 400px; }
.portal-search__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #9ca3af; display: flex; align-items: center; pointer-events: none; }
.portal-search__input { width: 100%; padding: 8px 28px 8px 34px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 13px; font-family: inherit; outline: none; box-sizing: border-box; background: #f2f6fb; transition: border-color 150ms, background 150ms; }
.portal-search__input:focus { border-color: #1264FF; background: #fff; }
.portal-search__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #9ca3af; display: none; align-items: center; cursor: pointer; padding: 2px; }
.portal-search__clear:hover { color: #374151; }
.portal-textarea:focus, .portal-select:focus { outline: none; border-color: #1264FF; box-shadow: 0 0 0 3px rgba(18,100,255,0.1); }

/* Reusable small select with chevron */
.portal-select-sm { padding: 8px 32px 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; font-family: inherit; color: #111827; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center; appearance: none; -webkit-appearance: none; outline: none; cursor: pointer; }
.portal-select-sm:focus { border-color: #1264FF; }

/* Client picker cards */
.client-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.client-picker-card {
    display: block;
    padding: 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.12s ease;
}

.client-picker-card:hover {
    border-color: #145fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
    .portal-header__nav { display: none; }
    .portal-content { padding: 20px 16px; }
}

/* ── Dashboard Styles ── */
.dash-hero { margin-bottom: 28px; }
.dash-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.dash-hero__left { display: flex; align-items: center; gap: 18px; }
.dash-hero__date { font-size: 13px; font-weight: 500; color: #9ca3af; margin: 0 0 4px; letter-spacing: 0.02em; line-height: 1.3; }
.dash-hero__greeting { font-size: 28px; font-weight: 700; color: #111827; margin: 0; line-height: 1.2; }
.dash-hero__sub { font-size: 15px; color: #6b7280; margin: 4px 0 0; line-height: 1.3; }
.dash-hero__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Metric cards */
.dash-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.dash-metric { padding: 20px; border-radius: 14px; background: #fff; border: 1px solid #e5e7eb; text-decoration: none; color: inherit; transition: all 0.2s; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.dash-metric:hover { border-color: #1264FF; box-shadow: 0 4px 12px rgba(18,100,255,0.08); transform: translateY(-1px); }
.dash-metric__icon { position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.dash-metric__label { font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.dash-metric__value { font-size: 28px; font-weight: 700; color: #111827; line-height: 1.2; }
.dash-metric__value small { font-size: 14px; font-weight: 500; color: #9ca3af; }
.dl-short { display: none; }
@media (max-width: 1199px) { .dl-full { display: none; } .dl-short { display: inline; } }
.dash-metric__bar { margin-top: auto; padding-top: 12px; }
.dash-metric__detail { font-size: 12px; color: #9ca3af; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Main grid */
.dash-grid { display: grid; grid-template-columns: 1fr 290px; gap: 24px; align-items: start; }

/* Section card */
.dash-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; margin-bottom: 20px; overflow: visible; }
.dash-section__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 18px 24px; border-bottom: 1px solid #dde5f1; }
.dash-section__title { font-size: 15px; font-weight: 700; color: #111827; margin: 0; display: flex; align-items: center; gap: 8px; }
.dash-section__title .count-badge { font-size: 11px; font-weight: 600; background: #dde5f1; color: #6b7280; padding: 2px 8px; border-radius: 10px; }
.dash-section__action { font-size: 13px; color: #1264FF; text-decoration: none; font-weight: 500; }
.dash-section__action:hover { text-decoration: underline; }

/* Attention cards */
.dash-attention { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 24px; }
.dash-attention-card { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 12px; border: 1px solid; text-decoration: none; color: inherit; transition: all 0.15s; }
.dash-attention-card__text { flex: 1; }
.dash-attention-card__arrow { flex-shrink: 0; opacity: 0.4; transition: opacity 0.15s, transform 0.15s; }
.dash-attention-card:hover .dash-attention-card__arrow { opacity: 0.8; transform: translateX(3px); }
.dash-attention-card:hover { transform: translateY(-1px); }
.dash-attention-card--overdue { background: #fef2f2; border-color: #fecaca; }
.dash-attention-card--overdue:hover { box-shadow: 0 4px 12px rgba(239,68,68,0.12); }
.dash-attention-card--review { background: #eff6ff; border-color: #bfdbfe; }
.dash-attention-card--review:hover { box-shadow: 0 4px 12px rgba(18,100,255,0.12); }
.dash-attention-card--tasks { background: #fffbeb; border-color: #fde68a; }
.dash-attention-card--tasks:hover { box-shadow: 0 4px 12px rgba(217,119,6,0.12); }
.dash-attention-card--due { background: #f0fdf4; border-color: #bbf7d0; }
.dash-attention-card--due:hover { box-shadow: 0 4px 12px rgba(5,150,105,0.12); }
.dash-attention-card__icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.dash-attention-card__text h4 { font-size: 14px; font-weight: 600; margin: 0 0 2px; }
.dash-attention-card__text p { font-size: 12px; margin: 0; opacity: 0.8; }

/* Compact status chips — inline act-now signals in section headers */
.dash-section__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Tabs get their own row under the title — the canonical in-card pattern. Beside
   the title they'd start at a different x in every card, since they'd be pushed
   over by however long that card's name happens to be. */
.dash-section__tabsrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 24px; border-bottom: 1px solid #dde5f1; }
.dash-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; border: 1px solid; text-decoration: none; font-size: 12px; font-weight: 600; line-height: 1.4; transition: filter 0.15s; }
.dash-chip:hover { filter: brightness(0.97); }
.dash-chip--overdue { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.dash-chip--review { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.dash-chip--due { background: #fffbeb; border-color: #fde68a; color: #b45309; }

/* "Visible to client" amber pill — themed so it doesn't go muddy in dark mode */
.vis-client-pill { color: #92400e; background: #fef3c7; }
[data-theme="dark"] .vis-client-pill { background: rgba(217,119,6,0.16); color: #fcd34d; }

/* The INTERNAL markers — the same amber, the other answer. Every one of these
   was a hardcoded #fffbeb/#92400e/#fde68a triple inlined at its call site, so
   in dark mode a near-white pill sat on a near-black page: the one badge on
   the screen that says "the client cannot see this" was the one shouting
   loudest, and it was unreadable besides. Themed here for the same reason the
   pill above is — the answer must not depend on which file you happened to
   be in when you wrote it.

   `--pill` is the flat badge; `--box` is the bordered container the internal
   toggles sit in. Both carry their own border so a call site never has to. */
.vis-internal-pill { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.vis-internal-box  { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.vis-internal-box__sub { color: #b45309; }
[data-theme="dark"] .vis-internal-pill { background: rgba(217,119,6,0.16); color: #fcd34d; border-color: rgba(252,211,77,0.28); }
[data-theme="dark"] .vis-internal-box  { background: rgba(217,119,6,0.10); border-color: rgba(252,211,77,0.24); color: #fcd34d; }

/* ── Internal band ──
   A full-bleed amber wash behind the top of an internal project or message,
   ending flush with the bottom edge of the first card. The pill beside the
   title says the same thing in words, but a pill is only read if you happen to
   look at it, and the cost of not noticing here is pasting a client into a
   thread that was never meant to reach them. Colour is .vis-internal-box's, so
   the band, the pill and the toggle on the edit form read as one idea rather
   than three ambers.

   Absolute inside a zero-height anchor, so it adds nothing to the flow and the
   page below it does not move. Height is measured — see the partial — because
   the card it aligns to has no fixed size.

   The band goes BEHIND the page with z-index:-1. It used to stay at z-index
   auto and every following sibling was promoted to position:relative instead,
   so the cards would paint over it — which worked, and quietly broke anything
   after the anchor whose position came from a CLASS rather than an inline
   style. On these two pages that was the lightbox: `.ccs-lightbox` is
   position:fixed, `~ *` is the more specific selector, so on an internal
   thread the viewer became position:relative — a zero-height box in the flow.
   Clicking an attachment then opened a lightbox nobody could see, and the
   scroll lock it takes out on the body stayed until the page was reloaded.
   The page looked frozen, the console was clean, and it only ever happened on
   internal threads. A rule that reaches every later sibling is not worth that;
   negative z-index asks nothing of the rest of the page. */
.portal-internal-band__anchor { position: relative; height: 0; }
.portal-internal-band {
    position: absolute;
    z-index: -1;
    top: -32px;
    left: calc(50% - 50vw);
    width: 100vw;
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
    pointer-events: none;
}

[data-theme="dark"] .portal-internal-band {
    background: rgba(217,119,6,0.10);
    border-bottom-color: rgba(252,211,77,0.24);
}

@media (max-width: 768px) {
    .portal-internal-band { top: -20px; }
}
}
[data-theme="dark"] .vis-internal-box__sub { color: #fbbf24; }
/* A bare internal mark with no plate behind it — the padlock on a category
   heading. Colour only, so it reads on either ground. */
.vis-internal-ink { color: #92400e; }
[data-theme="dark"] .vis-internal-ink { color: #fcd34d; }

/* An amber notice that is NOT about internal work — "showing 1-50 of 300",
   and anything else that qualifies what is on screen. Same palette, different
   meaning, so it gets its own name rather than borrowing .vis-internal-*: a
   class called "internal" on a pagination note would be a lie the next person
   has to read past. */
.portal-note-amber { background: #fff8e6; border: 1px solid #fde68a; color: #92400e; }
[data-theme="dark"] .portal-note-amber { background: rgba(217,119,6,0.10); border-color: rgba(252,211,77,0.24); color: #fcd34d; }

/* Dashboard project table */
.dash-ptable { width: 100%; border-collapse: collapse; }
.dash-ptable thead { background: var(--color-bg, #f2f6fb); }
.dash-ptable th { padding: 10px 16px; font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; text-align: left; border-bottom: 1px solid #dde5f1; }
.dash-ptable th:first-child { padding-left: 24px; }
.dash-ptable th:last-child { padding-right: 24px; }
.dash-ptable-row { cursor: pointer; transition: background 0.1s; }
.dash-ptable-row:hover td { background: #f9fafb; }
.dash-ptable-row td { padding: 14px 16px; border-bottom: 1px solid #dde5f1; font-size: 14px; vertical-align: middle; color: #111827; }
.dash-ptable-row:last-child td { border-bottom: 0; }
.dash-ptable-row td:first-child { padding-left: 24px; }
.dash-ptable-row td:last-child { padding-right: 24px; }
.dash-ptable-title { font-weight: 600; color: #111827; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.dash-ptable-code { font-family: monospace; font-size: 13px; font-weight: 500; color: #111827; white-space: nowrap; }
.dash-ptable-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; color: #111827; }
.dash-ptable-status-bar { width: 4px; height: 20px; border-radius: 2px; flex-shrink: 0; }
.dash-ptable-priority { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; color: #111827; }
.dash-ptable-priority-bar { width: 4px; height: 20px; border-radius: 2px; flex-shrink: 0; }
.dash-ptable-due { font-size: 13px; color: #111827; white-space: nowrap; }

/* Internal marker on the dashboard project table: an amber dot in its own
   narrow column before Code, explained by the legend at the far right of the
   section header. Same amber as .vis-internal-*, so "internal" reads the same
   here as on the project list and in messages. */
.dash-ptable th.dash-ptable-th--dot, .dash-ptable-row td.dash-ptable-dotcell { width: 28px; padding-left: 0; padding-right: 0; text-align: center; }
.dash-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; vertical-align: middle; }
.dash-dot--internal { background: #d97706; box-shadow: 0 0 0 3px #fef3c7; }
.dash-legend { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #6b7280; white-space: nowrap; }

/* Timeline / This week */
.dash-timeline { padding: 0; }
.dash-timeline-item { display: flex; gap: 14px; padding: 14px 24px; border-bottom: 1px solid #dde5f1; text-decoration: none; color: inherit; transition: background 0.1s; }
.dash-timeline-item:last-child { border-bottom: 0; }
.dash-timeline-item:hover { background: #f9fafb; }
.dash-timeline-item__date { width: 48px; text-align: center; flex-shrink: 0; }
.dash-timeline-item__day { font-size: 20px; font-weight: 700; color: #111827; line-height: 1.2; }
.dash-timeline-item__month { font-size: 11px; font-weight: 500; color: #9ca3af; text-transform: uppercase; }
.dash-timeline-item__content { flex: 1; min-width: 0; }
.dash-timeline-item__title { font-size: 14px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-timeline-item__sub { font-size: 12px; color: #9ca3af; margin-top: 3px; display: flex; align-items: center; gap: 8px; }

/* Messages grid */
.dash-messages-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #dde5f1; }
.dash-message { display: flex; align-items: center; gap: 12px; padding: 16px 20px; text-decoration: none; color: inherit; background: #fff; transition: background 0.15s; }
.dash-message:hover { background: #f9fafb; }
.dash-message__content { flex: 1; min-width: 0; }
.dash-message__title { font-size: 14px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-message__meta { font-size: 12px; color: #9ca3af; margin-top: 2px; }
.dash-message__badge { font-size: 11px; font-weight: 600; color: #1264FF; background: #eff6ff; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; }

/* Completed items */
.dash-completed { display: flex; align-items: center; gap: 10px; padding: 14px 24px; text-decoration: none; color: inherit; border-bottom: 1px solid #dde5f1; transition: background 0.1s; }
.dash-completed:last-child { border-bottom: 0; }
.dash-completed:hover { background: #f9fafb; }
.dash-completed__check { width: 20px; height: 20px; border-radius: 50%; background: #059669; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dash-completed__title { font-size: 14px; font-weight: 500; color: #111827; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-completed__code { font-size: 11px; color: #9ca3af; font-family: monospace; flex-shrink: 0; }

/* Sidebar */
.dash-sidebar-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; margin-bottom: 16px; overflow: hidden; }
.dash-sidebar-card__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #dde5f1; }
.dash-sidebar-card__title { font-size: 14px; font-weight: 700; color: #111827; margin: 0; }
.dash-sidebar-card__action { font-size: 12px; color: #1264FF; text-decoration: none; font-weight: 500; }

/* Task item in sidebar */
.dash-task { display: block; padding: 12px 20px; text-decoration: none; color: inherit; border-bottom: 1px solid #dde5f1; transition: background 0.1s; }
.dash-task:last-child { border-bottom: 0; }
.dash-task:hover { background: #f9fafb; }
.dash-task__name { font-size: 13px; font-weight: 500; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-task__meta { font-size: 11px; color: #9ca3af; margin-top: 3px; display: flex; align-items: center; gap: 6px; }

/* Quick action buttons */
.dash-quick-btn { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; border: 1px solid #e5e7eb; background: #fff; text-decoration: none; color: #111827; font-size: 13px; font-weight: 500; transition: all 0.15s; width: 100%; }
.dash-quick-btn:hover { border-color: #1264FF; background: #eff6ff; color: #1264FF; }
.dash-quick-btn__icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* A form's Quick Action with its pencil. The wrapper carries the outline so
   the pencil sits INSIDE the button, at its right end, rather than as a second
   button beside it; the inner link gives up its own border. Only rendered for
   a team member who can open the builder (portal_can_edit_forms). */
.dash-quick-row { display: flex; align-items: stretch; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: hidden; transition: border-color 0.15s; }
.dash-quick-row:hover { border-color: #1264FF; }
.dash-quick-row .dash-quick-btn { flex: 1; min-width: 0; border: 0; border-radius: 0; }
.dash-quick-edit { display: inline-flex; align-items: center; justify-content: center; width: 42px; flex-shrink: 0; border-left: 1px solid #e5e7eb; color: #9ca3af; text-decoration: none; transition: background 0.15s, color 0.15s; }
.dash-quick-edit:hover { background: #eff6ff; color: #1264FF; }
/* The team-only notes at the foot of the request page's Tips card: a light
   blue panel, so they read as a different voice from the client's tips above
   them rather than three more of the same. */
.portal-tips-team { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; padding: 12px 14px; border-radius: 8px; background: #eff6ff; border: 1px solid #dbeafe; color: #374151; }

/* Progress bar */
.dash-progress { display: flex; align-items: center; gap: 10px; }
.dash-progress__track { flex: 1; height: 6px; background: #dde5f1; border-radius: 3px; overflow: hidden; }
.dash-progress__fill { height: 100%; background: #1264FF; border-radius: 3px; transition: width 0.3s; }
/* Composition bar — segments sized by count, not progress toward a total. */
.dash-progress__track--split { display: flex; gap: 2px; background: none; }
.dash-progress__seg { height: 100%; border-radius: 3px; min-width: 3px; }
.dash-progress__seg--empty { flex: 1; background: #dde5f1; }
.dash-progress__label { font-size: 12px; font-weight: 600; color: #6b7280; min-width: 36px; text-align: right; }

/* Status distribution bar */
.dash-status-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px; }
.dash-status-bar__segment { height: 100%; border-radius: 3px; background: #1264FF; transition: width 0.3s; min-width: 4px; }

/* Empty state */
.dash-empty { padding: 40px 24px; text-align: center; }
.dash-empty__icon { color: #d1d5db; margin-bottom: 10px; }
.dash-empty__title { font-size: 15px; font-weight: 600; color: #374151; margin: 0 0 4px; }
.dash-empty__text { font-size: 13px; color: #9ca3af; margin: 0 0 16px; }
/* Same spacing rule as admin .empty-state: the preceding copy owns the gap —
   action buttons never carry their own margin-top. */
.dash-empty__text + .portal-btn-primary,
.dash-empty__text + .btn,
.dash-empty__text + a,
.dash-empty__text + button { margin-top: 0; }
.dash-empty__title + .portal-btn-primary,
.dash-empty__title + .btn,
.dash-empty__title + a,
.dash-empty__title + button { margin-top: 12px; }

/* ── Projects Page ── */
.ptable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ptable thead { background: var(--color-bg, #f2f6fb); }
.ptable th { padding: 10px 16px; font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; text-align: left; border-bottom: 1px solid #dde5f1; }
.ptable th:first-child { padding-left: 24px; }
.ptable th:last-child { padding-right: 24px; }
.ptable-row { cursor: pointer; transition: background 0.1s; }
.ptable-row:hover td { background: #f9fafb; }
.ptable-row td { padding: 14px 16px; border-bottom: 1px solid #dde5f1; font-size: 14px; vertical-align: middle; color: #111827; }
.ptable-row:last-child td { border-bottom: 0; }
.ptable-row td:first-child { padding-left: 24px; }
.ptable-row td:last-child { padding-right: 24px; }
.ptable-title { font-weight: 600; color: #111827; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.ptable-code { font-family: monospace; font-size: 13px; font-weight: 500; color: #111827; white-space: nowrap; }
.ptable-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; color: #111827; }
.ptable-status-bar { width: 4px; height: 20px; border-radius: 2px; flex-shrink: 0; }
.ptable-priority { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; color: #111827; }
.ptable-priority-bar { width: 4px; height: 20px; border-radius: 2px; flex-shrink: 0; }
.ptable-due { font-size: 13px; color: #111827; white-space: nowrap; }
.ptable-due.overdue { color: #ef4444; font-weight: 600; }
.ptable-due.due-soon { color: #d97706; font-weight: 600; }

/* Progress bar */
.ptable-progress { display: flex; align-items: center; gap: 8px; min-width: 100px; }
.ptable-progress__track { flex: 1; height: 6px; background: #dde5f1; border-radius: 3px; overflow: hidden; }
.ptable-progress__fill { height: 100%; background: #1264FF; border-radius: 3px; transition: width 0.3s; }
.ptable-progress__label { font-size: 12px; font-weight: 600; color: #6b7280; min-width: 32px; text-align: right; }

/* Group section */
.pgroup { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: visible; margin-bottom: 20px; }
.pgroup__header { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid #dde5f1; }
.pgroup__bar { width: 4px; height: 24px; border-radius: 2px; flex-shrink: 0; }
.pgroup__name { font-size: 15px; font-weight: 700; color: #111827; }
.pgroup__count { font-size: 12px; font-weight: 600; background: #dde5f1; color: #6b7280; padding: 2px 8px; border-radius: 10px; }
.pgroup__empty { padding: 32px 24px; text-align: center; color: #9ca3af; font-size: 13px; }

/* Kanban Board */
#projects-kanban { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.kanban-board { display: flex; gap: 14px; min-height: 400px; padding-bottom: 8px; }
.kanban-col { min-width: 240px; width: 240px; flex-shrink: 0; background: #f2f6fb; border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 260px); }
@media (min-width: 1200px) { .kanban-col { flex: 1; width: auto; min-width: 200px; } }
.kanban-col__header { padding: 14px 16px; border-top: 4px solid; border-radius: 12px 12px 0 0; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.kanban-col__title { font-size: 13px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.03em; }
.kanban-col__count { font-size: 12px; font-weight: 600; background: rgba(0,0,0,0.06); color: #6b7280; padding: 1px 8px; border-radius: 10px; }
.kanban-col__body { padding: 8px 10px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.kanban-col__empty { text-align: center; padding: 24px 8px; font-size: 13px; color: #9ca3af; }
.kanban-card { display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px; text-decoration: none; color: inherit; transition: box-shadow 0.12s, transform 0.12s; }
.kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }
.kanban-card__title { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kanban-card__meta { font-size: 12px; color: #9ca3af; display: flex; align-items: center; gap: 8px; }
.kanban-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.kanban-card__pri { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.kanban-card__due { font-size: 12px; color: #6b7280; font-weight: 500; }
.kanban-card__due.overdue { color: #ef4444; font-weight: 600; }
.kanban-card__due.due-soon { color: #d97706; font-weight: 600; }

/* View switcher */
.pp-view-btn--active { background: #fff !important; color: #111827 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

/* Kanban drag & drop */
.kanban-card.is-dragging { opacity: 0.25; }
.kanban-card.kb-ghost { position: fixed; pointer-events: none; z-index: 99999; opacity: 0.92; transform: rotate(2deg) scale(1.03); box-shadow: 0 12px 28px rgba(0,0,0,0.18); transition: none; }
.kb-placeholder { border: 2px dashed var(--color-primary, #145fff); background: rgba(20,95,255,0.04); border-radius: 10px; min-height: 20px; transition: min-height 0.15s; pointer-events: none; }
.kanban-col__body.drag-over { background: rgba(20,95,255,0.03); border-radius: 8px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .dash-grid { grid-template-columns: 1fr; }
    .dash-metrics { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .dash-metrics { grid-template-columns: 1fr; }
    .dash-attention { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .dash-metrics { grid-template-columns: 1fr; }
}

/* ── Dark Mode ── */
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] .portal { background: #0f1117; color: #e8eaed; }
[data-theme="dark"] .portal-header { background: #1a1d27; border-color: #2e3140; }
[data-theme="dark"] .portal-header__logo { color: #e8eaed; }
[data-theme="dark"] .portal-header__divider { background: #2e3140; }
[data-theme="dark"] .portal-header__client-btn { color: #e8eaed; }
[data-theme="dark"] .portal-header__client-btn:hover { background: #252836; }
[data-theme="dark"] .portal-header__client-dropdown { background: #1a1d27; border-color: #2e3140; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
[data-theme="dark"] .portal-header__client-option { color: #b0b5be; }
[data-theme="dark"] .portal-header__client-option:hover { background: #252836; }
[data-theme="dark"] .portal-header__client-option--active { background: rgba(20,95,255,0.15); color: #145fff; }
[data-theme="dark"] .portal-header__client-avatar { background: #e8eaed; color: #111827; }
[data-theme="dark"] .portal-header__nav-item { color: #9ca3af; }
[data-theme="dark"] .portal-header__nav-item:hover { background: #252836; color: #e8eaed; }
[data-theme="dark"] .portal-header__nav-item--active { background: rgba(20,95,255,0.15); color: #145fff; }
[data-theme="dark"] .portal-header__user-btn { background: #e8eaed; color: #111827; }
[data-theme="dark"] .portal-header__dropdown { background: #1a1d27; border-color: #2e3140; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
[data-theme="dark"] .portal-header__dropdown-item { color: #b0b5be; }
[data-theme="dark"] .portal-header__dropdown-item:hover { background: #252836; }
[data-theme="dark"] .portal-header__dropdown-sep { border-color: #2e3140; }
[data-theme="dark"] .portal-header__logout { border-color: #2e3140; color: #6b7280; }
[data-theme="dark"] .portal-header__logout:hover { color: #ef4444; border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.12); }
[data-theme="dark"] .portal-btn-secondary { background: #1a1d27; color: #b0b5be; border-color: #2e3140; }
[data-theme="dark"] .portal-btn-secondary:hover { background: #252836; border-color: #3b3f4e; }
[data-theme="dark"] .portal-card { background: #1a1d27; border-color: #2e3140; }
[data-theme="dark"] .portal-card__header { border-color: #262938; }
[data-theme="dark"] .portal-card__title { color: #e8eaed; }
[data-theme="dark"] .portal-input:not(select) { background: #1f222d; color: #e8eaed; border-color: #2e3140; }
[data-theme="dark"] select.portal-input,
[data-theme="dark"] .portal-select,
[data-theme="dark"] .portal-select-sm { background: #1f222d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center !important; color: #e8eaed; border-color: #2e3140; }
[data-theme="dark"] .portal-textarea { background: #1f222d; color: #e8eaed; border-color: #2e3140; }

/* Form builder: checkbox/radio option cards + custom controls (premium) */
.cb-card { border: 1.5px solid #e2e6ee !important; color: var(--color-text, #111827) !important; background: #fff !important; box-shadow: 0 1px 2px rgba(16,24,40,0.03) !important; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease !important; }
.cb-card:hover { border-color: var(--color-primary, #1264FF) !important; background: #fff !important; box-shadow: 0 2px 8px rgba(18,100,255,0.10) !important; }
.cb-card--checked { border-color: var(--color-primary, #1264FF) !important; background: rgba(18,100,255,0.05) !important; box-shadow: 0 2px 10px rgba(18,100,255,0.14) !important; }
[data-theme="dark"] .cb-card { background: #1f222d !important; border-color: #2e3140 !important; color: #e8eaed !important; }
[data-theme="dark"] .cb-card:hover { background: #242833 !important; }
[data-theme="dark"] .cb-card--checked { background: rgba(18,100,255,0.16) !important; border-color: #1264FF !important; }

/* Custom checkbox / radio indicator */
.cb-card input[type="checkbox"], .cb-card input[type="radio"] {
    -webkit-appearance: none !important; appearance: none !important;
    width: 20px !important; height: 20px !important; margin: 0 !important; flex-shrink: 0;
    border: 2px solid #c4cbd6 !important; background: #fff !important; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease !important;
}
[data-theme="dark"] .cb-card input[type="checkbox"], [data-theme="dark"] .cb-card input[type="radio"] { background: #2a2e3a !important; border-color: #3a3f4f !important; }
.cb-card input[type="checkbox"] { border-radius: 6px !important; }
.cb-card input[type="radio"] { border-radius: 50% !important; }
.cb-card:hover input[type="checkbox"], .cb-card:hover input[type="radio"] { border-color: var(--color-primary, #1264FF) !important; }
.cb-card input[type="checkbox"]:checked { border-color: var(--color-primary, #1264FF) !important; background: var(--color-primary, #1264FF) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat !important; }
.cb-card input[type="radio"]:checked { border-color: var(--color-primary, #1264FF) !important; background: var(--color-primary, #1264FF) !important; box-shadow: inset 0 0 0 3px #fff !important; }

/* Multi-select rendered as selectable pills that fill the row and wrap (premium) */
.cb-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cb-pill { display: inline-flex; align-items: center; padding: 8px 16px 8px 10px; border: 1.5px solid #e2e6ee; border-radius: 999px; background: #fff; color: var(--color-text, #111827); font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; user-select: none; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .1s ease; }
/* "rows" style: full-width stacked options instead of compact pills */
.cb-pills--rows { flex-direction: column; flex-wrap: nowrap; }
.cb-pills--rows .cb-pill { width: 100%; padding: 13px 16px; border-radius: 10px; }
.cb-pill:active { transform: scale(0.97); }
.cb-pill input { display: none; }
/* the empty circle indicator on each pill */
.cb-pill::before { content: ''; width: 20px; height: 20px; flex-shrink: 0; margin-right: 9px; border-radius: 50%; border: 2px solid #c4cbd6; background: #fff; transition: border-color .15s ease, background-color .15s ease; }
.cb-pill:hover { border-color: var(--color-primary, #1264FF); }
.cb-pill:hover::before { border-color: var(--color-primary, #1264FF); }
/* selected: accent border + light tint, circle fills with a white check */
.cb-pill--on { border-color: var(--color-primary, #1264FF); background: rgba(18,100,255,0.07); }
.cb-pill--on::before { border-color: var(--color-primary, #1264FF); background: var(--color-primary, #1264FF) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat; }
[data-theme="dark"] .cb-pill { background: #1f222d; border-color: #2e3140; color: #e8eaed; }
[data-theme="dark"] .cb-pill::before { background: #2a2e3a; border-color: #3a3f4f; }
[data-theme="dark"] .cb-pill--on { background: rgba(18,100,255,0.16); border-color: #1264FF; }

.fm-assignee-body { background: #f2f6fb !important; border-color: #d1d5db !important; }
[data-theme="dark"] .fm-assignee-body { background: #1f222d !important; color: #e8eaed !important; border-color: #2e3140 !important; }
[data-theme="dark"] .portal-search__input { background: #1f222d; border-color: #2e3140; color: #e8eaed; }
[data-theme="dark"] .portal-search__input:focus { background: #252836; }
[data-theme="dark"] .portal-content select { background-color: #1f222d; }

/* Dark mode: dashboard components */
[data-theme="dark"] .dash-metric { background: #1a1d27 !important; border-color: #2e3140 !important; }
[data-theme="dark"] .dash-section { background: #1a1d27 !important; border-color: #2e3140 !important; }
[data-theme="dark"] .dash-section__header { border-color: #262938 !important; }
[data-theme="dark"] .dash-sidebar-card { background: #1a1d27 !important; border-color: #2e3140 !important; }
[data-theme="dark"] .dash-sidebar-card__header { border-color: #262938 !important; }
[data-theme="dark"] .dash-message { background: #1a1d27 !important; }
[data-theme="dark"] .dash-message:hover { background: #252836 !important; }
[data-theme="dark"] .dash-quick-btn { background: #1a1d27 !important; border-color: #2e3140 !important; color: #e8eaed !important; }
[data-theme="dark"] .dash-quick-btn:hover { background: #252836 !important; }
[data-theme="dark"] .dash-quick-row { background: #1a1d27 !important; border-color: #2e3140 !important; }
[data-theme="dark"] .dash-quick-row:hover { border-color: #1264FF !important; }
[data-theme="dark"] .dash-quick-edit { border-color: #2e3140 !important; color: #9ca3af !important; }
[data-theme="dark"] .dash-quick-edit:hover { background: #252836 !important; color: #93c5fd !important; }
[data-theme="dark"] .portal-tips-team { background: rgba(18,100,255,0.12) !important; border-color: rgba(18,100,255,0.28) !important; color: #c4cad6 !important; }
[data-theme="dark"] .dash-chip--overdue { background: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.3) !important; color: #fca5a5 !important; }
[data-theme="dark"] .dash-chip--review { background: rgba(18,100,255,0.14) !important; border-color: rgba(18,100,255,0.32) !important; color: #93c5fd !important; }
[data-theme="dark"] .dash-chip--due { background: rgba(217,119,6,0.14) !important; border-color: rgba(217,119,6,0.32) !important; color: #fcd34d !important; }

/* Dark mode: project tables & kanban */
[data-theme="dark"] .pgroup { background: #1a1d27 !important; border-color: #2e3140 !important; }
[data-theme="dark"] .pgroup__header { border-color: #262938 !important; }
[data-theme="dark"] .pgroup__count { background: #262938 !important; }
[data-theme="dark"] .ptable th { border-color: #262938 !important; }
[data-theme="dark"] .ptable-row td { border-color: #262938 !important; }
[data-theme="dark"] .ptable-row:hover td { background: #252836 !important; }
[data-theme="dark"] .kanban-col { background: #0f1117 !important; }
[data-theme="dark"] .kanban-card { background: #1a1d27 !important; border-color: #2e3140 !important; }

/* Dark mode: dashboard greeting & metrics */
[data-theme="dark"] .dash-hero__greeting { color: #e8eaed !important; }
[data-theme="dark"] .dash-hero__sub { color: #6b7280 !important; }
[data-theme="dark"] .dash-section__title { color: #e8eaed !important; }
[data-theme="dark"] .dash-section__tabsrow { border-color: #262938 !important; }
[data-theme="dark"] .dash-section__title .count-badge { background: #2e3140 !important; color: #9ca3af !important; }
[data-theme="dark"] .dash-ptable th { border-color: #262938 !important; color: #6b7280 !important; }
[data-theme="dark"] .dash-ptable-row td { border-color: #262938 !important; color: #e8eaed !important; }
[data-theme="dark"] .dash-ptable-row:hover td { background: #252836 !important; }
[data-theme="dark"] .dash-ptable-title { color: #fff !important; }
[data-theme="dark"] .dash-ptable-code { color: #9ca3af !important; }
[data-theme="dark"] .dash-ptable-status { color: #e8eaed !important; }
[data-theme="dark"] .dash-ptable-priority { color: #e8eaed !important; }
[data-theme="dark"] .dash-ptable-due { color: #e8eaed !important; }
[data-theme="dark"] .dash-dot--internal { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,0.18); }
[data-theme="dark"] .dash-legend { color: #9ca3af !important; }
[data-theme="dark"] .count-badge { background: #2e3140 !important; color: #9ca3af !important; }
[data-theme="dark"] .dash-progress__track { background: #2e3140 !important; }
[data-theme="dark"] .dash-progress__track--split { background: none !important; }
[data-theme="dark"] .dash-progress__seg--empty { background: #2e3140 !important; }
[data-theme="dark"] .ptable-progress__track { background: #2e3140 !important; }
[data-theme="dark"] .dash-metric__label { color: #9ca3af !important; }
[data-theme="dark"] .dash-metric__value { color: #e8eaed !important; }
[data-theme="dark"] .dash-metric__sub { color: #6b7280 !important; }
[data-theme="dark"] .dash-sidebar-card__title { color: #e8eaed !important; }
[data-theme="dark"] .dash-task { border-color: #262938 !important; }
[data-theme="dark"] .dash-task:hover { background: #252836 !important; }
[data-theme="dark"] .dash-task__name { color: #e8eaed !important; }
[data-theme="dark"] .dash-timeline-item { border-color: #262938 !important; }
[data-theme="dark"] .dash-timeline-item:hover { background: #252836 !important; }
[data-theme="dark"] .dash-timeline-item__day { color: #e8eaed !important; }
[data-theme="dark"] .dash-timeline-item__title { color: #e8eaed !important; }
[data-theme="dark"] .dash-messages-grid { background: #262938 !important; }
[data-theme="dark"] .dash-message__title { color: #e8eaed !important; }
[data-theme="dark"] .dash-message__meta { color: #6b7280 !important; }
[data-theme="dark"] .dash-message__badge { background: rgba(18,100,255,0.2) !important; color: #6fa3ff !important; }
[data-theme="dark"] .dash-completed { border-color: #262938 !important; }
[data-theme="dark"] .dash-completed:hover { background: #252836 !important; }
[data-theme="dark"] .dash-completed__title { color: #e8eaed !important; }
[data-theme="dark"] .dash-metric__line { border-color: #262938 !important; }

/* Dark mode: attention cards */
[data-theme="dark"] .dash-attention-card--overdue { background: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.3) !important; }
[data-theme="dark"] .dash-attention-card--review { background: rgba(20,95,255,0.15) !important; border-color: rgba(20,95,255,0.3) !important; }
[data-theme="dark"] .dash-attention-card--tasks { background: rgba(255,182,0,0.12) !important; border-color: rgba(255,182,0,0.3) !important; }
[data-theme="dark"] .dash-attention-card--due { background: rgba(28,198,109,0.12) !important; border-color: rgba(28,198,109,0.3) !important; }
[data-theme="dark"] .dash-attention-card__text { color: #e8eaed !important; }
[data-theme="dark"] .dash-attention-card__text h4 { color: #fff !important; }
[data-theme="dark"] .dash-attention-card__text p { color: #9ca3af !important; }
[data-theme="dark"] .dash-attention-card__arrow { color: #e8eaed !important; }

/* Dark mode: general inline catch-alls */
[data-theme="dark"] .client-picker-card { background: #1a1d27 !important; border-color: #2e3140 !important; }
[data-theme="dark"] .client-picker-card:hover { border-color: #145fff !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; }

/* Toast */
[data-theme="dark"] #ccs-toast { background: #e8eaed !important; color: #111827 !important; }

/* Notifications dropdown */
[data-theme="dark"] #notif-dropdown { background: #1a1d27 !important; border-color: #2e3140 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; }
[data-theme="dark"] #notif-bell { color: #9ca3af !important; }
[data-theme="dark"] #notif-bell:hover { color: #e8eaed !important; }

/* + New dropdown */
[data-theme="dark"] #portal-new-menu { background: #1a1d27 !important; border-color: #2e3140 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; }
[data-theme="dark"] #portal-new-menu a { color: #e8eaed !important; }

/* --------------------------------------------------------------------------
   Activity feed (portal/partials/activity-feed.blade.php)
   Shared by the client picker (all clients) and the client dashboard (one).
   -------------------------------------------------------------------------- */
.cp-activity-card { background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: 14px; }
.cp-activity-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--color-border-light); }
.cp-activity-header h2 { font-size: 15px; font-weight: 700; color: var(--color-text); margin: 0; } /* matches .dash-section__title — it is a card heading like the rest */
.cp-date-group { }
.cp-date-header { position: sticky; top: 60px; z-index: 5; padding: 12px 24px; background: var(--color-border-light, #e5e7eb); border-bottom: 1px solid var(--color-border-light); display: flex; align-items: center; justify-content: center; gap: 10px; }
.cp-date-label { font-size: calc(var(--portal-read) + 1px); font-weight: 700; color: var(--color-text); }
.cp-date-sub { font-size: 15px; font-weight: 700; color: var(--color-text); }
.cp-client-banner { padding: 12px 24px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.cp-act-row + .cp-client-banner { margin-top: -1px; }
.cp-act-row:has(+ .cp-client-banner) { border-bottom: none; }
.cp-client-banner__name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.cp-act-row { display: flex; align-items: flex-start; padding: var(--portal-row-gap) 24px; border-bottom: 1px solid var(--color-border-light, #f2f6fb); transition: background 0.12s; gap: 12px; }
.cp-act-row:hover { background: var(--color-bg, #f9fafb); }
.cp-act-row:last-child { border-bottom: none; }
.cp-act-col-time { width: 100px; flex-shrink: 0; }
.cp-act-col-time span { font-size: var(--portal-read-meta); color: var(--color-text, #111827); white-space: nowrap; font-weight: 600; }
.cp-act-col-detail { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; }
.cp-act-body { flex: 1; min-width: 0; }
.cp-act-meta { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; line-height: 1.5; }
.cp-act-author { font-size: var(--portal-read); font-weight: 600; color: var(--color-text); }
.cp-act-verb { font-size: var(--portal-read); color: var(--color-text-secondary, #374151); }
/* The feed carries every kind of activity now, not just comments — a muted
   glyph in front of the verb tells a resource from a reply at a glance. */
.cp-act-kind { display: inline-flex; align-items: center; align-self: center; color: var(--color-text-tertiary, #9ca3af); flex-shrink: 0; }
.cp-act-kind svg { display: block; }
.cp-act-project { font-size: var(--portal-read); color: var(--color-primary, #1264FF); text-decoration: none; font-weight: 600; }
.cp-act-project:hover { text-decoration: underline; }
/* Two lines of preview at whatever size the reader picked — a fixed 36px
   clipped the second line in half once the text grew past 13px. */
.cp-act-preview { font-size: var(--portal-read); color: var(--color-text-secondary, #374151); margin-top: 3px; line-height: 1.4; max-height: calc(var(--portal-read) * 2.8); overflow: hidden; }
/* Four across at 4:3, the same as every other attachment surface. It was a
   flex row of fixed tiles, so the feed alone kept a different shape. */
.cp-act-files { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--portal-attach-gap); margin-top: var(--portal-row-gap); }
.cp-act-file-img { cursor: pointer; border: 1px solid var(--color-border-light, #e5e7eb); border-radius: 6px; overflow: hidden; display: block; min-width: 0; transition: border-color 0.15s; position: relative; }
.cp-act-file-img:hover { border-color: var(--color-primary, #1264FF); }
/* 180x120, not 140x90. The pipeline was never the limit on how sharp these
   look — the box was. At 140 wide there is not enough room to see what the
   picture is of, whatever you feed it. Still cover, not contain: cropping to
   fill reads as a photo, letterboxing reads as a mistake. */
/* One media box for every tile, whatever is inside it — a thumbnail, a
   coloured type block, an icon. When the image set its own aspect ratio and
   the block set another, the two captions sat a pixel apart. */
.cp-act-file-media { position: relative; aspect-ratio: 4 / 3; background: var(--color-bg, #f2f6fb); display: flex; align-items: center; justify-content: center; color: var(--color-text-tertiary, #9ca3af); overflow: hidden; }
.cp-act-file-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The round a file is on. Yellow because it is a correction to what the tile
   would otherwise be saying: the picture above it is the CURRENT version, not
   the file that was attached to the row underneath it. Only drawn from v2 —
   see App\Support\PortalActivity::stampProofs(). Matches .pp-ver, which does
   the same job on comment, reply and attachment tiles. */
/* Both badges in one row, so neither has to know the other's width — the
   same arrangement .pp-badges makes on every other card. */
.cp-act-file-badges {
    position: absolute; left: 6px; top: 6px; z-index: 3;
    display: flex; align-items: center; gap: 5px;
}
/* How the review landed, on the file. A signed-off design wearing nothing at
   all looked like a file nobody had opened — and this feed is where somebody
   scanning the week is most likely to be looking for exactly that. */
.cp-act-file-mark {
    display: inline-flex; align-items: center; gap: 4px;
    height: 24px; padding: 0 9px; border-radius: 6px;
    background: var(--color-primary, #1264FF); color: #fff;
    font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
    white-space: nowrap; text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
    transition: background .12s;
}
.cp-act-file-mark:hover { background: #3d7bff; color: #fff; }
.cp-act-file-mark--approved { background: #10b981; }
.cp-act-file-mark--approved:hover { background: #34d399; color: #fff; }
.cp-act-file-mark svg { display: block; }

.cp-act-file-ver {
    display: inline-flex; align-items: center;
    height: 21px; padding: 0 7px; border-radius: 5px;
    background: #facc15; color: #1f2937;
    font-size: 10px; font-weight: 800; letter-spacing: .02em;
    white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.28);
}
.cp-act-file-ext { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; letter-spacing: -0.04em; font-size: 22px; }
/* Darker than the tertiary grey it used to be: a filename is the label, not a
   footnote, and at 10px the light grey was hard to read. */
/* Matches .cc-attach-foot in partials/attachment-thumb — the feed draws the
   same card as every other surface and must not be the one that stayed small. */
.cp-act-file-name { font-size: 12.5px; font-weight: 600; color: var(--color-text, #111827); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
.cp-act-file-ext-badge { font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 3px 7px; border-radius: 5px; background: var(--color-bg, #f2f6fb); color: var(--color-text-secondary, #6b7280); flex-shrink: 0; }
.cp-act-file-img-info { padding: 9px 11px 10px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--color-border-light, #e5e7eb); min-width: 0; }
/* On the artwork, top-right, on hover — mirrors .cc-attach-dlbadge on every
   other card. The caption is the filename and its type; the download belongs
   on the picture, opposite the Review and version badges. */
.cp-act-file-dl {
    position: absolute; top: 6px; right: 6px; z-index: 3;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 24px; border-radius: 6px;
    background: #111827; color: #fff;
    border: 0; text-decoration: none;
    opacity: 0; transform: translateY(-3px);
    transition: opacity .12s, transform .12s, background .12s;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
/* color too — see .cc-attach-dlbadge. The global a:hover would otherwise
   paint the icon the same blue as the button it sits on. */
.cp-act-file-dl:hover { background: var(--color-primary, #1264FF); color: #fff; }
.cp-act-file-dl svg { display: block; }
.cp-act-file-img:hover .cp-act-file-dl,
.cp-act-file-dl:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .cp-act-file-dl { opacity: 1; transform: none; } }
.cp-act-fade-in { animation: cpActFade 0.35s ease-out both; }
@keyframes cpActFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.cp-loader-bar { height: 3px; background: var(--color-border-light); border-radius: 2px; overflow: hidden; margin: 0 24px; }
.cp-loader-bar-inner { height: 100%; width: 40%; background: var(--color-primary, #1264FF); border-radius: 2px; animation: cpLoaderSlide 1s ease-in-out infinite; }
@keyframes cpLoaderSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@media (max-width: 640px) {
    .cp-act-row { flex-wrap: wrap; padding: 12px 16px; }
    .cp-act-col-time { width: auto; }
    .cp-act-col-detail { width: 100%; }
}

/* ── Project meta row ──
   Every value in the row shares one box, so a monospace project number, an
   avatar, a colour bar, a picker and a plain date all sit on one line. Fonts
   differ in ascent and descent, so an EXPLICIT line-height — not each font's
   own — is what actually lines the glyphs up; monospace against the UI sans
   was the pair that visibly drifted.

   It lives here rather than on the page because the pickers in
   partials/portal/meta-picker have to sit in the SAME box, and a box defined
   twice is a box that drifts. */
.cc-meta-label { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary, #9ca3af); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.cc-meta-val { display: inline-flex; align-items: center; gap: 8px; min-height: 26px; font-size: 14px; line-height: 26px; font-weight: 600; color: var(--color-text, #111827); }
.cc-meta-val--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 500; color: var(--color-text-secondary, #374151); }
.cc-meta-val--muted { font-weight: 500; color: var(--color-text-secondary, #374151); }
.cc-meta-bar { width: 4px; height: 24px; border-radius: 2px; flex-shrink: 0; }

/* ── Links inside rendered rich text ──
   sanitize_autolink() turns bare URLs in comments, messages and notes into
   anchors, so they need to LOOK like links wherever that content lands. The
   selector lists all three containers the app renders sanitized HTML into
   rather than styling a bare <a>, which would repaint buttons and rows that
   happen to be anchors. */
.comment-content a,
.rich-prose a,
.md-render a { color: var(--color-primary, #1264FF); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.comment-content a:hover,
.rich-prose a:hover,
.md-render a:hover { text-decoration-thickness: 2px; }