/* Workforce, field operations and safety (wfm- prefix). */

/* Section tabs. */
.wfm-tabs { display: flex; gap: 2px; border-bottom: 2px solid #d6e0e9; overflow-x: auto; scrollbar-width: thin; }
.wfm-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; font-size: 12.5px; font-weight: 700; color: #4b6074; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px; min-height: 40px; }
.wfm-tabs a:hover { color: var(--brand-primary); }
.wfm-tabs a.on { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }

/* Pools strip. */
.wfm-pools { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.wfm-pool { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 1px solid #d6e0e9; border-radius: 4px; background: #fff; color: #0d2233; border-left: 4px solid #2083ee; min-width: 0; }
.wfm-pool b { font-size: 13px; } .wfm-pool span { font-size: 11.5px; color: #5b6f82; }
.wfm-pool:hover, .wfm-pool.on { background: #f0f6fd; border-color: #9cc3ef; }
.wfm-tag { display: inline-block; font-size: 11px; background: #eef3f8; color: #3d5a76; border-radius: 9px; padding: 1px 7px; margin: 1px 3px 1px 0; white-space: nowrap; }
.wfm-skill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; background: #f4f7fa; border: 1px solid #e0e7ed; border-radius: 10px; padding: 1px 8px; margin: 1px 4px 1px 0; white-space: nowrap; }

/* Skill level dots. */
.wfm-level { display: inline-flex; gap: 2px; vertical-align: middle; }
.wfm-level i { width: 7px; height: 7px; border-radius: 50%; background: #dbe3ea; }
.wfm-level i.on { background: #13a37c; }

/* Load bar. */
.wfm-loadbar { display: inline-block; position: relative; width: 70px; height: 7px; border-radius: 4px; background: #e6edf3; vertical-align: middle; overflow: hidden; }
.wfm-loadbar.wide { display: block; width: 100%; height: 9px; margin: 4px 0 8px; }
.wfm-loadbar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, #1a7fe0, #2bb3d9); }
.wfm-loadbar > span.over { background: linear-gradient(90deg, #e8365d, #c01d47); }
.wfm-loadbar > span.low { background: #f5a524; }
.wfm-loadbar > span.ok { background: linear-gradient(90deg, #13b985, #04955d); }

/* Certification state. */
.wfm-cert { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.wfm-cert.valid { background: #e3f6ee; color: #0d7a50; }
.wfm-cert.expiring { background: #fff4dc; color: #8a5a00; }
.wfm-cert.expired { background: #fde8ea; color: #b42335; }

/* Skills matrix. */
.wfm-matrixwrap { overflow-x: auto; }
.wfm-matrix th.c { vertical-align: bottom; height: 120px; padding: 4px 2px; min-width: 34px; }
.wfm-matrix th.c span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 11.5px; }
.wfm-matrix td.c { padding: 3px 2px; }
.wfm-mname { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 170px; }
.wfm-lv { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; border-radius: 3px; font-size: 12px; font-weight: 700; color: #0d2233; }
.wfm-lv i { font-size: 10px; margin-left: -1px; }
.wfm-lv.l0 { background: transparent; }
.wfm-lv.l1 { background: #e9f2fc; } .wfm-lv.l2 { background: #c9e0f8; } .wfm-lv.l3 { background: #8fc0f0; }
.wfm-lv.l4 { background: #3f93e6; color: #fff; } .wfm-lv.l5 { background: #0962d3; color: #fff; }

/* Capacity heat. */
.wfm-heat td.c { padding: 4px; }
.wfm-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 76px; padding: 5px 4px; border-radius: 4px; background: #e8f5ef; color: #0d5c3f; font-weight: 700; font-size: 13px; }
.wfm-cell small { font-weight: 500; font-size: 10.5px; color: inherit; opacity: .8; }
.wfm-cell.amber { background: #fff1d1; color: #7a4f00; }
.wfm-cell.red { background: #fde3e7; color: #a01d33; }
.wfm-cell.low { background: #eaf1fb; color: #24548c; }
.wfm-cellform { display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end; }
.wfm-cellform .ct-input { width: 84px; text-align: right; }
.wfm-inlineform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wfm-inlineform .ct-input { min-width: 0; flex: 1 1 140px; }
.wfm-score { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 22px; border-radius: 11px; font-size: 12px; font-weight: 700; color: #fff; background: hsl(calc(var(--s) * 1.3), 62%, 42%); }
.wfm-steps { margin: 0; padding-left: 18px; font-size: 12.5px; color: #33475b; } .wfm-steps li { margin-bottom: 6px; }

/* Roster. */
.wfm-roster th.today, .wfm-roster td.today { background: #f2f8ff; }
.wfm-roster th.we, .wfm-roster td.we { background: #fafbfc; }
.wfm-rname { min-width: 150px; }
.wfm-rcell { min-width: 112px; vertical-align: top; padding: 4px !important; position: relative; }
.wfm-rcell.leave { background: repeating-linear-gradient(135deg, #fff8ec, #fff8ec 6px, #fff1d8 6px, #fff1d8 12px); }
.wfm-rcell.unav { background: #f6f6f8; }
.wfm-shift { display: block; position: relative; font-size: 11.5px; font-weight: 700; padding: 4px 18px 4px 7px; border-radius: 4px; margin-bottom: 3px; background: #dbeafb; color: #0b4a91; border-left: 3px solid #2083ee; line-height: 1.25; }
.wfm-shift small { display: block; font-weight: 500; font-size: 10.5px; color: #3d5a76; }
.wfm-shift.split { background: #efe8fb; color: #4a2bb0; border-left-color: #7553d6; }
.wfm-shift.rotating { background: #dff4f9; color: #0c6a8e; border-left-color: #29b6db; }
.wfm-shift.flexible { background: #e3f6ee; color: #0d7a50; border-left-color: #13b985; }
.wfm-shift.planned { border-left-style: dashed; opacity: .85; }
.wfm-shift.absent { text-decoration: line-through; opacity: .5; }
.wfm-shift .x { position: absolute; right: 2px; top: 2px; margin: 0; }
.wfm-shift .x button { border: 0; background: transparent; color: #5b6f82; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 3px; }
.wfm-leave, .wfm-unav { display: block; font-size: 11px; font-weight: 700; color: #8a5a00; padding: 2px 4px; }
.wfm-unav { color: #5b6f82; font-weight: 500; }
.wfm-add { display: block; width: 100%; min-height: 30px; border: 1px dashed #c9d5e0; border-radius: 4px; background: transparent; color: #8a9bb0; cursor: pointer; }
.wfm-add:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: #f5f9fe; }
.wfm-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wfm-legend .wfm-shift { display: inline-block; margin: 0; padding: 2px 8px; }
.wfm-cycle { display: flex; gap: 2px; margin-top: 4px; flex-wrap: wrap; }
.wfm-cycle i { width: 12px; height: 8px; border-radius: 2px; background: #e6edf3; }
.wfm-cycle i.on { background: #2083ee; }
.wfm-pick { border: 1px solid #e0e7ed; border-radius: 4px; padding: 8px 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; max-height: 200px; overflow: auto; }
.wfm-minirota td.c, .wfm-minirota th.c { padding: 4px 2px; min-width: 28px; }
.wfm-minirota th.today { color: var(--brand-primary); }
.wfm-dotshift { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: #2083ee; margin: 0 1px; }
.wfm-dotshift.split { background: #7553d6; } .wfm-dotshift.rotating { background: #29b6db; } .wfm-dotshift.flexible { background: #13b985; }
.wfm-dotshift.planned { opacity: .45; } .wfm-dotshift.absent { background: #97a6b8; } .wfm-dotshift.leave { background: #f5a524; border-radius: 50%; }

/* Dispatch board. */
.wfm-queue { display: flex; flex-direction: column; gap: 8px; padding: 10px; max-height: 78vh; overflow: auto; }
.wfm-wo { border: 1px solid #d6e0e9; border-left: 4px solid #97a6b8; border-radius: 4px; padding: 8px 10px; background: #fff; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.wfm-wo.urgent { border-left-color: #e8365d; } .wfm-wo.high { border-left-color: #f5a524; } .wfm-wo.normal { border-left-color: #2083ee; }
.wfm-wo .h { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.wfm-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.wfm-tech { border: 1px solid #d6e0e9; border-radius: 5px; background: #fff; display: flex; flex-direction: column; min-width: 0; }
.wfm-tech header { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #e6edf3; }
.wfm-tech header .sub { display: block; font-size: 11.5px; color: #111111; }
.wfm-tech header .r { text-align: right; }
.wfm-tech footer { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: center; padding: 8px 12px; border-top: 1px solid #e6edf3; background: #fbfcfe; }
.wfm-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.wfm-stops { list-style: none; margin: 0; padding: 4px 0; }
.wfm-stops li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 6px 12px; font-size: 12.5px; border-bottom: 1px solid #f0f3f6; }
.wfm-stops li .sub { display: block; font-size: 11.5px; color: #5b6f82; }
.wfm-stops li.none { display: block; }
.wfm-stops .seq, .wfm-mystops .seq { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #1d4f8f; color: #fff; font-weight: 700; font-size: 12px; }
.wfm-stops li.completed .seq, .wfm-mystops li.completed .seq { background: #13b985; }
.wfm-stops li.on_site .seq, .wfm-stops li.travelling .seq, .wfm-mystops li.on_site .seq, .wfm-mystops li.travelling .seq { background: #f5a524; }

/* Route map. */
.wfm-map { display: block; width: 100%; height: auto; background: #f7fafc; border-bottom: 1px solid #e6edf3; }
.wfm-map .leg { fill: none; stroke: #2083ee; stroke-width: 2.5; stroke-dasharray: 6 4; stroke-linejoin: round; }
.wfm-map .depot { fill: #0b2a57; }
.wfm-map .stop { fill: #1d4f8f; stroke: #fff; stroke-width: 2; }
.wfm-map .stop.completed { fill: #13b985; } .wfm-map .stop.on_site, .wfm-map .stop.travelling { fill: #f5a524; }
.wfm-map .lbl { font-size: 11px; font-weight: 700; text-anchor: middle; font-family: inherit; }
.wfm-map .lbl.light { fill: #fff; }

/* Field (phone) pages. */
.wfm-field .wfm-offline { background: #fff4dc; color: #7a4f00; border: 1px solid #f1d38d; border-radius: 4px; padding: 9px 12px; font-size: 13px; font-weight: 600; }
.wfm-mystops { list-style: none; margin: 0; padding: 0; }
.wfm-mystops li > a { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid #edf1f5; color: #0d2233; min-height: 56px; }
.wfm-mystops li > a:hover { background: #f7fafd; }
.wfm-mystops li.next > a { background: #f0f6fd; box-shadow: inset 4px 0 0 #2083ee; }
.wfm-mystops .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.wfm-mystops .what span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.wfm-mystops li.none { padding: 10px; }
.wfm-bigsteps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wfm-bigsteps .ct-btn, .wfm-wide { width: 100%; justify-content: center; min-height: 48px; font-size: 14px; }
.wfm-brief { background: #f7fafc; border-left: 3px solid #97a6b8; padding: 8px 10px; margin: 8px 0 0; font-size: 13px; }
.wfm-checklist { display: flex; flex-direction: column; gap: 12px; }
.wfm-q { border-bottom: 1px solid #edf1f5; padding-bottom: 10px; }
.wfm-q .lbl { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.wfm-q .req { font-size: 10.5px; font-weight: 700; color: #b42335; margin-left: 6px; text-transform: uppercase; }
.wfm-yn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wfm-yn label { position: relative; }
.wfm-yn input { position: absolute; opacity: 0; inset: 0; }
.wfm-yn span { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid #c9d5e0; border-radius: 4px; font-weight: 700; font-size: 13px; color: #33475b; background: #fff; cursor: pointer; }
.wfm-yn input:checked + span { background: #1d4f8f; color: #fff; border-color: #1d4f8f; }
.wfm-yn label:nth-child(2) input:checked + span { background: #c01d47; border-color: #c01d47; }
.wfm-yn input:focus-visible + span { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.wfm-scan { display: flex; gap: 6px; } .wfm-scan .ct-input { flex: 1; }
.wfm-sig { border: 1px solid #c9d5e0; border-radius: 4px; background: #fff; }
.wfm-sig canvas { display: block; width: 100%; height: 150px; touch-action: none; background: linear-gradient(#fff 80%, #f4f7fa 80%, #f4f7fa 81%, #fff 81%); border-radius: 4px 4px 0 0; cursor: crosshair; }
.wfm-sigbar { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-top: 1px solid #edf1f5; font-size: 12px; }
.wfm-sigshow img, .wfm-photos img.sig { max-width: 260px; border: 1px solid #e0e7ed; border-radius: 4px; background: #fff; }
.wfm-sigshow figcaption { font-size: 12px; color: #5b6f82; }
.wfm-resolution { background: #e8f5ef; border-left: 3px solid #13b985; padding: 8px 10px; font-size: 13px; margin-top: 8px; }
.wfm-sub { border-bottom: 1px solid #e6edf3; }
.wfm-sub .h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px 4px; font-size: 13px; }
.wfm-sub .h .mut { font-size: 11.5px; }
.wfm-photos { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px 12px; }
.wfm-photos img { width: 110px; height: 82px; object-fit: cover; border-radius: 4px; border: 1px solid #e0e7ed; }
.wfm-photo img { max-width: 100%; max-height: 360px; border-radius: 4px; border: 1px solid #e0e7ed; }
.wfm-proc p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; }

/* Contractors. */
.wfm-checks { list-style: none; margin: 0; padding: 6px 0; }
.wfm-checks li { display: flex; gap: 8px; align-items: center; padding: 7px 12px; font-size: 13px; border-bottom: 1px solid #f0f3f6; }
.wfm-checks li.on { color: #0d7a50; }
.wfm-checks form { display: inline; margin: 0; }
.wfm-checks button { border: 0; background: transparent; padding: 0; font-size: 16px; color: inherit; cursor: pointer; min-width: 24px; min-height: 24px; }
.wfm-checks li.on i { color: #13b985; } .wfm-checks li i { color: #97a6b8; }
.wfm-stars { display: inline-block; width: 70px; height: 12px; vertical-align: middle; background: linear-gradient(90deg, #f5a524 calc(var(--r) / 5 * 100%), #e6edf3 0); -webkit-mask: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 14.5px); mask: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 14.5px); border-radius: 2px; }
.wfm-invtotal { font-size: 13.5px; } .wfm-invtotal b { font-size: 15px; }

@media (max-width: 760px) {
    .wfm-board { grid-template-columns: 1fr; }
    .wfm-rcell { min-width: 96px; }
    .wfm-bigsteps { grid-template-columns: 1fr; }
    .wfm-cell { min-width: 64px; font-size: 12px; }
    .wfm-pools { grid-template-columns: 1fr 1fr; }
    .wfm-queue { max-height: none; }
}


/* Pinnacle Premier Bank: black navigation with restrained gold selection accents. */
.ct-top,header.top,.ct-modbar,.topnav,.ct-navtitle,.navtitle,.navbar.bg-primary,.nav-menu.bg-primary,.sidebar.bg-primary{background:#000!important;background-image:none!important;border-color:#252525!important;color:#fff!important}
.ct-top-title,.ct-top-title b,.ct-session,.ct-modbar a,.topnav a,.topnav button,.ct-navtitle span,.navtitle span{color:#fff!important}
.ct-modbar a:hover,.ct-modbar a.on,.topnav a:hover,.topnav a.on,.topnav button:hover,.topnav button.on{background:#242424!important;color:#fff!important}
.ct-sidebar,.shell>.sidebar{background:#f2f2f2!important;border-color:#d3d3d3!important}
.ct-navitem,.navitem{color:#171717!important;background:linear-gradient(#fff,#f3f3f3)!important;border-color:#d0d0d0!important}
.ct-navitem i,.navitem svg{color:#171717!important}
.ct-navitem:hover,.ct-navitem.on,.navitem:hover,.navitem.on,.nav-link.active,.sidebar .nav-link.active{color:#fff!important;background:#111!important;box-shadow:inset 3px 0 0 #c8a34a!important}
.ct-navitem:hover i,.ct-navitem.on i,.navitem:hover svg,.navitem.on svg{color:#e3c375!important}
.ct-navtitle span,.navtitle span{background:#292929!important}
.ct-topbtn,.ct-command,.ct-command input,.ct-top .ct-avatar{background:#171717!important;border-color:#454545!important;color:#fff!important}
.ct-menu .drop a:hover,.ct-menu .drop button:hover{background:#111!important;color:#fff!important}