/**
 * Clients community — one shell for every company (Experience Cloud style).
 * Scoped under .cl-* so it never bleeds into the admin SLDS chrome.
 */

.cl-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f3f3f3;
    background: var(--slds-g-color-neutral-base-95, #f3f3f3);
    padding-top: 0; /* override admin body offset */
    font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, sans-serif;
}

.cl-header {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    position: sticky;
    top: 0;
    z-index: 10;
}
.cl-header__inner {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cl-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.cl-brand:hover { text-decoration: none; }
.cl-brand__mark {
    width: 2rem;
    height: 2rem;
    border-radius: 0.4rem;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0176d3, #04c0eb);
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    flex: 0 0 auto;
}
.cl-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.cl-brand__product {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #706e6b;
}
.cl-brand__company {
    font-size: 1rem;
    font-weight: 700;
    color: #032d60;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18rem;
}

.cl-nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-wrap: wrap;
    margin-left: auto;
}
.cl-nav__link {
    display: inline-block;
    padding: 0.45rem 0.85rem;
    border-radius: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #3e3e3c;
    text-decoration: none;
}
.cl-nav__link:hover {
    background: #eef4ff;
    color: #0176d3;
    text-decoration: none;
}
.cl-nav__link.is-active {
    background: #eef4ff;
    color: #0176d3;
}

.cl-main {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.25rem 2rem;
}

.cl-page-title {
    margin: 0 0 0.25rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #181818;
}
.cl-page-meta {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: #706e6b;
}

.cl-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.cl-stat {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    box-shadow: 0 1px 2px rgba(3, 45, 96, 0.04), 0 4px 12px rgba(3, 45, 96, 0.05);
}
.cl-stat__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #032d60;
    line-height: 1.1;
}
.cl-stat__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #706e6b;
    margin-top: 0.2rem;
}
.cl-stat__value--sm {
    font-size: 1.1rem;
}
.cl-stat__sub {
    font-size: 0.7rem;
    color: #706e6b;
    margin-top: 0.15rem;
    line-height: 1.3;
}
.cl-stats--record {
    margin-bottom: 1.15rem;
}

.cl-record-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.cl-record-head__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.cl-pill--muted {
    background: #f3f3f3;
    color: #3e3e3c;
}
.cl-section-title {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    font-weight: 700;
}
.cl-text-danger { color: #ba0517; font-weight: 600; }

/* ---- Case record (conversation-first) ---- */
.cl-case-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
    font-size: 0.8125rem;
}
.cl-case-nav .cl-back { margin-bottom: 0; }
.cl-case-nav__sep { color: #c9c7c5; }
.cl-case-nav__current { color: #706e6b; font-weight: 600; }

.cl-case-header {
    margin-bottom: 1rem;
}
.cl-case-header__title {
    margin: 0 0 0.45rem;
    font-size: 1.45rem;
    font-weight: 700;
    color: #181818;
    line-height: 1.25;
}
.cl-case-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    margin: 0;
}
.cl-case-header__when {
    font-size: 0.8125rem;
    color: #706e6b;
    margin-left: 0.25rem;
}

.cl-case-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 18.5rem);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 860px) {
    .cl-case-layout { grid-template-columns: 1fr; }
}

.cl-case-thread__panel {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(3, 45, 96, 0.04), 0 4px 12px rgba(3, 45, 96, 0.05);
    display: flex;
    flex-direction: column;
    min-height: 28rem;
    overflow: hidden;
}
.cl-case-thread__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #e5e5e5;
    background: #fafaf9;
}
.cl-case-thread__head h2 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
}
.cl-case-thread__count {
    font-size: 0.75rem;
    color: #706e6b;
    font-weight: 600;
}
.cl-case-thread__scroll {
    flex: 1;
    overflow-y: auto;
    max-height: min(52vh, 32rem);
    padding: 0.35rem 0;
}
.cl-empty--thread {
    padding: 2.5rem 1.25rem;
}

