/* WCC Demo - Workforce Command Center (fictitious data). Every rule is scoped under .wcc-demo-root so the demo can live
   inside any WordPress theme without leaking styles in or out. */
.wcc-demo-root{--bg:#08111f;--surface:#0f1929;--surface2:#162233;--surface3:#1c2d42;--border:#1f3550;--border2:#2a4566;--text:#e2e8f0;--text2:#a7b6c8;
  --muted:#8aa0b4;--accent:#00d4ff;--on-accent:#001018;--accent2:#a78bfa;--ok:#10b981;--warn:#f59e0b;--bad:#f87171;--info:#60a5fa;--th:#1c2d42;--thf:#e6edf5;
  --row:#132033;--shadow:0 10px 30px rgba(0,0,0,.35);
  --c1:#0072B2;--c2:#D55E00;--c3:#009E73;--c4:#CC79A7;--c5:#E69F00;--c6:#56B4E9;
  position:relative;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:14px/1.45 "Segoe UI",Inter,system-ui,-apple-system,Roboto,Arial,sans-serif;
  height:var(--wcc-h,860px);min-height:520px;border-radius:10px;overflow:hidden;text-align:left;box-sizing:border-box;-webkit-font-smoothing:antialiased;container:wcc / inline-size}
.wcc-demo-root.wcc-full{height:100vh;border-radius:0}
.wcc-demo-root[data-theme="light"]{--bg:#eef3f8;--surface:#fff;--surface2:#f8fafc;--surface3:#eef2f7;--border:#dbe3ec;--border2:#c5d1de;--text:#0f172a;--text2:#475569;
  --muted:#5b6b7f;--accent:#0057b8;--on-accent:#fff;--th:#1f2a3d;--thf:#fff;--row:#f1f5f9;--ok:#047857;--warn:#b45309;--bad:#b91c1c;--info:#1d4ed8;--shadow:0 10px 30px rgba(15,23,42,.15)}
.wcc-demo-root *,.wcc-demo-root *::before,.wcc-demo-root *::after{box-sizing:border-box}
.wcc-demo-root a{color:var(--accent);text-decoration:none}
.wcc-demo-root a:hover{text-decoration:underline}
:where(.wcc-demo-root) :where(button,input,select,textarea){font:inherit;color:inherit}
.wcc-demo-root h1,.wcc-demo-root h2,.wcc-demo-root h3,.wcc-demo-root h4{margin:0;line-height:1.25;color:var(--text);font-weight:650;letter-spacing:0;text-transform:none}
.wcc-demo-root p{margin:0 0 8px}
.wcc-demo-root table{margin:0}
.wcc-demo-root :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* banner + top bar */
.wd-banner{background:repeating-linear-gradient(45deg,#7c2d12,#7c2d12 12px,#9a3412 12px,#9a3412 24px);color:#fff;font-size:12px;font-weight:600;padding:4px 12px;text-align:center;flex:0 0 auto}
.wd-top{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--surface);border-bottom:1px solid var(--border);flex:0 0 auto}
.wd-brand{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.wd-brand b{font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase}
.wd-brand span{font-size:11px;color:var(--muted)}
.wd-ham{display:none;background:none;border:1px solid var(--border2);border-radius:8px;padding:4px 9px;cursor:pointer}
.wd-search{position:relative;flex:1;max-width:420px;margin-left:12px}
.wd-search input{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:6px 10px}
.wd-sres{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--surface);border:1px solid var(--border2);border-radius:8px;box-shadow:var(--shadow);z-index:40;max-height:340px;overflow:auto}
.wd-sres a{display:block;padding:6px 10px;border-bottom:1px solid var(--border);color:var(--text)}
.wd-sres a small{color:var(--muted);margin-left:6px}
.wd-sp{flex:1}
.wd-chip-top{font-size:11px;padding:3px 8px;border-radius:6px;background:var(--surface3);border:1px solid var(--border2);color:var(--text2);white-space:nowrap}
.wd-btn{display:inline-flex;align-items:center;gap:5px;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:5px 10px;cursor:pointer;font-size:12.5px;color:var(--text);white-space:nowrap}
.wd-btn:hover{border-color:var(--accent)}
.wd-btn.pri{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600}
.wd-btn.sm{padding:2px 8px;font-size:11.5px}
.wd-btn.danger{border-color:var(--bad);color:var(--bad)}
.wd-btn[disabled]{opacity:.5;cursor:not-allowed}
/* layout */
.wd-body{display:flex;flex:1;min-height:0}
.wd-side{width:250px;flex:0 0 250px;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;padding:8px 0}
.wd-dom{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);padding:12px 16px 4px;font-weight:700}
.wd-nav{display:flex;align-items:center;gap:8px;padding:6px 16px;color:var(--text2);font-size:13px;border-left:3px solid transparent;cursor:pointer}
.wd-nav:hover{background:var(--row);text-decoration:none}
.wd-nav.on{background:var(--surface3);color:var(--text);border-left-color:var(--accent);font-weight:600}
.wd-nav i{width:16px;text-align:center;font-style:normal;opacity:.9}
.wd-main{flex:1;min-width:0;overflow:auto;padding:16px 18px 40px}
.wd-crumb{font-size:12px;color:var(--muted);margin-bottom:6px}
.wd-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.wd-h h1{font-size:20px}
.wd-sub{color:var(--muted);font-size:12.5px;margin-top:2px}
.wd-grid{display:grid;gap:12px}
.wd-g2{grid-template-columns:repeat(2,minmax(0,1fr))}.wd-g3{grid-template-columns:repeat(3,minmax(0,1fr))}.wd-g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.wd-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;min-width:0}
.wd-card h3{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--text2);margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wd-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.wd-kpi{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;cursor:default}
.wd-kpi.click{cursor:pointer}.wd-kpi.click:hover{border-color:var(--accent)}
.wd-kpi .v{font-size:24px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.wd-kpi .l{font-size:11.5px;color:var(--text2);margin-top:3px}
.wd-kpi .d{font-size:11px;margin-top:2px}
.wd-kpi.bad .v{color:var(--bad)}.wd-kpi.warn .v{color:var(--warn)}.wd-kpi.ok .v{color:var(--ok)}.wd-kpi.info .v{color:var(--accent)}
.up{color:var(--ok)}.down{color:var(--bad)}
/* tables */
.wd-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;margin-bottom:8px}
.wd-tools label{display:flex;flex-direction:column;font-size:10.5px;color:var(--text2);gap:2px}
.wd-tools input,.wd-tools select,.wd-in{background:var(--surface2);border:1px solid var(--border2);border-radius:7px;padding:4px 7px;font-size:12.5px;max-width:190px}
.wd-scroll{overflow-x:auto;max-width:100%}
.wd-t{width:100%;border-collapse:collapse;font-size:12.5px}
.wd-t th{background:var(--th);color:var(--thf);text-align:left;font-weight:600;padding:7px 8px;white-space:nowrap;font-size:11.5px;position:sticky;top:0;cursor:pointer;user-select:none}
.wd-t th.ns{cursor:default}
.wd-t td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:top}
.wd-t tr.cl{cursor:pointer}
.wd-t tbody tr:hover td{background:var(--row)}
.wd-t .n{text-align:right;font-variant-numeric:tabular-nums}
.wd-pager{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--text2);flex-wrap:wrap}
.wd-empty{padding:18px;text-align:center;color:var(--muted)}
/* badges */
.wd-b{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.b-crit{background:rgba(220,38,38,.18);color:var(--bad);border-color:rgba(220,38,38,.4)}
.b-high{background:rgba(234,88,12,.16);color:#fb923c;border-color:rgba(234,88,12,.4)}
.b-med{background:rgba(202,138,4,.16);color:#eab308;border-color:rgba(202,138,4,.4)}
.b-low{background:rgba(100,116,139,.18);color:var(--text2);border-color:rgba(100,116,139,.4)}
.b-ok{background:rgba(16,185,129,.16);color:var(--ok);border-color:rgba(16,185,129,.4)}
.b-info{background:rgba(96,165,250,.16);color:var(--info);border-color:rgba(96,165,250,.4)}
.wcc-demo-root[data-theme="light"] .b-high{color:#c2410c}.wcc-demo-root[data-theme="light"] .b-med{color:#a16207}
.wd-chip{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:6px;background:var(--surface3);border:1px solid var(--border2);color:var(--text2);margin:1px 2px 1px 0;white-space:nowrap}
.wd-muted{color:var(--muted);font-size:11.5px}
/* charts */
.wd-chart{width:100%;height:auto;display:block;color:var(--text)}
.wd-leg{display:flex;flex-wrap:wrap;gap:10px;font-size:11.5px;color:var(--text2);margin-top:4px}
.wd-leg i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:4px;vertical-align:middle}
.wd-bars .row{display:flex;align-items:center;gap:8px;font-size:12px;margin:4px 0}
.wd-bars .nm{width:150px;flex:0 0 150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)}
.wd-bars .tr{flex:1;background:var(--surface3);border-radius:4px;height:12px;overflow:hidden}
.wd-bars .fl{height:100%;border-radius:4px}
.wd-bars .vv{width:52px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.wd-gauge{display:flex;align-items:center;gap:14px}
.wd-heat td.c{text-align:center;font-weight:700;min-width:40px}
.h4{background:rgba(220,38,38,.3)}.h3{background:rgba(234,88,12,.24)}.h2{background:rgba(202,138,4,.2)}.h1{background:rgba(100,116,139,.18)}
/* drawer, tabs, forms, toast */
.wd-back{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:50}
.wd-drawer{position:absolute;top:0;right:0;bottom:0;width:min(680px,100%);background:var(--surface);border-left:1px solid var(--border2);box-shadow:var(--shadow);z-index:51;display:flex;flex-direction:column}
.wd-drawer header{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border)}
.wd-drawer header h2{font-size:15px;flex:1}
.wd-drawer .bd{overflow:auto;padding:12px 14px;flex:1}
.wd-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:10px}
.wd-tab{padding:6px 10px;cursor:pointer;color:var(--text2);border-bottom:2px solid transparent;font-size:12.5px;background:none;border-top:0;border-left:0;border-right:0}
.wd-tab.on{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
.wd-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 14px;margin:0 0 10px}
.wd-dl div{min-width:0}.wd-dl dt{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.wd-dl dd{margin:0;font-size:13px;overflow-wrap:anywhere}
.wd-tl{list-style:none;margin:0;padding:0}
.wd-tl li{border-left:2px solid var(--border2);padding:2px 0 8px 12px;position:relative;font-size:12.5px}
.wd-tl li::before{content:"";position:absolute;left:-5px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.wd-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:8px 0}
.wd-form label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--text2)}
.wd-form input,.wd-form select,.wd-form textarea{background:var(--surface2);border:1px solid var(--border2);border-radius:7px;padding:5px 8px;font-size:13px;width:100%}
.wd-form .full{grid-column:1/-1}
.wd-toast{position:absolute;right:16px;bottom:16px;z-index:60;background:var(--surface);border:1px solid var(--border2);border-left:4px solid var(--ok);border-radius:8px;padding:9px 14px;box-shadow:var(--shadow);font-size:13px;max-width:360px}
.wd-progress{height:10px;background:var(--surface3);border-radius:6px;overflow:hidden}
.wd-progress div{height:100%;background:var(--accent);width:0;transition:width .2s}
.wd-note{border-left:4px solid var(--warn);background:var(--surface2);padding:8px 12px;border-radius:8px;font-size:12.5px;margin-bottom:12px}
.wd-note.ok{border-left-color:var(--ok)}
.wd-guide h4{margin:12px 0 4px;font-size:14px}
.wd-guide p,.wd-guide li{font-size:13px;color:var(--text2)}
/* responsive */
@container wcc (max-width:1100px){.wd-g21,.wd-g3{grid-template-columns:minmax(0,1fr)}}
@container wcc (max-width:860px){
  .wd-ham{display:inline-block}
  .wd-side{position:absolute;top:0;bottom:0;left:0;z-index:45;transform:translateX(-105%);transition:transform .2s;box-shadow:var(--shadow)}
  .wd-side.open{transform:none}
  .wd-search{margin-left:0}
  .wd-g2{grid-template-columns:minmax(0,1fr)}
  .wd-hide-m{display:none}
}
@container wcc (max-width:560px){
  .wd-main{padding:12px 10px 40px}
  .wd-kpi .v{font-size:20px}
  .wd-t.stack thead{display:none}
  .wd-t.stack tr{display:block;border:1px solid var(--border);border-radius:8px;margin-bottom:8px}
  .wd-t.stack td{display:flex;gap:8px;border:0;padding:3px 8px}
  .wd-t.stack td::before{content:attr(data-l);font-weight:600;color:var(--text2);min-width:96px;font-size:11px}
  .wd-bars .nm{width:100px;flex-basis:100px}
  .wd-top{flex-wrap:wrap}
  .wd-search{order:5;flex:1 0 100%;max-width:none;margin:0}
  .wd-t.stack td.n{text-align:left;justify-content:flex-start}
  .wd-chip-top{display:none}
}

/* WordPress integration */
.admin-bar .wcc-demo-root.wcc-full{height:calc(100vh - 32px)}
@media (max-width:782px){.admin-bar .wcc-demo-root.wcc-full{height:calc(100vh - 46px)}}
:where(.wcc-demo-root) :where(button,input,select,textarea){font:inherit;letter-spacing:normal;text-transform:none;box-shadow:none}
:where(.wcc-demo-root) table{margin:0}
.wcc-demo-root h1,.wcc-demo-root h2,.wcc-demo-root h3,.wcc-demo-root h4{font-family:inherit}
.wcc-demo-root a.wd-nav,.wcc-demo-root a.wd-nav:hover,.wcc-demo-root a.wd-nav:focus{text-decoration:none}
.wcc-demo-root a:focus{box-shadow:none}
.wcc-demo-root a:focus-visible,.wcc-demo-root button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}