/* LIGHT THEME - the phone apps' look on the web.
   Applies when <body> has .light-version, which is the default. UI_THEME=dark
   in .env switches back to the dark theme; its .dark-version rules are all
   still in defaults.css, untouched.

   Palette from the iOS app's Theme.swift (light appearance): page #f5f5f7,
   cards #ffffff, fields #eceef2, accent #3b82f6, deep #1d4ed8.

   Most of defaults.css paints with the --mdt-* variables, so redefining them
   here flips the tiles, tabs, wizard, bubbles and lists in one place. The rules
   further down are for the spots that hard-code white-on-dark colors. */

.light-version {
  --mdt-bg-primary: #f5f5f7;
  --mdt-bg-secondary: #eceef2;
  --mdt-bg-card: #ffffff;
  --mdt-bg-sidebar: #eceef2;
  --mdt-accent: #3b82f6;
  --mdt-accent-light: #2563eb;      /* a hover/link blue that reads on white */
  --mdt-accent-dark: #1d4ed8;
  --mdt-text: #1f2937;
  --mdt-text-primary: #1f2937;
  --mdt-text-secondary: #374151;
  --mdt-text-muted: #6b7280;
  --mdt-border: rgba(15, 23, 42, 0.12);
  --mdt-border-light: rgba(15, 23, 42, 0.06);

  background-color: var(--mdt-bg-primary) !important;
  color: var(--mdt-text-primary);
}

.light-version .main-content,
.light-version .page-header {
  background-color: transparent !important;
}

/* ---- Navbar: a blue gradient like the home tiles rather than plain white,
   so the bar reads as the app's header without going dark. Icons are slate; hover/open lifts each one onto a white chip with the
   accent blue, which stands out against the tint. ---- */
.light-version .navbar-main.mdt-navbar {
  /* Same recipe as the home tiles: an accent wash fading across white, with
     a blue rail down the left edge (drawn as a background stripe). */
  background-image:
    linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%),
    linear-gradient(100deg, rgba(59, 130, 246, 0.34) 0%, rgba(59, 130, 246, 0.24) 60%, rgba(59, 130, 246, 0.15) 100%) !important;
  background-size: 4px 100%, 100% 100% !important;
  background-repeat: no-repeat !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(59, 130, 246, 0.30);
  box-shadow: 0 4px 16px rgba(29, 78, 216, 0.08) !important;
}
.light-version .mdt-nav-btn {
  color: #475569 !important;
}
.light-version .mdt-nav-btn:hover,
.light-version .mdt-nav-btn:focus-visible,
.light-version .show > .mdt-nav-btn,
.light-version .mdt-nav-btn[aria-expanded="true"] {
  background-color: #ffffff;
  border-color: rgba(59, 130, 246, 0.35);
  color: var(--mdt-accent-dark) !important;
}
.light-version .mdt-nav-btn--lead {
  background-color: rgba(255, 255, 255, 0.75);
  border-color: rgba(59, 130, 246, 0.22);
  color: var(--mdt-text-primary) !important;
}
.light-version .mdt-nav-divider { background-color: rgba(59, 130, 246, 0.22); }
.light-version .mdt-nav-identity .mdt-nav-practice { color: var(--mdt-text-primary); }
.light-version .mdt-nav-identity .mdt-nav-user { color: var(--mdt-text-muted); }

/* ---- Buttons: the phone's solid accent button. The navbar carries this
   class too, so it is left out - the bar is white (above), and a hover rule
   here once turned the whole bar blue under its dark text. ---- */
.light-version .bg-gradient-primary-mdt:not(.mdt-navbar) {
  background-image: none !important;
  background-color: var(--mdt-accent) !important;
  color: #ffffff !important;
}
.light-version .btn.bg-gradient-primary-mdt:hover {
  background-color: var(--mdt-accent-dark) !important;
}

/* ---- Tabs, steppers, counts: white-on-dark tints become dark-on-light ---- */
.light-version .mdt-tab:hover,
.light-version .wiz-step-btn:hover:not([disabled]) {
  background-color: rgba(15, 23, 42, 0.05);
}
.light-version .mdt-tab-count,
.light-version .wiz-step-btn .wiz-num {
  background-color: rgba(15, 23, 42, 0.08);
}
.light-version .mdt-tab.active .mdt-tab-count { background-color: rgba(255, 255, 255, 0.25); }

/* ---- Pills: the dark theme's pale text on a faint tint has no contrast on
   white, so each keeps its hue and gets the deeper shade of it. ---- */
