/* ================================================
   SportHub — Admin Styles
   User Management, EXP, Roles, Logs, Ad Management
   ================================================ */

/* ─── Admin Sections ─── */
.admin-search { padding: .3rem .2rem .6rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.admin-search input { flex: 1; min-width: 180px; }
.admin-filters { display: flex; gap: .3rem; flex: 1; }
.admin-filters select { flex: 1; min-width: 100px; }
.admin-card-list { display: flex; flex-direction: column; gap: .5rem; }
/* ─── Admin User Card ─── */
.admin-user-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .85rem; display: flex; gap: .65rem; align-items: flex-start; }
.au-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.au-avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-weight: 700; font-size: .9rem; }
.admin-user-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.admin-user-info { min-width: 0; }
.admin-user-name { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user-meta { font-size: .72rem; color: var(--text-muted); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user-actions { display: flex; gap: .35rem; align-items: center; }
.au-btn { font-size: .72rem; padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; white-space: nowrap; transition: all .15s; }
.au-btn:hover { border-color: var(--primary); color: var(--primary); }
.au-btn-edit { border-color: var(--primary); color: var(--primary); }
.au-btn-edit:hover { background: var(--primary); color: #fff; }
.au-btn-view { border-color: rgba(99,102,241,.4); color: var(--text-muted); }
.au-btn-view:hover { border-color: var(--primary); color: var(--primary); }

/* ─── EXP Management ─── */
.exp-target-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: .75rem; }
.exp-target-info { display: flex; align-items: center; gap: .65rem; margin-bottom: .85rem; padding-bottom: .65rem; border-bottom: 1px solid var(--border); }
.exp-target-name { font-weight: 700; font-size: .95rem; }
.exp-target-detail { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; }
.exp-form .form-row { margin-bottom: .65rem; }

/* ─── Condition Builder ─── */
.condition-builder { margin-top: .75rem; }
.condition-group { background: var(--bg-elevated); border-radius: var(--radius-sm); padding: .65rem; margin-bottom: .5rem; }
.group-label { font-size: .78rem; font-weight: 600; margin-bottom: .4rem; display: flex; align-items: center; gap: .4rem; }
.group-logic { display: inline-block; padding: .1rem .35rem; background: var(--accent-bg); color: var(--accent); border-radius: var(--radius-full); font-size: .65rem; }
.condition-row { display: flex; gap: .3rem; align-items: center; margin-bottom: .35rem; }
.condition-row select, .condition-row input { flex: 1; font-size: .78rem; padding: .35rem .5rem; }
.condition-row input[type="number"] { max-width: 70px; }
.or-divider { text-align: center; color: var(--text-muted); font-size: .75rem; font-weight: 600; padding: .3rem 0; }

/* ─── Reward Tags ─── */
.reward-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.reward-tag { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .55rem; background: var(--bg-elevated); border-radius: var(--radius-full); font-size: .75rem; }
.reward-tag button { font-size: .7rem; color: var(--text-muted); }

/* ─── Permissions List ─── */
.permissions-list { max-height: 350px; overflow-y: auto; }
/* ─── Role Hierarchy Management ─── */
.role-hierarchy-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem; margin-bottom: .65rem; }
.role-hierarchy-title { font-weight: 700; font-size: .85rem; margin-bottom: .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
.role-level-row { display: flex; align-items: center; gap: .5rem; padding: .45rem .3rem; border-bottom: 1px solid var(--border); }
.role-level-row:last-child { border-bottom: none; }
.role-level-num { font-family: var(--font-display); font-size: .7rem; font-weight: 700; color: var(--text-muted); min-width: 2rem; }
.role-level-badge { display: inline-block; padding: .15rem .5rem; border-radius: var(--radius-full); color: #fff; font-size: .72rem; font-weight: 600; min-width: 3rem; text-align: center; }
.role-level-key { font-size: .68rem; color: var(--text-muted); font-family: monospace; flex: 1; }
.role-level-row:hover { background: var(--accent-bg); }
.role-level-row.role-level-selected { background: var(--accent-bg); border-color: var(--accent); }
.role-delete-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--danger); background: transparent; color: var(--danger); font-size: .7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .15s; line-height: 1; }
.role-delete-btn:hover { background: var(--danger); color: #fff; }
.role-perm-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem; margin-bottom: .65rem; }
.role-perm-panel-header { font-weight: 700; font-size: .85rem; margin-bottom: .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.role-perm-reset-btn { font-size: .68rem !important; color: var(--accent) !important; padding: .15rem .4rem; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: transparent; }
.role-perm-reset-btn:active { background: var(--accent); color: #fff !important; }
.role-perm-arrow { font-size: .65rem; color: var(--text-muted); user-select: none; }
.role-editor-card { background: var(--bg-card); border: 1px solid var(--accent); border-radius: var(--radius); padding: .85rem; margin-bottom: .65rem; }
.role-editor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .65rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); font-weight: 700; font-size: .85rem; }

.perm-category { margin-bottom: .5rem; }
.perm-category-title { font-size: .78rem; font-weight: 700; color: var(--accent); padding: .4rem 0; cursor: pointer; display: flex; align-items: center; gap: .3rem; }
.perm-category-title::before { content: '▼'; font-size: .6rem; transition: transform var(--transition); }
.perm-category.collapsed .perm-category-title::before { transform: rotate(-90deg); }
.perm-items { display: flex; flex-direction: column; gap: 0; border-radius: var(--radius-sm); overflow: hidden; }
.perm-category.collapsed .perm-items { display: none; }
.perm-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .6rem; font-size: .78rem; }
.perm-item:nth-child(odd) { background: var(--bg-elevated); }
.perm-item:nth-child(even) { background: transparent; }
.perm-item span { flex: 1; }
.perm-item .toggle-switch { margin-left: 0; flex-shrink: 0; }

