/* Packhex v2 UI primitives — shadcn vocabulary, monochrome tokens */
.ui{box-sizing:border-box;position:relative;overflow:hidden;background:var(--color-packhex-background);color:var(--color-packhex-text);font:400 14px/1.5 var(--font-sans);-webkit-font-smoothing:antialiased}
.ui *,.ui *::before,.ui *::after{box-sizing:border-box}
.ui .num{font-variant-numeric:tabular-nums}
.ui .mono{font-family:var(--font-mono);font-size:12.5px}
.ui .muted{color:var(--color-packhex-text-muted)}
.ui .subtle{color:var(--color-packhex-text-subtle)}
.ui svg.lucide{width:16px;height:16px;stroke-width:1.5;flex:none}
.ui h1,.ui h2,.ui h3{font-family:var(--font-heading);font-weight:600;letter-spacing:var(--tracking-heading);margin:0;color:var(--color-packhex-text)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--radius-md);font:500 14px var(--font-sans);border:1px solid transparent;white-space:nowrap;color:var(--color-packhex-text);background:transparent}
.btn-default{background:var(--color-packhex-primary);color:var(--color-packhex-primary-foreground)}
.btn-secondary{background:var(--color-packhex-secondary);color:var(--color-packhex-secondary-foreground)}
.btn-outline{border-color:var(--color-packhex-border);background:var(--color-packhex-surface)}
.btn-ghost{color:var(--color-packhex-text-muted)}
.btn-sm{height:32px;padding:0 10px;font-size:13px;gap:6px}
.btn-lg{height:44px;padding:0 20px;font-size:15px}
.btn-icon{width:32px;padding:0}
.ring{box-shadow:0 0 0 2px var(--color-packhex-background),0 0 0 4px var(--color-packhex-focus-ring)}

/* form */
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:13px;font-weight:500;display:flex;justify-content:space-between;align-items:baseline}
.label a{font-weight:500;color:var(--color-packhex-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.input{height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--color-packhex-border-strong);border-radius:var(--radius-md);background:var(--color-packhex-surface);font-size:14px;color:var(--color-packhex-text)}
.input .plh{color:var(--color-packhex-text-subtle)}
.input svg.lucide{color:var(--color-packhex-text-subtle)}
.input.focus{border-color:var(--color-packhex-focus-ring);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-packhex-focus-ring) 22%,transparent)}
.input.sm{height:32px;font-size:13px}
.hint{font-size:12.5px;color:var(--color-packhex-text-muted)}
.inline{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.inline svg.lucide{width:14px;height:14px}
.t-danger{color:var(--color-packhex-danger)}.t-warning{color:var(--color-packhex-warning)}.t-success{color:var(--color-packhex-success)}.t-info{color:var(--color-packhex-info)}
.chk{width:16px;height:16px;border-radius:var(--radius-sm);border:1px solid var(--color-packhex-border-strong);background:var(--color-packhex-surface);display:grid;place-items:center;flex:none}
.chk.on{background:var(--color-packhex-selected-indicator);border-color:var(--color-packhex-selected-indicator);color:var(--color-packhex-background)}
.chk.on svg.lucide{width:12px;height:12px;stroke-width:2.5}

/* badge = hairline pill + meaning dot; colour never fills */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--radius-full);border:1px solid var(--color-packhex-border);font-size:12px;font-weight:500;white-space:nowrap;color:var(--color-packhex-text);background:var(--color-packhex-surface)}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--dot,var(--color-packhex-text-subtle));display:block}
.s-draft{--dot:var(--color-packhex-text-subtle)}.s-sent{--dot:var(--color-packhex-info)}.s-accepted{--dot:var(--color-packhex-success)}.s-rejected{--dot:var(--color-packhex-danger)}.s-warning{--dot:var(--color-packhex-warning)}
kbd{font:500 11px var(--font-mono);padding:1px 5px;border-radius:var(--radius-sm);border:1px solid var(--color-packhex-border);color:var(--color-packhex-text-muted)}

/* surfaces */
.card{background:var(--color-packhex-surface);border:1px solid var(--color-packhex-border);border-radius:var(--radius-lg)}
.pop{position:absolute;z-index:5;background:var(--color-packhex-surface-raised);border:1px solid var(--color-packhex-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);padding:4px;min-width:200px}
.pop .it{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border-radius:var(--radius-sm);font-size:13.5px}
.pop .it.hl{background:var(--color-packhex-selected);color:var(--color-packhex-selected-foreground)}
.pop .it kbd{margin-left:auto}
.pop .sep{height:1px;background:var(--color-packhex-border);margin:4px -4px}
.hr{height:1px;background:var(--color-packhex-border)}

