/* ===== Flex helpers ===== */
.au-head,.au-filters,.au-actions,.au-pages,.au-user-main,.au-stats,.au-tabs{display:flex;align-items:center;gap:10px}

/* ===== Header ===== */
.au-head{justify-content:space-between;margin-bottom:18px;flex-wrap:wrap}
.au-head h2{margin:0}
.au-head p{margin:4px 0;color:var(--mut)}

/* ===== Notice ===== */
.au-notice{background:#e8f7f2;color:#087864;padding:10px 14px;border-radius:10px;margin-bottom:12px;font-size:14px}
.au-notice.error{background:#f5e8e8;color:#a33}

/* ===== View Toggle ===== */
.au-hidden{display:none!important}

/* ===== Filters ===== */
.au-filters{background:var(--card);padding:14px;border:1px solid var(--line);border-radius:16px;margin-bottom:14px;flex-wrap:wrap}
.au-filters input{flex:1;min-width:0}
.au-filters input,.au-filters select{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:10px;font:inherit}

/* ===== User List ===== */
#auList{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:100%;min-width:0}
.au-user{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;max-width:100%;padding:14px;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:14px;box-sizing:border-box;overflow:hidden}
.au-user:hover{background:color-mix(in srgb,var(--teal) 9%,transparent)}
.au-user .au-user-top{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%}
.au-avatar{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:white;font-weight:800;flex-shrink:0}
.au-user-main{align-items:flex-start;flex:1;min-width:0}
.au-user-main b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-user-main small{display:block;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-badge{border-radius:999px;padding:4px 8px;font-size:11px;background:#e8f7f2;color:#087864;align-self:flex-start;white-space:nowrap}
.au-badge.off{background:#f5e8e8;color:#a33}
.au-stats{display:flex;gap:8px;color:var(--mut);font-size:11px;flex-wrap:wrap;min-width:0}

/* ===== Pages ===== */
.au-pages{justify-content:center;margin-top:14px}

/* ===== State ===== */
.au-state{text-align:center;color:var(--mut);padding:42px 10px}

/* ===== Detail Panel ===== */
.au-back-btn{margin-bottom:16px}
.au-detail{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;width:100%;max-width:1200px;margin:0 auto;position:static;box-sizing:border-box}

/* ===== Profile Header ===== */
.au-profile-header{display:flex;align-items:center;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:24px}
.au-avatar-lg{width:80px;height:80px;border-radius:20px;display:grid;place-items:center;color:white;font-weight:800;font-size:32px;flex-shrink:0}
.au-profile-info{flex:1;min-width:0}
.au-profile-info h2{margin:0 0 6px 0;font-size:22px;word-break:break-word}
.au-profile-meta{color:var(--mut);font-size:14px;display:block;margin-bottom:6px;word-break:break-word}
.au-profile-dates{text-align:left;color:var(--mut);font-size:13px;display:flex;flex-direction:column;gap:4px;flex-shrink:0}

/* ===== Detail Grid (edit form) ===== */
.au-detail h3{margin-top:0}
.au-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.au-detail label,.au-dialog label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--mut)}
.au-detail input,.au-detail select,.au-dialog input,.au-dialog select{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:10px;font:inherit;width:100%;box-sizing:border-box}

/* ===== Actions ===== */
.au-actions{margin:12px 0;gap:8px;flex-wrap:wrap}

/* ===== Color Picker ===== */
.au-color-wrap{position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--card)}
.au-color-wrap:hover{border-color:color-mix(in srgb,var(--teal) 40%,var(--line))}
.au-color-wrap input[type="color"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;border-radius:inherit;background:none}
.au-color-preview{width:24px;height:24px;border-radius:8px;border:1px solid rgba(0,0,0,.12);flex-shrink:0;pointer-events:none}
.au-color-hex{font-size:12px;color:var(--ink);direction:ltr;pointer-events:none}
.au-swatches{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.au-swatch{width:22px;height:22px;border-radius:7px;border:2px solid transparent;cursor:pointer;padding:0;flex-shrink:0;transition:transform .15s,border-color .15s;background:transparent}
.au-swatch:hover{transform:scale(1.12)}
.au-swatch.active{border-color:var(--teal);outline:2px solid color-mix(in srgb,var(--teal) 35%,transparent)}

/* ===== Tabs ===== */
.au-tabs{display:flex;align-items:center;gap:10px;overflow:auto;margin:20px 0 10px;-webkit-overflow-scrolling:touch}
.au-tabs button{white-space:nowrap;border:0;border-radius:9px;padding:8px;background:transparent;color:var(--mut);cursor:pointer;font:inherit}
.au-tabs button.active{background:var(--teal);color:white}

/* ===== Permissions Grid ===== */
.au-perms{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.au-perm{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;justify-content:space-between}
.au-perm span{font-size:13px}
.au-perm small{display:block;color:var(--mut);margin-top:3px}
.au-perm select{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:6px 8px;font:inherit;font-size:12px;width:100%;box-sizing:border-box}

/* ===== Records ===== */
.au-record{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px}
.au-record b{display:block;margin-bottom:4px}
.au-record small{display:block;color:var(--mut);font-size:12px}

/* ===== Modal ===== */
.au-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s;padding:16px}
.au-modal.open{opacity:1;pointer-events:auto}
.au-dialog{background:var(--card);border-radius:16px;padding:24px;min-width:0;max-width:480px;width:100%;box-sizing:border-box}
.au-dialog h3{margin-top:0;margin-bottom:16px}
.au-dialog label{margin-bottom:12px}

/* ===== Responsive ===== */
@media(max-width:1100px){
  .au-perms{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  #auList{grid-template-columns:repeat(2,1fr)}
  .au-perms{grid-template-columns:repeat(2,1fr)}
  .au-profile-header{flex-wrap:wrap}
  .au-detail{padding:20px}
}
@media(max-width:600px){
  #auList{grid-template-columns:1fr}
  .au-perms{grid-template-columns:1fr}
  .au-detail-grid{grid-template-columns:1fr}
  .au-detail{padding:16px}
  .au-profile-header{flex-direction:column;text-align:center;gap:12px}
  .au-profile-dates{text-align:center}
  .au-profile-dates{flex-direction:row;gap:12px;flex-wrap:wrap;justify-content:center}
  .au-filters{flex-direction:column}
  .au-filters input{min-width:0}
  .au-head{flex-direction:column;align-items:stretch;text-align:center}
  .au-head .btn{align-self:center}
  .au-actions{flex-direction:column}
  .au-actions .btn{width:100%;justify-content:center}
  .au-avatar-lg{width:64px;height:64px;font-size:26px}
  .au-profile-info h2{font-size:18px}
  .au-tabs{gap:6px}
  .au-tabs button{padding:6px 10px;font-size:13px}
}