/* ─── Log List ─── */
.log-list { display: flex; flex-direction: column; gap: .3rem; }
.log-item { display: flex; align-items: flex-start; gap: .5rem; padding: .55rem .5rem; border-bottom: 1px solid var(--border); font-size: .8rem; }
.log-time { font-size: .7rem; color: var(--text-muted); white-space: nowrap; min-width: 80px; }
.log-content { flex: 1; color: var(--text-secondary); }
.log-type { display: inline-block; padding: .1rem .35rem; border-radius: var(--radius-full); font-size: .65rem; font-weight: 600; margin-right: .3rem; }
.log-type.exp { background: rgba(96,165,250,.15); color: var(--info); }
.log-type.role { background: rgba(167,139,250,.15); color: #a78bfa; }
.log-type.event { background: rgba(52,211,153,.15); color: var(--success); }

/* ─── Inactive Card ─── */
.inactive-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .85rem; opacity: .65; position: relative; margin-bottom: .5rem; }

/* ─── Banner Manage Card ─── */
.banner-manage-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; display: flex; gap: .75rem; align-items: center; }
.banner-thumb { width: 80px; height: 50px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: .75rem; color: #fff; font-weight: 600; flex-shrink: 0; overflow: hidden; }
.banner-thumb-empty { background: transparent; border: 2px dashed var(--border); color: var(--text-muted); font-size: .55rem; line-height: 1.2; text-align: center; }
.banner-thumb-circle { width: 50px; height: 50px; border-radius: 50%; }
.banner-manage-info { flex: 1; }
.banner-manage-title { font-weight: 600; font-size: .85rem; }
.banner-manage-meta { font-size: .72rem; color: var(--text-muted); margin-top: .1rem; }
.banner-manage-status { display: inline-block; padding: .1rem .4rem; border-radius: var(--radius-full); font-size: .65rem; font-weight: 600; }

/* ─── Admin Achievement/Badge Rows ─── */
.admin-ach-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border-bottom: 1px solid var(--border); }
.admin-ach-row:last-child { border-bottom: none; }
.admin-ach-info { flex: 1; min-width: 0; }
.admin-ach-name { font-size: .82rem; font-weight: 600; }
.admin-ach-status { font-size: .7rem; margin-top: .1rem; }
.admin-ach-actions { display: flex; gap: .4rem; flex-shrink: 0; }

