:root {
    --jc-good: #198754;
    --jc-good-bg: #d1e7dd;
    --jc-warning: #b45f06;
    --jc-warning-bg: #fff3cd;
    --jc-critical: #dc3545;
    --jc-critical-bg: #f8d7da;
    --jc-neutral: #0d6efd;
    --jc-neutral-bg: #cfe2ff;
    --jc-muted: #6c757d;
    --jc-muted-bg: #e9ecef;
    --jc-slate: #475569;
    --jc-slate-bg: #e2e8f0;
    --jc-purple: #7c3aed;
    --jc-purple-bg: #ede9fe;
    --jc-overdue: #c2410c;
    --jc-overdue-bg: #ffedd5;

    /* Reports module category colors — Attendance and Analytical had no existing token that
       fit without colliding with an unrelated meaning (good=income, warning=expense elsewhere). */
    --jc-teal: #0e7490;
    --jc-teal-bg: #cffafe;
    --jc-indigo: #4338ca;
    --jc-indigo-bg: #e0e7ff;

    --jc-surface: #ffffff;
    --jc-surface-alt: #f8f9fa;
    --jc-border: #dee2e6;
    --jc-text: #212529;
    --jc-text-muted: #6c757d;

    /* Attendance grid cells — deliberately more saturated than the badge -bg tints above, since
       badges carry a text label but these are single-letter 34px cells that need to read as a
       distinct color at a glance (Present vs On Leave were reported as looking too similar). */
    --jc-att-good-bg: #6ee7a3;
    --jc-att-good-text: #14532d;
    --jc-att-critical-bg: #f4877e;
    --jc-att-critical-text: #7f1d1d;
    --jc-att-neutral-bg: #7cb2fb;
    --jc-att-neutral-text: #1e3a8a;
    --jc-att-warning-bg: #fbbf24;
    --jc-att-warning-text: #78350f;
    --jc-att-muted-bg: #b6c0cc;
    --jc-att-muted-text: #2b3441;
}

@media (prefers-color-scheme: dark) {
    :root {
        --jc-good: #4ade80;
        --jc-good-bg: #14532d;
        --jc-warning: #fbbf24;
        --jc-warning-bg: #78350f;
        --jc-critical: #f87171;
        --jc-critical-bg: #7f1d1d;
        --jc-neutral: #60a5fa;
        --jc-neutral-bg: #1e3a5f;
        --jc-muted: #adb5bd;
        --jc-muted-bg: #343a40;
        --jc-slate: #94a3b8;
        --jc-slate-bg: #334155;
        --jc-purple: #a78bfa;
        --jc-purple-bg: #4c1d95;
        --jc-overdue: #fb923c;
        --jc-overdue-bg: #7c2d12;
        --jc-teal: #22d3ee;
        --jc-teal-bg: #164e63;
        --jc-indigo: #818cf8;
        --jc-indigo-bg: #312e81;

        --jc-surface: #1e2126;
        --jc-surface-alt: #2a2e33;
        --jc-border: #3a3f45;
        --jc-text: #e9ecef;
        --jc-text-muted: #adb5bd;

        --jc-att-good-bg: #1e7a45;
        --jc-att-good-text: #d3f9df;
        --jc-att-critical-bg: #a13a35;
        --jc-att-critical-text: #ffe1de;
        --jc-att-neutral-bg: #29579e;
        --jc-att-neutral-text: #dbe9ff;
        --jc-att-warning-bg: #a1690a;
        --jc-att-warning-text: #ffe9c2;
        --jc-att-muted-bg: #4b5563;
        --jc-att-muted-text: #e5e9ee;
    }
}

