/* Pages built from the approved pictures (Jobs, Clients, Reporting). Colours only from tokens.css. Desktop first, 1280 minimum. */
.pg { max-width: 1480px; }
.pg h1 { margin: 0 0 2px; }
.ico { width: 18px; height: 18px; flex: none; }
.inert-ico { color: var(--muted); opacity: .55; }
.tabsbar { display: flex; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-card); padding: 0 12px; margin-bottom: 16px; overflow-x: auto; }
.ptab { font: inherit; font-size: 15px; background: none; border: 0; border-bottom: 3px solid transparent; padding: 16px 18px 13px; cursor: pointer; color: var(--text); white-space: nowrap; }
.ptab:hover { color: var(--brand-blue); }
.ptab[aria-selected="true"] { color: var(--brand-blue); font-weight: 600; border-bottom-color: var(--brand-blue); }
.tabsbar.green .ptab[aria-selected="true"] { color: var(--brand-green); border-bottom-color: var(--brand-green); }
.tabsbar.green .ptab:hover { color: var(--brand-green); }
.filters { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.searchbox { flex: 1 1 360px; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 0 14px; min-height: 46px; max-width: 760px; }
.searchbox:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.searchbox .ico { color: var(--brand-blue); }
.searchbox input { border: 0; outline: 0; min-width: 0; flex: 1; min-height: 40px; padding: 0; background: transparent; font-size: 15px; }
.selectbox { position: relative; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 0 12px; min-height: 46px; min-width: 200px; }
.selectbox select { border: 0; background: transparent; min-width: 0; flex: 1; min-height: 40px; padding: 0 4px; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer; }
.selectbox select:disabled { cursor: not-allowed; color: var(--muted); }
.selectbox .ico { color: var(--muted); }
.selectbox.float { flex-direction: column; align-items: stretch; justify-content: center; padding-top: 4px; }
.selectbox.float .fl { font-size: 12px; color: var(--muted); margin: 0; font-weight: 400; padding: 0 4px; }
.spacer { flex: 1; }
.ghostbtn { font: inherit; background: transparent; border: 0; color: var(--muted); padding: 8px 14px; border-radius: var(--radius-s); cursor: pointer; }
.ghostbtn:hover { background: var(--surface); color: var(--text); }

.tcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-card); overflow-x: auto; margin-bottom: 16px; }
.trow { display: grid; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
.trow.head { background: var(--surface-2); font-weight: 700; font-size: 13px; color: var(--text); padding-top: 14px; padding-bottom: 14px; }
.trow:last-child { border-bottom: 0; }
.jrow { grid-template-columns: 28px minmax(220px, 2fr) minmax(140px, 1fr) minmax(300px, 1.5fr) minmax(250px, 1fr); min-width: 1000px; border-bottom: 6px solid var(--surface); }
.jrow.tint-review { background: var(--info-bg); }
.jrow.tint-ok { background: var(--ok-bg); }
.jrow.tint-warn { background: var(--warn-bg); }
.jrow.tint-response { background: var(--response-bg); }
.jrow.head { background: var(--surface-2); border-bottom: 1px solid var(--border-soft); }
.j-name { font-weight: 700; font-size: 16px; word-break: break-word; }
.j-job { color: var(--muted); font-size: 14px; }
.j-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: center; }
.cnt { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; min-height: 32px; }
.cnt .badge { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.cnt .badge .ico { width: 18px; height: 18px; }
.cnt.review { color: var(--info); } .cnt.review .badge { color: var(--info); }
.cnt.queries { color: var(--warn); } .cnt.queries .badge { background: var(--warn-bg); color: var(--warn); }
.cnt.response { color: var(--response); } .cnt.response .badge { background: var(--response-bg); color: var(--response); }
.cnt.nodata { color: var(--muted); font-weight: 400; }
.cnt.nodata .badge { background: transparent; color: var(--muted); opacity: .6; }
.j-act { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.openbtn { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; text-decoration: none; color: var(--brand-blue); background: var(--surface); border: 1px solid var(--brand-blue); border-radius: var(--radius-s); min-height: 38px; padding: 4px 14px; cursor: pointer; }
.openbtn:hover { background: var(--brand-blue-light); }
.openbtn[aria-disabled="true"] { color: var(--muted); border-color: var(--border); cursor: not-allowed; background: var(--surface); }
.openbtn[aria-disabled="true"]:hover { background: var(--surface); }
.dotsbtn { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-s); }
.chev { color: var(--text); }
.pgfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 0 16px; }
.pager { display: flex; gap: 6px; align-items: center; }
.pager button { font: inherit; min-width: 38px; min-height: 38px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-s); cursor: pointer; color: var(--text); }
.pager button[aria-current="page"] { background: var(--brand-blue); color: var(--white); border-color: var(--brand-blue); }
.pager button:disabled { opacity: .45; cursor: not-allowed; }
.legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-card); padding: 16px 20px; }
.lg { display: flex; gap: 12px; align-items: center; }
.lg .badge { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lg .badge .ico { width: 22px; height: 22px; }
.lg b { display: block; font-size: 14px; }
.lg span.t { color: var(--muted); font-size: 13px; }
.b-ok { background: var(--ok-bg); color: var(--ok); } .b-info { background: var(--info-bg); color: var(--info); } .b-warn { background: var(--warn-bg); color: var(--warn); } .b-resp { background: var(--response-bg); color: var(--response); }

/* Not available yet panel: the picture's layout stays, the data is honestly missing */
.na { border: 1px dashed var(--brand-green-mid); background: var(--surface-2); border-radius: var(--radius-m); padding: 16px 18px; color: var(--text); }
.na b { display: block; margin-bottom: 4px; }
.na .btn-row { margin-top: 10px; }
.na-inline { color: var(--muted); font-size: 13px; }
.note-strip { background: var(--info-bg); color: var(--info); border-radius: var(--radius-s); padding: 8px 14px; margin: 0 0 14px; font-size: 13px; font-weight: 600; }
.cardx { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-card); padding: 18px 20px; }
.cardx h2 { font-size: 16px; margin: 0 0 4px; }
.cardx .sub2 { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.skel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 16px; }
.skel .sk-line { height: 54px; }
@media (max-width: 1365px) { .hide-1366 { display: none !important; } }
@media (max-width: 1279px) { .legend { grid-template-columns: repeat(2, 1fr); } }

