/*!
 * My‑Fans Platform — Design Refresh (2025-09)
 * This CSS replaces the previous style.css while preserving class names.
 * Highlights:
 *  - Softer palette + elevated cards
 *  - Better spacing & readable typography
 *  - Dark mode via [data-theme="dark"] or prefers-color-scheme
 *  - Accessible focus rings and larger hit targets
 */

/* =========================
   Design Tokens
   ========================= */
:root {
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;

  --accent-500: #a855f7;
  --success-500: #22c55e;
  --danger-500:  #ef4444;
  --warning-500: #f59e0b;
  --info-500:    #06b6d4;

  --bg: #0b1020;
  --bg-elev: #0f162a;
  --panel: #111a33;
  --text: #e5e7eb;
  --muted: #9aa3b2;
  --border: #263149;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-1: 0 6px 18px rgba(0,0,0,0.25);
  --shadow-2: 0 10px 28px rgba(0,0,0,0.32);
  --ring: 0 0 0 3px rgba(99,102,241,.35);
  --trans: 180ms cubic-bezier(.22,.61,.36,1);

  --container: 1150px;
}

/* Light mode baseline */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f7fb;
    --bg-elev: #ffffff;
    --panel: #ffffff;
    --text: #0f172a;
    --muted: #495063;
    --border: #e6e8ef;
    --shadow-1: 0 8px 20px rgba(27,36,74,0.08);
    --shadow-2: 0 18px 40px rgba(27,36,74,0.12);
  }
}

/* Explicit toggle via data-theme */
[data-theme="dark"] {
  --bg: #0b1020;
  --bg-elev: #0f162a;
  --panel: #111a33;
  --text: #e5e7eb;
  --muted: #9aa3b2;
  --border: #263149;
  --shadow-1: 0 6px 18px rgba(0,0,0,0.25);
  --shadow-2: 0 10px 28px rgba(0,0,0,0.32);
}

/* =========================
   Base
   ========================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,0.15), transparent),
              radial-gradient(1000px 600px at 90% 10%, rgba(168,85,247,0.15), transparent),
              var(--bg);
  line-height: 1.55;
}

img { max-width: 100%; display: block; }
a { color: var(--brand-500); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--brand-400); }
small, .text-muted { color: var(--muted) !important; }
hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }

/* Containers */
.container {
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: 20px;
}

/* =========================
   Elevation & Surfaces
   ========================= */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)) padding-box,
              var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 18px;
  transition: transform var(--trans), box-shadow var(--trans);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card-header { font-weight: 700; margin-bottom: 10px; }
.card-footer { padding-top: 10px; border-top: 1px solid var(--border); }

/* =========================
   Buttons
   ========================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform var(--trans), background var(--trans), border-color var(--trans), color var(--trans), box-shadow var(--trans);
  user-select: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn-primary {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
  color: #fff;
  box-shadow: 0 6px 20px rgba(99,102,241,.3);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-outline:hover { background: rgba(99,102,241,.08); border-color: var(--brand-300); }

.btn-success { background: linear-gradient(180deg, #16a34a, #15803d); color:#fff; }
.btn-danger  { background: linear-gradient(180deg, #ef4444, #dc2626); color:#fff; }
.btn-warning { background: linear-gradient(180deg, #f59e0b, #d97706); color:#fff; }
.btn-info    { background: linear-gradient(180deg, #06b6d4, #0891b2); color:#fff; }

/* Icon-only button */
.btn-icon {
  width: 40px; height: 40px; padding: 0;
  display: inline-grid; place-items: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
}

/* =========================
   Forms
   ========================= */
.form-group { margin-bottom: 16px; }
label { display:block; margin-bottom: 8px; font-weight:600; color: var(--muted); }