.light-version .mdt-pill--on   { color: #047857 !important; }
.light-version .mdt-pill--off  { color: #475569 !important; }
.light-version .mdt-pill--new  { color: #1d4ed8 !important; }
.light-version .mdt-pill--warn { color: #b45309 !important; }
.light-version .mdt-pill--req,
.light-version .wiz-req        { color: #be123c !important; }
.light-version .wiz-saveflash  { color: #047857; }
.light-version .mdt-row-action--danger:hover { color: #be123c !important; }

/* ---- Message bubbles: theirs white with a hairline, yours stays blue ---- */
.light-version .mdt-msg-bubble {
  background-color: var(--mdt-bg-card);
  border-color: var(--mdt-border);
}

/* ---- Sticky referral header: a soft shadow, not the dark theme's black ---- */
.light-version .mdt-sticky-head.is-stuck {
  box-shadow: 0 10px 12px -10px rgba(15, 23, 42, 0.18);
}

/* ---- bg_primary_dark_mdt was navy. Elsewhere it carries white text (your
   own bubbles and buttons on the compose screen), so it becomes the accent;
   beside the sign-in forms it is the logo panel, a soft blue tint. ---- */
.light-version .bg_primary_dark_mdt {
  background-color: var(--mdt-accent) !important;
}
.light-version .page-header .bg_primary_dark_mdt {
  background-color: #e8effc !important;
}
.light-version .page-header .bg_primary_dark_mdt h4,
.light-version .page-header .bg_primary_dark_mdt p {
  color: var(--mdt-text-primary) !important;
}

.light-version .page-loading-overlay { background: rgba(245, 245, 247, 0.6); }

/* ---- btn-outline-light was the dark theme's quiet button (Conversation,
   Update, Exit, Info). White on white vanishes, so it becomes a neutral
   outline with dark text. ---- */
.light-version .btn-outline-light {
  color: var(--mdt-text-secondary) !important;
  border-color: rgba(15, 23, 42, 0.22) !important;
  background-color: var(--mdt-bg-card);
}
.light-version .btn-outline-light:hover,
.light-version .btn-outline-light:focus-visible {
  color: var(--mdt-accent-dark) !important;
  border-color: var(--mdt-accent) !important;
  background-color: rgba(59, 130, 246, 0.08);
}

/* ---- Sign-in forms: card-plain's header kept Soft UI's white, which left a
   white tab above a transparent body. ---- */
.light-version .card-plain .card-header,
.light-version .card-plain .card-body,
.light-version .card-plain .card-footer {
  background-color: transparent !important;
}

/* ---- Switches: the phone's accent rather than Soft UI's navy gradient ---- */
.light-version .form-switch .form-check-input:checked {
  background-color: var(--mdt-accent) !important;
  border-color: var(--mdt-accent) !important;
  background-image: none;
}
.light-version .form-switch .form-check-input:checked:after {
  background-color: #ffffff;
}

/* ---- Navbar icons lift on hover, the same motion as the home tiles. Each
   icon moves on its own; the bar stays put so nothing shifts under the
   pointer on the way to a click. ---- */
.light-version .mdt-nav-btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.light-version .mdt-nav-btn:hover,
.light-version .mdt-nav-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(59, 130, 246, 0.22);
}
.light-version .mdt-nav-btn:active,
.light-version .show > .mdt-nav-btn {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .light-version .mdt-nav-btn:hover,
  .light-version .mdt-nav-btn:focus-visible { transform: none; }
}

/* ---- Question icons are dark line art; the dark theme inverts them to
   white (.mdt-qa-icon in defaults.css). On light surfaces they show as drawn. */
.light-version .mdt-qa-icon {
  filter: none;
}
/* The question-icon picker (Practice Settings) drew each icon on a navy tile. */
.light-version .icon-choice[data-value]:not([data-value="0"]) {
  background: var(--mdt-bg-secondary) !important;
}

/* ---- The sign-in pages' text links (Register, Login, Forgot Password?)
   carry bg-default-reverse-primary-mdt, which paints the card colour behind
   them. On the dark theme that matched the page; here it left a white box
   around each link on the off-white form. ---- */
.light-version .bg-default-reverse-primary-mdt {
  background-color: transparent !important;
  color: var(--mdt-accent-light);
}
.light-version a.bg-default-reverse-primary-mdt:hover {
  color: var(--mdt-accent-dark);
  text-decoration: underline;
}

/* ---- Practice registration wizard: its Next / Previous buttons and the
   step icons were Soft UI's navy bg-gradient-dark, the last of the dark
   theme on the sign-up path. ---- */
.light-version .multisteps-form__form .btn.bg-gradient-dark,
.light-version .multisteps-form__form .avatar.bg-gradient-dark {
  background-image: none !important;
  background-color: var(--mdt-accent) !important;
  color: #ffffff !important;
}
.light-version .multisteps-form__form .btn.bg-gradient-dark:hover {
  background-color: var(--mdt-accent-dark) !important;
}