/* =====================================================================
   Studio designs ("skins") and layouts.
   html[data-skin] picks colours, fonts and corner style; html[data-theme]
   (dark / light) still picks night or day inside each skin.
   html[data-layout] = sidebar (default) | top | rail — desktop and tablet only;
   phones always use the top bar + bottom tabs.
   The list of skins (names, fonts, swatches) lives in js/ui/skins.js.
   ===================================================================== */

/* ---------- Ivory & Ink: classic, crisp corners, oxblood accent ---------- */
html[data-skin='ivory'] {
  --hero-ink: #2a0d10;
  --serif: 'Cormorant Garamond', Georgia, serif; --serif-weight: 600;
  --sans: 'Jost', ui-sans-serif, system-ui, sans-serif;
  --round: 0.3; --hero-gold: #e8a0a4; --hero-gold-2: #f6cfd1;
}
html[data-skin='ivory']:not([data-theme='light']) {
  --bg: #121212; --bg-2: #1a1a1a; --bg-3: #232323; --bg-rgb: 18 18 18; --panel-rgb: 26 26 26;
  --text: #f3f0ea; --text-2: #bfbab2; --text-3: #87837c;
  --gold: #e08a8f; --gold-2: #f4c3c5; --gold-3: #b15e66; --gold-ink: #2a0d10; --gold-glow: rgb(224 138 143 / 0.3);
  --accent-rgb: 224 138 143; --accent2-rgb: 244 195 197; --tint-rgb: 255 255 255; --glow2-rgb: 120 120 150; --glow3-rgb: 200 110 110;
}
html[data-skin='ivory'][data-theme='light'] {
  --bg: #fbfaf7; --bg-2: #f2efe8; --bg-3: #e7e2d8; --lightbg-rgb: 251 250 247; --paper-rgb: 255 255 255;
  --text: #161616; --text-2: #4d4a45; --text-3: #807b73;
  --gold: #8e1b2b; --gold-2: #6d1220; --gold-3: #b8475a; --gold-ink: #ffffff; --gold-glow: rgb(142 27 43 / 0.22);
  --accent-rgb: 142 27 43; --accent2-rgb: 109 18 32; --ink-rgb: 30 25 20;
}

/* ---------- Midnight Navy: deep blue, silver-blue accent ---------- */
html[data-skin='midnight'] {
  --hero-ink: #0a1330;
  --serif: 'Playfair Display', Georgia, serif; --serif-weight: 500;
  --sans: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
  --round: 0.75; --hero-gold: #b7cbf5; --hero-gold-2: #dde7ff;
}
html[data-skin='midnight']:not([data-theme='light']) {
  --bg: #0a0f1c; --bg-2: #0f172a; --bg-3: #16203a; --bg-rgb: 10 15 28; --panel-rgb: 15 23 42;
  --text: #eef2fb; --text-2: #b3bdd3; --text-3: #7c87a2;
  --gold: #9db8f2; --gold-2: #cddbff; --gold-3: #6f8fd6; --gold-ink: #0a1330; --gold-glow: rgb(157 184 242 / 0.32);
  --accent-rgb: 157 184 242; --accent2-rgb: 205 219 255; --tint-rgb: 235 242 255; --glow2-rgb: 90 120 220; --glow3-rgb: 110 190 230;
}
html[data-skin='midnight'][data-theme='light'] {
  --bg: #f4f7fc; --bg-2: #e9eef8; --bg-3: #dde5f3; --lightbg-rgb: 244 247 252; --paper-rgb: 255 255 255;
  --text: #0f1a33; --text-2: #475473; --text-3: #7682a0;
  --gold: #2f5fb3; --gold-2: #1f437f; --gold-3: #6f93d6; --gold-ink: #ffffff; --gold-glow: rgb(47 95 179 / 0.22);
  --accent-rgb: 47 95 179; --accent2-rgb: 31 67 127; --ink-rgb: 20 35 70;
}

