@import url("tokens.b5a718449a91.css");
/* App styles implementing /workspace/brcgs-design (design-brief.md, dashboard.html, login.html). */
*{box-sizing:border-box}
body{font-family:var(--font-sans);font-size:var(--fs-base);color:var(--ink-700);background:var(--canvas);margin:0;font-variant-numeric:tabular-nums}
h1,h2,h3,h4,h5{color:var(--ink-900)}
h1,.h-title{font:800 24px var(--font-display);margin:0}
h2{font:800 20px var(--font-display)} h5{font-size:14px;font-weight:600;margin:0 0 12px}
a{color:var(--brand-600);font-weight:600;text-decoration:none} a:hover{color:var(--brand-700)}
code,.id,.mono{font:500 12px var(--font-mono);color:var(--ink-500)}
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
/* Sidebar */
aside{background:var(--brand-900);color:rgba(255,255,255,.72);padding:20px 14px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
aside .logo{display:flex;align-items:center;gap:10px;color:#fff;font:800 17px/1.15 var(--font-display);padding:4px 8px 22px}aside .logo .name,.brandpanel .logo .name{min-width:0}
.mark{width:30px;height:30px;border-radius:8px;background:var(--brand-500);display:grid;place-items:center;flex:none}
.ph{font:500 10px var(--font-sans);border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:1px 6px;opacity:.7}
aside a{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:8px;font-weight:500;font-size:13.5px;color:rgba(255,255,255,.72)}
aside a:hover{color:#fff;background:rgba(255,255,255,.05)} aside a.on{background:rgba(20,184,166,.18);color:#fff}
aside .grp{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.4);padding:14px 10px 4px}
aside .sub a{padding:6px 10px 6px 40px;font-size:13px}
.sp{flex:1}.user{display:flex;gap:10px;align-items:center;padding:12px 10px;border-top:1px solid rgba(255,255,255,.1);margin-top:8px}
.av{width:32px;height:32px;border-radius:50%;background:var(--brand-500);color:var(--brand-900);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.user b{color:#fff;font-weight:600;display:block;font-size:13px}.user small{font-size:12px}
.user button{background:none;border:0;color:rgba(255,255,255,.6);font-size:12px;padding:0;cursor:pointer}.user button:hover{color:#fff}
/* Header */
.main{display:flex;flex-direction:column;min-width:0}
header.top{height:64px;background:#fff;border-bottom:1px solid var(--ink-200);display:flex;align-items:center;gap:16px;padding:0 28px;position:sticky;top:0;z-index:5}
.site{display:flex;gap:8px;align-items:center;border:1px solid var(--ink-200);border-radius:8px;padding:7px 12px;font-weight:600;color:var(--ink-900);font-size:13px}
.search{flex:1;max-width:380px;display:flex;gap:8px;align-items:center;background:var(--ink-100);border-radius:8px;padding:0 12px;color:var(--ink-500);font-size:13px;height:36px}
.search input{border:0;background:transparent;outline:0;flex:1;font:13px var(--font-sans)}
.hs{margin-left:auto;display:flex;gap:12px;align-items:center}.bell{position:relative;color:var(--ink-500)}
.bell.dot:after{content:"";position:absolute;top:0;right:0;width:7px;height:7px;background:var(--bad-700);border-radius:50%;border:2px solid #fff}
.wrap{padding:24px 28px;display:grid;gap:20px;align-content:start}
.pagehead{display:flex;align-items:end;justify-content:space-between;gap:16px}.pagehead p{color:var(--ink-500);margin:4px 0 0}
/* Buttons */
.btn{height:38px;padding:0 14px;border-radius:var(--r-md);border:1px solid transparent;background:var(--brand-600);color:#fff;font:600 13px var(--font-sans);display:inline-flex;gap:6px;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--brand-700);color:#fff}.btn:focus-visible{outline:0;box-shadow:var(--focus)}
.btn-sm{height:32px;padding:0 10px;font-size:12.5px}
.btn-secondary,.btn2,.btn-outline-primary,.btn-outline-secondary{background:#fff;color:var(--ink-900);border-color:var(--ink-300)}
.btn-secondary:hover,.btn2:hover,.btn-outline-primary:hover,.btn-outline-secondary:hover{background:var(--ink-100);color:var(--ink-900)}
.btn-ghost,.btn-link{background:none;color:var(--brand-600);border:0}.btn-ghost:hover,.btn-link:hover{background:var(--brand-50);color:var(--brand-700)}
.btn-danger,.btn-outline-danger{background:var(--bad-700);color:#fff}.btn-danger:hover,.btn-outline-danger:hover{background:#991B1B;color:#fff}
.btn-success{background:var(--brand-600)}.btn-warning{background:#fff;color:var(--warn-700);border-color:#FCD34D}.btn-warning:hover{background:var(--warn-50);color:var(--warn-700)}
/* Inputs */
label,.lbl{display:block;font-weight:600;font-size:13px;color:var(--ink-900);margin:0 0 6px}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{width:100%;min-height:40px;background:#fff;border:1px solid var(--ink-300);border-radius:var(--r-md);padding:8px 12px;font:14px var(--font-sans);color:var(--ink-900)}
.form-control-sm,.form-select-sm,.in-sm{min-height:32px!important;padding:4px 8px!important;font-size:13px!important}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand-600);box-shadow:var(--focus)}
input[type=checkbox]{accent-color:var(--brand-600);width:16px;height:16px;vertical-align:middle}
fieldset[disabled] input,fieldset[disabled] select,fieldset[disabled] textarea{background:var(--ink-100);color:var(--ink-700)}
.errorlist{color:var(--bad-700);font-size:12px;padding:0;list-style:none;margin:4px 0}
.formgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 16px;align-items:end}
.formgrid p{margin:0}
/* Cards */
.card{background:var(--surface);border:1px solid var(--ink-200);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:20px;min-width:0}
.ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px}.ch h3{font-size:14px;font-weight:600;color:var(--ink-900);margin:0}.ch a{font-size:13px}
.grid{display:grid;gap:16px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g21{grid-template-columns:2.1fr 1fr}
@media (max-width:1100px){.g2,.g3,.g21,.r1{grid-template-columns:1fr!important}}
/* Dashboard */
.r1{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1fr;gap:16px}.score{display:flex;gap:20px;align-items:center}.score .n{font:800 34px var(--font-display);color:var(--ink-900)}
.bars{flex:1;display:grid;gap:7px;font-size:12px}.bar{display:grid;grid-template-columns:110px 1fr 30px;gap:8px;align-items:center}
.bar i{height:6px;border-radius:9px;background:var(--ink-100);overflow:hidden}.bar i b{display:block;height:100%;border-radius:9px}
.kpi small{color:var(--ink-500);font-weight:500;font-size:13px;display:flex;justify-content:space-between;line-height:1.3}.kpi .n{font:800 30px var(--font-display);color:var(--ink-900);margin:10px 0 6px}.kpi .d{font-size:12px}
.kpi a.n{display:block}
.ev{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--ink-200);align-items:center}.ev:last-child{border:0}
.dt{width:44px;text-align:center;border:1px solid var(--ink-200);border-radius:8px;padding:4px 0;flex:none}.dt small{display:block;font-size:10px;color:var(--ink-500);text-transform:uppercase;font-weight:600}.dt b{font:800 17px var(--font-display);color:var(--ink-900)}
.ev .t{flex:1}.ev .t b{display:block;color:var(--ink-900);font-weight:600;font-size:13px}.ev .t span{font-size:12px;color:var(--ink-500)}
/* Badges (pill, dot + label; colour never alone) */
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);padding:3px 9px;font-size:12px;font-weight:600;white-space:nowrap;line-height:1.4}
.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ok{color:var(--ok-700);background:var(--ok-50)}.warn{color:var(--warn-700);background:var(--warn-50)}.bad{color:var(--bad-700);background:var(--bad-50)}.info{color:var(--info-700);background:var(--info-50)}.muted{color:var(--ink-500);background:var(--ink-100)}
.chip{display:inline-block;font:600 11px var(--font-sans);border-radius:6px;padding:2px 6px;margin:1px;background:var(--bad-50);color:var(--bad-700)}.chip.warn{background:var(--warn-50);color:var(--warn-700)}
/* Tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-500);background:var(--ink-100);padding:9px 12px;font-weight:600;white-space:nowrap}
th:first-child{border-radius:8px 0 0 8px}th:last-child{border-radius:0 8px 8px 0}
td{padding:12px;border-bottom:1px solid var(--ink-200);color:var(--ink-700);vertical-align:middle}tbody tr:last-child td,table tr:last-child td{border-bottom:0}
table.hover tr:hover td{background:var(--brand-50)} td b{color:var(--ink-900);font-weight:500}td.num,th.num{text-align:right}
table.compact td{padding:7px 10px}
.row-bad td{background:var(--bad-50)}.row-warn td{background:var(--warn-50)}
/* Alerts & e-sign */
.alert{border-radius:var(--r-md);padding:10px 14px;font-weight:500;border:1px solid}
.alert-success{background:var(--ok-50);color:var(--ok-700);border-color:#BBF7D0}.alert-danger,.alert-error{background:var(--bad-50);color:var(--bad-700);border-color:#FECACA}
.alert-warning{background:var(--warn-50);color:var(--warn-700);border-color:#FDE68A}.alert-info{background:var(--info-50);color:var(--info-700);border-color:#BFDBFE}
.esign{background:var(--brand-50);border:1px solid var(--brand-100);border-radius:var(--r-lg);padding:12px 14px;display:inline-block;margin:0 8px 8px 0}
.esign form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.esign strong{font-size:13px;color:var(--brand-700);display:flex;gap:6px;align-items:center}
.esign input{width:200px!important;min-height:34px!important}
.muted-text,.text-muted{color:var(--ink-500)!important}.small{font-size:12.5px}
.stack{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.mb0{margin-bottom:0}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:13px}dl.kv dt{color:var(--ink-500);font-weight:500}dl.kv dd{margin:0;color:var(--ink-900)}
details summary{cursor:pointer;color:var(--brand-600);font-weight:600;font-size:12px}
pre{white-space:pre-wrap;word-break:break-all;font:11px var(--font-mono);background:var(--ink-100);padding:8px;border-radius:6px}
/* Login */
.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.brandpanel{background:radial-gradient(circle at 80% 10%,#115E56 0,transparent 45%),var(--brand-900);color:#fff;padding:48px 56px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.brandpanel:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.brandpanel>*{position:relative;z-index:1}.brandpanel .logo{display:flex;align-items:center;gap:10px;font:800 20px var(--font-display)}
.brandpanel .mark{width:34px;height:34px;border-radius:9px}
.brandpanel h1{font:800 40px/1.15 var(--font-display);margin:auto 0 16px;max-width:460px;color:#fff}.lead{color:rgba(255,255,255,.75);font-size:16px;line-height:1.6;max-width:440px;margin:0}
.brandpanel ul{list-style:none;padding:0;margin:28px 0 36px;display:grid;gap:12px}.brandpanel li{display:flex;gap:10px;align-items:center;color:rgba(255,255,255,.88)}
.mini{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:18px 20px;display:flex;gap:18px;align-items:center;max-width:420px;margin-bottom:auto}
.mini b{font:800 28px var(--font-display)}.mini small{color:rgba(255,255,255,.6);display:block}.foot{font-size:12px;color:rgba(255,255,255,.5);margin:0}
.formpanel{display:grid;place-items:center;background:#fff;padding:32px}.box{width:400px;max-width:100%}.box h2{font:800 28px var(--font-display);margin:0}.box .sub{color:var(--ink-500);margin:8px 0 28px}
.box .f{margin-bottom:16px;position:relative}.box input:not([type=checkbox]){height:44px}.eye{position:absolute;right:12px;top:37px;color:var(--ink-500);background:none;border:0;cursor:pointer;padding:0}
.box .rowx{display:flex;justify-content:space-between;align-items:center;font-size:13px}.box .rowx label{display:flex;gap:8px;align-items:center;font-weight:500;margin:0;color:var(--ink-700)}
.box .pri{width:100%;height:44px;margin-top:24px;font-size:14px}.note{margin-top:28px;text-align:center;font-size:12px;color:var(--ink-500);display:flex;gap:6px;justify-content:center;align-items:center}
@media (max-width:900px){.login{grid-template-columns:1fr}.brandpanel{display:none}}
.search input{border:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important;padding:0!important}
.r1{grid-template-columns:1.9fr 1fr 1fr 1fr 1fr}
.bar{grid-template-columns:minmax(90px,auto) 1fr 28px}.bars{min-width:0}
.pagehead .stack{flex-wrap:nowrap}.pagehead>div:first-child{min-width:0}
.bar i{display:block;min-width:40px}
/* Brand logo (We.Do.Brands wordmark) */
.logo img,.mlogo img{display:block;height:40px;width:auto}.brandpanel .logo img{height:48px}
.logo .tag,.mlogo .tag{font:800 12px var(--font-display);letter-spacing:.1em;border-radius:6px;padding:3px 7px;align-self:flex-end;margin-bottom:2px}
aside .logo .tag,.brandpanel .logo .tag{color:var(--brand-100);border:1px solid rgba(255,255,255,.28)}
.mlogo{display:none;align-items:center;gap:10px;margin-bottom:28px}.mlogo .tag{color:var(--brand-700);border:1px solid var(--ink-300)}
.menubtn,.navscrim{display:none}
/* Phone / small tablet */
@media (max-width:900px){
  .mlogo{display:flex}
  .formpanel{padding:28px 20px;place-items:start stretch}
  .formpanel .box{width:100%;max-width:400px;margin:0 auto}
  .rowx{flex-wrap:wrap;gap:8px}
  .app{grid-template-columns:1fr}
  aside{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85vw;height:100dvh;z-index:60;transform:translateX(-102%);transition:transform .2s ease;padding-top:max(20px,env(safe-area-inset-top))}
  body.nav-open aside{transform:none;box-shadow:var(--sh-lg)}
  body.nav-open .navscrim{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:55}
  body.nav-open{overflow:hidden}
  .menubtn{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--ink-200);border-radius:8px;background:#fff;color:var(--ink-900);flex:none;padding:0}
  header.top{height:56px;padding:0 12px;gap:10px;padding-top:env(safe-area-inset-top)}
  header.top .site{display:none}
  .search{max-width:none;min-width:0}
  .hs{gap:8px}.hs .btn{font-size:0;gap:0;padding:0 10px;height:36px}.hs .btn svg{margin:0}
  .wrap{padding:16px 12px;gap:14px}
  .card{padding:14px}
  .pagehead{flex-direction:column;align-items:stretch;gap:10px}.pagehead .stack{flex-wrap:wrap}
  .pagehead h1{font-size:22px}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .card[style*="max-width"]{max-width:100%!important}
  input,select,textarea{max-width:100%}
  .formgrid{grid-template-columns:1fr}
}