/* "Access Level" module-access card on every domain's /admin page -
   "user management" card follow-up, 2026-08-13. Self-contained (admin_
   placeholder.html otherwise still uses its own old inline <style> block,
   not yet migrated to the site-wide dark-navy/gold pass) but uses the
   same --gold tokens as everywhere else that HAS been migrated, so this
   new piece matches the current standard even though its surroundings
   don't yet. */

:root {
  --ma-bg: #0a0e17;
  --ma-panel: #131a2b;
  --ma-panel-light: #1c2438;
  --ma-panel-dark: #05070c;
  --ma-accent: #c9a227;
  --ma-text: #f3efe2;
  --ma-muted: #98a2bd;
  --ma-danger: #ff8a8a;
}

.ma-card {
  max-width: 640px;
  margin: 40px auto 0;
  padding: 24px 28px;
  background: var(--ma-panel);
  border: 2px solid var(--ma-panel-light);
  border-radius: 12px;
  text-align: left;
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: var(--ma-text);
}

.ma-card h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-family: 'Century Gothic', 'Futura', 'Trebuchet MS', ui-sans-serif, system-ui, sans-serif;
}

.ma-card-sub { margin: 0 0 18px; font-size: 13px; color: var(--ma-muted); }

.ma-hidden { display: none !important; }

.ma-login {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.ma-login input {
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 2px solid var(--ma-panel-light);
  background: var(--ma-panel-dark);
  color: var(--ma-text);
}

.ma-login button {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 6px;
  border: none;
  background: var(--ma-accent);
  color: #14100a;
  cursor: pointer;
  font-family: inherit;
}

.ma-login-error { width: 100%; color: var(--ma-danger); font-size: 12px; margin-top: 4px; }

.ma-empty-hint { font-size: 13px; color: var(--ma-muted); }

.ma-modules { display: flex; flex-direction: column; gap: 10px; }

.ma-module-row {
  background: var(--ma-panel-dark);
  border: 2px solid var(--ma-panel-light);
  border-radius: 8px;
  padding: 12px 14px;
}

.ma-module-name { font-size: 13px; font-weight: bold; margin-bottom: 8px; }

.ma-module-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.ma-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  border-radius: 12px;
  background: var(--ma-panel-light);
  color: var(--ma-accent);
  font-size: 12px;
  font-weight: bold;
}

.ma-group-chip button {
  border: none;
  background: none;
  color: var(--ma-muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.ma-group-chip button:hover { color: var(--ma-danger); }

.ma-no-groups-hint { font-size: 12px; color: var(--ma-muted); font-style: italic; }

.ma-add-group-select {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  border: 2px solid var(--ma-panel-light);
  background: var(--ma-panel);
  color: var(--ma-text);
}