/* Access-denied screen (replaces inline styles in old admin.js) */
.access-denied {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  background: var(--bg);
  color: var(--text);
}
.access-denied-icon { font-size: 44px; }
.access-denied-link { color: var(--accent); }

/* Table cell utilities (replaces inline color styles) */
.td-muted   { color: var(--text-3); }
.td-success { color: var(--ok); }
.td-danger  { color: var(--bad); }

.admin-layout { display: flex; height: 100vh; overflow: hidden; }

/* ── Mobile sidebar for admin ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .admin-layout {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .admin-layout .sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    width: var(--sidebar-w) !important;
    min-width: var(--sidebar-w) !important;
    border-right: 1px solid var(--border) !important;
    overflow-y: auto;
  }
  .admin-layout .sidebar.collapsed {
    width: var(--sidebar-w) !important;
    min-width: var(--sidebar-w) !important;
  }
  .admin-layout .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: var(--shadow);
  }
  .admin-layout .main {
    width: 100%;
    overflow: visible;
    height: auto;
  }
}
.admin-view   { flex: 1; overflow-y: auto; padding: 26px; }

.admin-badge {
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 18px;
}
.admin-card-header {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
.admin-card-header h3 { font-size: 13.5px; font-weight: 600; color: var(--text-2); }

/* User Activity Table */
.activity-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.activity-table th {
  background: var(--surface-2); color: var(--text-3); font-size: 11px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--border);
}
.activity-table td {
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  color: var(--text-2); vertical-align: middle;
}
.activity-table tr:last-child td { border-bottom: none; }
.activity-table tr:hover td { background: var(--hover); }

/* Progress bar */
.progress-wrap { display: flex; align-items: center; gap: 10px; }
.progress-bar  { flex: 1; height: 6px; background: var(--raise); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--ok); border-radius: 3px; transition: width 0.3s; }
.progress-pct  { font-size: 12px; color: var(--text-3); min-width: 34px; text-align: right; }

/* User row actions */
.user-row-actions { display: flex; align-items: center; gap: 6px; }
.badge-admin {
  background: var(--accent-bg); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 20px;
  font-size: 10px; font-weight: 700; padding: 2px 8px; text-transform: uppercase;
}
.badge-user {
  background: var(--raise); color: var(--text-3);
  border: 1px solid var(--border); border-radius: 20px;
  font-size: 10px; font-weight: 700; padding: 2px 8px; text-transform: uppercase;
}