.jc-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.jc-stat-tile {
    background: var(--jc-surface);
    border: 1px solid var(--jc-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    min-width: 0;
}

.jc-stat-tile__label {
    font-size: 0.8rem;
    color: var(--jc-text-muted);
    margin: 0 0 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jc-stat-tile__value {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
    color: var(--jc-text);
    word-break: break-word;
}

.jc-stat-tile__sub {
    font-size: 0.75rem;
    color: var(--jc-text-muted);
    margin: 0.15rem 0 0;
}

.jc-stat-tile--good .jc-stat-tile__value { color: var(--jc-good); }
.jc-stat-tile--warning .jc-stat-tile__value { color: var(--jc-warning); }
.jc-stat-tile--critical .jc-stat-tile__value { color: var(--jc-critical); }
.jc-stat-tile--neutral .jc-stat-tile__value { color: var(--jc-neutral); }

/* Text-color utilities matching the badge/progress health palette — Bootstrap's text-success and
   text-danger already line up with --jc-good/--jc-critical, but it has no equivalent for our
   amber --jc-warning (its own text-warning is a much lighter yellow with poor contrast). */
.jc-text-good { color: var(--jc-good); }
.jc-text-warning { color: var(--jc-warning); }
.jc-text-critical { color: var(--jc-critical); }

.jc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.jc-badge--good { color: var(--jc-good); background: var(--jc-good-bg); }
.jc-badge--warning { color: var(--jc-warning); background: var(--jc-warning-bg); }
.jc-badge--critical { color: var(--jc-critical); background: var(--jc-critical-bg); }
.jc-badge--neutral { color: var(--jc-neutral); background: var(--jc-neutral-bg); }
.jc-badge--muted { color: var(--jc-muted); background: var(--jc-muted-bg); }
.jc-badge--purple { color: var(--jc-purple); background: var(--jc-purple-bg); }
.jc-badge--teal { color: var(--jc-teal); background: var(--jc-teal-bg); }
.jc-badge--indigo { color: var(--jc-indigo); background: var(--jc-indigo-bg); }

/* For badges whose text isn't a short fixed status word (e.g. a "Label: Amount" highlight
   pulled from a budget category path) — .jc-badge defaults to nowrap, which is correct for
   every status badge but forces this kind of longer, variable-length text past the viewport
   edge on narrow screens instead of wrapping. */
.jc-badge--wrap { white-space: normal; text-align: center; }

/* Row-level highlight for transaction lists — a tinted background plus a left accent bar so the
   Type reads at a glance without needing to look at the badge column. The tint goes on the row
   (reliable everywhere, incl. mobile tiles); the border-left goes on the first cell instead of the
   <tr> itself, since border-collapse tables don't reliably render a <tr>'s own left border. */
.jc-tx-row--income { background: var(--jc-good-bg); }
.jc-tx-row--income > td:first-child { border-left: 4px solid var(--jc-good); }
.jc-tx-row--expense { background: var(--jc-warning-bg); }
.jc-tx-row--expense > td:first-child { border-left: 4px solid var(--jc-warning); }
.jc-tx-row--transfer { background: var(--jc-neutral-bg); }
.jc-tx-row--transfer > td:first-child { border-left: 4px solid var(--jc-neutral); }
.jc-project-tile.jc-tx-row--income { border-left: 4px solid var(--jc-good); }
.jc-project-tile.jc-tx-row--expense { border-left: 4px solid var(--jc-warning); }
.jc-project-tile.jc-tx-row--transfer { border-left: 4px solid var(--jc-neutral); }
.jc-tx-row--voided { opacity: .6; }

.jc-badge__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.jc-progress {
    width: 100%;
    height: 0.9rem;
    background: var(--jc-surface-alt);
    border: 1px solid var(--jc-border);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.jc-progress__fill {
    height: 100%;
    transition: width 0.3s ease;
}

.jc-progress--good .jc-progress__fill { background: var(--jc-good); }
.jc-progress--warning .jc-progress__fill { background: var(--jc-warning); }
.jc-progress--critical .jc-progress__fill { background: var(--jc-critical); }

.jc-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--jc-text-muted);
    margin-top: 0.25rem;
}

.jc-card {
    background: var(--jc-surface);
    border: 1px solid var(--jc-border);
    border-radius: 0.6rem;
    overflow: hidden;
}

.jc-danger-zone {
    border-color: #f5c2c7;
}

.jc-expandable-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
    flex-wrap: wrap;
}

.jc-expandable-card__header:hover {
    background: var(--jc-surface-alt);
}

.jc-expandable-card__title {
    font-weight: 600;
    font-size: 1rem;
    margin-right: auto;
}

.jc-expandable-card__chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.jc-expandable-card__chevron--open {
    transform: rotate(90deg);
}

.jc-expandable-card__body {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--jc-border);
    padding-top: 0.85rem;
}

.jc-table-container {
    width: 100%;
    overflow-x: auto;
}

.jc-table-container table {
    width: 100%;
    border-collapse: collapse;
    min-width: 480px;
}

.jc-table-container th,
.jc-table-container td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--jc-border);
    text-align: left;
    font-size: 0.9rem;
}