/* Clients list and Client Sheet */
.crow { grid-template-columns: minmax(240px, 2.4fr) repeat(2, minmax(90px, 1fr)) minmax(120px, 1.2fr) minmax(100px, 1fr) minmax(80px, .8fr) minmax(80px, .8fr) minmax(100px, 1fr) minmax(90px, .8fr) 24px; min-width: 1100px; cursor: pointer; }
.crow:not(.head):hover { background: var(--brand-green-light); }
.crow.head { cursor: default; }
.c-name { display: flex; align-items: center; gap: 12px; }
.c-link { font-weight: 600; color: var(--text); text-decoration: none; }
.c-link:hover { color: var(--brand-blue); text-decoration: underline; }
.etype { width: 34px; height: 34px; border-radius: var(--radius-s); background: var(--brand-green-light); color: var(--brand-green); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.etype.big { width: 52px; height: 52px; } .etype.big .ico { width: 30px; height: 30px; }
.dash { color: var(--muted); }
.cs-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.backlink { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-blue); text-decoration: none; font-weight: 500; }
.backlink:hover { text-decoration: underline; }
.switch { position: relative; display: flex; align-items: center; gap: 10px; }
.switch-l { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 11px 14px; font-weight: 500; }
.switch-box { display: flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 0 6px 0 12px; min-height: 46px; width: 380px; }
.switch-box:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.switch-box input { border: 0; outline: 0; flex: 1; min-width: 0; min-height: 40px; background: transparent; font-weight: 600; font-size: 15px; padding: 0 4px; }
.iconbtn.plain { border: 0; background: transparent; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-s); }
.iconbtn.plain:hover { background: var(--surface-2); }
.switch-list { position: absolute; top: 52px; left: 74px; width: 380px; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); box-shadow: var(--shadow-float); z-index: 30; }
.switch-list .opt { border-bottom: 1px solid var(--border-soft); }
.xerobtn { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 600; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); min-height: 44px; padding: 4px 16px; cursor: pointer; }
.xerobtn[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }
.xmark { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-blue); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.cs-title { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cs-title h1 { margin: 0; }
.cs-title p { margin: 2px 0 0; }
.cs-tabs { padding: 0 8px; }
.cs-tabs .ptab { padding: 14px 14px 11px; font-size: 14px; }
.cs-cards { display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: 14px; margin-bottom: 16px; }
.cet-kpis { grid-template-columns: repeat(5, 1fr) 1.2fr; align-items: stretch; }
.cs-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-card); padding: 16px 18px; display: flex; gap: 12px; align-items: center; }
.cs-card.jobcard > div, .cs-card.kpi > div { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.cs-card#ov-metrics { flex-direction: column; align-items: stretch; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ring { width: 52px; height: 52px; border-radius: 50%; border: 5px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 700; flex: none; }
.ring.ok { border-color: var(--ok-bg); color: var(--ok); } .ring.resp { border-color: var(--response-bg); color: var(--response); }
.cs-grid { display: grid; grid-template-columns: 1.1fr 1.2fr 1.2fr; gap: 14px; align-items: start; }
.cs-col { display: flex; flex-direction: column; gap: 14px; }
.cardx-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cardx-head h2 { margin: 0; }
.kv.ci { grid-template-columns: 140px 1fr; font-size: 14px; }
.steps { list-style: none; margin: 0 0 16px; padding: 12px 16px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }
.steps li { display: flex; gap: 10px; align-items: center; }
.stepn { width: 32px; height: 32px; border-radius: 50%; background: var(--neutral-bg); color: var(--neutral); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.cet-grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 14px; align-items: start; }
.cats { list-style: none; margin: 0 0 8px; padding: 0; }
.cats li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.chips-row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.chipbtn { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 14px; font-weight: 600; font-size: 13px; color: var(--muted); background: var(--surface-2); cursor: not-allowed; }
.mt { margin-top: 18px; }
@media (max-width: 1439px) { .cs-cards, .cet-kpis { grid-template-columns: repeat(3, 1fr); } .cet-grid { grid-template-columns: 1fr 1fr; } .steps { grid-template-columns: repeat(3, 1fr); } }
.cs-tabs .ptab { padding: 14px 10px 11px; font-size: 13.5px; }
.cardx-head .linkbtn, .cs-card .linkbtn { white-space: nowrap; }
.pg .filters .searchbox { flex: 1 1 460px; }
.cs-tabs { overflow-x: auto; }
.cet-kpis .ring { width: 44px; height: 44px; border-width: 4px; }
.cet-kpis .cs-card { padding: 14px; }
.selectbox.float select { font-size: 13px; text-overflow: ellipsis; }

/* Reporting */
.rp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.rp-ctl { display: flex; gap: 12px; align-items: center; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; }
.seg button { font: inherit; font-weight: 600; background: transparent; border: 0; min-height: 44px; padding: 0 44px; cursor: pointer; color: var(--text); }
.seg button.on { background: var(--brand-blue); color: var(--white); }
.seg.small button { min-height: 38px; padding: 0 22px; font-size: 14px; }
.seg.small { margin-bottom: 14px; }
.mod-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mod-head h2 { font-size: 20px; }
.cardx.mod { margin-bottom: 16px; }
.cardx.tight { padding: 14px 16px; }
.big { font-size: 32px; font-weight: 700; line-height: 1.15; }
.lg-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; }
.lg-side { display: grid; gap: 12px; }
.lchart { width: 100%; height: auto; }
.lchart .grid { stroke: var(--border-soft); } .lchart .axis { font-size: 11px; fill: var(--muted); } .lchart .axis.b { fill: var(--text); font-weight: 600; }
.lchart .tline { fill: none; stroke: var(--series-target); stroke-width: 2; stroke-dasharray: 6 5; } .lchart .tdot { fill: var(--series-target); }
.legend-line { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.lk { width: 30px; height: 0; border-top: 3px solid var(--series-actual); display: inline-block; } .lk.target { border-top: 2px dashed var(--series-target); margin-left: 12px; }
.mtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.mtable th { text-align: left; background: var(--surface-2); padding: 10px 12px; font-size: 13px; }
.mtable td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.mtable.wide { margin-bottom: 8px; }
.rp-two { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
.rp-two > .cardx { margin-bottom: 16px; }
.plan-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.plist { list-style: none; margin: 8px 0 0; padding: 0; } .plist li { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border-soft); }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .sw.bk { background: var(--series-bk); } .sw.gst { background: var(--series-gst); border: 1px solid var(--series-gst-edge); } .sw.aa { background: var(--series-aa); } .sw.co { background: var(--series-co); border: 1px solid var(--series-co-edge); }
.stepper { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: var(--radius-s); padding: 2px; background: var(--surface); }
.stepper span { min-width: 140px; text-align: center; font-weight: 600; }
.stepper button { border: 0; background: transparent; min-width: 36px; min-height: 36px; cursor: pointer; border-radius: var(--radius-s); color: var(--text); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.mo-grid { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; margin: 12px 0; }
.donut { width: 170px; height: 170px; border-radius: 50%; border: 18px solid var(--track); display: flex; align-items: center; justify-content: center; text-align: center; }
.donut b { display: block; font-size: 28px; }
.rows3 { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; }
.rows3 dt { background: var(--surface-2); padding: 12px 14px; border-radius: var(--radius-s) 0 0 var(--radius-s); } .rows3 dd { margin: 0; background: var(--surface-2); padding: 12px 14px; font-weight: 700; text-align: right; border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.sum4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; text-align: center; }
@media (max-width: 1439px) { .lg-grid, .plan-grid, .rp-two { grid-template-columns: 1fr; } }
.set-menu { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--border); max-width: 880px; }
.set-h { margin: 28px 0 12px; scroll-margin-top: 16px; }
.orow { grid-template-columns: minmax(240px, 2fr) minmax(170px, 1fr) minmax(200px, 1.3fr) minmax(160px, 1fr) minmax(120px, .8fr); min-width: 980px; }
.orow.tint-warn { background: var(--warn-bg); }
.cnt.response.nodata { opacity: .85; }
.num-blue { color: var(--brand-blue); font-weight: 600; } .num-red { color: var(--danger); font-weight: 700; }
.big-n { font-size: 26px; font-weight: 700; }
.mini { list-style: none; margin: 0; padding: 0; } .mini li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.lchart .bar { stroke: var(--surface); stroke-width: 1.5; } .lchart .bar.bk { fill: var(--series-bk); } .lchart .bar.gst { fill: var(--series-gst); stroke: var(--series-gst-edge); } .lchart .bar.aa { fill: var(--series-aa); } .lchart .bar.co { fill: var(--series-co); stroke: var(--series-co-edge); }
.lchart .bar:focus { outline: 2px solid var(--focus-ring); }