/* ===========================================================================
   Budget page — matched to the approved Carisma design.
   Colours: green #0F7A4A, red #B42318, brand maroon var(--primary-color).
   =========================================================================== */

.bud-page { display: flex; flex-direction: column; gap: 20px; }

/* -------------------------------- banner --------------------------------- */
.bud-banner {
    background: linear-gradient(120deg, #f7ecef 0%, #faf3ee 55%, #fdfbfa 100%);
    border: 1px solid #f1e6e8;
    border-radius: 18px;
    padding: 12px 24px;
}
.bud-crumb { display: flex; align-items: center; gap: 9px; font-size: .85rem; margin-bottom: 4px; }
.bud-crumb a { color: #9a7b82; text-decoration: none; }
.bud-crumb a:hover { color: var(--primary-color); text-decoration: underline; }
.bud-crumb strong { color: var(--ink); font-weight: 700; }
.bud-crumb__sep { color: #cdbfc3; }
.bud-title { font-size: 1.5rem; font-weight: 800; color: #1c1416; margin: 0 0 2px; }
.bud-sub { color: #6b5f63; font-size: .85rem; margin: 0; }

/* --------------------------------- card ---------------------------------- */
.bud-card {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20, 20, 40, .04);
}

/* ------------------------------- summary --------------------------------- */
.bud-summary {
    padding: 14px 24px;
    border-top: 3px solid #e9c7d2;   /* coloured top accent */
}
.bud-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bud-stat__label { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: #8a8f99; margin-bottom: 4px; }
.bud-stat__value { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--primary-color); }
.bud-stat__value.is-green { color: #0D6A40; }
.bud-stat__value.is-red { color: #A31F15; }

.bud-bar {
    display: flex; gap: 3px;
    height: 8px; margin: 10px 0 8px;
    border-radius: 7px; overflow: hidden;
    background: #eef0f3;
}
.bud-bar__fill { display: block; height: 100%; border-radius: 4px; }
.bud-bar__fill.is-green { background: #0F7A4A; }
.bud-bar__fill.is-red { background: #B42318; }

.bud-legend { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: .84rem; color: #3d3236; }
.bud-legend > span { display: inline-flex; align-items: center; gap: 9px; }
.bud-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.bud-dot.is-green { background: #0F7A4A; }
.bud-dot.is-red { background: #B42318; }

/* ----------------------------- table card -------------------------------- */
.bud-table-card { border-top: 3px solid #e9c7d2; }   /* coloured top accent */

/* ----------------------------- table header ------------------------------ */
.bud-thead-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
    padding: 18px 22px; border-bottom: 1px solid #ECE6E2;
}
.bud-thead-bar__title { display: flex; flex-direction: column; gap: 6px; margin-right: auto; }
.bud-mini-crumb { font-size: .78rem; color: #9a9095; }
.bud-thead-bar__h { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 700; color: #1c1416; }
.bud-h-accent { width: 4px; height: 20px; border-radius: 3px; background: var(--primary-color); }
.bud-h-count {
    font-size: .8rem; font-weight: 700; color: #6b5f63;
    background: #f1ecee; border-radius: 999px; padding: 2px 10px;
}

/* tabs */
.bud-tabs { display: inline-flex; background: #f4f5f7; border-radius: 10px; padding: 4px; gap: 2px; }
.bud-tab {
    display: inline-flex; align-items: center; gap: 7px;
    border: none; background: transparent; cursor: pointer;
    font-size: .86rem; font-weight: 600; color: #4b4145;
    padding: 7px 14px; border-radius: 8px;
}
.bud-tab:hover { color: var(--primary-color); }
.bud-tab.is-active { background: var(--primary-color); color: #fff; box-shadow: 0 1px 3px rgba(122, 31, 43, .3); }
.bud-tab .material-symbols-rounded { font-size: 16px; }
.bud-tab__count {
    font-size: .76rem; font-weight: 700; padding: 1px 8px; border-radius: 999px;
    background: rgba(0, 0, 0, .06); color: inherit;
}
.bud-tab.is-active .bud-tab__count { background: rgba(255, 255, 255, .22); }

/* actions */
.bud-actions { display: flex; align-items: center; gap: 12px; }
.bud-search { position: relative; }
.bud-search input {
    width: 220px; max-width: 46vw;
    border: 1px solid #d9dde3; border-radius: 10px;
    padding: 9px 12px; font-size: .88rem; color: var(--ink);
    outline: none; background: #fff;
}
.bud-search input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(122, 31, 43, .12); }
.bud-link-btn {
    border: none; background: transparent; cursor: pointer;
    font-size: .88rem; font-weight: 600; color: var(--primary-color); white-space: nowrap;
}
.bud-link-btn:hover { text-decoration: underline; }
.bud-export {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    border: 1px solid #d9dde3; background: #fff; cursor: pointer;
    font-size: .88rem; font-weight: 600; color: var(--ink);
    padding: 9px 14px; border-radius: 10px;
}
.bud-export:hover { border-color: var(--primary-color); color: var(--primary-color); }
.bud-export:disabled { opacity: .5; cursor: not-allowed; }
.bud-export:disabled:hover { border-color: #d9dde3; color: var(--ink); }
.bud-export .material-symbols-rounded { font-size: 18px; }

/* -------------------------------- table ---------------------------------- */
.bud-table-scroll { overflow-x: auto; }
.bud-table { width: max-content; min-width: 100%; }
.bud-tr {
    /* widths of the three frozen columns: used for BOTH the grid and the sticky offsets, so they can't drift apart */
    --c1: 60px; --c2: 200px; --c3: 370px;
    display: grid;
    grid-template-columns: var(--c1) var(--c2) var(--c3) 180px 140px 170px 136px 136px 124px;
    align-items: center;
    column-gap: 0;
    padding: 0;
}
.bud-th, .bud-td { box-sizing: border-box; padding: 0 10px; min-width: 0; }
.bud-tr > :first-child { padding-left: 20px; }
.bud-tr > :last-child { padding-right: 22px; }

.bud-tr--head {
    height: 46px; background: #faf7f8; border-bottom: 1px solid #ECE6E2;
}
.bud-th { font-size: .78rem; font-weight: 700; color: #7a6f73; text-transform: none; }
.bud-th--num, .bud-td--num { color: #6B5F63; }
.bud-th--r, .bud-td--r { text-align: right; justify-self: end; }

/* ---- frozen first three columns (sticky while the rest scrolls) ---- */
/* They stretch over the row's FULL height (even when empty) so scrolled columns can never show through,
   and their text stays vertically centred. */
.bud-tr > :nth-child(1),
.bud-tr > :nth-child(2),
.bud-tr > :nth-child(3) { position: sticky; z-index: 2; background: #fff; align-self: stretch; align-content: center; }
.bud-tr > :nth-child(1) { left: 0; }
.bud-tr > :nth-child(2) { left: var(--c1); }
.bud-tr > :nth-child(3) { left: calc(var(--c1) + var(--c2)); border-right: 1px solid #ece6e2; }
.bud-tr--head > :nth-child(-n+3),
.bud-tr--filter > :nth-child(-n+3) { background: #faf7f8; }

/* per-column filter row */
.bud-tr--filter {
    min-height: 40px; padding-top: 0; padding-bottom: 0;
    background: #faf7f8; border-bottom: 1px solid #ECE6E2;
}
/* The row has no padding of its own: each cell carries it, so the frozen cells (which must fill the whole
   row height) leave no gap above/below for scrolled filters to show through. */
.bud-tr--filter > * { box-sizing: border-box; padding: 8px 6px; min-width: 0; }
.bud-fl { display: block; min-width: 0; }
.bud-fl select, .bud-fl input {
    width: 100%; box-sizing: border-box;
    border: 1px solid #d9dde3; border-radius: 8px;
    padding: 7px 9px; font-size: .82rem; color: var(--ink);
    background: #fff; outline: none;
}
.bud-fl select { cursor: pointer; }
.bud-fl select:focus, .bud-fl input:focus {
    border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(122, 31, 43, .12);
}

.bud-tr:not(.bud-tr--head):not(.bud-tr--filter) { min-height: 44px; border-bottom: 1px solid #f2eeef; font-size: .9rem; color: #3d3236; }
/* zebra striping: 1st, 3rd, 5th … rows tinted (frozen cells carry the same tint) */
.bud-tr.is-alt { background: #FCF8F9; }
.bud-tr.is-alt > :nth-child(-n+3) { background: #FCF8F9; }

.bud-tr:not(.bud-tr--head):not(.bud-tr--filter):hover { background: #f6eaee; }
.bud-tr:not(.bud-tr--head):not(.bud-tr--filter):hover > :nth-child(-n+3) { background: #f6eaee; }
.bud-td { overflow: hidden; }
.bud-td--strong { font-weight: 700; color: #1c1416; }
.bud-jobbtn {
    border: none; background: transparent; padding: 0; cursor: pointer;
    color: var(--primary-color); font-weight: 600; font-size: inherit;
    font-family: inherit; text-align: left;
    white-space: nowrap;   /* show the full job name (column widened to fit) */
}
.bud-jobbtn:hover { text-decoration: underline; }
.bud-num { font-variant-numeric: tabular-nums; }
.bud-variance { color: #B42318; font-weight: 700; }
.bud-variance-ok { color: #0D6A40; font-weight: 700; }
.bud-empty { padding: 48px 20px; text-align: center; font-size: .92rem; color: #6b5f63; }

/* budget-used bar + percentage */
.bud-used { display: flex; align-items: center; gap: 10px; }
.bud-used__bar { flex: 1; min-width: 70px; height: 8px; border-radius: 5px; background: #eef0f3; overflow: hidden; }
.bud-used__fill { display: block; height: 100%; border-radius: 5px; }
.bud-used__fill.is-over { background: #B42318; }
.bud-used__fill.is-ok { background: #0F7A4A; }
.bud-used__pct { font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bud-used__pct.is-over { color: #B42318; }
.bud-used__pct.is-ok { color: #0D6A40; }

/* nature + status badges */
.bud-nature {
    display: block; font-size: .85rem; font-weight: 600; color: #5b5156;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bud-badge { display: inline-block; font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.bud-badge.is-client  { background: #e8f0fe; color: #2251b5; }
.bud-badge.is-carisma { background: #fbe9ec; color: #a31f15; }
.bud-badge.is-new     { background: #fdf3e0; color: #9a6a12; }
.bud-badge.is-neutral { background: #f0f1f4; color: #6b7280; }

/* -------------------------------- footer --------------------------------- */
.bud-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 22px; font-size: .84rem; color: #6B5F63;
}
.bud-foot__right { display: flex; align-items: center; gap: 14px; }
.bud-perpage {
    border: 1px solid #d9dde3; border-radius: 9px; padding: 7px 10px;
    font-size: .84rem; color: var(--ink); background: #fff; cursor: pointer;
}
.bud-pager { display: inline-flex; align-items: center; gap: 4px; }
.bud-pager__pg, .bud-pager__nav {
    min-width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid #e3e6ea; background: #fff; cursor: pointer;
    font-size: .86rem; font-weight: 600; color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
}
.bud-pager__pg:hover, .bud-pager__nav:hover:not(:disabled) { border-color: var(--primary-color); color: var(--primary-color); }
.bud-pager__pg.is-active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.bud-pager__nav:disabled { opacity: .4; cursor: default; }

/* ------------------------------ responsive ------------------------------- */
@media (max-width: 1100px) {
    .bud-thead-bar { align-items: flex-start; }
    .bud-actions { width: 100%; }
    .bud-search input { flex: 1; }
}
@media (max-width: 680px) {
    .bud-stats { grid-template-columns: 1fr; gap: 14px; }
    .bud-stat__value { font-size: 2.1rem; }
}

/* ===========================================================================
   Job detail popup (modal)
   =========================================================================== */
.jm-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(28, 20, 22, .5);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.jm-dialog {
    width: 100%; max-width: 1120px; max-height: 92vh;
    background: #fff; border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

/* header */
.jm-top {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--primary-color); color: #fff; padding: 18px 24px;
}
.jm-title {
    margin: 0; font-size: 1.05rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jm-close {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px;
    padding: 8px 14px; font-size: .9rem; font-weight: 600;
}
.jm-close:hover { background: rgba(255, 255, 255, .24); }
.jm-close .material-symbols-rounded { font-size: 18px; }

/* meta facts */
.jm-meta {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 22px;
    padding: 18px 24px; border-bottom: 1px solid #ECE6E2;
}
.jm-meta__k { font-size: .72rem; font-weight: 700; letter-spacing: .03em; color: #9a9095; margin-bottom: 5px; }
.jm-meta__v { font-size: .92rem; font-weight: 600; color: #1c1416; }

/* body */
.jm-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    padding: 22px 24px; overflow-y: auto;
}
.jm-col--cards { display: flex; flex-direction: column; gap: 16px; }
.jm-h3 {
    display: flex; align-items: center; gap: 8px;
    font-size: 1rem; font-weight: 700; color: var(--primary-color); margin: 0 0 14px;
}
.jm-h3 .material-symbols-rounded { font-size: 20px; }

/* timeline */
.jm-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.jm-tl li { position: relative; padding: 0 0 22px 26px; }
.jm-tl li::before {
    content: ""; position: absolute; left: 5px; top: 6px; bottom: -6px; width: 2px; background: #ead9de;
}
.jm-tl li:last-child::before { display: none; }
.jm-dot {
    position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--primary-color);
}
.jm-tl li.is-current .jm-dot { background: #fff; border: 3px solid var(--primary-color); }
.jm-tl__date { font-size: .8rem; color: #8a8f99; margin-bottom: 3px; }
.jm-tl__row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.jm-tl__name { font-size: .95rem; font-weight: 700; color: #1c1416; }
.jm-tl li.is-current .jm-tl__name { color: var(--primary-color); }
.jm-tl__meta { font-size: .82rem; color: #6b5f63; margin-top: 5px; }

/* cards */
.jm-card { border: 1px solid #eef0f3; border-radius: 14px; padding: 18px 18px 16px; box-shadow: 0 1px 2px rgba(20,20,40,.04); }
.jm-budline { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9rem; color: #3d3236; margin-bottom: 12px; }
.jm-budline strong { font-weight: 700; color: #1c1416; }
.jm-budline strong.is-over { color: #B42318; }
.jm-budline strong.is-ok { color: #0D6A40; }
.jm-bar { height: 10px; border-radius: 6px; background: #eef0f3; overflow: hidden; margin-bottom: 12px; }
.jm-bar > span { display: block; height: 100%; border-radius: 6px; }
.jm-bar > span.is-over { background: #B42318; }
.jm-bar > span.is-ok { background: #0F7A4A; }

/* turnaround tiles */
.jm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.jm-tile { border-radius: 12px; padding: 16px 10px; text-align: center; }
.jm-tile--pink { background: #F6E9ED; }
.jm-tile--gold { background: #FDF4E3; }
.jm-tile--grey { background: #F1ECE9; }
.jm-tile__num { display: block; font-size: 1.8rem; font-weight: 800; color: #1c1416; line-height: 1; }
.jm-tile small { display: block; margin-top: 7px; font-size: .68rem; font-weight: 700; letter-spacing: .03em; color: #7a6f73; }

/* count chip in headings */
/* "Coming soon" placeholder box (Instructions / Queries) */
.jm-soon {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 22px 16px; border: 1px dashed #d9d3d6; border-radius: 12px; background: #f9f7f8;
    color: #7a6f73; font-size: .95rem; font-weight: 600;
}
.jm-soon .material-symbols-rounded { font-size: 22px; color: #8a7f83; }
.jm-sample { font-size: .7rem; font-weight: 700; color: #9a6a12; background: #fdf3e0; border-radius: 999px; padding: 1px 9px; }
.jm-note { font-size: .9rem; color: #6b5f63; padding: 12px 0; }
.jm-note--error { color: #A31F15; font-weight: 600; }
.jm-count { font-size: .72rem; font-weight: 700; color: #5b5156; background: #f0eef0; border-radius: 999px; padding: 1px 9px; }

/* instruction / query items */
.jm-item { background: #faf7f8; border: 1px solid #f0eaec; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.jm-item--split { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.jm-item__text { font-size: .9rem; color: #2b2f36; }
.jm-item__by { font-size: .78rem; color: #6b5f63; margin-top: 4px; }

.jm-addrow { display: flex; gap: 8px; }
.jm-input {
    flex: 1; min-width: 0; border: 1px solid #d9dde3; border-radius: 10px;
    padding: 9px 12px; font-size: .88rem; color: var(--ink); outline: none;
}
.jm-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(122, 31, 43, .12); }
.jm-add {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    border: none; background: var(--primary-color); color: #fff; cursor: pointer;
    border-radius: 10px; padding: 9px 16px; font-size: .88rem; font-weight: 600;
}
.jm-add:disabled { opacity: .45; cursor: default; }
.jm-add .material-symbols-rounded { font-size: 17px; }

/* badges reused in the modal */
.bud-badge.is-cur { background: #e9f7ef; color: #1c6b3c; }
.bud-badge.is-okbadge { background: #e9f7ef; color: #1c6b3c; }

@media (max-width: 860px) {
    .jm-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .jm-body { grid-template-columns: 1fr; }
}

.bud-export:disabled, .dp-export:disabled { opacity: .5; cursor: default; }
.bud-export:disabled:hover, .dp-export:disabled:hover { border-color: #d9dde3; color: var(--ink); }

/* "Coming soon" placeholder inside job popup cards */
.jm-soon {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 18px 12px; border: 1px dashed #e3d6da; border-radius: 10px;
    background: #faf7f8; color: #8a7f83; font-size: .9rem; font-weight: 600;
}
.jm-soon .material-symbols-rounded { font-size: 20px; }


.jm-loading { margin: 6px 0; padding: 18px 4px; font-size: .9rem; color: #8a7f83; }

/* mirror scrollbar below a wide grid (kept in sync by ui.js): it sticks to the bottom of the screen while the grid is
   taller than the viewport, and replaces the grid's own bottom scrollbar */
.bud-topscroll { position: sticky; bottom: 0; z-index: 6; background: #fff; overflow-x: auto; overflow-y: hidden; height: 14px; scrollbar-width: thin; scrollbar-color: #c9bfc3 transparent; }
.bud-topscroll > div { height: 1px; }
.bud-topscroll::-webkit-scrollbar { height: 10px; }
.bud-topscroll::-webkit-scrollbar-thumb { background: #c9bfc3; border-radius: 5px; }
.bud-topscroll::-webkit-scrollbar-thumb:hover { background: #a99ea3; }
:has(+ .bud-topscroll):not(.bud-topscroll) { scrollbar-width: none; }
:has(+ .bud-topscroll):not(.bud-topscroll)::-webkit-scrollbar { display: none; }