:root{font-family:system-ui,sans-serif;background:#111;color:#eee}body{margin:0}header{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;background:#1b1b1b;border-bottom:1px solid #444}h1{font-size:20px;margin:0}main{padding:18px}.card{max-width:360px;margin:10vh auto;padding:22px;background:#1d1d1d;border:1px solid #444;border-radius:8px}input,select,textarea,button{font:inherit;background:#262626;color:#eee;border:1px solid #555;border-radius:5px;padding:8px}button{cursor:pointer}form input{box-sizing:border-box;width:100%;margin:5px 0}.toolbar{display:flex;gap:8px;flex-wrap:wrap}.toolbar #q{min-width:260px;flex:1}.stats{padding:12px 0}.tablewrap{overflow:auto;border:1px solid #444}table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:8px;border-bottom:1px solid #333;text-align:left;vertical-align:top}th{position:sticky;top:0;background:#202020}td.url{max-width:520px;word-break:break-all}a{color:#8fc7ff}.pager{display:flex;justify-content:center;gap:14px;align-items:center;padding:14px}.error{color:#ff9b9b}dialog{background:#1d1d1d;color:#eee;border:1px solid #666;border-radius:8px;min-width:360px}dialog label{display:block;margin:10px 0}dialog textarea{box-sizing:border-box;width:100%;height:100px}dialog select{width:100%}

.actions{white-space:nowrap;width:1%}.editBtn{padding:5px 10px}.editBtn:hover{background:#333}.actions{vertical-align:middle}

#usersDialog{width:min(900px,92vw)}.usersHead{display:flex;align-items:center;justify-content:space-between;gap:12px}.usersHead h2{margin:0}.userCreate{display:grid;grid-template-columns:1fr 1.4fr 140px auto;gap:8px;margin:16px 0}.usersTable{max-height:55vh}.userName{font-weight:700;margin-bottom:12px}@media(max-width:760px){.userCreate{grid-template-columns:1fr}.usersTable{max-height:48vh}}

.modelAccess{display:flex;flex-direction:column;gap:4px;min-width:220px}.modelAccess select{min-height:110px}.modelAccess small{opacity:.7;font-size:11px}.usersTable td:nth-child(5){max-width:360px;white-space:normal}

#app thead th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
#app thead th.sortable::after{content:" ↕";opacity:.45}
#app thead th.sortAsc::after{content:" ▲";opacity:1}
#app thead th.sortDesc::after{content:" ▼";opacity:1}

/* User Management create-row sizing */
.userCreate{align-items:start}
.userCreate>input,.userCreate>select{height:42px;box-sizing:border-box;align-self:start}
.userCreate>.modelAccess{align-self:start}