/* =====================================================================================
   Gym Keyper - Light / Dark appearance.
   Loaded by Views/Shared/_ThemeHead.cshtml. Light = the original look (nothing here changes it);
   everything below "DARK" only applies when <html data-theme="dark">.
   Part 1: the Light / Dark switch.  Part 2: sign-in pages (mg-auth.css).  Part 3: member-portal pages.
   ===================================================================================== */

/* ---------- 1 · the switch ---------- */
.mg-theme-row { display: flex; justify-content: flex-end; margin: -6px 0 12px; }
.mg-theme-switch { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 12px;
                   background: #e2e8f0; border: 1px solid transparent; }
.mg-theme-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; min-width: 76px;
                          padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: #475569;
                          font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
                          transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.mg-theme-switch button:hover { color: #0f172a; }
.mg-theme-switch button[aria-pressed="true"] { background: #fff; color: #0f172a; box-shadow: 0 2px 8px rgba(15, 23, 42, .12); }
.mg-theme-switch button[aria-pressed="true"] .fa-sun { color: #f59e0b; }
.mg-theme-switch button:focus-visible { outline: 3px solid rgba(59, 130, 246, .55); outline-offset: 1px; }

/* round icon button (member portal top bar) */
.mg-theme-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; padding: 0;
                border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: #fff; cursor: pointer; }
.mg-theme-btn:hover { background: rgba(255, 255, 255, .12); }
.mg-theme-btn:focus-visible { outline: 3px solid rgba(147, 197, 253, .7); outline-offset: 2px; }

/* ---------- DARK · switch ---------- */
html[data-theme="dark"] .mg-theme-switch { background: #0b1220; border-color: #24324a; }
html[data-theme="dark"] .mg-theme-switch button { color: #94a3b8; }
html[data-theme="dark"] .mg-theme-switch button:hover { color: #e2e8f0; }
html[data-theme="dark"] .mg-theme-switch button[aria-pressed="true"] { background: #1e293b; color: #f1f5f9; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .mg-theme-switch button[aria-pressed="true"] .fa-moon { color: #a5b4fc; }

/* ---------- 2 · DARK · sign-in pages (Staff login, Member login/register, Company registration) ---------- */
html[data-theme="dark"] {
    --primary: #f1f5f9;            /* used as heading / strong text colour on these pages */
    --primary-light: #e2e8f0;
    --accent: #60a5fa;
    --accent-dark: #93c5fd;        /* links */
    --surface: rgba(19, 28, 46, .85);
    --surface-solid: #131c2e;
    --bg: #0b1220;
    --text: #e5edf7;
    --text-secondary: #a8b5c7;
    --muted: #8796ab;
    --faint: #64748b;
    --line: #24324a;
    --line-strong: #33445f;
    --soft: #1a2539;
    --shadow: 0 8px 32px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .25);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, .5);
    --danger: #f87171; --success: #4ade80; --warning: #fbbf24; --info: #60a5fa;
}
html[data-theme="dark"] .mg-banner { background: radial-gradient(120% 140% at 100% 0%, #1e293b 0%, #111a2b 45%, #070c16 100%);
                                     box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .mg-hero { background: radial-gradient(120% 140% at 100% 0%, #1e293b 0%, #111a2b 45%, #070c16 100%);
                                   box-shadow: 0 12px 32px rgba(0, 0, 0, .45); border: 1px solid #1f2b40; }
html[data-theme="dark"] .mg-tabs { background: #0b1220; }
html[data-theme="dark"] .mg-tabs .on { background: #1e293b; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .mg-input { background: #0f1729; }
html[data-theme="dark"] .mg-input:focus { box-shadow: 0 0 0 4px rgba(96, 165, 250, .2); }
html[data-theme="dark"] .mg-input:-webkit-autofill,
html[data-theme="dark"] .mg-input:-webkit-autofill:hover,
html[data-theme="dark"] .mg-input:-webkit-autofill:focus { -webkit-text-fill-color: #e5edf7; -webkit-box-shadow: 0 0 0 1000px #0f1729 inset; caret-color: #e5edf7; }
html[data-theme="dark"] select.mg-input option { background: #131c2e; color: #e5edf7; }
html[data-theme="dark"] .mg-btn-ghost { background: transparent; }
html[data-theme="dark"] .mg-btn-ghost:hover { border-color: #64748b; }
html[data-theme="dark"] .mg-btn-primary { box-shadow: 0 4px 14px rgba(37, 99, 235, .35); }
html[data-theme="dark"] .mg-note.ok   { border-color: rgba(74, 222, 128, .35);  background: rgba(22, 163, 74, .12); }
html[data-theme="dark"] .mg-note.bad  { border-color: rgba(248, 113, 113, .35); background: rgba(220, 38, 38, .12); }
html[data-theme="dark"] .mg-note.warn { border-color: rgba(251, 191, 36, .35);  background: rgba(217, 119, 6, .12); }
html[data-theme="dark"] .mg-note.info { border-color: rgba(96, 165, 250, .35);  background: rgba(37, 99, 235, .12); }
html[data-theme="dark"] .mg-photo.drag { background: rgba(37, 99, 235, .12); }
html[data-theme="dark"] .mg-photo img { background: #1e293b; border-color: #334155; }
html[data-theme="dark"] .mg-success .tick { background: rgba(22, 163, 74, .12); border-color: rgba(74, 222, 128, .35); }
html[data-theme="dark"] .mg-toast.success { background: #15803d; }
html[data-theme="dark"] .mg-toast.error { background: #b91c1c; }
html[data-theme="dark"] .mg-toast.info { background: #1d4ed8; }

/* ---------- 3 · DARK · member-portal pages (My Membership, Renew, Invalid link - Bootstrap based) ---------- */
html[data-theme="dark"] body.mg-portal { --bg: #0b1220; background: #0b1220; color: #e5edf7; }
html[data-theme="dark"] body.mg-portal h1,
html[data-theme="dark"] body.mg-portal h2,
html[data-theme="dark"] body.mg-portal .stat-value { color: #f1f5f9; }
html[data-theme="dark"] body.mg-portal .stat-value.text-danger { color: #f87171 !important; }
html[data-theme="dark"] body.mg-portal .topbar { background: #070c16; border-bottom: 1px solid #1f2b40; }
html[data-theme="dark"] body.mg-portal .card { background: #131c2e; color: #e5edf7; box-shadow: 0 8px 26px rgba(0, 0, 0, .45); border: 1px solid #1f2b40; }
html[data-theme="dark"] body.mg-portal .text-muted { color: #94a3b8 !important; }
html[data-theme="dark"] body.mg-portal hr { border-color: #33445f; opacity: 1; }
html[data-theme="dark"] body.mg-portal a:not(.btn) { color: #93c5fd; }
html[data-theme="dark"] body.mg-portal .avatar { background: #1e293b; border-color: #1e293b; }
html[data-theme="dark"] body.mg-portal .list-group-item { background: transparent; color: #e5edf7; border-color: #24324a; }
html[data-theme="dark"] body.mg-portal .badge.bg-light { background: #1e293b !important; color: #e2e8f0 !important; }
html[data-theme="dark"] body.mg-portal .form-label { color: #cbd5e1; }
html[data-theme="dark"] body.mg-portal .form-control { background: #0f1729; color: #e5edf7; border-color: #33445f; }
html[data-theme="dark"] body.mg-portal .form-control:focus { background: #0f1729; color: #e5edf7; border-color: #60a5fa; box-shadow: 0 0 0 .25rem rgba(96, 165, 250, .2); }
html[data-theme="dark"] body.mg-portal .alert-warning { background: rgba(217, 119, 6, .14); color: #fde68a; border-color: rgba(251, 191, 36, .35); }
html[data-theme="dark"] body.mg-portal .alert-danger  { background: rgba(220, 38, 38, .14); color: #fecaca; border-color: rgba(248, 113, 113, .35); }
html[data-theme="dark"] body.mg-portal .alert a { color: #fff; }
html[data-theme="dark"] body.mg-portal .text-warning { color: #fbbf24 !important; }

/* ---------- glossy finish (both themes) - sign-in pages and member portal ---------- */
body.mg-auth { background:
    radial-gradient(900px 480px at 100% -10%, rgba(99, 102, 241, .08), transparent 60%),
    radial-gradient(800px 460px at -10% 110%, rgba(14, 165, 233, .07), transparent 60%), var(--bg); background-attachment: fixed; }
.mg-auth .mg-card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 44px -18px rgba(15, 23, 42, .22); border-color: rgba(15, 23, 42, .07); }
.mg-auth .mg-btn-primary { background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), var(--accent-gradient);
                           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 24px -10px rgba(79, 70, 229, .7); }
.mg-auth .mg-input:focus { border-color: #818cf8; box-shadow: 0 0 0 4px rgba(99, 102, 241, .16); }

html[data-theme="dark"] body.mg-auth { background:
    radial-gradient(900px 520px at 100% -12%, rgba(99, 102, 241, .18), transparent 60%),
    radial-gradient(800px 480px at -10% 112%, rgba(14, 165, 233, .10), transparent 60%), #0b1220; background-attachment: fixed; }
html[data-theme="dark"] .mg-auth .mg-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012) 160px, rgba(255, 255, 255, 0)), rgba(17, 26, 44, .86);
    border-color: rgba(148, 163, 184, .16);
    -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 70px -28px rgba(0, 0, 0, .9);
}
html[data-theme="dark"] .mg-auth .mg-input { background: rgba(2, 6, 23, .5); border-color: rgba(148, 163, 184, .2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .mg-auth .mg-input:focus { border-color: #818cf8; box-shadow: 0 0 0 4px rgba(129, 140, 248, .25); }
html[data-theme="dark"] .mg-auth .mg-btn-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01)); border-color: rgba(148, 163, 184, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
html[data-theme="dark"] .mg-auth .mg-tabs { background: rgba(2, 6, 23, .5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .mg-auth .mg-tabs .on { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .mg-hero { border-color: rgba(148, 163, 184, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 70px -28px rgba(0, 0, 0, .9); }

/* member portal */
body.mg-portal { background:
    radial-gradient(900px 480px at 100% -10%, rgba(99, 102, 241, .07), transparent 60%), var(--bg); }
body.mg-portal .card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 34px -16px rgba(15, 44, 76, .22); }
body.mg-portal .topbar { background: linear-gradient(135deg, #0f2c4c, #1e3a8a); box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .5); }
html[data-theme="dark"] body.mg-portal { background:
    radial-gradient(900px 520px at 100% -12%, rgba(99, 102, 241, .16), transparent 60%), #0b1220; }
html[data-theme="dark"] body.mg-portal .card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 140px), #111a2c;
    border-color: rgba(148, 163, 184, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -22px rgba(0, 0, 0, .85);
}
html[data-theme="dark"] body.mg-portal .topbar { background: rgba(10, 16, 30, .8); border-bottom: 1px solid rgba(148, 163, 184, .1);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* ---------- company logo auto-fit (wwwroot/js/mg-logo-fit.js) - both themes, every screen size ----------
   The script adds .logo-fit + a shape class + --logo-ar (logo width / height) to .mg-logo / .pf-logo / .gym-logo.
   The frame keeps the height each page gives it; only its width follows the logo, capped for small phones. */
:is(.mg-logo, .pf-logo, .gym-logo).logo-fit { transition: background-color .25s ease; }
:is(.mg-logo, .pf-logo, .gym-logo).logo-fit:is(.logo-wide, .logo-tall) {
    aspect-ratio: var(--logo-ar); width: auto !important; max-width: min(42vw, 190px); }
:is(.mg-logo, .pf-logo, .gym-logo).logo-fit img { width: 100%; height: 100%; object-fit: contain; padding: 11%; }
:is(.mg-logo, .pf-logo, .gym-logo).logo-fit.logo-wide img { padding: 5% 6%; }
:is(.mg-logo, .pf-logo, .gym-logo).logo-fit.logo-tall img { padding: 8% 10%; }
/* white / light logo on a transparent background: dark plate so it stays visible */
:is(.mg-logo, .pf-logo, .gym-logo).logo-fit.logo-plate-dark { background: linear-gradient(145deg, #1e293b, #0b1220) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 4px 14px rgba(15, 23, 42, .3); }
/* logo that has its own solid background colour: the frame becomes that colour and the logo fills it */
:is(.mg-logo, .pf-logo, .gym-logo).logo-fit.logo-plate-own { background: var(--logo-plate) !important; }
:is(.mg-logo, .pf-logo, .gym-logo).logo-fit.logo-plate-own img { padding: 0; }
@media (max-width: 360px) { :is(.mg-logo, .pf-logo, .gym-logo).logo-fit:is(.logo-wide, .logo-tall) { max-width: 36vw; } }
@media (prefers-reduced-motion: reduce) { :is(.mg-logo, .pf-logo, .gym-logo).logo-fit { transition: none; } }