.jc-table-container th {
    background: linear-gradient(135deg, #4C1D95 0%, #8B5CF6 55%, #E048B0 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: none;
    white-space: nowrap;
}

.jc-table-container thead tr:first-child th:first-child { border-top-left-radius: 0.6rem; }
.jc-table-container thead tr:first-child th:last-child { border-top-right-radius: 0.6rem; }

@media (max-width: 640px) {
    .jc-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Attendance grid (spreadsheet-style monthly view) ---------- */
.jc-att-grid {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 100%;
}

.jc-att-grid th,
.jc-att-grid td {
    padding: 0.3rem 0.25rem;
}

.jc-att-emp-col {
    position: sticky;
    left: 0;
    z-index: 2;
    text-align: left !important;
    white-space: nowrap;
    padding-left: 0.75rem !important;
    padding-right: 1rem !important;
}

/* Bootstrap's .table > :not(caption) > * > * rule sets background-color with specificity
   (0,1,1) — beating a plain single class like .jc-att-emp-col (0,1,0). Scoping under the
   table's own .jc-att-grid class (0,2,1) reliably wins regardless of stylesheet order. */
.jc-att-grid td.jc-att-emp-col {
    background: var(--jc-surface);
    border-right: 2px solid var(--jc-border);
    font-size: 0.85rem;
}

.jc-att-dow {
    font-size: 0.6rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.85;
}

.jc-att-cell {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    text-align: center !important;
    font-weight: 700;
    font-size: 0.72rem;
    border-bottom: 1px solid var(--jc-border);
    border-right: 1px solid var(--jc-border);
    cursor: pointer;
    user-select: none;
}

.jc-att-cell:hover {
    filter: brightness(0.94);
}

.jc-att-grid td.jc-att-cell--good { color: var(--jc-att-good-text); background: var(--jc-att-good-bg); }
.jc-att-grid td.jc-att-cell--critical { color: var(--jc-att-critical-text); background: var(--jc-att-critical-bg); }
.jc-att-grid td.jc-att-cell--neutral { color: var(--jc-att-neutral-text); background: var(--jc-att-neutral-bg); }
.jc-att-grid td.jc-att-cell--warning { color: var(--jc-att-warning-text); background: var(--jc-att-warning-bg); }
.jc-att-grid td.jc-att-cell--muted { color: var(--jc-att-muted-text); background: var(--jc-att-muted-bg); cursor: default; }
.jc-att-grid td.jc-att-cell--none { color: var(--jc-text-muted); background: transparent; cursor: default; }

.jc-att-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.jc-att-legend-swatch {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 3px;
    margin-right: 0.3rem;
    vertical-align: -1px;
}

/* ---------- Modal backdrop (manually-shown Bootstrap modals) ---------- */
.jc-modal-backdrop {
    background-color: rgba(30, 11, 54, 0.55);
    overflow-y: auto;
    padding: 1rem 0;
}

/* Fixed rule: every popup/modal header is themed with the Jovial brand gradient. */
.jc-modal-backdrop .modal-content {
    overflow: hidden;
}

/* Blazor's <EditForm> renders its own <form> element around modal-header/
   modal-body/modal-footer, inserting an extra layer between them and
   modal-content. That breaks the flex-column chain the mobile fix below
   relies on (modal-body can only shrink/scroll if it's a direct flex child
   of a flex column), so the form itself refuses to shrink and the footer
   (Save/Cancel buttons) gets clipped by modal-content's overflow: hidden.
   Make the form pass the flex layout straight through, regardless of viewport. */
.jc-modal-backdrop .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.jc-modal-backdrop .modal-header {
    background: linear-gradient(135deg, #4C1D95 0%, #8B5CF6 55%, #E048B0 100%);
    border-bottom: none;
}

.jc-modal-backdrop .modal-title {
    color: #fff;
    font-weight: 800;
}

.jc-modal-backdrop .modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.jc-modal-backdrop .modal-header .btn-close:hover {
    opacity: 1;
}

@media (max-width: 576px) {
    .jc-modal-backdrop .modal-dialog {
        margin: 0.5rem;
    }

    /* Vertically-centered flex dialogs can clip their own top edge above the
       viewport when content is taller than expected. Switch to normal block
       flow on small screens so the dialog always starts at the top. */
    .jc-modal-backdrop .modal-dialog-centered {
        display: block;
        min-height: 0;
    }

    /* Don't rely on each modal remembering to add modal-dialog-scrollable — give
       every modal-content an explicit height cap and make modal-body the one
       scrolling region, so the header and footer (Save/Cancel) always stay
       pinned on screen no matter how tall the body content is. 100dvh (dynamic
       viewport height) tracks the *visible* viewport as mobile browser chrome
       and the on-screen keyboard show/hide, unlike 100vh/100% which don't. */
    .jc-modal-backdrop .modal-content {
        max-height: calc(100dvh - 1rem);
        display: flex;
        flex-direction: column;
    }

    .jc-modal-backdrop .modal-body {
        overflow-y: auto;
        /* Flex children default to min-height: auto, which refuses to shrink
           below the content's natural size and silently defeats overflow-y:
           auto. This is the actual fix that makes the body scroll instead of
           pushing the footer off-screen. */
        min-height: 0;
    }

    .jc-modal-backdrop .modal-footer {
        flex-wrap: wrap;
    }

    .jc-modal-backdrop .modal-footer .btn {
        flex: 1 1 auto;
    }
}

/* ---------- Page header (gradient bar, icon-only action buttons) ---------- */
.jc-page-header {
    background: linear-gradient(135deg, #4C1D95 0%, #8B5CF6 55%, #E048B0 100%);
    color: #fff;
    padding: 1.1rem 1.25rem;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
}

.jc-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(10px);
    z-index: 1;
}

.jc-page-header > * {
    position: relative;
    z-index: 2;
}

.jc-page-header h4 {
    margin-bottom: .2rem;
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
}

.jc-page-header h4 i {
    margin-right: .6rem;
    font-size: 1.35rem;
    opacity: .9;
}

.jc-page-header small {
    color: rgba(255, 255, 255, .82);
    font-size: .85rem;
}

.jc-page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.jc-pab {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .16);
    border: 1.5px solid rgba(255, 255, 255, .32);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, transform .12s, box-shadow .15s;
    text-decoration: none;
}

.jc-pab:hover { background: rgba(255, 255, 255, .3); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.jc-pab:active { transform: scale(.92); }
.jc-pab:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }

.jc-pab-add { background: rgba(74, 222, 128, .28); border-color: rgba(134, 239, 172, .5); }
.jc-pab-add:hover { background: rgba(74, 222, 128, .42); }

/* Small count badge overlaid on a .jc-pab icon button (e.g. active-filter count) */
.jc-pab-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #E048B0;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5);
}

/* ---------- Back bar (breadcrumb back to a hub/landing page) ---------- */
.jc-back-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 2px 12px;
    flex-wrap: wrap;
}

.jc-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .84rem;
    font-weight: 600;
    color: #7C3AED;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background .15s, color .15s;
}