/* ---------- Conservatory: forest green and brass ---------- */
html[data-skin='conservatory'] {
  --hero-ink: #18140a;
  --serif: 'EB Garamond', Georgia, serif; --serif-weight: 500;
  --sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
  --round: 0.6; --hero-gold: #dcbc79; --hero-gold-2: #f0dfb2;
}
html[data-skin='conservatory']:not([data-theme='light']) {
  --bg: #0b1410; --bg-2: #101c17; --bg-3: #17261f; --bg-rgb: 11 20 16; --panel-rgb: 16 28 23;
  --text: #eef2ea; --text-2: #b7c2b4; --text-3: #7f8c7c;
  --gold: #d2b06a; --gold-2: #ecd7a4; --gold-3: #a8873f; --gold-ink: #18140a; --gold-glow: rgb(210 176 106 / 0.3);
  --accent-rgb: 210 176 106; --accent2-rgb: 236 215 164; --tint-rgb: 240 248 236; --glow2-rgb: 70 140 110; --glow3-rgb: 200 170 90;
}
html[data-skin='conservatory'][data-theme='light'] {
  --bg: #f5f6f0; --bg-2: #eaede3; --bg-3: #dfe3d5; --lightbg-rgb: 245 246 240; --paper-rgb: 255 255 252;
  --text: #16231b; --text-2: #4b5a4f; --text-3: #7d8a7f;
  --gold: #2f6b4f; --gold-2: #1f4a36; --gold-3: #6fa287; --gold-ink: #ffffff; --gold-glow: rgb(47 107 79 / 0.22);
  --accent-rgb: 47 107 79; --accent2-rgb: 31 74 54; --ink-rgb: 25 45 35;
}

/* ---------- Modern Mono: black and white, cobalt accent, near-square corners ---------- */
html[data-skin='mono'] {
  --hero-ink: #0b0b0c;
  --serif: 'Sora', ui-sans-serif, system-ui, sans-serif; --serif-weight: 600;
  --sans: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --round: 0.22; --hero-gold: #9fb4ff; --hero-gold-2: #d3dcff;
}
html[data-skin='mono']:not([data-theme='light']) {
  --bg: #0c0c0d; --bg-2: #141415; --bg-3: #1c1c1e; --bg-rgb: 12 12 13; --panel-rgb: 20 20 21;
  --text: #f5f5f5; --text-2: #b5b5b8; --text-3: #7c7c80;
  --gold: #7b97ff; --gold-2: #bccbff; --gold-3: #4a66e0; --gold-ink: #ffffff; --gold-glow: rgb(123 151 255 / 0.3);
  --accent-rgb: 123 151 255; --accent2-rgb: 188 203 255; --tint-rgb: 255 255 255; --glow2-rgb: 123 151 255; --glow3-rgb: 150 150 160;
}
html[data-skin='mono'][data-theme='light'] {
  --bg: #ffffff; --bg-2: #f4f4f5; --bg-3: #e9e9eb; --lightbg-rgb: 255 255 255; --paper-rgb: 255 255 255;
  --text: #0b0b0c; --text-2: #4a4a4f; --text-3: #7d7d83;
  --gold: #2440d8; --gold-2: #1a2fa3; --gold-3: #6b82f0; --gold-ink: #ffffff; --gold-glow: rgb(36 64 216 / 0.2);
  --accent-rgb: 36 64 216; --accent2-rgb: 26 47 163; --ink-rgb: 20 20 25;
}

/* ---------- Rosewood: plum and rose, soft round corners ---------- */
html[data-skin='rose'] {
  --hero-ink: #2a0b14;
  --serif: 'DM Serif Display', Georgia, serif; --serif-weight: 400;
  --sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --round: 1.15; --hero-gold: #f0b3c0; --hero-gold-2: #fadbe2;
}
html[data-skin='rose']:not([data-theme='light']) {
  --bg: #140c11; --bg-2: #1c1218; --bg-3: #261a21; --bg-rgb: 20 12 17; --panel-rgb: 28 18 24;
  --text: #f8eef1; --text-2: #cdb8c0; --text-3: #93808a;
  --gold: #eaa0b0; --gold-2: #f7cfd8; --gold-3: #c07386; --gold-ink: #2a0b14; --gold-glow: rgb(234 160 176 / 0.32);
  --accent-rgb: 234 160 176; --accent2-rgb: 247 207 216; --tint-rgb: 255 240 245; --glow2-rgb: 170 90 150; --glow3-rgb: 230 140 120;
}
html[data-skin='rose'][data-theme='light'] {
  --bg: #fcf5f6; --bg-2: #f6e9ec; --bg-3: #efdce1; --lightbg-rgb: 252 245 246; --paper-rgb: 255 252 253;
  --text: #2b1219; --text-2: #6b4a54; --text-3: #9a7d86;
  --gold: #b0485f; --gold-2: #85283f; --gold-3: #d98a9c; --gold-ink: #ffffff; --gold-glow: rgb(176 72 95 / 0.22);
  --accent-rgb: 176 72 95; --accent2-rgb: 133 40 63; --ink-rgb: 70 25 40;
}