/* shell */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);height:100%}
.sb{display:flex;flex-direction:column;gap:20px;padding:0 12px 12px;border-right:1px solid var(--color-packhex-border);background:var(--color-packhex-background)}
.sb-logo{height:56px;display:flex;align-items:center;padding:0 8px;color:var(--color-packhex-logo)}
.ws{display:flex;align-items:center;gap:10px;height:40px;padding:0 8px;border-radius:var(--radius-md);border:1px solid var(--color-packhex-border);background:var(--color-packhex-surface)}
.ws .av{width:22px;height:22px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--color-packhex-primary);color:var(--color-packhex-primary-foreground);font:600 10px var(--font-sans)}
.ws b{font-size:13px;font-weight:500;flex:1}
.nav{display:flex;flex-direction:column;gap:1px}
.nav .h{font-size:11.5px;font-weight:500;color:var(--color-packhex-text-subtle);padding:0 8px 6px}
.nav a{position:relative;display:flex;align-items:center;gap:10px;height:32px;padding:0 8px;border-radius:var(--radius-md);color:var(--color-packhex-text-muted);font-size:14px;text-decoration:none}
.nav a.on{background:var(--color-packhex-selected);color:var(--color-packhex-selected-foreground);font-weight:500}
.nav a .c{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;color:var(--color-packhex-text-subtle)}
.sb-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.plan{padding:10px;border:1px solid var(--color-packhex-border);border-radius:var(--radius-md);font-size:12.5px;display:flex;flex-direction:column;gap:2px}
.plan b{font-weight:500;display:flex;align-items:center;gap:6px}
.me{display:flex;align-items:center;gap:10px;padding:6px 8px}
.av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--color-packhex-secondary);color:var(--color-packhex-text);font:500 11px var(--font-sans);flex:none}
.me b{display:block;font-size:13px;font-weight:500;line-height:1.2}.me small{font-size:12px;color:var(--color-packhex-text-muted)}
.main{display:flex;flex-direction:column;min-width:0;background:var(--color-packhex-surface)}
.top{height:56px;flex:none;display:flex;align-items:center;gap:16px;padding:0 24px;border-bottom:1px solid var(--color-packhex-border)}
.crumb{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--color-packhex-text-muted)}
.crumb b{color:var(--color-packhex-text);font-weight:500}
.crumb svg.lucide{width:14px;height:14px;color:var(--color-packhex-text-subtle)}
.search{margin-left:auto;width:300px;height:32px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--color-packhex-border);border-radius:var(--radius-md);font-size:13px;color:var(--color-packhex-text-subtle)}
.search kbd{margin-left:auto}
.page{flex:1;min-height:0;display:flex;flex-direction:column;padding:28px 32px;gap:20px}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.ph h1{font-size:24px;line-height:1.2;display:flex;align-items:center;gap:12px}
.ph p{margin:4px 0 0;font-size:13.5px;color:var(--color-packhex-text-muted);display:flex;gap:14px;align-items:center;white-space:nowrap}
.ph .acts{display:flex;gap:8px}
.bar{display:flex;align-items:center;gap:8px}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--color-packhex-border)}
.tabs span{position:relative;padding:0 0 10px;font-size:14px;color:var(--color-packhex-text-muted)}
.tabs span.on{color:var(--color-packhex-text);font-weight:500}
.tabs span.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--color-packhex-selected-indicator)}
.tabs span .c{margin-left:6px;font-size:12px;color:var(--color-packhex-text-subtle)}

/* data table */
.tbl{border:1px solid var(--color-packhex-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-packhex-surface)}
.tr{display:grid;align-items:center;min-height:40px;padding:0 16px;gap:16px;border-top:1px solid var(--color-packhex-border);font-size:13.5px;position:relative}
.tr:first-child{border-top:0}
.tbl>.tr:first-child{border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0}
.tbl>.tr:last-child{border-radius:0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px)}
.tr.th{min-height:36px;font-size:12.5px;font-weight:500;color:var(--color-packhex-text-muted);background:var(--color-packhex-surface-muted)}
.tr .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tr .el{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tr.sel{background:var(--color-packhex-selected)}
.tr.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--color-packhex-selected-indicator)}
.tr.tot{background:var(--color-packhex-surface-muted);font-weight:500}

/* bundle tree */
.nm{position:relative;display:flex;align-items:center;gap:6px;height:40px;min-width:0;white-space:nowrap}
.nm .tg{position:absolute;top:0;bottom:0;width:1px;background:var(--color-packhex-border)}
.nm .tw{width:20px;height:20px;display:grid;place-items:center;border-radius:var(--radius-sm);color:var(--color-packhex-text-muted);cursor:pointer;flex:none;border:0;background:none;padding:0}
.nm .tw svg.lucide{width:14px;height:14px;transition:transform var(--duration-fast) var(--ease-standard)}
.nm .tw[aria-expanded="false"] svg.lucide{transform:rotate(-90deg)}
.nm .sp{width:20px;flex:none}
.nm .ic{color:var(--color-packhex-text-muted)}
.nm .ic svg.lucide{width:15px;height:15px}
.nm.b{font-weight:500}
.nm .cnt{font-size:12px;color:var(--color-packhex-text-subtle);font-weight:400;margin-left:4px}
.tr .roll{font-weight:500}
.tr.hidden{display:none}

/* totals strip */
.totals{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:1px solid var(--color-packhex-border);border-radius:var(--radius-lg)}
.totals>div{padding:12px 16px;border-left:1px solid var(--color-packhex-border)}
.totals>div:first-child{border-left:0}
.totals small{display:block;font-size:12.5px;color:var(--color-packhex-text-muted)}
.totals b{font:500 20px var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:-0.01em}

/* quote PDF */
.pdf .pk{font:500 10px var(--font-mono);text-transform:uppercase;letter-spacing:0.07em;color:var(--color-packhex-text-muted);margin-bottom:6px}
.pdf .pr{display:grid;grid-template-columns:36px minmax(0,1fr) 92px 48px 88px 96px;gap:10px;padding:7px 0;border-top:1px solid var(--color-packhex-border);align-items:center}
.pdf .pr.ph2{border-top:0;border-bottom:1px solid var(--color-packhex-text);font-size:11px;font-weight:500;color:var(--color-packhex-text-muted);padding-top:0}
.pdf .r{text-align:right;font-variant-numeric:tabular-nums}
.pdf .mono{font-size:11px}