/* Tampa Lumber — Puller Scorecards · shared design system (formal, blue/white) */
:root{
  --navy:#0d2b4e; --navy2:#123a66; --blue:#1d4ed8; --blue-d:#1842b0; --blue-soft:#e8f0fe;
  --bg:#f4f7fb; --card:#ffffff; --border:#e3e8f0; --border2:#eef2f7;
  --txt:#16243b; --muted:#5f6b82; --muted2:#8a93a6;
  --good:#15803d; --good-bg:#e7f6ec; --info:#1d4ed8; --info-bg:#e8f0fe;
  --warn:#b45309; --warn-bg:#fdf3e3; --bad:#b91c1c; --bad-bg:#fdeceb;
  --shadow:0 1px 3px rgba(16,40,80,.08),0 1px 2px rgba(16,40,80,.04);
  --shadow-lg:0 4px 16px rgba(16,40,80,.10);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}

/* top bar */
.topbar{background:linear-gradient(180deg,var(--navy2),var(--navy));color:#fff;
  display:flex;justify-content:space-between;align-items:center;padding:0 26px;height:60px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:17px;letter-spacing:.2px}
.brand .mark{width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:16px}
.brand .co{font-weight:500;font-size:12.5px;color:#b9c8de;margin-top:1px}
.topbar .right{display:flex;align-items:center;gap:14px;font-size:13.5px;color:#cdd9ea}
.btn-logout{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.28);padding:6px 13px;border-radius:7px;font-size:13px}
.btn-logout:hover{background:rgba(255,255,255,.1)}

.container{max-width:1140px;margin:0 auto;padding:26px}
.pagetitle{font-size:22px;font-weight:700;margin:0 0 2px}
.pagesub{color:var(--muted);font-size:13.5px;margin:0 0 22px}

/* cards / panels */
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.panel{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:18px;margin-bottom:18px}
.panel h2{margin:0 0 14px;font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700}
.section-label{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin:18px 0 8px}

/* buttons */
button,.btn{background:var(--blue);color:#fff;border:none;font-weight:600;padding:9px 16px;border-radius:8px;cursor:pointer;font-size:14px}
button:hover,.btn:hover{background:var(--blue-d)}
button.ghost,.btn.ghost{background:#fff;border:1px solid var(--border);color:var(--muted)}
button.ghost:hover{background:var(--bg)}

/* inputs */
input,select{background:#fff;border:1px solid var(--border);color:var(--txt);border-radius:8px;padding:9px 11px;font-size:14px}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
input.sm{width:78px;text-align:right;padding:6px 8px}
label{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin:12px 0 5px}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:right;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;padding:10px 12px;background:#f7f9fc;border-bottom:1px solid var(--border)}
th:first-child,td:first-child{text-align:left}
td{padding:10px 12px;border-top:1px solid var(--border2);font-variant-numeric:tabular-nums}
tr:hover td{background:#fafbfe}

/* score pill + tier badge */
.pill{font-weight:800;padding:4px 0;border-radius:7px;display:inline-block;min-width:46px;text-align:center;font-variant-numeric:tabular-nums}
.s-good{background:var(--good-bg);color:var(--good)} .s-blue{background:var(--info-bg);color:var(--info)}
.s-warn{background:var(--warn-bg);color:var(--warn)} .s-bad{background:var(--bad-bg);color:var(--bad)}
.badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid var(--border);background:#fff;color:var(--muted)}

.muted{color:var(--muted);font-size:12.5px}
.ok{color:var(--good);font-size:12.5px;font-weight:600}
.err{color:var(--bad);font-size:12.5px;font-weight:600}

/* stat tiles */
.grid{display:grid;gap:13px}
.tile{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:15px 16px;box-shadow:var(--shadow)}
.tile .v{font-size:25px;font-weight:700;line-height:1.1}
.tile .l{color:var(--muted);font-size:12px;margin-top:4px;font-weight:600}

/* progress bar + tier ladder (employee) */
.bar{height:12px;background:#eef2f7;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.bar .fill{height:100%;background:linear-gradient(90deg,#3b82f6,var(--blue));border-radius:10px}
.ladder{display:flex;gap:10px}
.lt{flex:1;background:#fff;border:1px solid var(--border);border-radius:10px;padding:11px 8px;text-align:center}
.lt .tn{font-weight:700;font-size:13px;color:var(--txt)}
.lt .tm{font-size:11px;color:var(--muted2);margin:2px 0}
.lt .tb{font-size:11px;color:var(--blue);font-weight:600}
.lt.cur{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 1px var(--blue) inset}

/* per-metric progress rows (tickets vs pounds toward next tier) */
.tonext{font-size:14px;margin:4px 0 2px}
.tonext .mut{color:var(--muted)}
.pgwrap{max-width:560px;margin:16px auto 4px;text-align:left}
.pgrow{display:flex;align-items:center;gap:14px;margin:13px 0}
.pgrow .plabel{width:62px;flex-shrink:0;font-weight:600;font-size:13px;color:var(--txt)}
.pgrow .bar{flex:1;height:14px}
.pgrow .pval{width:128px;flex-shrink:0;text-align:right;font-size:13px;line-height:1.25;font-variant-numeric:tabular-nums}
.pgrow .pval .mut{color:var(--muted);font-weight:400}
.pgrow .pval .g{display:block;font-size:11px;margin-top:1px}
.pggap{color:var(--warn);font-weight:700}
.pgok{color:var(--good);font-weight:700}
.bar .fill.met{background:linear-gradient(90deg,#34d399,var(--good))}
@media(max-width:560px){.pgrow .plabel{width:54px}.pgrow .pval{width:108px}}