.jc-back-btn:hover { background: #f1e9fe; color: #4C1D95; text-decoration: none; }

.jc-back-breadcrumb-sep { color: #9ca3af; font-size: .82rem; }
.jc-back-breadcrumb-current { font-size: .84rem; color: #374151; font-weight: 600; }

/* ---------- Search box ---------- */
.jc-search-box {
    position: relative;
    max-width: 420px;
}

.jc-search-box i {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--jc-text-muted);
    font-size: .9rem;
    pointer-events: none;
}

.jc-search-box input {
    padding-left: 2.25rem;
}

/* ---------- Desktop/mobile view toggling ---------- */
.ad-deskview { display: block; }
.ad-mobview { display: none; }

@media (max-width: 767px) {
    .ad-deskview { display: none; }
    .ad-mobview { display: block; }
    .ad-mobview.jc-project-tiles { display: grid; }
}

/* ---------- Project tiles (mobile card view) ---------- */
.jc-project-tiles {
    /* display is controlled by .ad-mobview / the responsive toggle below, not here */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 4px 0;
}

.jc-project-tile {
    background: var(--jc-surface);
    border-radius: 12px;
    border: 1px solid var(--jc-border);
    border-left: 4px solid #8B5CF6;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 4px rgba(46, 16, 101, .08);
    transition: box-shadow .18s, transform .15s;
    min-width: 0; /* let this grid item shrink to its track width instead of its content's natural size */
}

.jc-project-tile:hover {
    box-shadow: 0 5px 18px rgba(139, 92, 246, .2);
    transform: translateY(-2px);
    color: inherit;
}

.jc-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.jc-tile-id-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jc-tile-code { font-size: .7rem; font-weight: 700; color: #7C3AED; letter-spacing: .5px; text-transform: uppercase; }
.jc-tile-name { font-size: .97rem; font-weight: 700; color: var(--jc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-tile-status { font-size: .65rem; flex-shrink: 0; }

.jc-tile-mid { display: flex; flex-direction: column; gap: 4px; }
.jc-tile-field { font-size: .79rem; color: var(--jc-text-muted); display: flex; align-items: center; gap: .4rem; }
.jc-tile-field i { color: #a78bfa; font-size: .8rem; flex-shrink: 0; }

.jc-tile-foot { border-top: 1px solid var(--jc-border); padding-top: 7px; margin-top: 2px; }

/* ---------- Detail tabs (icon + responsive label) ---------- */
.jc-tab-nav {
    gap: .3rem;
    flex-wrap: wrap;
}

.jc-tab-nav .nav-item {
    margin-bottom: -1px;
}

.jc-tab-nav .nav-link {
    display: flex;
    align-items: center;
    color: var(--jc-text-muted);
    border: 1px solid transparent;
    border-radius: .6rem .6rem 0 0;
    padding: .55rem .95rem;
    transition: background .15s, color .15s, box-shadow .15s;
}

.jc-tab-nav .nav-link i {
    font-size: 1rem;
    color: #8B5CF6;
}

.jc-tab-nav .nav-link:hover:not(.active) {
    background: var(--jc-surface-alt);
    color: var(--jc-text);
    border-color: var(--jc-border) var(--jc-border) transparent;
}

.jc-tab-nav .nav-link.active {
    background: linear-gradient(135deg, #4C1D95 0%, #8B5CF6 55%, #E048B0 100%);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
    box-shadow: 0 3px 10px -2px rgba(139, 92, 246, .5);
}

.jc-tab-nav .nav-link.active i {
    color: #fff;
}

.jc-tab-label {
    margin-left: .5rem;
}

/* ---------- Project details grid (Project Details tab) ---------- */
.jc-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem;
}

.jc-detail-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.jc-detail-item--full {
    grid-column: 1 / -1;
}

.jc-detail-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--jc-text-muted);
    font-weight: 600;
}

.jc-detail-value {
    font-size: .95rem;
    color: var(--jc-text);
    word-break: break-word;
}

@media (max-width: 575px) {
    .jc-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Project contacts (child list) ---------- */
.jc-contact-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.jc-contact-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem .9rem;
    border: 1px solid var(--jc-border);
    border-left: 3px solid #8B5CF6;
    border-radius: .6rem;
    background: var(--jc-surface-alt);
}

.jc-contact-main {
    min-width: 0;
    flex: 1 1 auto;
}

.jc-contact-name {
    font-weight: 700;
    color: var(--jc-text);
    font-size: .95rem;
}

.jc-contact-role {
    font-size: .78rem;
    color: #7C3AED;
    font-weight: 600;
    margin-bottom: .3rem;
}

.jc-contact-line {
    display: flex;
    align-items: center;
    font-size: .85rem;
    margin-top: .2rem;
}

.jc-contact-link {
    color: var(--jc-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    word-break: break-all;
}

.jc-contact-link:hover {
    color: #7C3AED;
}

.jc-contact-link i {
    font-size: .8rem;
    flex-shrink: 0;
}

.jc-contact-actions {
    display: flex;
    gap: .4rem;
    flex-shrink: 0;
}

.jc-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--jc-border);
    background: var(--jc-surface);
    color: var(--jc-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.jc-icon-btn:hover {
    background: var(--jc-muted-bg);
    color: var(--jc-text);
}

.jc-icon-btn--danger:hover {
    background: var(--jc-critical-bg);
    color: var(--jc-critical);
}

.jc-icon-btn--save:hover {
    background: var(--jc-good-bg);
    color: var(--jc-good);
}

@media (max-width: 400px) {
    .jc-contact-item {
        flex-direction: column;
    }

    .jc-contact-actions {
        align-self: flex-end;
    }
}

/* ---------- Status history timeline ---------- */
.jc-timeline {
    position: relative;
    padding-left: 28px;
}

.jc-timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg, #8B5CF6, #E048B0);
    opacity: .35;
}

.jc-timeline-item {
    position: relative;
    padding-bottom: 1.1rem;
}

.jc-timeline-item:last-child {
    padding-bottom: 0;
}

.jc-timeline-marker {
    position: absolute;
    left: -28px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4C1D95 0%, #8B5CF6 55%, #E048B0 100%);
    box-shadow: 0 0 0 3px var(--jc-surface), 0 2px 6px rgba(139, 92, 246, .5);
}

.jc-timeline-content {
    background: var(--jc-surface-alt);
    border: 1px solid var(--jc-border);
    border-radius: .6rem;
    padding: .75rem 1rem;
}

.jc-timeline-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .2rem;
    margin-bottom: .35rem;
}

.jc-timeline-comment {
    font-size: .88rem;
    color: var(--jc-text);
    margin: 0 0 .5rem;
}

.jc-timeline-meta {
    font-size: .78rem;
    color: var(--jc-text-muted);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* ---------- Admin hub (grouped module tiles) ---------- */
.jc-hub-section-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--jc-text-muted);
    margin: 1.5rem 0 .6rem;
}

.jc-hub-section-label:first-of-type {
    margin-top: .25rem;
}

.jc-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.jc-hub-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 14px;
    border: 1.5px solid var(--jc-border);
    background: var(--jc-surface);
    box-shadow: 0 1px 4px rgba(46, 16, 101, .06);
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    min-width: 0; /* let this grid item shrink to its track width instead of its content's natural size */
}

.jc-hub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(46, 16, 101, .14);
    color: inherit;
}

