/* Member app dark mode. Every rule starts with html.gs-dark, so Light mode is untouched. The colours (--d-*) are made from the
   club colour by App\Support\Tenancy\DarkMode. The door QR code is never restyled: the white card around it, and any white
   card that holds a day pass or link QR, are left alone (see the last block). */
html.gs-dark{color-scheme:dark}
html.gs-dark body,html.gs-dark .bg-vibe-50{background-color:var(--d-bg);color:var(--d-text)}
html.gs-dark .bg-white:not(:has(#passqr,#daypassqr,#linkqr,.dp-qr)):not([data-door-pass] *){background-color:var(--d-surface)}
html.gs-dark .bg-white.rounded-full:empty:not(#gs-x):not([data-door-pass] *){background-color:#ebe9f2}
html.gs-dark .bg-vibe-100,html.gs-dark .bg-vibe-200{background-color:var(--d-surface2)}
html.gs-dark .bg-vibe-950{background-color:var(--d-raised)}
html.gs-dark .hover\:bg-vibe-50:hover,html.gs-dark .hover\:bg-vibe-100:hover{background-color:var(--d-surface2)}

html.gs-dark .text-vibe-950,html.gs-dark .text-vibe-900,html.gs-dark .text-vibe-800,html.gs-dark .hover\:text-vibe-800:hover,html.gs-dark .hover\:text-vibe-900:hover{color:var(--d-text)}
html.gs-dark .text-vibe-700,html.gs-dark .text-vibe-600,html.gs-dark .hover\:text-vibe-700:hover,html.gs-dark .hover\:text-vibe-600:hover{color:var(--d-text2)}
html.gs-dark .text-vibe-500,html.gs-dark .text-vibe-400{color:var(--d-muted)}
html.gs-dark .text-black,html.gs-dark .text-gray-900,html.gs-dark .text-slate-900{color:var(--d-text)}
html.gs-dark .text-gray-700,html.gs-dark .text-gray-600,html.gs-dark .text-slate-700{color:var(--d-text2)}
html.gs-dark .text-gray-500,html.gs-dark .text-gray-400{color:var(--d-muted)}

html.gs-dark .border-vibe-50,html.gs-dark .border-vibe-100{border-color:var(--d-border)}
html.gs-dark .border-vibe-200,html.gs-dark .border-vibe-300{border-color:var(--d-border2)}
html.gs-dark .border-white{border-color:var(--d-surface)}
html.gs-dark .ring-white{--tw-ring-color:var(--d-surface)}
html.gs-dark .divide-vibe-50>:not([hidden])~:not([hidden]),html.gs-dark .divide-vibe-100>:not([hidden])~:not([hidden]){border-color:var(--d-border)}
html.gs-dark .shadow-lg,html.gs-dark .shadow-md,html.gs-dark .shadow{--tw-shadow-color:rgb(0 0 0/.6)}

/* Status colours: dark tinted panels with light text (each pair is well over 4.5 to 1). */
html.gs-dark .bg-red-50{background-color:#2d1517}
html.gs-dark .bg-amber-50,html.gs-dark .bg-yellow-100{background-color:#2b2110}
html.gs-dark .bg-amber-100{background-color:#3a2c0f}
html.gs-dark .bg-emerald-50,html.gs-dark .bg-green-50{background-color:#0f2b21}
html.gs-dark .bg-emerald-100{background-color:#14392b}
html.gs-dark .bg-sky-50{background-color:#0c2433}
html.gs-dark .bg-sky-100{background-color:#10324a}
html.gs-dark .bg-slate-200{background-color:var(--d-surface2)}
html.gs-dark .border-red-100,html.gs-dark .border-red-200,html.gs-dark .border-red-300{border-color:#7f1d1d}
html.gs-dark .border-amber-200,html.gs-dark .border-amber-300{border-color:#854d0e}
html.gs-dark .border-emerald-100,html.gs-dark .border-emerald-200{border-color:#065f46}
html.gs-dark .border-sky-100{border-color:#075985}
html.gs-dark .text-red-700,html.gs-dark .text-red-800,html.gs-dark .text-red-900{color:#fca5a5}
html.gs-dark .text-amber-700,html.gs-dark .text-amber-800,html.gs-dark .text-amber-900,html.gs-dark .text-amber-950{color:#fcd34d}
html.gs-dark .text-yellow-800{color:#fde047}
html.gs-dark .text-emerald-700,html.gs-dark .text-emerald-800,html.gs-dark .text-emerald-900,html.gs-dark .text-emerald-950{color:#6ee7b7}
html.gs-dark .text-green-800{color:#86efac}
html.gs-dark .text-sky-700,html.gs-dark .text-sky-800{color:#7dd3fc}
/* Added 23 Oct: the unread message cards (orange) and the other status colours that had no dark version, so nothing is white on a light panel. */
html.gs-dark .bg-orange-50{background-color:#2e1a0c}
html.gs-dark .bg-orange-100{background-color:#3d2410}
html.gs-dark .bg-red-100{background-color:#3b1a1c}
html.gs-dark .bg-green-100{background-color:#14392b}
html.gs-dark .bg-blue-50{background-color:#0f1f3a}
html.gs-dark .bg-indigo-50,html.gs-dark .bg-violet-50,html.gs-dark .bg-purple-50{background-color:#1f1a3a}
html.gs-dark .bg-cyan-50,html.gs-dark .bg-teal-50{background-color:#0c2a30}
html.gs-dark .bg-slate-50,html.gs-dark .bg-gray-50{background-color:var(--d-surface)}
html.gs-dark .bg-slate-100,html.gs-dark .bg-gray-100{background-color:var(--d-surface2)}
html.gs-dark .border-orange-200,html.gs-dark .border-orange-300,html.gs-dark .border-orange-400{border-color:#c2410c}
html.gs-dark .border-red-400{border-color:#b91c1c}
html.gs-dark .text-orange-600,html.gs-dark .text-orange-700,html.gs-dark .text-orange-800,html.gs-dark .text-orange-900{color:#fdba74}
html.gs-dark .text-red-600{color:#fca5a5}
html.gs-dark .text-green-600,html.gs-dark .text-green-700{color:#86efac}
html.gs-dark .text-blue-600,html.gs-dark .text-blue-700,html.gs-dark .text-blue-800{color:#93c5fd}
html.gs-dark .text-indigo-600,html.gs-dark .text-indigo-700,html.gs-dark .text-violet-700,html.gs-dark .text-purple-700{color:#c4b5fd}
html.gs-dark .text-cyan-700,html.gs-dark .text-cyan-800,html.gs-dark .text-teal-700,html.gs-dark .text-teal-800{color:#67e8f9}
html.gs-dark .text-amber-600{color:#fbbf24}
html.gs-dark .text-slate-600,html.gs-dark .text-slate-500{color:var(--d-text2)}
html.gs-dark [style*="background:#fef3c7"]{background:#2b2110!important;color:#fcd34d!important}
html.gs-dark [style*="background:#dcfce7"]{background:#0f2b21!important;color:#6ee7b7!important}

/* Fields, placeholders and focus. */
html.gs-dark input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]):not(.bg-transparent),html.gs-dark select,html.gs-dark textarea{background-color:var(--d-surface2);color:var(--d-text);border-color:var(--d-edge)}
html.gs-dark ::placeholder{color:var(--d-muted);opacity:1}
html.gs-dark :focus-visible{outline:2px solid var(--d-focus);outline-offset:2px}
html.gs-dark input[type=checkbox],html.gs-dark input[type=radio]{accent-color:var(--d-focus)}

/* Bottom bar, banners and the Appearance control. */
html.gs-dark nav.bg-white{background-color:var(--d-surface);border-color:var(--d-border)}
html.gs-dark [data-th-header]{border-bottom:1px solid var(--d-border)}
html.gs-dark .gs-appearance-opt{border-color:var(--d-edge)}
html.gs-dark .gs-appearance-opt:has(input:checked){border-color:var(--d-focus);box-shadow:0 0 0 1px var(--d-focus)}
html.gs-dark .gs-appearance-opt:has(input:focus-visible){outline-color:var(--d-focus)}

/* Logos: the GymStrato wordmark is dark ink, so it is turned light; a club logo made for light pages sits on a light chip. */
html.gs-dark img[src$="gymstrato-dark.svg"]{filter:brightness(0) invert(1);opacity:.85}
html.gs-dark main [data-brand-logo]{background:#ece9f3;border-radius:10px;padding:6px 10px}

/* Seasonal themes keep their colours; their light panels become dark ones. */
html.gs-dark .th-banner{background:color-mix(in srgb,var(--th-accent) 16%,var(--d-surface));color:var(--d-text);border-color:color-mix(in srgb,var(--th-accent) 45%,transparent)}
html.gs-dark .th-banner-x{color:var(--d-text)}
html.gs-dark .th-has-hero .th-banner-x{background:color-mix(in srgb,var(--d-surface) 88%,transparent)}
html.gs-dark .th-takeover .th-banner-title{color:var(--d-text)}
html.gs-dark.th-takeover .bg-vibe-50{background-color:color-mix(in srgb,var(--th-accent) 8%,var(--d-bg))!important}
html.gs-dark.th-takeover nav{background:color-mix(in srgb,var(--th-accent) 10%,var(--d-surface))!important}
html.gs-dark.th-takeover .border-vibe-100{border-color:color-mix(in srgb,var(--th-accent) 40%,var(--d-surface))!important}

/* The door QR code and any day pass or link QR: black on pure white with its white border, in every mode. Nothing above matches them. */
html.gs-dark [data-door-pass] .bg-white,html.gs-dark #passqr,html.gs-dark #daypassqr,html.gs-dark #linkqr,html.gs-dark .dp-qr,html.gs-dark .bg-white:has(#passqr,#daypassqr,#linkqr,.dp-qr){background-color:#fff!important;opacity:1}
html.gs-dark .bg-white:has(#passqr,#daypassqr,#linkqr,.dp-qr){color:#1f1b2e}
html.gs-dark .bg-white:has(#passqr,#daypassqr,#linkqr,.dp-qr) :is(.text-vibe-950,.text-vibe-900,.text-vibe-800){color:#1f1b2e}
html.gs-dark .bg-white:has(#passqr,#daypassqr,#linkqr,.dp-qr) :is(.text-vibe-700,.text-vibe-600){color:#4a4560}
html.gs-dark .bg-white:has(#passqr,#daypassqr,#linkqr,.dp-qr) .text-emerald-700{color:#047857}
/* Stripe card form fallback: if the page colours cannot be read, the form sits on a white panel so its dark labels stay readable. */
html #payment-element.gs-white,html #card-element.gs-white{background:#fff !important;color:#30313d !important;border-radius:14px;padding:14px 14px 4px;color-scheme:light}
/* Never light text on a light card: white cards and pills always get the dark mode text colour (the door and QR cards keep their own). */
html.gs-dark .bg-white:not(:has(#passqr,#daypassqr,#linkqr,.dp-qr)):not([data-door-pass] *){color:var(--d-text)}

/* Social links card: the icons are dark, so turn them white on the dark surface. */
html.gs-dark .gs-soc-ico{filter:brightness(0) invert(1)}
html.gs-dark .gs-msg,html.gs-dark .gs-msg p,html.gs-dark .gs-msg li,html.gs-dark .gs-msg h1,html.gs-dark .gs-msg h2,html.gs-dark .gs-msg h3{color:var(--d-text) !important}
html.gs-dark .gs-msg a{color:var(--d-link,#c4b5fd) !important}

/* translucent white panels must go dark with the rest of the page */
html.gs-dark [class*="bg-white/"]:not(:has(#passqr,#daypassqr,#linkqr,.dp-qr)){background-color:color-mix(in srgb,var(--d-surface) 80%,transparent)}