/* Messages */
.cl-msg {
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid #f3f3f3;
}
.cl-msg:last-child { border-bottom: 0; }
.cl-msg--opening {
    background: #f7f9fc;
}
.cl-msg__avatar {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #eef4ff;
    color: #0176d3;
    font-size: 0.7rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.cl-msg--contact .cl-msg__avatar {
    background: #e3fcef;
    color: #0b5c2e;
}
.cl-msg--opening .cl-msg__avatar {
    background: #eef1f6;
    color: #3e3e3c;
}
.cl-msg--system .cl-msg__avatar,
.cl-msg--status_change .cl-msg__avatar {
    background: #f3f3f3;
    color: #706e6b;
}
.cl-msg__body { flex: 1; min-width: 0; }
.cl-msg__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.75rem;
    color: #706e6b;
}
.cl-msg__meta strong {
    color: #181818;
    font-size: 0.8125rem;
}
.cl-msg__meta time {
    margin-left: auto;
    white-space: nowrap;
}
.cl-msg__text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #181818;
}
.cl-msg__text p { margin: 0.2rem 0; }
.cl-msg__text ul, .cl-msg__text ol { margin: 0.3rem 0; padding-left: 1.2rem; }

/* Composer at top of thread (publisher) — feed is newest-first under it */
.cl-case-composer {
    border-bottom: 1px solid #e5e5e5;
    padding: 0.9rem 1.25rem 1.1rem;
    background: #fafaf9;
    flex-shrink: 0;
}
.cl-case-composer__note {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    color: #8c4b02;
}
.cl-case-composer__form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #c9c7c5;
    border-radius: 0.4rem;
    padding: 0.65rem 0.75rem;
    font: inherit;
    font-size: 0.875rem;
    resize: vertical;
    min-height: 4.5rem;
    background: #fff;
}
.cl-case-composer__form textarea:focus {
    outline: 2px solid #0176d3;
    outline-offset: 0;
    border-color: #0176d3;
}
.cl-case-composer__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.65rem;
    flex-wrap: wrap;
}
.cl-case-composer__file {
    font-size: 0.8rem;
    color: #0176d3;
    font-weight: 600;
    cursor: pointer;
}
.cl-case-composer__file input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

/* Meta sidebar */
.cl-case-meta {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.cl-case-meta__card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    padding: 1rem 1.15rem;
    box-shadow: 0 1px 2px rgba(3, 45, 96, 0.04);
}
.cl-case-meta__title {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #181818;
}
.cl-case-meta__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}
.cl-case-meta__title-row .cl-case-meta__title { margin: 0; }
.cl-case-meta__count {
    font-size: 0.75rem;
    font-weight: 600;
    color: #706e6b;
}
.cl-case-meta__list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.cl-case-meta__list > div {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.35rem 0.65rem;
    font-size: 0.8125rem;
}
.cl-case-meta__list dt {
    margin: 0;
    color: #706e6b;
    font-weight: 600;
}
.cl-case-meta__list dd {
    margin: 0;
    color: #181818;
}
.cl-case-meta__list a {
    color: #0176d3;
    font-weight: 600;
    text-decoration: none;
}
.cl-case-meta__list a:hover { text-decoration: underline; }
.cl-case-meta__sub {
    display: block;
    font-size: 0.75rem;
    color: #706e6b;
    font-weight: 400;
    margin-top: 0.1rem;
}
.cl-case-meta__empty {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: #706e6b;
}

.cl-case-files {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
}
.cl-case-files li { border-bottom: 1px solid #f3f3f3; }
.cl-case-files li:last-child { border-bottom: 0; }
.cl-case-files a {
    display: block;
    padding: 0.45rem 0;
    text-decoration: none;
    color: inherit;
}
.cl-case-files a:hover .cl-case-files__name { color: #0176d3; }
.cl-case-files__name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #181818;
    word-break: break-word;
}
.cl-case-files__meta {
    display: block;
    font-size: 0.7rem;
    color: #706e6b;
    margin-top: 0.1rem;
}
.cl-case-files__upload label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #706e6b;
    margin-bottom: 0.3rem;
}
.cl-case-files__upload input[type="file"] {
    width: 100%;
    font-size: 0.75rem;
    margin-bottom: 0.55rem;
}
.cl-btn--block { width: 100%; text-align: center; box-sizing: border-box; }

