/**
 * 100 Club Studio chrome ONLY.
 *
 * Rules:
 * - Studio pages (admin, users, manuals, studio-themed) get 100 Club silver/charcoal paint.
 * - Brand desks (business.html) and brand customer portals get colors from brand-theme.js
 *   (theme_json). This file must NOT force cyan/navy on body.brand-portal or body.cc-body.
 * - Load after portal.css / club-command.css / admin.css.
 */
:root {
  /* Studio pack tokens (silver-glass era; matches data/brand/100club-tokens.json) */
  --club-black: #05080f;
  --club-navy: #0a0e14;
  --club-panel: #121820;
  --club-sky: #c8d0dc;
  --club-sky-bright: #e2e8f0;
  --club-sky-deep: #94a3b8;
  --club-chrome: #e2e8f0;
  --club-silver: #94a3b8;
  --club-glow: rgba(226, 232, 240, 0.22);
  --club-gold: #e8c547;
  --club-gold-bright: #f5d76e;
  --club-radius: 14px;
  --club-pill: 999px;
}

/* ---- Studio hover bar (100 Club only chrome) ---- */
.studio-bar {
  border-bottom-color: rgba(200, 208, 220, 0.35) !important;
  background: linear-gradient(180deg, #05080f 0%, #0a0e14 100%) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 0 20px rgba(200, 208, 220, 0.06) !important;
}
.studio-bar::after {
  content: "Studio · hover or tap" !important;
  color: #e2e8f0 !important;
  border-color: rgba(200, 208, 220, 0.35) !important;
  background: #05080f !important;
  box-shadow: 0 0 14px rgba(200, 208, 220, 0.1);
}
.studio-bar__brand {
  color: #e2e8f0 !important;
  text-shadow: 0 0 14px rgba(226, 232, 240, 0.2);
  font-weight: 800 !important;
  letter-spacing: 0.04em;
}
.studio-bar__link,
.studio-bar__btn {
  border-radius: var(--club-pill) !important;
  border: 1px solid rgba(186, 230, 253, 0.18) !important;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(200, 208, 220, 0.05)) !important;
  color: #e2e8f0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-weight: 650 !important;
}
.studio-bar__link:hover,
.studio-bar__btn:hover {
  border-color: rgba(200, 208, 220, 0.45) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(200, 208, 220, 0.12);
}
.studio-bar__link.is-active,
.studio-bar__link[aria-current="page"] {
  border-color: rgba(226, 232, 240, 0.5) !important;
  background: linear-gradient(165deg, rgba(226, 232, 240, 0.28), rgba(148, 163, 184, 0.18)) !important;
  color: #041016 !important;
}
.studio-bar__btn--signout {
  border-color: rgba(248, 113, 113, 0.35) !important;
  color: #fecaca !important;
}
.studio-bar__btn--signout:hover {
  border-color: rgba(248, 113, 113, 0.6) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(248, 113, 113, 0.2);
}

/*
 * Studio accent defaults ONLY on Studio desks.
 * Never set --sky/--accent on body.brand-portal or generic body.cc-body
 * (that overwrote every brand theme).
 */
