/* ========= STAFF PAGE ========= */
.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:20px}
.staff-card{
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
    padding:20px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    transition:border-color .15s,transform .15s;
}
.staff-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.staff-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover}
.staff-name{font-weight:700;color:var(--text);font-size:.9rem}
.staff-rank{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:3px 10px;border-radius:20px;background:var(--raised);color:var(--muted-strong)}
.staff-rank.rank-founder{background:rgba(204,0,68,.16);color:var(--accent-bright)}
.staff-rank.rank-innovator{background:rgba(93,156,236,.16);color:var(--blue)}
.staff-rank.rank-leader{background:rgba(242,201,76,.16);color:var(--gold)}
.staff-rank.rank-moderator{background:rgba(47,201,105,.16);color:var(--green)}
.staff-rank.rank-shooter-moderator,.staff-rank.rank-dm-moderator,.staff-rank.rank-dd-moderator,.staff-rank.rank-race-moderator{background:rgba(147,154,168,.16);color:var(--muted-strong)}

/* ========= STAFF PAGE MANAGEMENT (Founder/Innovator only) =========
   Rank label/color/order and per-user display tags, edited right on the
   public /staff page. Uses native <details> instead of JS-driven modals --
   this is a small, occasional-use form, not worth wiring into admin.js. */
.staff-admin-panel{
    margin:16px 0;padding:14px 18px;border-radius:var(--lg-radius-sm,16px);
    background:var(--panel-glass);border:var(--lg-border);
    backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);
    box-shadow:var(--lg-rim),var(--lg-ambient);
}
.staff-admin-panel summary{
    display:flex;align-items:center;gap:6px;
    cursor:pointer;font-weight:700;font-size:.8rem;text-transform:uppercase;
    letter-spacing:.5px;color:var(--muted-strong);
    padding-bottom:8px;border-bottom:1px solid var(--line-soft);
    list-style:none;user-select:none;
}
.staff-admin-panel[open] summary{margin-bottom:12px}
.staff-admin-panel summary::-webkit-details-marker{display:none}
.staff-admin-panel summary::before{content:'▸ ';color:var(--muted)}
.staff-admin-panel[open] summary::before{content:'▾ '}
.rank-config-form{margin-top:14px}
.rank-config-table{margin-bottom:10px}
.rank-config-table input[type="text"],
.rank-config-table input[type="number"]{
    width:100%;box-sizing:border-box;padding:6px 8px;border-radius:5px;
    border:1px solid var(--line);background:var(--field);color:var(--text);font-size:.82rem;
}
.rank-position-input{max-width:70px}
.rank-color-input{width:44px;height:30px;padding:2px;border-radius:5px;border:1px solid var(--line);background:var(--field);cursor:pointer}
.rank-key-name{font-weight:600;color:var(--muted-strong)}

.tag-edit{display:inline-block;margin-left:6px}
.tag-edit summary{
    cursor:pointer;list-style:none;font-size:.78rem;color:var(--muted);
    padding:1px 5px;border-radius:4px;
}
.tag-edit summary::-webkit-details-marker{display:none}
.tag-edit summary:hover{color:var(--accent-bright);background:var(--raised)}
.tag-edit form{
    display:flex;gap:6px;align-items:center;margin-top:6px;padding:8px;
    border-radius:6px;background:var(--raised);border:1px solid var(--line);
}
.tag-edit input[type="text"]{
    padding:5px 8px;border-radius:5px;border:1px solid var(--line);
    background:var(--field);color:var(--text);font-size:.78rem;min-width:180px;
}

/* ========= STAFF TABLE — same glass/header system as the home widgets ========= */
.staff-table-wrap{
    overflow-x:auto;
    border-radius:var(--lg-radius-sm,16px);
    border:var(--lg-border);
    background:var(--panel-glass);
    backdrop-filter:var(--lg-blur);
    -webkit-backdrop-filter:var(--lg-blur);
    box-shadow:var(--lg-rim),var(--lg-ambient);
}
.staff-table{
    width:100%;background:transparent;border:0;border-radius:0;box-shadow:none;
    overflow:visible;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.staff-table thead th{
    background:transparent;
    border-bottom:1px solid var(--line-soft);
    color:var(--muted-strong);
}
.staff-table td{border-bottom:1px solid var(--line-soft)}
.staff-table tbody tr:hover{background:var(--raised-glass)}

/* Rank / custom-role tables inside the management panels: the panel already
   paints the glass, so these stay transparent with the same header hairline. */
.staff-admin-panel .data-table{
    background:transparent;border:0;border-radius:0;box-shadow:none;
    overflow:visible;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.staff-admin-panel .data-table th{
    background:transparent;
    border-bottom:1px solid var(--line-soft);
    color:var(--muted-strong);
}
.staff-admin-panel .data-table tbody tr:hover{background:var(--raised-glass)}

@media (max-width:640px){
    .rank-config-table{font-size:.78rem}
    .tag-edit form{flex-direction:column;align-items:stretch}
    .tag-edit input[type="text"]{min-width:0}
}