/* Wireframe styles · staff dashboard concepts · low-fi, grayscale, for review only */
:root{
  --bg:#F2F2EF; --panel:#FFFFFF; --ink:#26241F; --muted:#7A776E;
  --line:#C9C6BC; --dash:#A9A69B; --fill:#E4E2DA; --accent:#8A8A82;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:ui-sans-serif,system-ui,'Segoe UI',Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* mock chrome */
.topbar{background:var(--ink);color:#fff;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;position:sticky;top:0;z-index:10}
.topbar .brand{font-weight:700;letter-spacing:.02em;white-space:nowrap}
.topbar .crumb{color:#B9B7AE;font-size:12px}
.topbar .who{display:flex;gap:10px;align-items:center;font-size:12px;white-space:nowrap;margin-left:auto}
@media(max-width:640px){.topbar .crumb{display:none}}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--fill);border:1px dashed var(--dash)}

/* shell layout */
.shell{display:grid;grid-template-columns:200px 1fr;gap:0;min-height:calc(100vh - 46px)}
.shell>*{min-width:0}
.sidenav{background:var(--panel);border-right:1px solid var(--line);padding:18px 0}
.sidenav a{display:block;padding:9px 18px;text-decoration:none;color:var(--muted);font-size:13px;border-left:3px solid transparent}
.sidenav a.on{color:var(--ink);font-weight:600;border-left-color:var(--accent);background:var(--fill)}
.sidenav .grp{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:14px 18px 4px}
.content{padding:26px 28px 60px}

@media(max-width:800px){
  .shell{grid-template-columns:1fr}
  .sidenav{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}
  .sidenav a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent}
  .sidenav a.on{border-left:0;border-bottom-color:var(--accent)}
  .sidenav .grp{display:none}
  .content{padding:18px 16px 50px}
}

/* wireframe primitives */
.box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:20px;overflow-x:auto}
.box h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:600}
.box::-webkit-scrollbar{height:8px}
.box::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.dashed{border:1px dashed var(--dash);border-radius:8px;padding:14px;color:var(--muted);text-align:center;background:var(--bg)}
.ph{background:var(--fill);border:1px dashed var(--dash);border-radius:8px;color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:12px;text-align:center}
.grid{display:grid;gap:14px}
.grid>*{min-width:0}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:800px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* page header */
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.pagehead h1{font-size:22px;margin:0}
.pagehead .sub{color:var(--muted);font-size:13px;margin-top:4px}
.actions{display:flex;gap:10px;flex-wrap:wrap}

/* buttons */
.btn{display:inline-block;padding:8px 16px;border-radius:6px;font-size:13px;text-decoration:none;border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.ghost{background:transparent}
.btn.sm{padding:4px 10px;font-size:12px}

/* stats */
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.stat .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stat .val{font-size:26px;font-weight:700;margin-top:2px}
.stat .delta{font-size:12px;color:var(--muted)}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--fill)}
tr:last-child td{border-bottom:0}
.capbar{height:8px;background:var(--fill);border-radius:4px;min-width:90px;position:relative;overflow:hidden}
.capbar i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:4px}

/* chips */
.chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;border:1px solid var(--line);color:var(--muted);background:var(--fill)}
.chip.ok{border-color:var(--accent);color:var(--ink)}
.chip.warn{border-style:dashed;color:var(--ink)}
.chip.bad{border-style:dashed;color:var(--ink);background:var(--bg)}

/* timeline */
.tl{border-left:2px solid var(--line);padding-left:16px;margin:0}
.tl li{list-style:none;position:relative;padding:0 0 14px;font-size:13px}
.tl li::before{content:"";position:absolute;left:-21px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--panel);border:1px dashed var(--dash)}
.tl .when{color:var(--muted);font-size:12px}

/* chart placeholder */
.chart{display:flex;align-items:flex-end;gap:10px;height:150px;padding:12px}
.chart .b{background:var(--fill);border:1px solid var(--dash);border-radius:4px 4px 0 0;flex:1}
.chart .b.hot{background:var(--accent);border-color:var(--accent)}
.chart-lbl{display:flex;gap:10px;margin-top:6px}
.chart-lbl span{flex:1;text-align:center;font-size:11px;color:var(--muted)}

/* week grid */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
@media(max-width:800px){.week{grid-template-columns:repeat(2,1fr)}}
.daycol{border:1px solid var(--line);border-radius:8px;background:var(--panel);min-height:130px;padding:8px}
.daycol .d{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.slot{border:1px dashed var(--dash);border-radius:6px;background:var(--fill);padding:7px 8px;font-size:12px;margin-bottom:6px}
.slot b{display:block;font-size:12px}
.slot .m{color:var(--muted);font-size:11px}
.slot.full{border-style:solid;background:var(--panel)}
.slot.drop{border-style:dashed;background:transparent;text-align:center;color:var(--muted);padding:16px 8px}

/* form field mock */
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.inp{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:8px 10px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between}
.inp.dashed{border-style:dashed;background:var(--bg)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* notes / annotations */
.note{background:#FFF9C4;border:1px solid #E0D68A;border-radius:8px;padding:10px 14px;font-size:12.5px;color:#5B531F;margin:14px 0;line-height:1.55}
.note b{font-weight:700}
.ann{position:relative}
.badge-num{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;align-items:center;justify-content:center;font-size:11px;margin-right:6px;flex:none}

/* modal mock */
.modal{border:1px solid var(--line);border-radius:12px;background:var(--panel);max-width:560px;margin:0 auto;box-shadow:0 20px 50px -24px rgba(0,0,0,.4);padding:0;overflow:hidden}
.modal .mhead{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal .mhead b{font-size:15px}
.modal .mbody{padding:18px}
.modal .mfoot{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}
.backdrop{background:repeating-linear-gradient(45deg,var(--fill),var(--fill) 12px,var(--bg) 12px,var(--bg) 24px);padding:26px 16px;border-radius:12px}

/* footer */
.wf-foot{border-top:1px solid var(--line);padding:18px 0 30px;margin-top:20px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}