/* Jobs page — stat tiles, open-jobs and closed-jobs panels. */

.jb-page { display: flex; flex-direction: column; gap: 12px; }

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

/* ------------------------------ stat tiles ------------------------------- */
.jb-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.jb-tile {
    background: #fff;
    border: 1px solid #eef0f3;
    border-top: 3px solid var(--tile, #e9c7d2);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(20, 20, 40, .04);
}
.jb-tile--maroon { --tile: #7a1f2b; --val: #7a1f2b; }
.jb-tile--rose   { --tile: #c4607a; }
.jb-tile--blue   { --tile: #3b72c4; }
.jb-tile--amber  { --tile: #d99a1c; }
.jb-tile--green  { --tile: #0F7A4A; --val: #0D6A40; }
.jb-tile__label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; color: #6b5f63; margin-bottom: 8px; }
.jb-tile__value { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--val, #1c1416); }
.jb-tile__note { margin-top: 8px; font-size: .8rem; color: #6b5f63; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.jb-chip { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.jb-chip--down { background: #fde8e6; color: #B42318; }
.jb-chip--up { background: #e3f4ea; color: #0D6A40; }

/* -------------------------------- panels --------------------------------- */
.jb-panels { display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; }
.jb-panel {
    background: #fff;
    border: 1px solid #eef0f3;
    border-top: 3px solid #e9c7d2;
    border-radius: 16px;
    padding: 22px 26px;
    box-shadow: 0 1px 2px rgba(20, 20, 40, .04);
}
.jb-panel__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .05em; color: #8a8f99; }
.jb-panel__title { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; font-weight: 700; margin: 4px 0 14px; color: #1c1416; }
.jb-accent { width: 4px; height: 16px; border-radius: 2px; display: inline-block; background: var(--primary-color); }
.jb-big { font-size: 2.6rem; font-weight: 800; line-height: 1; color: #1c1416; }
.jb-big--green { color: #0D6A40; }
.jb-panel__sub { font-size: .85rem; color: #6b5f63; margin: 6px 0 18px; }

.jb-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: #eef0f3; margin-bottom: 14px; }
.jb-bar > span { display: block; height: 100%; }
.jb-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .88rem; color: #3d3236; }
.jb-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.jb-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.jb-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.jb-mini__card { background: #faf8f7; border: 1px solid #f0eae8; border-radius: 12px; padding: 12px 14px; }
.jb-mini__label { font-size: .68rem; font-weight: 700; letter-spacing: .05em; color: #6b5f63; }
.jb-mini__value { font-size: 1.7rem; font-weight: 800; color: #1c1416; margin: 4px 0 2px; }
.jb-mini__note { font-size: .78rem; color: #8a8f99; }

@media (max-width: 1100px) {
    .jb-tiles { grid-template-columns: repeat(2, 1fr); }
    .jb-panels { grid-template-columns: 1fr; }
}

/* ------------------------- range, chart, footer links ------------------------- */
.jb-panel { display: flex; flex-direction: column; }
.jb-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.jb-range { display: flex; align-items: center; gap: 10px; color: #6b5f63; font-size: .9rem; }
.jb-date { border: 1px solid #e3d9dc; border-radius: 10px; padding: 8px 12px; font: inherit; color: var(--ink); background: #fff; }
.jb-mini { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.jb-mini__chart { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 0; border: 0; background: none; font-size: .78rem; color: #6b5f63; cursor: pointer; }
.jb-mini__chart .material-symbols-rounded { font-size: 16px; }
.jb-mini__chart:hover { color: var(--primary-color); }
.jb-link { margin-top: auto; padding-top: 22px; font-size: .9rem; font-weight: 600; color: var(--primary-color); text-decoration: none; }
.jb-link:hover { text-decoration: underline; }

/* ------------------------------ open jobs list ------------------------------ */
.jb-banner--row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.jb-banner__actions { display: flex; align-items: center; gap: 12px; }
.jb-seg { display: inline-flex; background: #fff; border: 1px solid #e3d9dc; border-radius: 10px; overflow: hidden; }
.jb-seg__btn { border: 0; background: none; padding: 9px 16px; font: inherit; font-size: .88rem; color: #6b5f63; display: inline-flex; align-items: center; gap: 4px; }
.jb-seg__btn.is-active { background: var(--primary-color); color: #fff; font-weight: 600; }
.jb-seg__btn:disabled { cursor: not-allowed; }
.jb-seg__btn .material-symbols-rounded { font-size: 16px; }
.jb-ghost { padding: 9px 18px; border: 1px solid #e3d9dc; border-radius: 10px; background: #fff; color: var(--ink); font-weight: 600; font-size: .88rem; text-decoration: none; }
.jb-ghost:hover { border-color: var(--primary-color); color: var(--primary-color); }

.jb-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.jb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 13px; border: 1px solid #e3d9dc; border-radius: 22px; background: #fff; font: inherit; font-size: .85rem; color: var(--ink); cursor: pointer; }
.jb-pill:hover { border-color: var(--primary-color); }
.jb-pill .material-symbols-rounded { font-size: 16px; }
.jb-pill__count { background: #f1ebed; border-radius: 12px; padding: 0 8px; font-size: .75rem; font-weight: 700; }
.jb-pill.is-active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; font-weight: 600; }
.jb-pill.is-active .jb-pill__count { background: #fff; color: var(--primary-color); }

.jb-table-card { padding: 0; }
.jb-thead-bar { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; gap: 12px; flex-wrap: wrap; }
.jb-mini-crumb { font-size: .85rem; color: #6b5f63; }
.jb-mini-crumb strong { color: var(--primary-color); }
.jb-thead-bar__actions { display: flex; align-items: center; gap: 18px; }
.jb-clear { border: 0; background: none; color: var(--primary-color); font: inherit; font-weight: 600; cursor: pointer; }
.jb-export { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--primary-color); color: #fff; padding: 10px 18px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; }
.jb-export .material-symbols-rounded { font-size: 18px; }

.jb-table-scroll { overflow-x: auto; }
.jb-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.jb-table th { background: #f9eff1; text-align: left; font-size: .72rem; letter-spacing: .05em; color: #6b5f63; padding: 12px 14px; font-weight: 700; white-space: nowrap; }
.jb-table td { padding: 12px 14px; border-top: 1px solid #f1ecee; vertical-align: middle; }
.jb-table tbody tr:hover { background: #fcf8f9; }
.jb-filter-row th { background: #fdf6f8; padding: 8px 14px; }
.jb-filter-row input, .jb-filter-row select { width: 100%; min-width: 90px; border: 1px solid #e3d9dc; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: .85rem; background: #fff; }
.jb-num { color: #6b5f63; }
.jb-strong { font-weight: 600; }
.jb-joblink { color: var(--primary-color); font-weight: 600; text-decoration: underline; }
.jb-nature { background: #f1ecee; border-radius: 12px; padding: 3px 10px; font-size: .78rem; font-weight: 600; color: #5a4e52; }
.jb-status { border-radius: 12px; padding: 4px 12px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.jb-status.is-hold { background: #eeeeee; color: #444; }
.jb-status.is-queries { background: #fdf0d5; color: #8a5a00; }
.jb-status.is-review { background: #dfeafb; color: #1f4f9a; }
.jb-status.is-neutral { background: #f1ecee; color: #5a4e52; }
.jb-empty { text-align: center; color: #8a8f99; padding: 30px 0 !important; }

.jb-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-top: 1px solid #f1ecee; font-size: .85rem; color: #6b5f63; flex-wrap: wrap; gap: 10px; }
.jb-foot__right { display: flex; align-items: center; gap: 8px; }
.jb-perpage { border: 1px solid #e3d9dc; border-radius: 8px; padding: 6px 10px; font: inherit; background: #fff; }
.jb-pg { min-width: 32px; height: 32px; border: 1px solid #e3d9dc; border-radius: 8px; background: #fff; font: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.jb-pg:disabled { opacity: .4; cursor: default; }
.jb-pg--on { background: var(--primary-color); border-color: var(--primary-color); color: #fff; cursor: default; }
.jb-table th, .jb-table td { white-space: nowrap; }
.jb-table-scroll { max-width: 100%; }

/* ---- open jobs grid: Budget page grid theme (bud-*) with its own column set ---- */
.bud-tr--open {
    --c1: 60px; --c2: 320px; --c3: 200px;      /* frozen columns: #, job name, group job name (sticky offsets follow these) */
    grid-template-columns: var(--c1) var(--c2) var(--c3) 160px 150px 160px 140px 140px 140px 70px 120px 100px 130px repeat(12, 150px);
}

/* ---- multi-select column filter ---- */
.ms { position: relative; }
.ms__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; box-sizing: border-box;
    border: 1px solid #d9dde3; border-radius: 8px; padding: 7px 9px; font: inherit; font-size: .82rem; color: var(--ink); background: #fff; cursor: pointer; }
.ms__btn.is-open, .ms__btn.is-filtered { border-color: var(--primary-color); }
.ms__btn.is-open { box-shadow: 0 0 0 3px rgba(122, 31, 43, .12); }
.ms__btn.is-filtered { font-weight: 600; color: var(--primary-color); }
.ms__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms__btn .material-symbols-rounded { font-size: 18px; }
.ms__backdrop[popover] { position: fixed; inset: 0; width: 100vw; height: 100vh; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.ms__panel[popover] { position: fixed; inset: auto; margin: 0; overflow: visible; color: inherit; background: #fff; border-radius: 14px; padding: 12px 8px 8px;
    box-shadow: 0 8px 30px rgba(20, 20, 40, .18); border: 1px solid #eef0f3; }
.ms__search { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; padding: 8px 12px; border: 1px solid #d9dde3; border-radius: 10px; color: #8a8f99; }
.ms__search .material-symbols-rounded { font-size: 20px; }
.ms__search input { border: 0; outline: 0; flex: 1; min-width: 0; font: inherit; font-size: .9rem; color: var(--ink); }
.ms__opt { display: flex; align-items: center; gap: 12px; padding: 9px 12px; font-size: .92rem; color: #3d3236; cursor: pointer; border-radius: 8px; margin: 0; }
.ms__opt:hover { background: #fcf8f9; }
.ms__opt input { width: 16px; height: 16px; accent-color: var(--primary-color); flex: none; }
.ms__opt--all { font-weight: 700; border-bottom: 1px solid #eef0f3; border-radius: 0; margin-bottom: 4px; }
.ms__list { max-height: 270px; overflow-y: auto; }
.ms__none { padding: 12px; color: #8a8f99; font-size: .85rem; }

/* ---- closed jobs ---- */
.cl-range { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 24px; }
.cl-range__fields { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.cl-field { display: flex; flex-direction: column; gap: 6px; font-size: .78rem; font-weight: 600; color: #6b5f63; margin: 0; }
.cl-field input { border: 1px solid #d9dde3; border-radius: 8px; padding: 8px 12px; font: inherit; font-size: .88rem; color: var(--ink); background: #fff; }
.cl-clear { border: 1px solid #d9dde3; border-radius: 8px; background: #fff; padding: 9px 18px; font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.cl-clear:hover { border-color: var(--primary-color); color: var(--primary-color); }
.cl-range__count { font-size: .9rem; color: #6b5f63; }
.cl-range__count strong { font-size: 1.7rem; font-weight: 800; color: #0D6A40; margin-right: 6px; }

.bud-tr--closed {
    --c1: 70px; --c2: 300px; --c3: 200px;      /* frozen columns: S.No, job name, group job name (sticky offsets follow these) */
    grid-template-columns: var(--c1) var(--c2) var(--c3) 150px 130px 200px 130px 130px 70px 120px 130px 130px 110px 110px 110px;
}
.bud-badge.is-done { background: #e3f4ea; color: #0D6A40; }

/* ---- sortable headers ---- */
.bud-th--sort { border: 0; background: none; font: inherit; font-size: .78rem; font-weight: 700; color: #7a6f73; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; text-align: left; white-space: nowrap; }
.bud-th--sort .material-symbols-rounded { font-size: 16px; color: #b9b0b4; }
.bud-th--sort:hover { color: var(--primary-color); }
.bud-th--sort.is-sorted, .bud-th--sort.is-sorted .material-symbols-rounded { color: var(--primary-color); }
.bud-th--sort.bud-th--r { justify-self: end; }

/* whole card opens the trend popup */
.jb-mini__card--click { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.jb-mini__card--click:hover { border-color: #e1c8cf; box-shadow: 0 2px 10px rgba(122, 31, 43, .08); }
.jb-mini__card--click:hover .jb-mini__chart { color: var(--primary-color); }

/* ===========================================================================
   Closed jobs: period pills, manager summary table, manager jobs popup
   =========================================================================== */
.cl-period { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 12px; background: #f1edeb; }
.cl-period__btn {
    display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer;
    padding: 9px 16px; border-radius: 9px; font: inherit; font-size: .9rem; font-weight: 600; color: #5b5054;
}
.cl-period__btn:hover { color: var(--primary-color); }
.cl-period__btn.is-active { background: var(--primary-color); color: #fff; box-shadow: 0 2px 6px rgba(122, 22, 64, .25); }
.cl-period__btn .material-symbols-rounded { font-size: 17px; }
.cl-range__fields { align-items: center; }

.cj-mgr-card { padding: 0; overflow: hidden; }
.cj-mgr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 24px; }
.cj-mgr-head .bud-thead-bar__h { font-size: 1.1rem; font-weight: 700; color: #1c1416; }
.cj-mgr-hint { color: #6b5f63; font-size: .86rem; }

.cj-mgr { min-width: 760px; }
.cj-mgr__tr {
    display: grid; grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(120px, 1fr)); align-items: center;
    padding: 0 24px; min-height: 68px; border-left: 3px solid #2f5fa7; border-top: 1px solid #f0eceb;
}
.cj-mgr__tr:nth-child(even):not(.cj-mgr__tr--total) { background: #faf8f7; }
.cj-mgr__tr > :not(:first-child) { text-align: center; }
.cj-mgr__tr--head {
    min-height: 48px; background: var(--primary-color); color: #fff; border-left-color: var(--primary-color);
    font-size: .92rem; font-weight: 700; border-top: 0;
}
.cj-mgr__tr--total { background: #f6f3f2; border-left-color: var(--primary-color); border-top: 2px solid #e6dfdd; font-weight: 700; color: #1c1416; }
.cj-mgr__name { color: #2f5fa7; font-weight: 600; }
.cj-mgr__name.is-none { color: #6b5f63; font-style: italic; }
.cj-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 7px 12px;
    border: 0; border-radius: 9px; background: #f8e8ed; color: var(--primary-color); font: inherit; font-weight: 700; cursor: pointer;
}
.cj-count:hover { background: var(--primary-color); color: #fff; }
.cj-count--static { cursor: default; }
.cj-count--static:hover { background: #f8e8ed; color: var(--primary-color); }
.cj-num { font-weight: 700; color: #1c1416; }
.cj-num--carisma { color: var(--primary-color); }
.cj-num--client { color: #2f5fa7; }

.cj-modal { max-width: 1400px; }
.cj-modal__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 24px; border-bottom: 1px solid #f0eceb; }
.cj-modal__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.1rem; font-weight: 700; color: #1c1416; }
.cj-modal__close {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid #d9dde3; border-radius: 10px;
    background: #fff; font: inherit; font-size: .9rem; font-weight: 600; color: #1c1416; cursor: pointer;
}
.cj-modal__close:hover { border-color: var(--primary-color); color: var(--primary-color); }
.cj-modal__close .material-symbols-rounded { font-size: 18px; }
.cj-modal__body { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.cj-modal__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid #f0eceb; color: #6b5f63; font-size: .86rem; }
.cj-red { color: #c0392b; }

/* ---- open jobs manager view: holder pills + status x partner matrix ---- */
.oj-holder .material-symbols-rounded { font-size: 18px; }
.oj-matrix .cj-mgr__tr { grid-template-columns: minmax(220px, 2fr) repeat(var(--oj-cols, 1), minmax(120px, 1fr)) minmax(90px, .7fr); }
.oj-matrix { min-width: calc(330px + var(--oj-cols, 1) * 120px); }
.oj-zero { color: #b9b0b4; }
.oj-total { border: 0; background: none; padding: 6px 10px; border-radius: 8px; font: inherit; font-weight: 700; color: #1c1416; cursor: pointer; }
.oj-total:hover { background: #f8e8ed; color: var(--primary-color); }
.oj-days--long { color: #c0392b; font-weight: 700; }
.oj-row { cursor: pointer; transition: background .15s ease; }
.oj-row:hover { background: #fbf1f4 !important; }
.oj-row:hover .cj-mgr__name { text-decoration: underline; }

/* Long column titles (e.g. "Review Replies Rcvd/Yet To Attend") wrap inside their own column instead of
   running into the next one; the header row grows to fit and the sort icon stays beside the text. */
.bud-tr--open.bud-tr--head,
.bud-tr--closed.bud-tr--head { height: auto; min-height: 46px; }
.bud-tr--open .bud-th--sort,
.bud-tr--closed .bud-th--sort { white-space: normal; line-height: 1.25; padding-top: 6px; padding-bottom: 6px; max-width: 100%; }
.bud-tr--open .bud-th--sort > span:first-child,
.bud-tr--closed .bud-th--sort > span:first-child { overflow-wrap: break-word; min-width: 0; }
.bud-tr--open .bud-th--sort .material-symbols-rounded,
.bud-tr--closed .bud-th--sort .material-symbols-rounded { flex-shrink: 0; }