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

.tur-page { display: flex; flex-direction: column; gap: 22px; }

.tur-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

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

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

/* ---------------------------- segmented control -------------------------- */
.tur-seg { display: inline-flex; flex-wrap: wrap; background: #f4f1f0; border-radius: 12px; padding: 4px; gap: 2px; }
.tur-seg__btn {
    display: inline-flex; align-items: center; gap: 8px;
    border: none; background: transparent; cursor: pointer;
    font-size: .9rem; font-weight: 600; color: #4b4145;
    padding: 9px 16px; border-radius: 9px; white-space: nowrap;
}
.tur-seg__btn:hover { color: var(--primary-color); }
.tur-seg__btn.is-active { background: var(--primary-color); color: #fff; box-shadow: 0 2px 6px rgba(122, 31, 43, .3); }
.tur-seg__btn .material-symbols-rounded { font-size: 17px; }
.tur-seg__count {
    font-size: .76rem; font-weight: 700; padding: 1px 9px; border-radius: 999px;
    background: rgba(0, 0, 0, .06); color: inherit;
}
.tur-seg__btn.is-active .tur-seg__count { background: rgba(255, 255, 255, .22); }

.tur-btn {
    border: 1px solid #d9dde3; background: #fff; cursor: pointer;
    font-size: .86rem; font-weight: 600; color: var(--ink);
    padding: 8px 16px; border-radius: 10px; white-space: nowrap;
}
.tur-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* ---------------------------------- grid --------------------------------- */
.tur-grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }

/* -------------------------------- aging card ----------------------------- */
.tur-aging { flex: 2 1 520px; padding: 14px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tur-aging__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

.tur-buckets { display: flex; flex-direction: column; gap: 2px; }
.tur-bucket {
    display: grid; grid-template-columns: 130px 1fr 110px; align-items: center; column-gap: 16px;
    width: 100%; min-height: 40px; padding: 0 14px;
    border: 1px solid transparent; border-radius: 12px; background: transparent;
    font: inherit; font-size: .95rem; color: #1c1416; text-align: left; cursor: pointer;
}
.tur-bucket:hover { background: #faf7f8; }
.tur-bucket.is-on { background: #f8ecef; border-color: #e9c7d2; }
.tur-bucket:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.tur-bucket__label { font-weight: 600; }
.tur-track { display: block; height: 12px; border-radius: 6px; background: #f4f1f0; overflow: hidden; }
.tur-fill { display: block; height: 100%; border-radius: 6px; transition: width .25s ease; }
.tur-bucket__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tur-bucket__num strong { font-weight: 700; }
.tur-bucket__pct { color: #6b5f63; font-size: .86rem; margin-left: 4px; }
.tur-hint { margin: 0; font-size: .86rem; color: #6b5f63; }
.tur-hint--error { color: #A31F15; font-weight: 600; }

/* -------------------------------- KPI tiles ------------------------------ */
.tur-kpis {
    flex: 1 1 260px; min-width: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start;
}
.tur-kpi { padding: 10px 18px; }
.tur-kpi--wide { grid-column: span 2; }
.tur-kpi--alert { border-color: #f2c9c4; border-top-color: #f2c9c4; }
.tur-kpi__label { font-size: .72rem; font-weight: 700; letter-spacing: .07em; color: #6b5f63; text-transform: uppercase; }
.tur-kpi--alert .tur-kpi__label { color: #a31f15; }
.tur-kpi__value { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; color: #1c1416; font-variant-numeric: tabular-nums; }
.tur-kpi__value.is-brand { color: var(--primary-color); }
.tur-kpi__value.is-green { color: #0F7A4A; }
.tur-kpi__value.is-red { color: #A31F15; }
.tur-kpi__row { display: flex; align-items: baseline; gap: 10px; }
.tur-kpi__row .tur-kpi__value { margin-top: 4px; }
.tur-kpi__note { font-size: .86rem; color: #6b5f63; }

/* --------------------------- job list (reuses bud-* grid) ---------------- */
/* 11 columns; the first three (#, Received from, Job name) stay frozen via the Budget rules,
   so their widths must match Budget's (60 / 200 / 370). */
.bud-tr.tur-tr {
    grid-template-columns: 60px 200px 370px 110px 140px 150px 100px 100px 100px 120px 120px;
}
.tur-days { font-weight: 700; }
.tur-days.is-late { color: #A31F15; }
.bud-badge.is-done { background: #e3f3ea; color: #0d6a40; }

/* ------------------------------ Manager view ----------------------------- */
.tur-mgr-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* All Jobs / With Carisma / With Client pills: white pill with a soft border; the active one is tinted
   with the theme colour and a theme-coloured border */
.tur-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.tur-pill {
    border: 1.5px solid #e6e1e3; background: #fff; cursor: pointer;
    font: inherit; font-size: .8rem; font-weight: 600; color: #3d3236; line-height: 1.2;
    padding: 7px 18px; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(28, 20, 22, .06);
}
.tur-pill:hover { border-color: #cdbfc3; }
.tur-pill.is-active { background: #f6e9ed; border-color: var(--primary-color); color: var(--primary-color); font-weight: 700; box-shadow: none; }
.tur-pill:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* ===========================================================================
   Table look copied from the prototype (Turnaround page only):
   pink header #F6ECEF with dark maroon text #5A2636, striped rows #FCF8F9, hover #F9EEF2.
   The prototype's own rules:  th,[role=columnheader]{background:#F6ECEF!important;color:#5A2636!important}
   [role=row]:nth-child(even) > [role=cell]{background:#FCF8F9}   [role=row]:hover > [role=cell]{background:#F9EEF2}
   =========================================================================== */

/* -- manager-wise grid -- */
.tur-page .tur-mw__head > span,
.tur-page .tur-mw__sub > span { background: #F6ECEF !important; color: #5A2636 !important; }
.tur-page .tur-mw__row[role="row"]:nth-child(even) > [role="cell"] { background: #FCF8F9; }
.tur-page .tur-mw__row[role="row"]:hover > [role="cell"] { background: #F9EEF2; }

/* -- job grid and the drill-down list -- */
.tur-page .bud-tr--head,
.tur-page .bud-tr--head > * { background: #F6ECEF !important; }
.tur-page .bud-tr--head .bud-th,
.tur-page .bud-tr--head.bud-tr .bud-th { color: #5A2636; }
.tur-page .bud-tr--head > .bud-th:not(.is-sorted) { color: #5A2636 !important; }   /* the sorted column keeps the theme colour */

/* Stripes are painted on the whole ROW and the cells inherit it (cells are only as tall as their text, so
   tinting the cells alone leaves gaps; the frozen cells also need an opaque background).
   Main job grid: a filter row follows the header, so its first data row is an ODD child; the prototype
   tints its first data row, hence odd. */
.tur-page .bud-table-card .bud-table > .bud-tr:not(.bud-tr--head):not(.bud-tr--filter) { background: #fff; }
.tur-page .bud-table-card .bud-table > .bud-tr:not(.bud-tr--head):not(.bud-tr--filter):nth-child(odd) { background: #FCF8F9; }
.tur-page .bud-table-card .bud-table > .bud-tr:not(.bud-tr--head):not(.bud-tr--filter):hover { background: #F9EEF2; }
.tur-page .bud-table-card .bud-table > .bud-tr:not(.bud-tr--head):not(.bud-tr--filter) > span { background: inherit; }

/* drill-down list: header is child 1, first data row child 2 (even) as in the prototype; total row keeps its own tint */
.tur-page .mj-dialog .bud-table > .bud-tr.mj-tr:not(.bud-tr--head):not(.mj-tr--total) { background: #fff; }
.tur-page .mj-dialog .bud-table > .bud-tr.mj-tr:not(.bud-tr--head):not(.mj-tr--total):nth-child(even) { background: #FCF8F9; }
.tur-page .mj-dialog .bud-table > .bud-tr.mj-tr:not(.bud-tr--head):not(.mj-tr--total):hover { background: #F9EEF2; }
.tur-page .mj-dialog .bud-table > .bud-tr.mj-tr:not(.bud-tr--head):not(.mj-tr--total) > span { background: inherit; }

.tur-mw-scroll { overflow-x: auto; }
.tur-mw { width: max-content; min-width: 100%; }
.tur-mw__row {
    display: grid;
    grid-template-columns: 170px 100px repeat(24, 92px);
}
.tur-mw__row > span {
    box-sizing: border-box; min-width: 0; padding: 6px 12px;
    display: flex; align-items: center; white-space: nowrap;
    border-bottom: 1px solid #f1ece9; background: #fff; font-size: .88rem; color: #3d3236;
}
.tur-r { justify-content: flex-end; text-align: right; }
.tur-n { font-variant-numeric: tabular-nums; }
.tur-gl { border-left: 1px solid #ece6e2; }
.tur-z, .tur-mw__row > .tur-z { color: #a99da1; }
.tur-strong { font-weight: 600; color: #1c1416; }

/* frozen Manager + Total jobs columns */
.tur-mw__m1, .tur-mw__m2 { position: sticky; z-index: 2; }
.tur-mw__m1 { left: 0; box-shadow: 1px 0 0 #ece6e2; }
.tur-mw__m2 { left: 170px; box-shadow: 1px 0 0 #ece6e2; }

/* two sticky header rows */
.tur-mw__head, .tur-mw__sub { position: sticky; z-index: 4; }
.tur-mw__head { top: 0; }
.tur-mw__sub { top: 34px; }
.tur-mw__head > span, .tur-mw__sub > span {
    background: #faf8f6; border-bottom: 1px solid #ece6e2; color: #3d3236;
}
.tur-mw__head > span { font-size: .78rem; font-weight: 700; height: 34px; }
.tur-mw__sub > span {
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5e5357;
    justify-content: flex-end;
}
.tur-mw__bh { grid-column: span 4; justify-content: center; border-left: 1px solid #ece6e2; }

.tur-mw__data:hover > span { background: #fcfafa; }
.tur-mw__foot > span { background: #faf8f6; font-weight: 700; border-top: 2px solid #ece6e2; border-bottom: 0; }
.tur-mw__note { padding: 14px 22px; border-top: 1px solid #ece6e2; font-size: .84rem; color: #6b5f63; }

/* clickable job count */
.tur-cnt {
    min-width: 36px; min-height: 30px; padding: 0 8px; margin: -4px -8px -4px 0;
    border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer;
    font: inherit; font-weight: 700; color: var(--primary-color);
    text-decoration: underline; text-decoration-color: rgba(122, 31, 43, .35); text-underline-offset: 3px;
}
.tur-cnt:hover { background: #f6e9ed; border-color: #e6cbd3; text-decoration-color: var(--primary-color); }
.tur-cnt:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 1px; }

/* ------------------- manager drill-down popup (list of jobs) ------------------- */
/* fixed height so the popup does not re-centre (and leave an open filter panel behind) when the list shrinks */
.mj-dialog { max-width: 1180px; height: min(760px, 90vh); }
.mj-top__kicker { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.mj-top__text { min-width: 0; }
.mj-top__text .jm-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 2px; }
.mj-count { font-size: .76rem; font-weight: 700; background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 2px 11px; }

.mj-bar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px;
    padding: 16px 24px; border-bottom: 1px solid #ece6e2; background: #faf7f8;
}
.mj-fld { display: flex; flex-direction: column; gap: 5px; min-width: 200px; }
.mj-fld--grow { flex: 1 1 220px; max-width: 340px; }
.mj-fld__k { font-size: .72rem; font-weight: 700; letter-spacing: .03em; color: #9a9095; text-transform: uppercase; }
.mj-input {
    box-sizing: border-box; width: 100%; border: 1px solid #d9dde3; border-radius: 9px;
    padding: 8px 10px; font-size: .88rem; color: var(--ink); background: #fff; outline: none;
}
.mj-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(122, 31, 43, .12); }
.mj-sum { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.mj-chip {
    font-size: .8rem; color: #4b4145; background: #f0eef0; border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}
.mj-chip strong { margin-left: 3px; font-variant-numeric: tabular-nums; }
.mj-chip--brand { background: #fbe9ec; color: #a31f15; }
.mj-chip--info { background: #e8f0fe; color: #2251b5; }

.mj-body { overflow: auto; flex: 1; min-height: 160px; }
.bud-tr.mj-tr { grid-template-columns: 56px 170px minmax(200px, 1fr) 140px 160px 160px 160px 140px; }
/* no frozen columns in the popup (the Budget grid freezes the first three) */
.bud-tr.mj-tr > :nth-child(-n+3) { position: static; background: transparent; border-right: 0; }
/* total row (prototype .lgt): #FAF8F6, bold, 2px top rule; painted on the row so the cells do not look like boxes */
.bud-tr.mj-tr.mj-tr--total { background: #FAF8F6; }
.bud-tr.mj-tr.mj-tr--total > span { background: inherit; font-weight: 700; border-top: 2px solid #ece6e2; }
.mj-total__label { grid-column: span 3; }
.mj-foot { border-top: 1px solid #ece6e2; }

/* ------------------------------- placeholder ----------------------------- */
.tur-placeholder {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 48px 20px; color: #6b5f63; font-size: .95rem;
}
.tur-placeholder .material-symbols-rounded { font-size: 34px; color: #cdbfc3; }

/* ------------------------------ responsive ------------------------------- */
@media (max-width: 680px) {
    .tur-bucket { grid-template-columns: 96px 1fr 84px; column-gap: 10px; padding: 0 8px; font-size: .86rem; }
    .tur-title { font-size: 1.7rem; }
    .tur-kpi__value { font-size: 1.7rem; }
}