body.studio-themed,
body[data-desk-theme="studio"],
body[data-page="admin"],
body[data-page="users"],
body[data-page="manuals"] {
  --sky: var(--club-sky, #c8d0dc);
  --sky2: var(--club-sky-deep, #94a3b8);
  --sky3: var(--club-sky-bright, #e2e8f0);
  --sky-bright: var(--club-sky-bright, #e2e8f0);
  --accent: var(--club-sky, #c8d0dc);
  --accent-bright: var(--club-sky-bright, #e2e8f0);
  --cc-accent: var(--club-sky, #c8d0dc);
  --cc-accent-2: var(--club-sky-bright, #e2e8f0);
  --cc-accent-deep: var(--club-sky-deep, #94a3b8);
}

/* ---- Studio admin dashboard ---- */
body[data-page="admin"].studio-themed,
body[data-page="admin"][data-desk-theme="studio"],
body[data-page="admin"] {
  background:
    radial-gradient(ellipse 60% 35% at 0% 0%, rgba(200, 208, 220, 0.08), transparent 50%),
    linear-gradient(180deg, #05080f 0%, #0a0e14 100%);
}
body[data-page="admin"] .cc-rail,
body[data-page="admin"] .admin-nav {
  border-right: 1px solid rgba(148, 163, 184, 0.16);
}
body[data-page="admin"] .cc-rail a:hover,
body[data-page="admin"] .admin-nav a:hover,
body[data-page="admin"] .cc-rail a.is-active,
body[data-page="admin"] .admin-nav a.is-active,
body[data-page="admin"] .cc-rail a[aria-current="page"],
body[data-page="admin"] .cc-rail__item.is-active,
body[data-page="admin"] .admin-nav__item.is-active {
  background: linear-gradient(165deg, rgba(200, 208, 220, 0.14), rgba(255, 255, 255, 0.04));
  color: #fff;
  box-shadow: 0 0 16px rgba(200, 208, 220, 0.08);
  border-color: rgba(200, 208, 220, 0.22);
}

/* ---- Brand desks: do NOT force navy cards or cyan buttons ---- */
/* club-command.css + brand-theme.js own colors via --cc-* / --sky */

/* Soft pill radius only (no color) on brand desk buttons */
body[data-page="business"] .cc-btn,
body[data-page="business"] .btn,
body.desk-themed:not(.studio-themed) .cc-btn,
body.desk-themed:not(.studio-themed) .btn {
  border-radius: var(--club-pill);
}

/* ---- Customer portal / account: brand vars only, no forced navy ---- */
/* Light brands: portal.css already has theme-light rules */
/* Dark brands: portal.css defaults + brand-theme tokens */

/* Buttons on customer portal follow --sky from brand-theme */
body.brand-portal .btn.primary,
body.brand-portal button.primary,
body[data-studio="portal"] .btn.primary {
  border-radius: var(--club-pill);
  border: 1px solid color-mix(in srgb, var(--sky, #c8d0dc) 45%, transparent);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--sky, #c8d0dc) 55%, #fff),
    var(--sky, #c8d0dc)
  );
  color: #041018;
  font-weight: 700;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--sky, #c8d0dc) 28%, transparent);
}
body.brand-portal.theme-light .btn.primary,
body.theme-light[data-studio="portal"] .btn.primary {
  color: #1a1408;
}
body.brand-portal .btn.ghost,
body[data-studio="portal"] .btn.ghost {
  border-radius: var(--club-pill);
  border: 1px solid color-mix(in srgb, var(--sky, #c8d0dc) 28%, transparent);
  background: transparent;
  color: var(--text, #e2e8f0);
}
body.brand-portal.theme-light .btn.ghost,
body.theme-light[data-studio="portal"] .btn.ghost {
  color: var(--text, #1f2937);
}

/* Shop: use brand accent vars, not hard-coded cyan */
body.store-page {
  --shop-accent: var(--sky, #c8d0dc);
  --shop-accent-bright: var(--sky3, var(--sky-bright, #e2e8f0));
  --shop-line: color-mix(in srgb, var(--sky, #c8d0dc) 22%, transparent);
}

/* Social icons: follow brand sky */
a.brand-social-link {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text, #e2e8f0);
  border: 1px solid color-mix(in srgb, var(--sky, #c8d0dc) 40%, transparent);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--sky, #c8d0dc) 18%, transparent),
    color-mix(in srgb, var(--sky, #c8d0dc) 8%, transparent)
  );
  box-shadow: 0 0 12px color-mix(in srgb, var(--sky, #c8d0dc) 18%, transparent);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
a.brand-social-link:hover {
  color: #fff;
  border-color: color-mix(in srgb, var(--sky, #c8d0dc) 70%, transparent);
  transform: translateY(-2px);
}
body.theme-light a.brand-social-link:hover {
  color: var(--text, #0f172a);
}

/* Manuals in studio shell */
body[data-page="manuals"] .btn {
  border-radius: var(--club-pill);
}