/* FlowCAD3D admin portal */
body.adm-body { overflow: auto; }
#adm { display: flex; min-height: 100vh; }
#adm[hidden] { display: none; }
#adm-side { width: 240px; flex: none; background: var(--header-bg); color: var(--header-fg); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.adm-brand { display: flex; align-items: center; gap: 10px; padding: 16px; font-weight: 600; }
.adm-brand img { height: 30px; }
#adm-nav { flex: 1; overflow-y: auto; padding: 6px; }
.adm-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius); color: var(--header-fg2); text-decoration: none; }
.adm-nav-item:hover { background: var(--header-hover); color: var(--header-fg); }
.adm-nav-item.active { background: var(--accent); color: #FFFFFF; }
.adm-nav-item .ico { width: 18px; height: 18px; }
#adm-who { padding: 12px 16px; border-top: 1px solid var(--header-line); display: flex; flex-direction: column; gap: 6px; }
#adm-who .t2 { color: var(--header-fg2); font-size: 12px; }
#adm-who .btn { color: var(--header-fg); border-color: var(--header-line); }
#adm-main { flex: 1; min-width: 0; padding: 20px 28px 40px; }
.adm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.adm-head h1 { font-size: 22px; margin: 0; }
.adm-picker, .adm-filters .field { max-width: 360px; }
.adm-filters { gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.adm-search { max-width: 360px; margin: 6px 0 10px; }
.adm-tbl { width: 100%; }
.adm-tbl td { vertical-align: middle; }
.adm-tbl td.c { text-align: center; }
.adm-matrix tr.grp td { background: var(--bg4); font-weight: 600; }
.adm-acts { gap: 4px; flex-wrap: nowrap; }
.adm-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 14px; margin-bottom: 8px; }
.adm-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 12px; counter-reset: s; }
.adm-steps li { counter-increment: s; padding: 6px 10px; border-radius: 14px; background: var(--bg4); color: var(--fg3); font-size: 12px; }
.adm-steps li::before { content: counter(s) ". "; }
.adm-steps li.done { background: var(--ban-ok-bg); color: var(--ban-ok-fg); }
.adm-steps li.cur { background: var(--accent); color: #FFFFFF; font-weight: 600; }
.adm-out { margin-top: 10px; }
.tiles { margin-bottom: 14px; }
@media (max-width: 800px) {
  #adm { flex-direction: column; }
  #adm-side { width: auto; height: auto; position: static; }
  #adm-nav { display: flex; flex-wrap: wrap; }
  #adm-main { padding: 14px; }
}