/* ==========================================================================
   Skins — per-resident colour themes (includes/skins.php).
   <html data-skin="..."> is set on the server. "classic" is app.css untouched;
   every other skin sets a few --s-* tokens and the shared "modern" rules below
   turn them into gradients, glass and motion. Light/dark still works: the
   dark blocks re-derive surfaces from the same tokens.
   ========================================================================== */

:root[data-skin="nile"]     { --s-1: #1d4ed8; --s-2: #06b6d4; --s-strong: #1e40af; --s-dark: #60a5fa; --s-bg: #eef4ff; }
:root[data-skin="garden"]   { --s-1: #15803d; --s-2: #84cc16; --s-strong: #166534; --s-dark: #4ade80; --s-bg: #f0f8ec; }
:root[data-skin="sunset"]   { --s-1: #ea580c; --s-2: #e11d48; --s-strong: #c2410c; --s-dark: #fb923c; --s-bg: #fff4ec; }
:root[data-skin="rose"]     { --s-1: #db2777; --s-2: #f472b6; --s-strong: #be185d; --s-dark: #f472b6; --s-bg: #fff1f6; }
:root[data-skin="lavender"] { --s-1: #7c3aed; --s-2: #c084fc; --s-strong: #6d28d9; --s-dark: #a78bfa; --s-bg: #f5f1ff; }
:root[data-skin="royal"]    { --s-1: #1e293b; --s-2: #b8892d; --s-strong: #0f172a; --s-dark: #e3b75a; --s-bg: #f7f4ec; }
:root[data-skin="kids"]     { --s-1: #8b5cf6; --s-2: #ec4899; --s-strong: #7c3aed; --s-dark: #c4b5fd; --s-bg: #fffbea; }

/* ---- token mapping (light) ---------------------------------------------- */
:root:where([data-skin]:not([data-skin="classic"])) {
  --brand:        var(--s-1);
  --brand-strong: var(--s-strong);
  --brand-soft:   color-mix(in srgb, var(--s-1) 11%, #fff);
  --on-brand:     #fff;
  --bg:           var(--s-bg);
  --border:       color-mix(in srgb, var(--s-1) 12%, #e7e7ec);
  --grad:         linear-gradient(135deg, var(--s-1), var(--s-2));
  --shadow:       0 1px 2px rgba(16, 18, 22, .04), 0 8px 24px color-mix(in srgb, var(--s-1) 12%, transparent);
  --radius:       18px;
}
:root[data-skin="royal"] { --grad: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #b8892d 140%); --brand: #9a7224; --brand-strong: #7a5a1c; }

/* ---- token mapping (dark) ----------------------------------------------- */
:root:where([data-skin]:not([data-skin="classic"]))[data-theme="dark"] {
  --brand:        var(--s-dark);
  --brand-strong: var(--s-dark);
  --brand-soft:   color-mix(in srgb, var(--s-dark) 16%, #171a20);
  --on-brand:     #0b0b10;
  --bg:           color-mix(in srgb, var(--s-1) 9%, #0c0e12);
  --surface:      color-mix(in srgb, var(--s-1) 5%, #16181e);
  --border:       color-mix(in srgb, var(--s-dark) 16%, #2a2f39);
  --shadow:       0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark) {
  :root:where([data-skin]:not([data-skin="classic"])):not([data-theme="light"]) {
    --brand:        var(--s-dark);
    --brand-strong: var(--s-dark);
    --brand-soft:   color-mix(in srgb, var(--s-dark) 16%, #171a20);
    --on-brand:     #0b0b10;
    --bg:           color-mix(in srgb, var(--s-1) 9%, #0c0e12);
    --surface:      color-mix(in srgb, var(--s-1) 5%, #16181e);
    --border:       color-mix(in srgb, var(--s-dark) 16%, #2a2f39);
    --shadow:       0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

/* ==========================================================================
   Modern look — all skins except classic
   ========================================================================== */
:where([data-skin]:not([data-skin="classic"])) body {
  background:
    radial-gradient(900px 500px at 110% -10%, color-mix(in srgb, var(--s-2) 22%, transparent), transparent 60%),
    radial-gradient(700px 500px at -20% 30%, color-mix(in srgb, var(--s-1) 14%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Top bar: gradient ribbon */
:where([data-skin]:not([data-skin="classic"])) .topbar {
  background: var(--grad);
  color: #fff;
  border: 0;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--s-1) 30%, transparent);
}
:where([data-skin]:not([data-skin="classic"])) .topbar .iconbtn {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}
:where([data-skin]:not([data-skin="classic"])) .topbar .iconbtn:hover { background: rgba(255,255,255,.28); }

/* Cards: floating, soft, animated in */
:where([data-skin]:not([data-skin="classic"])) .card {
  border-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease;
  animation: skin-rise .45s ease both;
}
:where([data-skin]:not([data-skin="classic"])) a.card:hover { transform: translateY(-3px); text-decoration: none; }
:where([data-skin]:not([data-skin="classic"])) .wrap > .card:nth-of-type(2) { animation-delay: .05s; }
:where([data-skin]:not([data-skin="classic"])) .wrap > .card:nth-of-type(3) { animation-delay: .1s; }
:where([data-skin]:not([data-skin="classic"])) .wrap > .card:nth-of-type(4) { animation-delay: .15s; }
:where([data-skin]:not([data-skin="classic"])) .wrap > .card:nth-of-type(n+5) { animation-delay: .2s; }
@keyframes skin-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Section titles: accent pill */
:where([data-skin]:not([data-skin="classic"])) .section-title {
  display: flex; align-items: center; gap: 8px;
  color: var(--brand-strong);
  text-transform: none; letter-spacing: 0; font-size: .95rem;
}
:where([data-skin]:not([data-skin="classic"])) .section-title::before {
  content: ""; width: 22px; height: 6px; border-radius: 99px; background: var(--grad); flex: none;
}

/* Buttons */
:where([data-skin]:not([data-skin="classic"])) .btn:not(.btn--ghost):not(.btn--ok):not(.btn--danger) {
  background: var(--grad); border: 0;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--s-1) 30%, transparent);
}
:where([data-skin]:not([data-skin="classic"])) .btn:not(.btn--ghost):hover { filter: brightness(1.07); }
:where([data-skin]:not([data-skin="classic"])) .btn { border-radius: 999px; transition: transform .12s ease, filter .12s; }
:where([data-skin]:not([data-skin="classic"])) .btn:active { transform: scale(.97); }

/* Avatar ring */
:where([data-skin]:not([data-skin="classic"])) .avatar {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--s-2);
}

/* Home greeting hero */
:where([data-skin]:not([data-skin="classic"])) .hero {
  position: relative; overflow: hidden;
  background: var(--grad); color: #fff; padding: 22px 18px;
}
:where([data-skin]:not([data-skin="classic"])) .hero .row__name { font-size: 1.25rem; font-weight: 750; }
:where([data-skin]:not([data-skin="classic"])) .hero .row__meta { color: rgba(255,255,255,.85); }
:where([data-skin]:not([data-skin="classic"])) .hero .avatar { width: 58px; height: 58px; box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
:where([data-skin]:not([data-skin="classic"])) .hero::before,
:where([data-skin]:not([data-skin="classic"])) .hero::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.12); pointer-events: none;
}
:where([data-skin]:not([data-skin="classic"])) .hero::before { width: 220px; height: 220px; inset-inline-end: -70px; top: -90px; }
:where([data-skin]:not([data-skin="classic"])) .hero::after  { width: 120px; height: 120px; inset-inline-end: 60px; bottom: -70px; background: rgba(255,255,255,.08); }
:where([data-skin]:not([data-skin="classic"])) .hero .card__head { position: relative; z-index: 1; margin: 0; align-items: center; }

/* Bottom bar: floating glass pill */
:where([data-skin]:not([data-skin="classic"])) .tabbar {
  inset-inline: 12px; bottom: 10px; border-radius: 22px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(16,18,22,.14);
  max-width: 616px; margin-inline: auto;
}
:where([data-skin]:not([data-skin="classic"])) .tab[aria-current="page"] { color: var(--brand); }
:where([data-skin]:not([data-skin="classic"])) .tab[aria-current="page"] svg {
  background: var(--brand-soft); border-radius: 12px; padding: 3px; width: 34px; height: 28px;
}

/* Links tiles */
:where([data-skin]:not([data-skin="classic"])) .links__item { border-radius: 16px; }

/* ==========================================================================
   Royal — gold accents on navy
   ========================================================================== */
[data-skin="royal"] .section-title::before { background: linear-gradient(90deg, #b8892d, #e3b75a); }
[data-skin="royal"] .hero .row__name { color: #f5d98b; }
[data-skin="royal"] .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #c9a043; }

/* ==========================================================================
   Kids — rainbow, bubbly, bouncy
   ========================================================================== */
:root[data-skin="kids"] {
  --grad: linear-gradient(120deg, #f59e0b, #ef4444 25%, #ec4899 50%, #8b5cf6 75%, #06b6d4);
  --radius: 24px;
  --font: "Comic Sans MS", "Chalkboard SE", "Segoe UI", system-ui, "Noto Sans Arabic", sans-serif;
}
[data-skin="kids"] body {
  background:
    radial-gradient(circle at 12% 18%, #fde68a 0 7px, transparent 8px),
    radial-gradient(circle at 82% 12%, #fbcfe8 0 9px, transparent 10px),
    radial-gradient(circle at 70% 62%, #bae6fd 0 8px, transparent 9px),
    radial-gradient(circle at 25% 78%, #ddd6fe 0 10px, transparent 11px),
    radial-gradient(circle at 92% 88%, #bbf7d0 0 7px, transparent 8px),
    var(--bg);
  background-size: 360px 360px, 420px 420px, 380px 380px, 460px 460px, 400px 400px, auto;
  background-attachment: fixed;
}
[data-skin="kids"] .topbar { background-size: 200% 100%; animation: kids-flow 8s linear infinite; }
@keyframes kids-flow { to { background-position: 200% 0; } }

[data-skin="kids"] .card { border: 3px solid transparent; }
[data-skin="kids"] .wrap > .card:nth-of-type(5n+1):not(.hero) { border-color: #fcd34d; }
[data-skin="kids"] .wrap > .card:nth-of-type(5n+2) { border-color: #f9a8d4; }
[data-skin="kids"] .wrap > .card:nth-of-type(5n+3) { border-color: #93c5fd; }
[data-skin="kids"] .wrap > .card:nth-of-type(5n+4) { border-color: #c4b5fd; }
[data-skin="kids"] .wrap > .card:nth-of-type(5n+5) { border-color: #86efac; }
[data-skin="kids"] .card { animation: kids-pop .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes kids-pop { from { opacity: 0; transform: scale(.9) rotate(-1deg); } to { opacity: 1; transform: none; } }

[data-skin="kids"] .section-title::before { content: "⭐"; width: auto; height: auto; background: none; font-size: 1.05rem; }
[data-skin="kids"] .section-title { font-size: 1.05rem; color: var(--s-strong); }
[data-skin="kids"] .btn { box-shadow: 0 4px 0 rgba(0,0,0,.15) !important; }
[data-skin="kids"] .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.15) !important; }
[data-skin="kids"] .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #f59e0b; }
[data-skin="kids"] .hero::before { content: "🎈"; background: none; width: auto; height: auto; font-size: 52px; top: 6px; inset-inline-end: 14px; animation: kids-float 3.5s ease-in-out infinite; }
[data-skin="kids"] .hero::after  { content: "☁️"; background: none; width: auto; height: auto; font-size: 40px; bottom: 2px; inset-inline-end: 84px; animation: kids-float 5s ease-in-out infinite reverse; opacity: .9; }
@keyframes kids-float { 50% { transform: translateY(-8px) rotate(4deg); } }
[data-skin="kids"] .tab[aria-current="page"] svg { background: #fde68a; }
[data-skin="kids"] .tab:hover svg { animation: kids-wiggle .4s ease; }
@keyframes kids-wiggle { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }

/* ==========================================================================
   Skin picker (profile)
   ========================================================================== */
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.skin-opt { position: relative; cursor: pointer; display: block; }
.skin-opt input { position: absolute; opacity: 0; pointer-events: none; }
.skin-opt__card {
  display: block; border-radius: 16px; overflow: hidden; border: 2px solid var(--border);
  background: var(--surface); transition: transform .15s, border-color .15s, box-shadow .15s;
}
.skin-opt__sw { display: block; height: 54px; background: linear-gradient(135deg, var(--a), var(--b)); position: relative; }
.skin-opt__sw::after {
  content: ""; position: absolute; inset-inline: 10px; bottom: 8px; height: 10px; border-radius: 6px; background: rgba(255,255,255,.75);
  box-shadow: 0 -14px 0 -2px rgba(255,255,255,.45);
}
.skin-opt__name { display: block; padding: 7px 8px; font-size: .8rem; font-weight: 650; text-align: center; }
.skin-opt:hover .skin-opt__card { transform: translateY(-2px); }
.skin-opt input:checked + .skin-opt__card { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.skin-opt input:checked + .skin-opt__card .skin-opt__name::before { content: "✓ "; color: var(--brand); }
.skin-opt input:focus-visible + .skin-opt__card { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  [data-skin] *, [data-skin] *::before, [data-skin] *::after { animation: none !important; transition: none !important; }
}