/* Assets (assets.js): the register on a customer and on its own page, the drawer, the import panel and the quiet Needs attention item. App tokens only, so both themes work. */
.as-warn{margin:0 0 10px}
.as-top{display:grid;gap:10px;margin-bottom:10px}
.as-tiles{display:flex;gap:10px;flex-wrap:wrap}
.as-tile{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--bd2);border-radius:var(--r);background:var(--sf);padding:8px 14px;min-width:150px;min-height:56px;cursor:pointer;color:var(--ink);font:inherit}
.as-tile b{font-size:20px;line-height:1.1}
.as-tile span{font-size:12px;color:var(--ink2)}
.as-tile:hover{border-color:var(--ink3)}
.as-tile.on{border-color:var(--acc);background:var(--sel)}
.as-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.as-q{min-width:200px;height:30px;flex:0 1 280px}
.as-sp{flex:1}
.as-selbar{display:flex;gap:8px;align-items:center;border:1px solid var(--bd2);background:var(--sel);border-radius:var(--r);padding:6px 10px;margin:0 0 8px}
.as-t{width:100%;border-collapse:collapse}
.as-t th{text-align:left;font:600 11px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding:6px 8px;border-bottom:1px solid var(--bd2);white-space:nowrap}
.as-t td{padding:8px;border-bottom:1px solid var(--bd);vertical-align:top}
.as-t .r{text-align:right}
.as-ck{width:34px}
.as-row{cursor:pointer}
.as-row:hover{background:var(--sf2)}
.as-row:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.as-empty{padding:28px 10px;text-align:center}
.as-life{margin-top:18px}
.as-lrow>span:last-child{grid-column:2;grid-row:1/3;align-self:center;font-size:12px;white-space:nowrap}
/* import */
.as-imp{border:1px solid var(--bd2);border-radius:var(--r);background:var(--sf);padding:10px 14px;margin:0 0 12px}
.as-impa{display:flex;gap:8px;align-items:center;margin:8px 0;flex-wrap:wrap}
.as-impta{width:100%;font:12px/1.4 var(--mono)}
.as-imperr{padding:3px 0;border-bottom:1px solid var(--bd);font-size:12.5px}
/* drawer */
.as-dr-bg{position:fixed;inset:0;background:var(--scrim);z-index:60}
.as-dr{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);background:var(--bg);border-left:1px solid var(--bd2);z-index:61;overflow:auto;padding:0 16px 24px}
.as-dr-h{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--bg);padding:12px 0;border-bottom:1px solid var(--bd);margin-bottom:10px;z-index:1}
.as-dr form{display:grid;gap:10px}
.as-dr label{display:grid;gap:3px;font-size:12px;color:var(--ink2)}
.as-dr .sel{width:100%}
.as-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.as-err{color:var(--crit)}
.as-err:empty{display:none}
.as-dr-a{display:flex;gap:8px;flex-wrap:wrap}
.as-foot{margin:0}
/* Needs attention: a quiet item, no colour bar */
.as-card{border:1px solid var(--bd);border-radius:var(--r);background:var(--sf);padding:8px 12px;margin:0 0 14px}
.as-card .sh h2{color:var(--ink2);font-weight:500}
.as-ci{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;width:100%;text-align:left;border:0;border-top:1px solid var(--bd);background:transparent;padding:7px 2px;min-height:40px;cursor:pointer;color:var(--ink);font:inherit;align-items:center}
.as-ci:hover{background:var(--sf2)}
.as-ci:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
@media (max-width:719px){
  .as-t thead{display:none}
  .as-t,.as-t tbody,.as-t tr,.as-t td{display:block}
  .as-t tr{border-bottom:1px solid var(--bd);padding:8px 4px;min-height:52px;position:relative}
  .as-t td{border:0;padding:2px 4px}
  .as-t td[data-l]:not([data-l=""]):not([data-l="Asset"])::before{content:attr(data-l) ": ";color:var(--ink3);font-size:11px}
  .as-ck{position:absolute;right:6px;top:4px;width:auto}
  .as-tile{flex:1;min-width:120px}
  .as-2{grid-template-columns:1fr}
  .as-dr{width:100vw}
  .as-ci{grid-template-columns:1fr auto}
  .as-ci span:nth-child(2){display:none}
  .as-bar .btn{min-height:40px}
  .as-bar .as-q{flex:1 1 100%;min-width:0}
  .as-bar .ssel,.as-bar .sel.sm{flex:1 1 140px;min-width:0}
}