/* The WFM console's own classes, on top of portal.css (the Configuration Portal's design system, copied as is).
   From the approved "CLASS WFM Designs" canvas (Real-Time Adherence, Forecasts, Schedules, Historical). The
   Content-Security-Policy allows no inline style: every size here is a class, or an SVG attribute in the template. */

/* layout helpers */
.kpis-gap,.alert-gap,.tabs-gap{margin-bottom:16px}
.col-gap{display:flex;flex-direction:column;gap:16px}
.notices{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.notices:empty{display:none;margin:0}
.split>.side{display:flex;flex-direction:column;gap:16px}
.split>.main.col-gap{display:flex}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.checks{display:flex;flex-wrap:wrap;gap:8px 18px}
.checks label.row,.card-h label.row,.field label.row{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;text-transform:none;letter-spacing:0;color:var(--text);font-weight:400}
.form-card{max-width:640px}
.field-gap{margin-bottom:12px}
.field-btn{justify-content:flex-end}
.inline-form{display:inline-flex;align-items:center;gap:6px}
.inline-form .input{height:34px}
.s{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.acts form{display:inline-flex}
.tbl .acts{flex-wrap:nowrap}
.um-pop a.um-item{text-decoration:none}
.dropdown>.um-pop{left:auto;right:0}
.kpi .v .u{font-size:18px}

/* navigation: the item not built yet */
.nv .soon{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nav-lbl);border:1px solid var(--nav-line);border-radius:9px;padding:1px 7px;white-space:nowrap}

.app .tbl td.wrap,.tbl td.wrap{white-space:normal;min-width:220px}
.nv.nv-soon>span:not(.soon){white-space:nowrap}
.nv .soon{font-size:9.5px;padding:1px 6px}

/* live indicator (design: live-dot) */
.live-note{display:inline-flex;align-items:center;gap:7px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--ok-bg);display:inline-block}
.live-dot.stale{background:var(--chart-inactive);box-shadow:0 0 0 3px var(--neu-bg)}

/* segmented control */
.segc{display:inline-flex;border:1px solid var(--border-strong);border-radius:4px;overflow:hidden}
.segc .btn{border-radius:0;background:transparent;color:var(--link);text-decoration:none;border:0}
.app .segc .btn.on{background:var(--primary);color:var(--on-primary)}

/* agents, states, legends */
.ag{display:flex;align-items:center;gap:10px}
.ag small{display:block;color:var(--muted);font-size:11.5px}
.ag small.warn-note{color:var(--text);font-weight:600}
.st{display:inline-flex;align-items:center;gap:6px}
.sq{width:10px;height:10px;border-radius:2px;display:inline-block;flex:none}
.c-phone{background:var(--chart-1)}
.c-chat{background:var(--chart-2)}
.c-email{background:var(--chart-3)}
.c-break{background:var(--chart-4)}
.c-lunch{background:var(--chart-5)}
.c-train{background:var(--chart-3)}
.c-off{background:var(--chart-inactive)}
.c-exc{background:var(--chart-crit)}
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12.5px;color:var(--text-2)}
.lg{display:inline-flex;align-items:center;gap:6px}
.tbl tr.hot td{background:var(--err-tint)}

/* adherence by team: bars are SVG (width is an attribute) */
.team{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--border)}
.team:first-of-type{border-top:0;padding-top:0}
.team .tt{display:flex;justify-content:space-between;font-size:13px}
svg.bar{display:block;width:100%;height:8px}
svg.bar .bar-bg{fill:var(--surface-3)}
svg.bar .bar-v{fill:var(--chart-1)}
.ex-list{display:flex;flex-direction:column;gap:12px}
.ex .acts{margin-top:6px}

