/* Men Too Movement — Admin Core Styles (Light + Dark aware)
   Scope: Admin chrome + scorecard-upload preview fixes (scoped to .admin-light)
   Safe: Does not alter public pages. Preview styles only target IDs/classes used on /admin/scorecard-upload.html
*/

/* ---------- Tokens (dark default) ---------- */
:root {
  --mtm-bg: #0b0f14;
  --mtm-surface: #0d1218;
  --mtm-surface-2: #11161b;
  --mtm-border: #1e2530;
  --mtm-border-2: #222a33;

  --mtm-text: #e6edf3;
  --mtm-text-dim: #a9b4bf;

  --mtm-accent: #7dc3ff;
  --mtm-success: #47d18a;
  --mtm-warn: #f7b955;
  --mtm-danger: #ff6b6b;

  --mtm-radius: 12px;
  --mtm-radius-sm: 8px;
  --mtm-shadow: 0 10px 30px rgba(0,0,0,.35);
  --mtm-shadow-soft: 0 6px 18px rgba(0,0,0,.28);
}

/* ---------- Base ---------- */
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--mtm-bg);
  color: var(--mtm-text);
  font: 15px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--mtm-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }

/* ---------- Admin layout bits ---------- */
.admin-wrap { max-width: 1200px; margin: 0 auto; padding: 24px; }
.card {
  background: var(--mtm-surface);
  border: 1px solid var(--mtm-border);
  border-radius: var(--mtm-radius);
  box-shadow: var(--mtm-shadow-soft);
}
.card .section-title { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--mtm-border-2); }
.card .meta, .meta { color: var(--mtm-text-dim); }
.card .actions { display:flex; gap:10px; padding:12px 14px; border-top:1px solid var(--mtm-border-2); }

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:8px 12px; border-radius: var(--mtm-radius-sm);
  background: var(--mtm-surface-2); color: var(--mtm-text); border:1px solid var(--mtm-border);
  cursor:pointer; transition: filter .12s ease, transform .06s ease, border-color .12s ease;
}
.btn:hover { filter: brightness(1.06); border-color:#2b3948; }
.btn:active { transform: translateY(1px); }
/* support both naming styles */
.btn--primary, .btn-primary {
  background: linear-gradient(180deg,#1b3043,#152636);
  border-color:#193043; color:#cfe9ff;
}

/* ---------- Notices used by JS (addNotice) ---------- */
#notices { margin-top: 12px; display: grid; gap: 8px; }
.notice {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--mtm-border);
  background: var(--mtm-surface-2); color: var(--mtm-text);
}
.notice--ok   { background: #0f1f15; border-color: rgba(71,209,138,.35); color: #c8f5e2; }
.notice--warn { background: #291318; border-color: rgba(255,107,107,.45); color: #ffd0d0; }
.notice--soft { background: #0f1a26; border-color: #193043; color: #bde4ff; }

/* ---------- Mapping grid (left panel) ---------- */
.map-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; }
.map-row { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: center; }
@media (max-width: 720px){ .map-row { grid-template-columns: 1fr; } }
.input, select, input[type="text"] {
  appearance:none; background: var(--mtm-surface-2); color: var(--mtm-text);
  border:1px solid var(--mtm-border); border-radius:10px; padding:8px 10px;
}
select:focus, input:focus { outline:none; border-color: var(--mtm-accent); box-shadow:0 0 0 2px rgba(125,195,255,.22); }

/* ---------- Dropzone ---------- */
.dropzone {
  margin: 12px 14px; padding: 18px; border: 2px dashed #314255; border-radius: 12px;
  background: #0f1a26; color: var(--mtm-text-dim); text-align: center;
}
.dropzone strong { color:#cfe9ff; }
.dropzone.dragover { background:#102233; border-color:#406086; }

/* ---------- Table shell ---------- */
.table-wrap { padding: 12px 14px; overflow: auto; }

/* ===========================================================
   LIGHT THEME OVERRIDES (for pages that add body.admin-light)
   =========================================================== */
.admin-light, .admin.light { background: #f7fafc; color: #111827; }
.admin-light .admin-wrap .section-title { color:#111827; background:#ffffff; }
.admin-light .card { background:#ffffff; border-color:#e5e7eb; }
.admin-light .card .meta, .admin-light .meta { color:#374151; }
.admin-light .card .actions { border-top-color:#e5e7eb; }

.admin-light .topbar a,
.admin-light .topbar .brand,
.admin-light .topbar .nav a { color:#111827 !important; }


/* Inputs on light bg */
.admin-light .input,
.admin-light select,
.admin-light input[type="text"] {
  background:#f9fafb; color:#111827; border-color:#e5e7eb;
}
.admin-light select:focus,
.admin-light input:focus { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.18); }

/* Buttons on light bg */
.admin-light .btn { background:#f3f4f6; color:#111827; border-color:#e5e7eb; }
.admin-light .btn--primary, .admin-light .btn-primary {
  background: linear-gradient(180deg,#4f8cd1,#3a6ea8);
  color:#ffffff; border-color:#3b6fa9;
}

/* Notices on light bg */
.admin-light .notice { background:#f3f4f6; border-color:#e5e7eb; color:#111827; }
.admin-light .notice--ok   { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.admin-light .notice--warn { background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }
.admin-light .notice--soft { background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }

/* ---------- SCORECARD UPLOAD • High-contrast Preview ---------- */
.admin-light #previewMeta { color:#374151; padding: 0 14px 6px; }
.admin-light #headersWrap { padding: 0 14px 8px; }
.admin-light #headersWrap .tag {
  display:inline-block; margin:0 6px 6px 0; padding:4px 8px; border-radius:999px;
  background:#eef2f7; color:#111827; border:1px solid #cbd5e1; font-weight:600; font-size:12px;
}

/* Preview table itself */
.admin-light #previewTable {
  width:100%; border-collapse: collapse; background:#ffffff;
  border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.admin-light #previewTable thead th {
  background:#f9fafb; color:#111827; border-bottom:1px solid #e5e7eb;
  text-transform:none; letter-spacing:0; font-size:.9rem; padding:10px 12px; text-align:left;
}
.admin-light #previewTable tbody td {
  color:#111827; border-bottom:1px solid #f1f5f9; padding:8px 12px; line-height:1.35;
}
.admin-light #previewTable tbody tr:nth-child(even) td { background:#fbfdff; } /* zebra */
.admin-light #previewTable tbody tr:hover td { background:#f5faff; }         /* hover */

/* Make the table scroll nicely on small screens */
.admin-light .table-wrap { background:#ffffff; border:1px solid #e5e7eb; border-radius:10px; }

/* Form label emphasis on light bg */
.admin-light label { color:#111827; font-weight:600; }

/* Live region hidden but accessible */
#sr { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }


/* ===== Admin Index Utilities (to match index.html) ===================== */

/* Grid helpers used by <section class="grid grid-2|grid-3"> */
.grid { display:grid; gap:12px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 960px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Card header/footer aliases to match existing .section-title / .actions */
.card .card-header { margin:0; padding:12px 14px; border-bottom:1px solid var(--mtm-border-2); }
.card .card-footer { display:flex; gap:10px; padding:12px 14px; border-top:1px solid var(--mtm-border-2); }

/* Badges used in the identity block */
.badge {
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:12px; line-height:18px; border:1px solid var(--mtm-border-2);
  background: var(--mtm-surface-2); color: var(--mtm-text-dim);
}
.badge.admin { background:#14324a; color:#cfe9ff; border-color:#1f3f58; }
.badge.mod   { background:#203421; color:#def7e1; border-color:#2b4a2d; }

/* Alerts used in the status column */
.alert {
  margin:0 0 8px 0; padding:10px 12px; border-radius:10px;
  border:1px solid var(--mtm-border); background:var(--mtm-surface-2); color:var(--mtm-text);
}
.alert-info   { border-color:#274967; background:#0f1a26; }
.alert-warn   { border-color:#5c4a1c; background:#221a08; }
.alert-danger { border-color:#5a1d1d; background:#210a0a; }


.ban-badge.is-hard { background:#3b0e15; border:1px solid #7a1f2b; padding:2px 6px; border-radius:6px; }
.ban-badge.is-soft { background:#2a2a10; border:1px solid #6b6b1a; padding:2px 6px; border-radius:6px; }
.ban-badge.is-none { background:#0f1b13; border:1px solid #1f3b2a; padding:2px 6px; border-radius:6px; }