/* ---------- Ocean Breeze: bright and friendly, for children's programs ---------- */
html[data-skin='ocean'] {
  --hero-ink: #04211d;
  --serif: 'Fredoka', ui-rounded, system-ui, sans-serif; --serif-weight: 500;
  --sans: 'Nunito', ui-rounded, system-ui, sans-serif;
  --round: 1.3; --hero-gold: #7fe3d6; --hero-gold-2: #c4f6ef;
}
html[data-skin='ocean']:not([data-theme='light']) {
  --bg: #071519; --bg-2: #0b1e23; --bg-3: #11292f; --bg-rgb: 7 21 25; --panel-rgb: 11 30 35;
  --text: #ecf8f7; --text-2: #b0cfcc; --text-3: #78a09c;
  --gold: #4fd1c1; --gold-2: #a6efe5; --gold-3: #2ea596; --gold-ink: #04211d; --gold-glow: rgb(79 209 193 / 0.32);
  --accent-rgb: 79 209 193; --accent2-rgb: 166 239 229; --tint-rgb: 236 255 252; --glow2-rgb: 255 140 110; --glow3-rgb: 90 170 255;
}
html[data-skin='ocean'][data-theme='light'] {
  --bg: #f2fbfa; --bg-2: #e3f5f2; --bg-3: #d2ece8; --lightbg-rgb: 242 251 250; --paper-rgb: 255 255 255;
  --text: #0d2b2e; --text-2: #44686a; --text-3: #779896;
  --gold: #e5603f; --gold-2: #b8442a; --gold-3: #f39a83; --gold-ink: #ffffff; --gold-glow: rgb(229 96 63 / 0.22);
  --accent-rgb: 229 96 63; --accent2-rgb: 184 68 42; --ink-rgb: 15 50 55;
}

/* =====================================================================
   Layouts (tablet and desktop)
   ===================================================================== */