.form-control, .form-select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="file"], input[type="url"], input[type="date"] {
  width: 100%;
  height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
textarea { min-height: 120px; resize: vertical; }
.form-control:focus, .form-select:focus, textarea:focus, input:focus {
  outline: none; border-color: var(--brand-400); box-shadow: var(--ring);
}

.input-help { font-size: 12px; color: var(--muted); margin-top: 6px; }
.input-error { color: var(--danger-500); font-size: 13px; }

/* Toggles */
.switch {
  --w: 48px; --h: 28px; --p: 3px;
  inline-size: var(--w); block-size: var(--h);
  border-radius: 999px; background: #6b7280; position: relative; cursor: pointer;
  transition: background var(--trans);
}
.switch::after {
  content:""; position: absolute; inset: var(--p) auto var(--p) var(--p);
  inline-size: calc(var(--h) - var(--p)*2); block-size: calc(var(--h) - var(--p)*2);
  border-radius: 50%; background: #fff; transition: transform var(--trans);
}
.switch[aria-checked="true"] { background: var(--brand-500); }
.switch[aria-checked="true"]::after { transform: translateX(calc(var(--w) - var(--h))); }

/* =========================
   Tables
   ========================= */
.table {
  width: 100%; border-collapse: separate; border-spacing: 0 10px;
}
.table thead th {
  text-align: left; font-size: 13px; letter-spacing: .3px; color: var(--muted); padding: 8px 12px;
}
.table tbody tr {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-1);
}
.table tbody td {
  padding: 12px; border-top: 1px solid var(--border);
}
.table tbody tr:hover { transform: translateY(-1px); }

/* Responsive table wrapper */
.table-responsive { overflow-x: auto; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: 999px; font-weight:600; font-size: 12px;
  border: 1px solid var(--border); background: rgba(99,102,241,.08); color: var(--brand-400);
}
.badge.success { background: rgba(34,197,94,.10); color: #22c55e; }
.badge.danger  { background: rgba(239,68,68,.10); color: #ef4444; }
.badge.warning { background: rgba(245,158,11,.12); color: #f59e0b; }

/* Alerts */
.alert {
  padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--panel);
}
.alert-primary { border-color: rgba(99,102,241,.35); background: rgba(99,102,241,.10); color: var(--brand-300); }
.alert-success { border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); color: #22c55e; }
.alert-danger  { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); color: #ef4444; }
.alert-warning { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); color: #f59e0b; }

/* Nav + Sidebar (optional) */
.navbar, .topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--bg-elev); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(8px);
}
.navbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.navbar .nav { display: flex; gap: 8px; align-items: center; }

.sidebar {
  width: 260px; background: var(--bg-elev); border-right: 1px solid var(--border);
  position: sticky; top: 68px; height: calc(100vh - 68px); padding: 14px;
}

/* Pagination */
.pagination { display:flex; gap:8px; align-items:center; }
.page-item .page-link {
  display:inline-grid; place-items:center; min-width:38px; height:38px; padding:0 12px;
  border:1px solid var(--border); border-radius:12px; background: var(--panel); color: var(--text);
}
.page-item.active .page-link { background: var(--brand-600); color: #fff; border-color: transparent; }

/* Chips */
.chip {
  height: 34px; padding: 0 12px; border-radius: 999px; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); background: var(--bg-elev);
}

/* Progress */
.progress { width:100%; height:10px; background: rgba(99,102,241,.15); border-radius:999px; overflow:hidden; }
.progress-bar { height:100%; background: linear-gradient(90deg, var(--brand-500), var(--accent-500)); }

/* Utility */
.rounded-2xl { border-radius: var(--radius-lg) !important; }
.shadow-soft { box-shadow: var(--shadow-1) !important; }
.section { padding: 28px 0; }

/* =========================
   Dark mode specific tweaks
   ========================= */
[data-theme="dark"] .navbar,
[data-theme="dark"] .sidebar { background: rgba(12,18,38,0.7); backdrop-filter: blur(8px); }

/* =========================
   Helpers for media grids
   ========================= */
.media-grid {
  --min: 220px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
}
.media-tile {
  position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--border);
  background: var(--panel);
}
.media-tile img, .media-tile video { width:100%; height: 220px; object-fit: cover; display:block; }
.media-tile .meta {
  position:absolute; inset: auto 10px 10px 10px;
  display:flex; justify-content: space-between; align-items:center;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.45));
  color: #fff; padding: 8px 10px; border-radius: 10px;
}

/* =========================
   Accessibility
   ========================= */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 10px; }
.btn svg { width: 18px; height: 18px; }