/* ─── Admin Section Label ─── */
.admin-section-label { font-weight: 700; font-size: .85rem; color: var(--text-secondary); padding: .5rem 0 .3rem; margin-top: .5rem; border-bottom: 1px solid var(--border); margin-bottom: .5rem; }

/* ─── Sponsor Manage Rows ─── */
.sp-manage-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .3rem;
  border-bottom: 1px solid var(--border);
}
.sp-manage-row:last-child { border-bottom: none; }
.sp-row-num {
  width: 1.6rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}
.sp-row-thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px dashed var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background: var(--bg-elevated);
  transition: border-color .2s;
}
.sp-row-thumb:hover { border-color: var(--accent); }
.sp-row-thumb.has-img { border-style: solid; }
.sp-row-upload-hint {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1;
}
.sp-row-link {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .35rem .5rem;
  font-size: .75rem;
  background: var(--bg-input);
  color: var(--text-primary);
  outline: none;
}
.sp-row-link:focus { border-color: var(--accent); }
.sp-row-save {
  flex-shrink: 0;
  font-size: .7rem;
  padding: .28rem .5rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.sp-row-save:active { opacity: .8; }
.sp-row-del {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: .65rem;
  cursor: pointer;
  line-height: 1;
}
.sp-row-del:active { opacity: .8; }

/* ─── Ad Collapse Toggle ─── */
.ad-collapse-section { margin-top: .8rem; }
.ad-collapse-section:first-child { margin-top: 0; }
.ad-collapse-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.ad-collapse-arrow {
  font-size: .7rem;
  transition: transform .25s;
  color: var(--text-muted);
}
.ad-collapse-toggle.open .ad-collapse-arrow {
  transform: rotate(90deg);
}
.ad-collapse-content {
  padding-top: .4rem;
}

/* ─── EXP Log Operator Label ─── */
.exp-log-operator { font-size: .72rem; font-style: italic; color: var(--text-muted); margin-left: .3rem; }

/* ─── EXP Batch Tags & Team Members Scroll ─── */
#exp-batch-tags, #exp-team-members { max-height: 120px; overflow-y: auto; }

/* ─── EXP Tab Panels ─── */
.exp-tab-panel { padding: .3rem .2rem; }

/* ─── EXP Log Pagination ─── */
.exp-log-pagination { display: flex; justify-content: center; gap: .25rem; padding: .6rem 0 .3rem; flex-wrap: wrap; }
.exp-pg-btn { min-width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: .75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.exp-pg-btn:hover { border-color: var(--primary); color: var(--primary); }
.exp-pg-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ─── EXP Log Color Classes ─── */
.log-item.log-user-plus  { background: rgba(34,197,94,.10); border-radius: 6px; }
.log-item.log-user-minus { background: rgba(239,68,68,.10); border-radius: 6px; }
.log-item.log-team-plus  { background: rgba(168,85,247,.10); border-radius: 6px; }
.log-item.log-team-minus { background: rgba(234,179,8,.10); border-radius: 6px; }
.log-type.team_exp { background: rgba(168,85,247,.15); color: #a855f7; }
.log-type.event_create, .log-type.event_edit, .log-type.event_end,
.log-type.event_cancel, .log-type.event_reopen, .log-type.event_delete { background: rgba(52,211,153,.15); color: var(--success); }
.log-type.tourn_create, .log-type.tourn_edit, .log-type.tourn_end,
.log-type.tourn_reopen, .log-type.tourn_delete, .log-type.tourn_approve { background: rgba(124,58,237,.15); color: #7c3aed; }
.log-type.team_create, .log-type.team_edit, .log-type.team_delete, .log-type.team_position, .log-type.team_approve { background: rgba(249,115,22,.15); color: #f97316; }
.log-type.ach_create, .log-type.ach_edit, .log-type.ach_toggle, .log-type.ach_delete { background: rgba(236,72,153,.15); color: #ec4899; }
.log-type.ann_create, .log-type.ann_edit, .log-type.ann_toggle, .log-type.ann_delete { background: rgba(14,165,233,.15); color: #0ea5e9; }

/* ─── Dark Theme Log Types ─── */
[data-theme="dark"] .log-type.exp { background: rgba(96,165,250,.20); }
[data-theme="dark"] .log-type.role { background: rgba(167,139,250,.20); }
[data-theme="dark"] .log-type.event { background: rgba(52,211,153,.20); }
[data-theme="dark"] .log-type.team_exp { background: rgba(168,85,247,.25); }
[data-theme="dark"] .log-type.event_create, [data-theme="dark"] .log-type.event_edit,
[data-theme="dark"] .log-type.event_end, [data-theme="dark"] .log-type.event_cancel,
[data-theme="dark"] .log-type.event_reopen, [data-theme="dark"] .log-type.event_delete { background: rgba(52,211,153,.20); }
[data-theme="dark"] .log-type.tourn_create, [data-theme="dark"] .log-type.tourn_edit,
[data-theme="dark"] .log-type.tourn_end, [data-theme="dark"] .log-type.tourn_reopen,
[data-theme="dark"] .log-type.tourn_delete, [data-theme="dark"] .log-type.tourn_approve { background: rgba(124,58,237,.20); }
[data-theme="dark"] .log-type.team_create, [data-theme="dark"] .log-type.team_edit,
[data-theme="dark"] .log-type.team_delete, [data-theme="dark"] .log-type.team_position,
[data-theme="dark"] .log-type.team_approve { background: rgba(249,115,22,.20); }
[data-theme="dark"] .log-type.ach_create, [data-theme="dark"] .log-type.ach_edit,
[data-theme="dark"] .log-type.ach_toggle, [data-theme="dark"] .log-type.ach_delete { background: rgba(236,72,153,.20); }
[data-theme="dark"] .log-type.ann_create, [data-theme="dark"] .log-type.ann_edit,
[data-theme="dark"] .log-type.ann_toggle, [data-theme="dark"] .log-type.ann_delete { background: rgba(14,165,233,.20); }

/* ─── Achievement Condition Form ─── */
.ach-cond-section { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem; margin-bottom: .5rem; background: var(--bg-elevated); }
.ach-cond-section-title { font-size: .78rem; font-weight: 700; color: var(--text-secondary); margin-bottom: .4rem; }
.ach-cond-preview-wrap { display: flex; align-items: center; gap: .3rem; padding: .4rem 0 0; border-top: 1px dashed var(--border); margin-top: .4rem; }
.ach-badge-upload-box { width: 50px; height: 50px; border: 2px dashed var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--bg-main); overflow: hidden; flex-shrink: 0; transition: border-color .2s; }
.ach-badge-upload-box:hover { border-color: var(--accent); }
.ach-badge-upload-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

/* ─── Dashboard ─── */
.dash-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; padding: .5rem; }
.dash-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .4rem; text-align: center; }
.dash-num { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--accent); }
.dash-label { font-size: .65rem; color: var(--text-muted); margin-top: .1rem; }
.dash-bar-list { display: flex; flex-direction: column; gap: .45rem; }
.dash-bar-row { display: flex; align-items: center; gap: .5rem; }
.dash-bar-label { font-size: .78rem; font-weight: 600; min-width: 3rem; flex-shrink: 0; }
.dash-bar-track { flex: 1; height: 10px; background: var(--bg-elevated); border-radius: 5px; overflow: hidden; }
.dash-bar-fill { height: 100%; border-radius: 5px; transition: width .4s ease; }
.dash-bar-fill.type-friendly { background: #0d9488; }
.dash-bar-fill.type-camp { background: #ec4899; }
.dash-bar-fill.type-play { background: #7c3aed; }
.dash-bar-fill.type-watch { background: #f59e0b; }
.dash-bar-val { font-size: .72rem; color: var(--text-secondary); font-weight: 600; min-width: 3.5rem; text-align: right; flex-shrink: 0; }