@media (min-width: 721px) {
  /* Icon rail everywhere: the slim tablet sidebar, also on big screens */
  html[data-layout='rail'] { --side-w: 92px; }
  html[data-layout='rail'] .sidebar { padding: 22px 12px 16px; align-items: center; }
  html[data-layout='rail'] .brand { padding: 0; }
  html[data-layout='rail'] :is(.brand-text, .side-user > span:not(.avatar)) { display: none; }
  html[data-layout='rail'] .side-nav { width: 100%; }
  html[data-layout='rail'] .side-link { flex-direction: column; justify-content: center; gap: 4px; height: 64px; padding: 0; font-size: 11px; }
  html[data-layout='rail'] .side-link[aria-current='page']::before { left: -12px; }
  html[data-layout='rail'] .side-link .badge { position: absolute; top: 6px; right: 14px; margin: 0; }
  html[data-layout='rail'] .side-foot { flex-direction: column; border-top: 0; }
  html[data-layout='rail'] .side-user { flex: none; padding: 0; }

  /* Top navigation: the sidebar becomes a bar across the top */
  html[data-layout='top'] { --side-w: 0px; }
  html[data-layout='top'] .sidebar {
    inset: 0 0 auto 0; width: auto; height: 72px; flex-direction: row; align-items: center; gap: 28px;
    padding: 0 var(--gutter); border-right: 0; border-bottom: 1px solid var(--line);
  }
  html[data-layout='top'] .brand { padding: 0; flex: none; }
  html[data-layout='top'] .brand-mark { width: 40px; height: 40px; }
  html[data-layout='top'] .brand-text { display: grid; }
  html[data-layout='top'] .side-nav { display: flex; gap: 2px; width: auto; flex: 1; min-width: 0; }
  html[data-layout='top'] .side-link { flex-direction: row; height: 42px; padding: 0 14px; gap: 9px; font-size: 14px; white-space: nowrap; }
  html[data-layout='top'] .side-link[aria-current='page']::before { left: 14px; right: 14px; top: auto; bottom: -15px; width: auto; height: 2px; border-radius: 2px; }
  html[data-layout='top'] .side-link .badge { position: static; margin-left: 2px; }
  html[data-layout='top'] .side-foot { margin: 0; padding: 0; border: 0; flex-direction: row; flex: none; }
  html[data-layout='top'] .side-user { flex: none; padding: 4px; }
  html[data-layout='top'] .side-user > span:not(.avatar) { display: none; }
  html[data-layout='top'] .main { margin: 0 auto; padding-top: 98px; max-width: 1380px; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  html[data-layout='top'] .brand-text { display: none; }
  html[data-layout='top'] .sidebar { gap: 14px; }
  html[data-layout='top'] .side-link { padding: 0 10px; font-size: 13px; }
  html[data-layout='top'] .side-link svg { display: none; }
}
/* Desktop with the default sidebar: nothing to change. */

/* =====================================================================
   Studio identity: "Your logo" placeholder (demo) and the school's monogram
   ===================================================================== */
.logo-ph {
  width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px dashed rgb(var(--accent-rgb) / 0.7); color: var(--gold-2);
  background: rgb(var(--accent-rgb) / 0.08); font: 800 9px/1.05 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; text-align: center;
}
.brand-mark.big .logo-ph { font-size: 15px; border-width: 2px; }
.logo-mono {
  width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-2), var(--gold)); color: var(--gold-ink);
  font: var(--serif-weight) 20px/1 var(--serif);
}
.brand-mark.big .logo-mono { font-size: 46px; }
.logo-school { width: 100%; height: 100%; object-fit: contain; }
.brand-text b.is-long { font-size: 20px; line-height: 1.1; }

/* "Powered by Dafola" on the sign-in screen */
.powered {
  position: fixed; left: 50%; bottom: calc(14px + var(--safe-b)); translate: -50% 0; z-index: 3;
  display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.powered svg { height: 11px; width: auto; color: var(--text); opacity: 0.85; display: block; }
@media (max-width: 900px) { .powered { position: static; translate: none; justify-content: center; margin-top: 6px; } }

/* Design picker (Account → Appearance) */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.skin-card {
  display: grid; gap: 8px; padding: 10px; text-align: left; border-radius: var(--radius); border: 1px solid var(--line-2);
  background: var(--surface); transition: border-color 0.2s, translate 0.2s;
}
.skin-card:hover { translate: 0 -1px; border-color: var(--line-3); }
.skin-card[aria-pressed='true'] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.skin-swatch { height: 64px; border-radius: calc(var(--radius) - 4px); display: grid; align-content: end; padding: 8px 10px; gap: 6px; overflow: hidden; }
.skin-swatch b { font-size: 22px; line-height: 1; font-weight: 400; }
.skin-swatch i { display: flex; gap: 4px; }
.skin-swatch i span { width: 14px; height: 6px; border-radius: 3px; }
.skin-card strong { font-size: 13px; }
.skin-card small { color: var(--text-3); font-size: 11.5px; line-height: 1.3; }
.design-note { color: var(--text-3); font-size: 12.5px; margin: 2px 0 0; }
.login-title.is-long { font-size: clamp(46px, 6.4vw, 96px); line-height: 0.95; text-wrap: balance; }
@media (max-width: 900px) { .login-title.is-long { font-size: clamp(40px, 11vw, 64px); } }
.topbar .brand b.is-long { font-size: 18px; max-width: 52vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 440px) {
  .topbar .brand b.is-long { font-size: 16px; max-width: 46vw; }
  .topbar .brand b.is-long ~ .badge-demo { display: none; }
  .topbar .brand-mark { width: 32px; height: 32px; }
}

/* Account page: quiet link to the privacy policy */
.legal-links { margin: 6px 0 0; text-align: center; font-size: 12.5px; }
.legal-links a { color: var(--text-3); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.legal-links a:hover { color: var(--text-2); }