.cl-pill--status-triage { background: #fff8e6; color: #8c4b02; }
.cl-pill--status-open { background: #eef4ff; color: #0176d3; }
.cl-pill--status-pending { background: #f3e8fd; color: #5a1b8a; }
.cl-pill--status-resolved { background: #e3fcef; color: #0b5c2e; }
.cl-pill--status-closed { background: #f3f3f3; color: #3e3e3c; }
.cl-pill--tiny {
    font-size: 0.6rem;
    padding: 0.1rem 0.35rem;
    vertical-align: middle;
}

.cl-stat a {
    color: #0176d3;
    text-decoration: none;
}
.cl-stat a:hover { text-decoration: underline; }

/* ---- Home hero + charts ---- */
.cl-home-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.cl-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.cl-stats--home .cl-stat--link {
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cl-stats--home .cl-stat--link:hover {
    box-shadow: 0 4px 14px rgba(3, 45, 96, 0.1);
    transform: translateY(-1px);
    text-decoration: none;
}
.cl-stats--home .cl-stat__label { margin-top: 0.25rem; }

.cl-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}
@media (max-width: 800px) {
    .cl-charts { grid-template-columns: 1fr; }
}
.cl-chart-card--wide {
    grid-column: 1 / -1;
}
.cl-chart-caption {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: #706e6b;
}

/* Vertical bars — meetings */
.cl-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 9rem;
    padding-top: 0.35rem;
}
.cl-bars__col {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}
.cl-bars__bar {
    width: 100%;
    min-height: 2px;
    max-width: 1.75rem;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #1b96ff, #0176d3);
    opacity: 0.9;
}
.cl-bars__label {
    font-size: 0.6rem;
    color: #706e6b;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    min-height: 0.85rem;
}

/* Horizontal bars — status / budget */
.cl-hbar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.cl-hbar__row {
    display: grid;
    grid-template-columns: 5.5rem 1fr 2.5rem;
    gap: 0.5rem;
    align-items: center;
}
.cl-hbar--budget .cl-hbar__row {
    grid-template-columns: minmax(6rem, 12rem) 1fr 5.5rem;
}
.cl-hbar__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #3e3e3c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-hbar__label--link {
    color: #0176d3;
    text-decoration: none;
}
.cl-hbar__label--link:hover { text-decoration: underline; }
.cl-hbar__track {
    height: 0.55rem;
    background: #eef1f6;
    border-radius: 999px;
    overflow: hidden;
}
.cl-hbar__fill {
    height: 100%;
    border-radius: 999px;
    min-width: 2px;
    transition: width 0.3s ease;
}
.cl-hbar__fill--budget {
    background: linear-gradient(90deg, #0176d3, #1b96ff);
}
.cl-hbar__value {
    font-size: 0.75rem;
    font-weight: 600;
    color: #032d60;
    text-align: right;
    white-space: nowrap;
}

.cl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 0.85rem;
}
.cl-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(3, 45, 96, 0.04), 0 4px 12px rgba(3, 45, 96, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 12rem;
}
.cl-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #e5e5e5;
    background: #fafaf9;
}
.cl-card__head h2 {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #181818;
}
.cl-card__body {
    padding: 0.5rem 0;
    flex: 1;
}
/* Chart bodies need real padding — must beat .cl-card__body { padding: … 0 } */
.cl-card__body.cl-chart-body {
    padding: 1.15rem 1.35rem 1.25rem;
}
/* List rows keep horizontal padding so titles aren't edge-flush */
.cl-card__body > .cl-list .cl-list__link {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.cl-card__body > .cl-empty {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.cl-card__more {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0176d3;
    text-decoration: none;
}
.cl-card__more:hover { text-decoration: underline; }

.cl-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cl-list__item {
    border-bottom: 1px solid #f3f3f3;
}
.cl-list__item:last-child { border-bottom: 0; }
.cl-list__link {
    display: block;
    padding: 0.55rem 1rem;
    text-decoration: none;
    color: inherit;
}
.cl-list__link:hover {
    background: #f7f9fc;
    text-decoration: none;
}
.cl-list__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #181818;
}
.cl-list__link:hover .cl-list__title { color: #0176d3; }
.cl-list__meta {
    display: block;
    font-size: 0.75rem;
    color: #706e6b;
    margin-top: 0.1rem;
}

.cl-pill {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    background: #eef4ff;
    color: #0176d3;
}

.cl-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.cl-search {
    flex: 1;
    min-width: 12rem;
    max-width: 24rem;
}
.cl-table-wrap {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    overflow: auto;
    box-shadow: 0 1px 2px rgba(3, 45, 96, 0.04);
}
.cl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.cl-table th {
    text-align: left;
    padding: 0.65rem 1rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #706e6b;
    background: #fafaf9;
    border-bottom: 1px solid #e5e5e5;
}
.cl-table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #f3f3f3;
    vertical-align: top;
}
.cl-table tr:last-child td { border-bottom: 0; }
.cl-table a {
    color: #0176d3;
    font-weight: 600;
    text-decoration: none;
}
.cl-table a:hover { text-decoration: underline; }

.cl-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #706e6b;
    font-size: 0.875rem;
}

.cl-detail {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    padding: 1.25rem 1.35rem;
    box-shadow: 0 1px 2px rgba(3, 45, 96, 0.04);
}
.cl-detail h1 {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
}
.cl-detail__meta {
    color: #706e6b;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.cl-detail__body {
    font-size: 0.9rem;
    line-height: 1.55;
}
/* Markdown summaries use .kn-prose (from konsul.css) — do not force pre-wrap */
.cl-detail__body.kn-prose {
    white-space: normal;
}
.cl-back {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0176d3;
    text-decoration: none;
}
.cl-back:hover { text-decoration: underline; }

.cl-footer {
    border-top: 1px solid #e5e5e5;
    background: #fff;
    margin-top: auto;
}
.cl-footer__inner {
    padding: 0.85rem 1.25rem;
    font-size: 0.75rem;
    color: #706e6b;
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.cl-footer__sep { opacity: 0.5; }

.cl-flash {
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.9rem;
    border-radius: 0.4rem;
    font-size: 0.875rem;
    background: #eef4ff;
    color: #032d60;
    border: 1px solid #d8e6f7;
}
.cl-flash--success { background: #e3fcef; border-color: #acf0cc; color: #0b5c2e; }
.cl-flash--error, .cl-flash--error { background: #fef1ee; border-color: #fddde3; color: #8e030f; }
.cl-flash--warning { background: #fff8e6; border-color: #ffe0a3; color: #8c4b02; }

.cl-form {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(3, 45, 96, 0.04);
}
.cl-form h2 {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
}
.cl-form label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #706e6b;
    margin-bottom: 0.25rem;
}
.cl-form .cl-field { margin-bottom: 0.75rem; }
.cl-form input[type="text"],
.cl-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #c9c7c5;
    border-radius: 0.35rem;
    padding: 0.5rem 0.65rem;
    font: inherit;
}
.cl-form textarea { min-height: 6rem; resize: vertical; }
.cl-btn {
    display: inline-block;
    border: 0;
    border-radius: 0.35rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    background: #0176d3;
    color: #fff;
    text-decoration: none;
}
.cl-btn:hover { background: #014486; color: #fff; text-decoration: none; }
.cl-btn--secondary {
    background: #fff;
    color: #0176d3;
    border: 1px solid #0176d3;
}
.cl-btn--secondary:hover { background: #eef4ff; }

.cl-feed {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}
.cl-feed__item {
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f3f3;
}
.cl-feed__meta {
    font-size: 0.75rem;
    color: #706e6b;
    margin-bottom: 0.25rem;
}
.cl-feed__body {
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.cl-invalid {
    max-width: 28rem;
    margin: 4rem auto;
    text-align: center;
    padding: 2rem;
    background: #fff;
    border-radius: 0.75rem;
    border: 1px solid #e5e5e5;
}
.cl-invalid h1 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}
.cl-invalid p {
    margin: 0;
    color: #706e6b;
    font-size: 0.9rem;
}

.cl-filters {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.cl-filters a {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    text-decoration: none;
    color: #3e3e3c;
    background: #fff;
    border: 1px solid #e5e5e5;
}
.cl-filters a.is-active {
    background: #0176d3;
    border-color: #0176d3;
    color: #fff;
}

/* Project burn — a column per month with the included allowance across it.
   Replaces a used-vs-budget bar that capped at 100%, which told a client
   running over their allowance only that they were "full", identically in
   month two and month twelve. Columns scale to the busiest month so months
   stay comparable however far over the line they go.

   Same red as the admin view, on purpose: a client seeing 4.8x their
   allowance in red is the point of showing it. */
.cl-burn { padding: 0.85rem 0; border-bottom: 1px solid #e6e9ef; }
.cl-burn:last-of-type { border-bottom: 0; }
.cl-burn__head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.cl-burn__included { font-size: 0.75rem; color: #5a6b85; }
.cl-burn__stat { margin: 0.2rem 0 0.5rem; font-size: 0.8125rem; color: #5a6b85; }
.cl-burn__over {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.35rem;
  border-radius: 0.75rem;
  background: #fef1ee;
  color: #ba0517;
  font-weight: 700;
}
.cl-burn__chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  height: 4.5rem;
  padding-bottom: 1rem;
}
.cl-burn__line {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px dashed #9aa8bd;
  margin-bottom: 1rem;
  pointer-events: none;
}
.cl-burn__col {
  position: relative;
  flex: 1 1 0;
  min-width: 0.4rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Stacked column: included at the bottom, hours above the allowance on top.
   column-reverse so the first child sits at the base, and each segment's
   height is a percentage of the busiest month — the same scale the column
   itself uses, so the parts add up to the whole. */
.cl-burn__stack {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
}
.cl-burn__seg { display: block; width: 100%; }
.cl-burn__seg_included { background: #0176d3; }
.cl-burn__seg_extra { background: #ba0517; }
.cl-burn__seg_none { height: 1px; background: #c9ced6; }
/* A billed month is settled; an unbilled overrun is the one still live. */
.cl-burn__stack.is-billed { opacity: 0.62; }
.cl-burn__col.is-current .cl-burn__stack { outline: 1px solid #032d60; outline-offset: 1px; }
.cl-burn__col.is-current .cl-burn__tick { color: #032d60; font-weight: 700; }

/* Timecard modal — :target, no JavaScript.

   The portal deliberately ships no JS, so a click is a link to an anchor and
   the CSS decides what is visible; closing is a link back. Costs putting each
   month's rows on the page up front, which for a year of retainer months is
   a few hundred table rows — cheaper than the first script tag. */
.cl-burn__col.is-clickable { cursor: pointer; text-decoration: none; }
.cl-burn__col.is-clickable:hover .cl-burn__stack { filter: brightness(0.9); }
.cl-burn__col.is-clickable:focus-visible { outline: 2px solid #0176d3; outline-offset: 2px; }

.cl-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.cl-modal:target { display: flex; }
.cl-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 22, 39, 0.45);
}
.cl-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 1.5rem 3rem rgba(11, 22, 39, 0.25);
  width: min(46rem, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.cl-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem 0.75rem;
  border-bottom: 1px solid #e6e9ef;
}
.cl-modal__head h2 { margin: 0; font-size: 1.05rem; }
.cl-modal__sub { margin: 0.15rem 0 0; font-size: 0.8125rem; color: #5a6b85; }
.cl-modal__close {
  font-size: 1.4rem;
  line-height: 1;
  color: #5a6b85;
  text-decoration: none;
  padding: 0 0.25rem;
}
.cl-modal__close:hover { color: #032d60; }
.cl-modal__body { padding: 0.85rem 1.15rem; overflow-y: auto; }
.cl-modal__stat { margin: 0 0 0.75rem; font-size: 0.875rem; color: #032d60; }
.cl-modal__foot {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid #e6e9ef;
}
.cl-tc { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.cl-tc th, .cl-tc td { text-align: left; vertical-align: top; padding: 0.4rem 0.5rem 0.4rem 0; }
.cl-tc thead th {
  border-bottom: 1px solid #c9ced6;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5a6b85;
}
.cl-tc tbody tr { border-bottom: 1px solid #eef1f6; }
.cl-tc tfoot th, .cl-tc tfoot td { border-top: 1px solid #c9ced6; font-weight: 700; padding-top: 0.5rem; }
.cl-tc__date { white-space: nowrap; color: #032d60; }
.cl-tc__hours { text-align: right; width: 4rem; font-variant-numeric: tabular-nums; }
.cl-tc__notes { margin: 0; padding-left: 1rem; }
.cl-tc__notes li { margin-bottom: 0.15rem; }
.cl-tc__empty { color: #9aa8bd; }

/* Sign-in — the front door, carried over from v1's client login.

   Deliberately not the workspace chrome: at this point we do not know whose
   workspace it is. Light by default because it is a client's first sight of
   Konsul; a manual choice is remembered in localStorage. */
.cl-login {
  --lg-bg: #f6f8fb;
  --lg-panel: #ffffff;
  --lg-ink: #032d60;
  --lg-muted: #5a6b85;
  --lg-line: #dfe5ee;
  --lg-grid: rgba(3, 45, 96, 0.05);
  --lg-accent: #0176d3;
  --lg-accent-bright: #1298d5;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--lg-bg);
  color: var(--lg-ink);
  font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, sans-serif;
}
:root[data-login-theme="dark"] .cl-login {
  --lg-bg: #04101f;
  --lg-panel: #0a1a2e;
  --lg-ink: #eaf2ff;
  --lg-muted: #8fa6c4;
  --lg-line: rgba(255, 255, 255, 0.12);
  --lg-grid: rgba(120, 190, 255, 0.07);
  --lg-accent: #1298d5;
  --lg-accent-bright: #4fc3f7;
}

.cl-login__grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--lg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--lg-grid) 1px, transparent 1px);
  background-size: 60px 60px;
}
.cl-login__corner {
  position: fixed;
  width: 60px;
  height: 60px;
  z-index: 1;
  opacity: 0.35;
  pointer-events: none;
}
.cl-login__corner::before,
.cl-login__corner::after { content: ""; position: absolute; background: var(--lg-accent-bright); }
.cl-login__corner_tl { top: 2rem; left: 2rem; }
.cl-login__corner_tl::before { width: 2px; height: 30px; top: 0; left: 0; }
.cl-login__corner_tl::after { width: 30px; height: 2px; top: 0; left: 0; }
.cl-login__corner_tr { top: 2rem; right: 2rem; }
.cl-login__corner_tr::before { width: 2px; height: 30px; top: 0; right: 0; }
.cl-login__corner_tr::after { width: 30px; height: 2px; top: 0; right: 0; }
.cl-login__corner_bl { bottom: 2rem; left: 2rem; }
.cl-login__corner_bl::before { width: 2px; height: 30px; bottom: 0; left: 0; }
.cl-login__corner_bl::after { width: 30px; height: 2px; bottom: 0; left: 0; }
.cl-login__corner_br { bottom: 2rem; right: 2rem; }
.cl-login__corner_br::before { width: 2px; height: 30px; bottom: 0; right: 0; }
.cl-login__corner_br::after { width: 30px; height: 2px; bottom: 0; right: 0; }
@media (max-width: 640px) { .cl-login__corner { display: none; } }

.cl-login__theme {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 3;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--lg-line);
  border-radius: 50%;
  color: var(--lg-muted);
  cursor: pointer;
}
.cl-login__theme:hover { color: var(--lg-accent-bright); border-color: var(--lg-accent-bright); }
.cl-login__theme svg { width: 17px; height: 17px; }
.cl-login__moon { display: none; }
:root[data-login-theme="dark"] .cl-login__sun { display: none; }
:root[data-login-theme="dark"] .cl-login__moon { display: block; }

.cl-login__main {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}
.cl-login__inner { width: min(25rem, 100%); }

.cl-login__wordmark {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
.cl-login__word {
  display: flex;
  /* Baseline, not centre. An image's baseline is its bottom edge, so this
     stands the O on the same line the letters stand on; centring aligned it
     to the middle of the line box instead, which left it floating. */
  align-items: baseline;
  font-size: clamp(2.25rem, 8vw, 3.25rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--lg-ink) 0%, var(--lg-accent-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* The "O" is a white-on-transparent PNG, drawn for a dark page. On the light
   theme it was white on near-white — the wordmark read "K NSUL". v1 solves it
   by inverting the image and mirroring the blend mode, so that is what this
   does. Light is the base rule rather than an override: it is the default
   theme, and it is also what a visitor with JavaScript disabled gets, since
   the data-login-theme attribute is set by script. */
.cl-login__o {
  height: 0.8em;
  width: auto;
  margin: 0 0.02em;
  position: relative;
  /* The artwork does not fill its own box: the SVG is 917x987 with the shape
     inset ~50px top and bottom, so at 0.8em the glyph stops about 0.04em
     short of the box edge. Nudged down by exactly that, so the shape — not
     its bounding box — sits on the baseline. */
  top: 0.04em;
  mix-blend-mode: darken;
  filter: invert(1) hue-rotate(180deg);
  /* Turned over: the striping is dense at one end, and with the heavy end
     uppermost the O sits better against the flat letterforms either side. */
  transform: rotate(180deg);
}
:root[data-login-theme="dark"] .cl-login__o {
  mix-blend-mode: lighten;
  filter: none;
}
.cl-login__glow {
  position: absolute;
  width: 360px;
  height: 180px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
      rgba(18, 152, 213, 0.16) 0%, rgba(99, 102, 241, 0.08) 40%, transparent 70%);
  filter: blur(55px);
  z-index: -1;
  pointer-events: none;
}

.cl-login__card {
  background: var(--lg-panel);
  border: 1px solid var(--lg-line);
  border-radius: 0.75rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 1rem 2.5rem rgba(3, 45, 96, 0.10);
}
.cl-login__title { margin: 0 0 0.4rem; font-size: 1.2rem; color: var(--lg-ink); }
.cl-login__lede { margin: 0 0 1.15rem; font-size: 0.875rem; line-height: 1.55; color: var(--lg-muted); }
.cl-login__addr { color: var(--lg-ink); font-weight: 700; }
.cl-login__label {
  display: block; font-size: 0.75rem; font-weight: 600;
  color: var(--lg-ink); margin-bottom: 0.3rem;
}
.cl-login__input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.62rem 0.7rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--lg-ink);
  background: var(--lg-bg);
  border: 1px solid var(--lg-line);
  border-radius: 0.4rem;
  margin-bottom: 0.85rem;
}
.cl-login__input:focus { outline: 2px solid var(--lg-accent); outline-offset: 1px; border-color: var(--lg-accent); }
.cl-login__submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, var(--lg-accent), var(--lg-accent-bright));
  border: 0;
  border-radius: 0.4rem;
  cursor: pointer;
}
.cl-login__submit:hover { filter: brightness(1.06); }
.cl-login__submit:disabled { cursor: default; opacity: 0.85; }
.cl-login__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cl-login-spin 0.8s linear infinite;
}
.cl-login__submit.is-sending .cl-login__spinner { display: block; }
.cl-login__submit.is-sending .cl-login__btntext { opacity: 0.75; }
@keyframes cl-login-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cl-login__spinner { animation: none; }
}

.cl-login__error {
  background: #fef1ee;
  border: 1px solid #fddde3;
  color: #8e030f;
  border-radius: 0.4rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.8125rem;
  margin-bottom: 0.85rem;
}
.cl-login__help { margin: 1rem 0 0; font-size: 0.75rem; line-height: 1.55; color: var(--lg-muted); }
.cl-login__help a { color: var(--lg-accent); }
.cl-login__mail {
  width: 54px;
  height: 54px;
  margin: 0 auto 1.15rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(18, 152, 213, 0.12);
  border: 1px solid rgba(18, 152, 213, 0.3);
  color: var(--lg-accent-bright);
}
.cl-login__mail svg { width: 26px; height: 26px; }
.cl-login__card .cl-login__title,
.cl-login__card .cl-login__lede { text-align: center; }
.cl-login__card form .cl-login__label { text-align: left; }
.cl-login__foot {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.7rem;
  color: var(--lg-muted);
}

/* Timesheet button on a month row. */
.cl-tc-cell { white-space: nowrap; text-align: right; }
.cl-btn--small { padding: 0.3rem 0.6rem; font-size: 0.75rem; }
.cl-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}