/* Keep controls and pagination in the viewport; long records stay readable. */
.shell>main:has(#customers:not(.hidden),#licenses:not(.hidden),#audit:not(.hidden)){height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.shell>main:has(#customers:not(.hidden),#licenses:not(.hidden),#audit:not(.hidden))>header{flex-shrink:0}
.shell>main:has(#customers:not(.hidden),#licenses:not(.hidden),#audit:not(.hidden))>.content{flex:1;min-height:0;min-width:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column}
#customers:not(.hidden),#licenses:not(.hidden),#audit:not(.hidden){display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
#customers>.section-head,#licenses>.section-head,#audit>.section-head{flex-shrink:0}
#customers>.surface,#licenses>.surface,#audit>.surface{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
#customers .table-toolbar,#licenses .table-toolbar,#customers .pager,#licenses .pager,#audit .pager{flex-shrink:0}
#customers .table-wrap,#licenses .table-wrap,#audit .table-wrap{flex:1;min-height:0;overflow:auto}
#customers table,#audit table{table-layout:fixed;width:100%}
#customers td,#audit td{overflow-wrap:anywhere}
#customers th:nth-child(1){width:27%}#customers th:nth-child(2){width:20%}#customers th:last-child{width:96px}
#customers button,#audit button{white-space:nowrap}
#audit th:first-child{width:150px}#audit th:nth-child(2){width:15%}#audit th:nth-child(3){width:15%}
#audit details summary{color:var(--cyan);cursor:pointer;white-space:nowrap}
#audit details pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;margin:8px 0 0}
.pager>div{display:flex;gap:8px;flex-shrink:0}.pager small{overflow-wrap:anywhere}
#customers .pager,#licenses .pager,#audit .pager{min-height:66px;box-sizing:border-box}
@media(max-width:1200px){
  #licenses table,#licenses tbody{display:block;width:100%}
  #licenses thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #licenses tbody{padding:10px;box-sizing:border-box;display:grid;gap:10px}
  #licenses tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:9px;background:var(--surface)}
  #licenses td{display:block;min-width:0;padding:8px 10px;overflow-wrap:anywhere}
  #licenses td:first-child{grid-column:1/-1;border-top:0}
  #licenses td::before{display:block;color:var(--muted);margin-bottom:4px}
  #licenses td:nth-child(2)::before{content:'客户'}#licenses td:nth-child(3)::before{content:'卡型'}#licenses td:nth-child(4)::before{content:'设备 / 版本'}
  #licenses td:nth-child(5)::before{content:'激活 / 到期'}#licenses td:nth-child(6)::before{content:'状态'}#licenses td:nth-child(7)::before{content:'操作'}
  #licenses .activation-token{min-width:0}
  #licenses .section-head,#licenses .table-toolbar{flex-wrap:wrap;gap:10px}
  #licenses .section-head>div:last-child{display:flex;gap:8px;flex-shrink:0}
  #licenses .table-toolbar input{min-width:0;flex:1;width:auto}
  #licenses .table-toolbar select{width:145px}
  #licenses .actions{flex-wrap:wrap;white-space:normal}
}