.jc-hub-card-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
}

.jc-hub-card-body {
    min-width: 0;
    flex: 1 1 auto;
}

.jc-hub-card-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--jc-text);
}

.jc-hub-card-desc {
    font-size: .78rem;
    color: var(--jc-text-muted);
    margin-top: 2px;
}

.jc-hub-card-arrow {
    color: var(--jc-border);
    flex-shrink: 0;
    transition: transform .15s, color .15s;
}

.jc-hub-card:hover .jc-hub-card-arrow {
    color: #8B5CF6;
    transform: translateX(3px);
}

.jc-hub-card--purple .jc-hub-card-icon { background: linear-gradient(135deg, #4C1D95 0%, #8B5CF6 100%); }
.jc-hub-card--purple:hover { border-color: #8B5CF6; }

.jc-hub-card--pink .jc-hub-card-icon { background: linear-gradient(135deg, #9D174D 0%, #E048B0 100%); }
.jc-hub-card--pink:hover { border-color: #E048B0; }

.jc-hub-card--green .jc-hub-card-icon { background: linear-gradient(135deg, #14532d 0%, #22c55e 100%); }
.jc-hub-card--green:hover { border-color: #22c55e; }

.jc-hub-card--blue .jc-hub-card-icon { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
.jc-hub-card--blue:hover { border-color: #3b82f6; }

.jc-hub-card--orange .jc-hub-card-icon { background: linear-gradient(135deg, #9a3412 0%, #f97316 100%); }
.jc-hub-card--orange:hover { border-color: #f97316; }

.jc-hub-card--teal .jc-hub-card-icon { background: linear-gradient(135deg, #134e4a 0%, #14b8a6 100%); }
.jc-hub-card--teal:hover { border-color: #14b8a6; }

.jc-hub-card--amber .jc-hub-card-icon { background: linear-gradient(135deg, #78350f 0%, #d97706 100%); }
.jc-hub-card--amber:hover { border-color: #d97706; }

.jc-hub-card--indigo .jc-hub-card-icon { background: linear-gradient(135deg, #312e81 0%, #6366f1 100%); }
.jc-hub-card--indigo:hover { border-color: #6366f1; }

/* ---------- Toast notifications ---------- */
.jc-toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    max-width: min(360px, calc(100vw - 2rem));
}

.jc-toast {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .8rem 1rem;
    border-radius: .6rem;
    background: var(--jc-surface);
    border: 1px solid var(--jc-border);
    border-left: 4px solid var(--jc-critical);
    box-shadow: 0 8px 24px rgba(46, 16, 101, .18);
    font-size: .88rem;
    color: var(--jc-text);
    animation: jc-toast-in .2s ease-out;
}

.jc-toast--danger {
    border-left-color: var(--jc-critical);
}

.jc-toast--danger i.bi-exclamation-triangle-fill {
    color: var(--jc-critical);
}

.jc-toast--success {
    border-left-color: var(--jc-good);
}

.jc-toast--success i.bi-check-circle-fill {
    color: var(--jc-good);
}

.jc-toast span {
    flex: 1 1 auto;
}

.jc-toast-close {
    background: none;
    border: none;
    color: var(--jc-text-muted);
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    cursor: pointer;
}

.jc-toast-close:hover {
    color: var(--jc-text);
}

/* Budget Structure Master — light theme tints for department/sub-session rows and tiles */
.jc-budget-dept-row {
    background: #F5F0FF;
    border-left: 3px solid #8B5CF6;
}

.jc-budget-dept-row:hover {
    background: #ECE1FE;
}

.jc-budget-sub-row {
    background: #FDF4FF;
    border-left: 3px solid #E048B0;
}

.jc-budget-sub-row:hover {
    background: #FBE8FB;
}

.jc-budget-dept-tile {
    background: #F5F0FF;
    border-left: 4px solid #8B5CF6;
}

.jc-budget-sub-tile {
    background: #FDF4FF;
}

@keyframes jc-toast-in {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Project Budget tab — elevated tile design for the Department/Sub-session tree (mobile) */
.jc-budget-dept-tile--project {
    position: relative;
    background: var(--jc-surface);
    border: 1px solid var(--jc-border);
    border-left: none;
    padding: 0;
    overflow: hidden;
}

.jc-budget-dept-tile--project::before {
    content: "";
    display: block;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, #4C1D95, #8B5CF6, #E048B0);
}

.jc-budget-dept-tile__header {
    padding: 12px 14px 10px;
    background: #F5F0FF;
}

.jc-budget-dept-tile__body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    padding: 12px 14px 14px;
}

.jc-budget-item-tile {
    background: var(--jc-surface);
    border: 1px solid var(--jc-border);
    border-radius: 10px;
    padding: 10px 12px;
    transition: box-shadow .15s ease, transform .15s ease;
}

.jc-budget-item-tile:hover {
    box-shadow: 0 4px 14px rgba(76, 29, 149, .12);
    transform: translateY(-1px);
}

.jc-budget-item-tile__amount {
    font-size: 1.15rem;
    font-weight: 800;
    color: #4C1D95;
    margin-top: 4px;
}

.jc-budget-item-tile__inline-input {
    background: #FFFBE0;
    border: 1px solid #F5E9A3;
    padding: .25rem .4rem;
}

.jc-budget-item-tile__inline-input:hover {
    background: #FFF6C8;
    border-color: #EAD87A;
}

.jc-budget-item-tile__inline-input:focus {
    background: var(--jc-surface);
    border-color: #8B5CF6;
    box-shadow: 0 0 0 .15rem rgba(139, 92, 246, .25);
}

/* Red border only for invalid (Qty/Rate <= 0) — Bootstrap's default .is-invalid also draws a
   warning glyph inside the field via background-image, which collides with the native number
   spinner arrows and looks broken. Strip the icon/reserved padding, keep just the border. */
.jc-budget-item-tile__inline-input.is-invalid {
    background-image: none;
    padding-right: .4rem;
}

.jc-budget-item-tile__inline-input.is-invalid:focus {
    box-shadow: 0 0 0 .15rem rgba(220, 53, 69, .25);
}

.jc-budget-item-tile__inline-input:disabled {
    background: transparent;
    border-color: transparent;
    opacity: .7;
}

.jc-budget-item-tile__saved-hint {
    color: var(--jc-good);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* Warning icon shown OUTSIDE an invalid Qty/Rate box (instead of Bootstrap's inline icon) —
   hover/focus reveals a CSS-only tooltip, no JS init required. */
.jc-input-tooltip-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.jc-input-tooltip-wrap .jc-budget-item-tile__inline-input {
    flex: 1 1 auto;
    min-width: 0;
}

.jc-input-warning-icon {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    color: var(--jc-critical);
    cursor: help;
    outline: none;
}

.jc-input-warning-icon:focus-visible {
    box-shadow: 0 0 0 .15rem rgba(220, 53, 69, .35);
    border-radius: 3px;
}

.jc-input-warning-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -6px);
    background: #1f2328;
    color: #fff;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: .72rem;
    line-height: 1.3;
    white-space: normal;
    width: max-content;
    max-width: 220px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    z-index: 20;
}

.jc-input-warning-icon:hover::after,
.jc-input-warning-icon:focus::after {
    opacity: 1;
    visibility: visible;
}

/* Compact "Budget Published" banner — replaces the plain full-size Bootstrap alert */
.jc-budget-published-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--jc-good-bg);
    border: 1px solid rgba(25, 135, 84, .25);
    margin-bottom: 1rem;
}

.jc-budget-published-banner__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--jc-good);
    color: #fff;
    font-size: .8rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.jc-budget-published-banner__body {
    min-width: 0;
}

.jc-budget-published-banner__title {
    font-size: .78rem;
    font-weight: 700;
    color: var(--jc-good);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.jc-budget-published-banner__meta {
    font-size: .8rem;
    color: var(--jc-text);
    margin-top: 1px;
}

.jc-budget-published-banner__note {
    font-size: .74rem;
    color: var(--jc-text-muted);
    margin-top: 2px;
}

/* Grand + department summary strip above the tiled/table view */
.jc-budget-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4C1D95, #7C3AED 60%, #E048B0);
    color: #fff;
}

.jc-budget-summary-strip--end {
    justify-content: flex-end;
}

.jc-budget-summary-strip__grand {
    display: flex;
    flex-direction: column;
    padding-right: 16px;
    border-right: 1px solid rgba(255, 255, 255, .3);
}

.jc-budget-summary-strip__grand:last-child {
    padding-right: 0;
    border-right: none;
}

.jc-budget-summary-strip__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .85;
    text-align: right;
}

.jc-budget-summary-strip__value {
    font-size: 1.4rem;
    font-weight: 800;
}

/* Title on a collapsible summary strip — sits left while margin-right:auto pushes the grand
   figures (and the --end strip's own justify-content: flex-end) to the right of the header. */
.jc-budget-summary-strip__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: .95rem;
    margin-right: auto;
    align-self: center;
}

@media (max-width: 576px) {
    .jc-budget-dept-tile__body {
        grid-template-columns: 1fr;
    }

    .jc-budget-summary-strip {
        flex-direction: column;
    }

    .jc-budget-summary-strip__grand {
        padding-right: 0;
        border-right: none;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .3);
    }

    .jc-budget-summary-strip__grand:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }
}

/* Collapsible section wrapper used on the Transactions tab (Income summary, Budget & Balance
   summary) — a clickable header that toggles a body, keyboard-accessible via role="button". */
.jc-collapse-header {
    cursor: pointer;
    user-select: none;
}

.jc-collapse-header:focus-visible {
    outline: 2px solid var(--jc-brand, #7C3AED);
    outline-offset: 2px;
}

/* Plain (neutral-card) variant, used for the Budget & Balance summary — default-collapsed and
   informational rather than the headline figure the Income summary is. */
.jc-collapse-header--plain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    gap: 10px;
}

.jc-collapse-header--plain .jc-collapse-header__title {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* On-brand icon button — a plain .jc-icon-btn is dark-on-transparent, which disappears against
   the purple gradient .jc-budget-summary-strip uses as the Income summary's clickable header. */
.jc-icon-btn--on-brand {
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

.jc-icon-btn--on-brand:hover {
    background: rgba(255, 255, 255, .3);
    color: #fff;
}

/* ---------- Schedule tab: status badges + simplified proportional Gantt bar ---------- */
/* Six possible task statuses, each with its own gradient — used consistently for the badge
   pill, the desktop table's Status column cell, the Gantt bar, and the % Complete fill. */
.jc-schedule-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .15);
}

.jc-schedule-badge--pending { background: linear-gradient(135deg, #fbbf24, var(--jc-warning)); }
.jc-schedule-badge--ongoing { background: linear-gradient(135deg, #60a5fa, var(--jc-neutral)); }
.jc-schedule-badge--completed { background: linear-gradient(135deg, #4ade80, var(--jc-good)); }
.jc-schedule-badge--canceled { background: linear-gradient(135deg, #94a3b8, var(--jc-slate)); }
.jc-schedule-badge--rejected { background: linear-gradient(135deg, #f87171, var(--jc-critical)); }
.jc-schedule-badge--reopened { background: linear-gradient(135deg, #a78bfa, var(--jc-purple)); }
.jc-schedule-badge--overdue { background: linear-gradient(135deg, #fb923c, var(--jc-overdue)); }

/* Desktop table's Status column — the cell itself carries the status gradient, not just a chip. */
.jc-schedule-status-cell {
    border-radius: 6px !important;
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .15);
}

.jc-schedule-status-cell--pending { background: linear-gradient(135deg, #fbbf24, var(--jc-warning)); }
.jc-schedule-status-cell--ongoing { background: linear-gradient(135deg, #60a5fa, var(--jc-neutral)); }
.jc-schedule-status-cell--completed { background: linear-gradient(135deg, #4ade80, var(--jc-good)); }
.jc-schedule-status-cell--canceled { background: linear-gradient(135deg, #94a3b8, var(--jc-slate)); }
.jc-schedule-status-cell--rejected { background: linear-gradient(135deg, #f87171, var(--jc-critical)); }
.jc-schedule-status-cell--reopened { background: linear-gradient(135deg, #a78bfa, var(--jc-purple)); }
.jc-schedule-status-cell--overdue { background: linear-gradient(135deg, #fb923c, var(--jc-overdue)); }

.jc-schedule-gantt-track {
    position: relative;
    height: 10px;
    min-width: 120px;
    background: var(--jc-muted-bg);
    border-radius: 5px;
    overflow: hidden;
}

.jc-schedule-gantt-bar {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 5px;
    min-width: 6px;
}

.jc-schedule-gantt-bar--pending { background: linear-gradient(90deg, #fbbf24, var(--jc-warning)); }
.jc-schedule-gantt-bar--ongoing { background: linear-gradient(90deg, #60a5fa, var(--jc-neutral)); }
.jc-schedule-gantt-bar--completed { background: linear-gradient(90deg, #4ade80, var(--jc-good)); }
.jc-schedule-gantt-bar--canceled { background: linear-gradient(90deg, #94a3b8, var(--jc-slate)); }
.jc-schedule-gantt-bar--rejected { background: linear-gradient(90deg, #f87171, var(--jc-critical)); }
.jc-schedule-gantt-bar--reopened { background: linear-gradient(90deg, #a78bfa, var(--jc-purple)); }
.jc-schedule-gantt-bar--overdue { background: linear-gradient(90deg, #fb923c, var(--jc-overdue)); }

/* % Complete progress bar fill — reuses the shared .jc-progress track, colored per status. */
.jc-schedule-progress-fill--pending { background: linear-gradient(90deg, #fbbf24, var(--jc-warning)); }
.jc-schedule-progress-fill--ongoing { background: linear-gradient(90deg, #60a5fa, var(--jc-neutral)); }
.jc-schedule-progress-fill--completed { background: linear-gradient(90deg, #4ade80, var(--jc-good)); }
.jc-schedule-progress-fill--canceled { background: linear-gradient(90deg, #94a3b8, var(--jc-slate)); }
.jc-schedule-progress-fill--rejected { background: linear-gradient(90deg, #f87171, var(--jc-critical)); }
.jc-schedule-progress-fill--reopened { background: linear-gradient(90deg, #a78bfa, var(--jc-purple)); }
.jc-schedule-progress-fill--overdue { background: linear-gradient(90deg, #fb923c, var(--jc-overdue)); }

/* ============================================================================
   Reports Centre — hub hero, category sections, and tile grid
   ============================================================================ */

.jc-report-hero {
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #4C1D95, #7C3AED 60%, #E048B0);
    color: #fff;
}

.jc-report-hero h2 { margin: 0; font-weight: 800; }
.jc-report-hero p { margin: 4px 0 0; opacity: .9; }

.jc-report-category { margin-bottom: 28px; }

.jc-report-category__header {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 14px;
}

.jc-report-category__count {
    background: rgba(255,255,255,.25);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: .8rem;
}

.jc-report-category__header--good { background: linear-gradient(135deg, #15803d, var(--jc-good)); }
.jc-report-category__header--neutral { background: linear-gradient(135deg, #1d4ed8, var(--jc-neutral)); }
.jc-report-category__header--teal { background: linear-gradient(135deg, #155e75, var(--jc-teal)); }
.jc-report-category__header--warning { background: linear-gradient(135deg, #92400e, var(--jc-warning)); }
.jc-report-category__header--purple { background: linear-gradient(135deg, #5b21b6, var(--jc-purple)); }
.jc-report-category__header--critical { background: linear-gradient(135deg, #991b1b, var(--jc-critical)); }
.jc-report-category__header--indigo { background: linear-gradient(135deg, #3730a3, var(--jc-indigo)); }

.jc-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.jc-report-tile {
    position: relative;
    background: var(--jc-surface);
    border: 1px solid var(--jc-border);
    border-radius: 12px;
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}

.jc-report-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    color: inherit;
}

.jc-report-tile::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
}

.jc-report-tile--good::before { background: var(--jc-good); }
.jc-report-tile--neutral::before { background: var(--jc-neutral); }
.jc-report-tile--teal::before { background: var(--jc-teal); }
.jc-report-tile--warning::before { background: var(--jc-warning); }
.jc-report-tile--purple::before { background: var(--jc-purple); }
.jc-report-tile--critical::before { background: var(--jc-critical); }
.jc-report-tile--indigo::before { background: var(--jc-indigo); }

.jc-report-tile__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.jc-report-tile--good .jc-report-tile__icon { color: var(--jc-good); background: var(--jc-good-bg); }
.jc-report-tile--neutral .jc-report-tile__icon { color: var(--jc-neutral); background: var(--jc-neutral-bg); }
.jc-report-tile--teal .jc-report-tile__icon { color: var(--jc-teal); background: var(--jc-teal-bg); }
.jc-report-tile--warning .jc-report-tile__icon { color: var(--jc-warning); background: var(--jc-warning-bg); }
.jc-report-tile--purple .jc-report-tile__icon { color: var(--jc-purple); background: var(--jc-purple-bg); }
.jc-report-tile--critical .jc-report-tile__icon { color: var(--jc-critical); background: var(--jc-critical-bg); }
.jc-report-tile--indigo .jc-report-tile__icon { color: var(--jc-indigo); background: var(--jc-indigo-bg); }

.jc-report-tile__title { font-weight: 700; font-size: 1rem; margin: 0; }

.jc-report-tile__desc {
    font-size: .82rem;
    color: var(--jc-text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

.jc-report-tile__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.jc-report-chip {
    font-size: .7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--jc-muted-bg);
    color: var(--jc-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.jc-report-chip--email { color: var(--jc-good); background: var(--jc-good-bg); }
.jc-report-chip--chart { color: var(--jc-indigo); background: var(--jc-indigo-bg); }

@media (max-width: 576px) {
    .jc-report-hero { padding: 18px 20px; }
    .jc-report-grid { grid-template-columns: 1fr; }
}

/* Report viewer page: sticky action header + funnel filter button with active-count badge */
.jc-report-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.jc-report-filter-btn {
    position: relative;
}

.jc-report-filter-btn__count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--jc-critical);
    color: #fff;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* Tiered table rows for grouped report data — subtotal darker than data rows, grand total darkest */
.jc-report-row--data td { background: var(--jc-surface); }
.jc-report-row--subtotal td { background: var(--jc-surface-alt); font-weight: 600; }
.jc-report-row--grand td { background: var(--jc-slate-bg); font-weight: 700; }

/* ═══════════════════════════ Main Dashboard ═══════════════════════════ */

.jc-dashboard-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    border-radius: 18px;
    padding: 26px 30px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #4C1D95, #7C3AED 55%, #E048B0);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.jc-dashboard-hero::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.jc-dashboard-hero__logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.jc-dashboard-hero__logo img { width: 42px; height: 42px; object-fit: contain; }

.jc-dashboard-hero__body { z-index: 1; }
.jc-dashboard-hero__body h2 { margin: 0; font-weight: 800; font-size: 1.5rem; }
.jc-dashboard-hero__body p { margin: 4px 0 0; opacity: .92; }
.jc-dashboard-hero__date {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
}

.jc-dashboard-section-title {
    font-weight: 800;
    font-size: 1.05rem;
    margin: 28px 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.jc-dashboard-section-title a {
    margin-left: auto;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}

.jc-dashboard-widget {
    background: var(--jc-surface);
    border: 1px solid var(--jc-border);
    border-radius: 12px;
    padding: 18px 20px;
    /* Grid items default to min-width:auto (their content's max-content size), which lets
       nowrap content (e.g. .jc-dashboard-list-row__value, the "View all" link) force this box
       wider than its grid track on narrow screens. min-width:0 lets it actually shrink to fit. */
    min-width: 0;
}

.jc-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.jc-dashboard-dept-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: .85rem;
}

.jc-dashboard-dept-row .jc-progress { margin-top: 3px; }
.jc-dashboard-dept-row__label { display: flex; justify-content: space-between; }
.jc-dashboard-dept-row__count { color: var(--jc-text-muted); }

.jc-dashboard-holiday-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--jc-teal-bg);
    color: var(--jc-teal);
    font-weight: 600;
}

.jc-dashboard-list { display: flex; flex-direction: column; gap: 2px; }

.jc-dashboard-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--jc-border);
}

.jc-dashboard-list-row:last-child { border-bottom: none; }

.jc-dashboard-list-row__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.jc-dashboard-list-row__body { flex: 1; min-width: 0; }
.jc-dashboard-list-row__title {
    font-weight: 600;
    font-size: .88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jc-dashboard-list-row__meta { font-size: .76rem; color: var(--jc-text-muted); }
.jc-dashboard-list-row__value { font-weight: 700; font-size: .88rem; white-space: nowrap; }

.jc-dashboard-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--jc-text-muted);
}

@media (max-width: 576px) {
    .jc-dashboard-hero { flex-direction: column; align-items: flex-start; padding: 22px; }
    .jc-dashboard-grid { grid-template-columns: 1fr; }
}