/* forecast chart */
.fchart{width:100%;height:auto;display:block;background:var(--chart-plate)}
.fchart .grid{stroke:var(--chart-grid);stroke-width:1}
.fchart .axis{fill:var(--chart-axis);font-size:11px;font-family:Figtree,sans-serif}
.fchart .fc{fill:none;stroke:var(--chart-1);stroke-width:2.5}
.fchart .ac{fill:none;stroke:var(--chart-2);stroke-width:2.5}
.fchart .now{stroke:var(--chart-axis);stroke-width:1;stroke-dasharray:4 4}
.ln{width:18px;height:3px;border-radius:2px;display:inline-block}
.ln-f{background:var(--chart-1)}
.ln-a{background:var(--chart-2)}
.sday{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border);font-size:13px}
.sday:first-child{border-top:0;padding-top:0}

/* filters bar */
.fbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:12px 16px;border-bottom:1px solid var(--border)}
.fbar .field{flex:1 1 150px}

/* schedules: Gantt (hours and net staffing are flex cells; bars are SVG rects) */
.datebar{display:flex;align-items:center;gap:6px}
.gwrap{overflow-x:auto}
.gantt{min-width:860px;padding-bottom:8px}
.grow{display:flex;align-items:center;border-top:1px solid var(--border);min-height:40px}
.grow.ghead{border-top:0;min-height:30px}
.gname{flex:0 0 190px;padding:0 12px;font-size:13px;display:flex;flex-direction:column;justify-content:center}
.gname small{color:var(--muted);font-size:11.5px}
.hours{flex:1;display:flex;margin-right:16px}
.hours span{flex:1 1 0;text-align:center;font-size:11px;color:var(--chart-axis)}
.hours.nets span{margin:0 2px;height:22px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;border-radius:3px;font-family:"JetBrains Mono",monospace}
.net.ok{background:var(--ok-tint);color:var(--ok-fg)}
.net.under{background:var(--err-bg);color:var(--err-fg)}
.net.over{background:var(--info-tint);color:var(--info-fg)}
svg.gtrack{flex:1;height:22px;margin-right:16px;display:block;min-width:0}
svg.gtrack .tick{stroke:var(--chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}
svg.gtrack .nowl{fill:var(--chart-crit)}
svg.gtrack .seg.c-phone{fill:var(--chart-1)}
svg.gtrack .seg.c-chat{fill:var(--chart-2)}
svg.gtrack .seg.c-email,svg.gtrack .seg.c-train{fill:var(--chart-3)}
svg.gtrack .seg.c-break{fill:var(--chart-4)}
svg.gtrack .seg.c-lunch{fill:var(--chart-5)}
svg.gtrack .seg.c-off{fill:var(--chart-inactive)}
svg.gtrack .seg.c-exc{fill:var(--chart-crit)}
.req{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border);font-size:13px}
.req:first-child{border-top:0;padding-top:0}

/* historical */
.sq-nice{background:var(--orange)}
.sq-class{background:var(--primary)}
.job{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border);flex-wrap:wrap}
.job:first-child{border-top:0;padding-top:0}
.job .jt{flex:1 1 160px;min-width:0;font-size:13px}
.job .jt small{display:block;color:var(--muted);font-size:11.5px}
.tbl tfoot td{font-weight:700;background:var(--surface-3)}

/* sign-in and error pages */
.signin{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 16px;background:var(--surface-2)}
.signin-brand{display:flex;align-items:center;gap:10px;color:var(--text)}
.signin-brand .bt{font-weight:800;letter-spacing:.06em;font-size:18px}
.signin-brand .bs{font-size:17px;color:var(--muted)}
.signin-brand .brand-div{background:var(--border-strong)}
.signin-card{width:100%;max-width:460px}
.signin-card .card-b{display:flex;flex-direction:column;gap:14px}
.signin-card p{margin:0}
.empty-card .card-b p{margin:8px 0 0}

@media (max-width:640px){
    .row3{grid-template-columns:1fr}
    .gname{flex-basis:130px}
}

/* /auth/portal: shown or hidden by console-auth.js */
.hidden{display:none!important}