/*
 * Styled after Süddeutsche Krankenkasse's (SDK) public Kundenportal
 * (kundenportal.sdk.de) - a real German health insurer's customer-portal
 * login, and a plausible real-world home for an EHIC-based wallet login
 * (see CREDENTIAL_VCT in config.py). Colors, typography, and the overall
 * page structure below (two-tier header, bare unboxed two-column login
 * section, big centered hero heading, flat navy footer with its flag
 * accent) were read directly off the live site's own saved HTML/CSS
 * (exact Chakra UI theme tokens - blue-400/500/600/800, gray-100, etc.)
 * for fidelity; this file itself contains no copied asset bytes or
 * marketing copy, though static/logo.svg (referenced via views.py's
 * logo_html(), not this file) is SDK's actual logo - see config.py's
 * module docstring for that call. views.py's page() still renders the
 * "Demo" badge + non-affiliation banner/footer line regardless, so nobody
 * mistakes this for SDK's real site.
 *
 * --accent/--accent-dark (the login button's own two shades of blue) are
 * the theme-dependent custom properties, set inline in views.page() from
 * branding.json, ready to be swapped for a different client's colors
 * later. Everything else here (the flat/square visual language, the gray
 * header, the navy footer) is a structural style choice tied to this
 * specific reskin, not meant to be swapped per-client the same way.
 */

/* Self-hosted (not loaded from fonts.googleapis.com at runtime) for the
   same reason the other three demo apps self-host Inter: no dependency on
   an external font request. Real Roboto, fetched once from Google's own
   CDN (Apache-2.0 licensed, freely redistributable) - not a lookalike -
   because the reference site resolves its entire UI to "Roboto, sans-serif"
   and that specific, slightly technical/corporate grotesque is a big part
   of why this reskin reads as "SDK-like" instead of just "blue and square".
   Variable font (weight 100-900 in one file per subset), same pattern as
   the other apps' Inter setup. Latin + Latin-ext only. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #ffffff;
  --card: #ffffff;
  --text: #1a202c;
  --muted: #6b7280;
  --border: #e2e4e9;
  --danger: #c0392b;

  /* Structural to this reskin, not swappable via branding.json - see the
     header/footer comments below for where each one is used. */
  --header-bg: #efefef;
  --heading: #1564bf;
  --footer-bg: #17376a;
}

* { box-sizing: border-box; }

/* Sticky footer: body is a full-viewport-height flex column, main is the
   one flexible child (flex: 1 0 auto below), so it stretches to fill
   whatever space the demo-banner/header/footer don't need - pushing the
   footer to the actual bottom of the viewport on short pages (the waiting
   and profile screens especially) instead of leaving a gap under it, while
   still scrolling normally once content is taller than the viewport. */
body {
  margin: 0;
  font-family: 'Roboto', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Ahead of the header on every page - see views.py's page() for why this
   app is skinned to evoke a real insurer's portal at all, and why this
   banner has to stay impossible to miss. */
.demo-banner {
  background: #fdf3d7;
  color: #7a5b00;
  border-bottom: 1px solid #f0d28a;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 16px;
}

/* The reference header is two stacked bands, not one: a plain empty gray
   utility strip (64px, its own markup is a literally-empty div for a
   logged-out visitor), then a much taller plain-white band that gives the
   logo a lot of room. Squeezing the logo into the gray strip itself (the
   earlier version of this file) looked nothing like it. */
.header-utility {
  height: 64px;
  background: var(--header-bg);
}

.site-header {
  background: var(--bg);
  padding: 28px 32px 32px;
}

/* Set by the inline detection script in views.py's page() when this app
   is shown inside the demo dashboard's iframe (see ../dashboard/). The
   gray utility strip is pure decoration with no content, so it's hidden
   outright, same as the issuer/verifier's own embedded-chrome handling.
   The header itself is different for this one app: it now carries SDK's
   real logo (see config.py's module docstring), which is worth keeping
   visible in Tabbed/Split view as the visual cue for "this pane is the
   client-site branding" - so instead of hiding it like the other three
   demo apps do, it's shrunk to a compact strip (smaller padding, smaller
   logo, brand-name/demo-badge text dropped to save width) rather than
   removed. The demo-banner text disclaimer above it is unaffected either
   way - see that rule elsewhere in this file. */
html.is-embedded .header-utility {
  display: none;
}
html.is-embedded .site-header {
  padding: 12px 16px;
}
html.is-embedded .logo-slot {
  height: 40px !important;
}
html.is-embedded .brand-name,
html.is-embedded .demo-badge {
  display: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text);
}
.brand-name { font-size: 20px; font-weight: 700; }

/* Same pill-badge language the other three demo apps use for their
   Issuer/Verifier/Wallet role tags, reused here for the one thing that
   actually matters on this app's header: that it's a demo, not SDK.
   Deliberately still pill-shaped even though nothing else on this page is
   rounded anymore - it's a marker overlaid on the design, not part of it,
   and should read that way. */
.demo-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a5b00;
  background: #fce8ae;
  vertical-align: middle;
}

main {
  flex: 1 0 auto;
  padding: 8px 24px 64px;
}

/* The reference site's own headline ("ANMELDEN") is huge, centered,
   uppercase (a text-transform, not upper-cased source text), and stands
   completely alone - no card, no border, generous whitespace above and
   below it before the (unboxed) form content starts. */
.hero-heading {
  max-width: 960px;
  margin: 32px auto 40px;
  text-align: center;
  color: var(--heading);
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

/* No boxed/bordered/shadowed panel here on purpose - the reference site's
   form sits bare on the page background. This app still uses a left-
   aligned blue sub-heading above its own content, matching the reference
   site's own "Nutzen Sie bereits die SDK-App?" style headers (bold,
   blue-400, NOT uppercase - only the hero heading gets that transform).
   flex+gap (not per-child margins) so vertical spacing between blocks is
   one deliberate, generous number instead of a pile of ad-hoc margins that
   added up to "too cramped" last time. */
.bare-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}
.section-heading {
  color: var(--heading);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}
.bare-section p { margin: 0; font-size: 16px; line-height: 1.6; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* Single-column pages (waiting-for-wallet, profile) stay narrow like the
   old layout; the login page below is genuinely two-column instead, so it
   gets its own wider wrapper rather than this one. */
.page-narrow {
  max-width: 540px;
  margin: 0 auto;
}

/* The reference login screen is two columns (the form itself, and a
   second column of informational blurbs + a secondary call-to-action) -
   see login_page() in views.py for why the right column here is original
   copy, not a copy of the reference site's own marketing text. */
.login-columns {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 72px;
}
.login-columns > .col {
  flex: 1 1 340px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.login-columns > .col p { margin: 0; font-size: 16px; line-height: 1.6; }

.flash {
  background: #ebf8ff;
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 0;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
}

/* Square corners, uppercase labels, no shadow - matches the reference
   site's "EINLOGGEN" / "REGISTRIEREN" buttons (border-radius: 0,
   font-weight: 600, text-transform: uppercase), sized up a bit from the
   reference's own 40px so it reads as a substantial primary action rather
   than a cramped strip. */
.btn {
  display: inline-block;
  border: none;
  border-radius: 0;
  padding: 0 28px;
  height: 52px;
  line-height: 52px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
/* Hardcoded blue-600 (not var(--accent), the button-fill blue) to match the
   reference's own outline button exactly - it uses a slightly darker blue
   for outline/text than for filled buttons. */
.btn-secondary { background: transparent; color: #005ca9; border: 1px solid #005ca9; }
.btn-secondary:hover { background: #ebf8ff; }
.btn-wide { display: block; width: 100%; }

.qr-wrap {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.qr-code {
  width: 220px;
  height: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px;
}

.link-row { margin: 4px 0 14px; }

/* Wraps the "Or copy the link below" + raw URI in a native <details>, same
   pattern as the wallet's details.raw-block - collapsed by default so the
   long deep link doesn't sit in plain view. */
.link-reveal summary { cursor: pointer; }
.link-reveal[open] summary { margin-bottom: 6px; }

.deep-link-uri {
  display: block;
  word-break: break-all;
  background: #f4f5f7;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  padding: 10px 14px;
  font-size: 12px;
  margin-top: 6px;
}

.status-line { text-align: center; margin-top: 18px; }

.profile-section .profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}
.profile-section .section-heading { margin-bottom: 2px; }
.profile-section .profile-header p { margin: 2px 0 0; }

.profile-fields {
  margin: 20px 0 8px;
  border-top: 1px solid var(--border);
}
.profile-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.profile-label { color: var(--muted); }
.profile-value { font-weight: 600; text-align: right; }

.logo-slot { display: inline-flex; flex-shrink: 0; }
.logo-slot svg, .logo-slot .logo-img { height: 100%; width: auto; display: block; }

/* Footer: a tall navy band (icon row, then a version/legal-link strip,
   both light-on-navy regardless of light/dark mode - --footer-bg is
   already a dark navy in both themes, see the two dark-mode blocks
   above), then this app's own disclaimer line below it on the page
   background proper. The reference site's icon row links out to real
   social profiles; these five are decorative only (no hrefs, aria-hidden)
   - showing generic platform glyphs as page chrome doesn't claim a real
   SDK presence the way live links to their actual accounts would. */
footer.site-footer { margin-top: 64px; }

.footer-band {
  position: relative;
  background: var(--footer-bg);
  padding: 44px 24px 20px;
}

/* The reference site has a small circular control sitting right on the
   seam between the white page and the navy footer band. Repurposed here
   as this app's own light/dark toggle (see the inline script in
   views.py's page()) - background: var(--footer-bg) so it reads as "part
   of the band" in both themes without a separate dark override. This
   toggle is local to this one app; the rest of the demo has no equivalent
   control and keeps following the OS/browser's preference untouched. */
.theme-toggle {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--bg);
  background: var(--footer-bg);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle:hover { filter: brightness(1.15); }

.footer-icons {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.footer-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #b7c2d6;
  font-size: 11px;
}
.footer-icon svg { width: 20px; height: 20px; }

.footer-legal {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #b7c2d6;
}
.footer-build { color: #8b98b3; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links span { color: #b7c2d6; cursor: default; }

.footer-disclaimer {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 24px 28px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* Dark-mode variant. This app is a fixed LIGHT theme by default, full stop -
   it's meant to look like a real light-themed insurer portal, which has no
   dark mode of its own, so unlike every other app in this demo it does
   NOT follow the OS/browser's prefers-color-scheme at all (no @media query
   here on purpose - light is the bare :root default above regardless of
   system preference). The only way this ever shows dark is the explicit
   .theme-toggle in the footer (see views.py's page()), which sets
   `data-theme="dark"` and remembers it in localStorage for next visit -
   this block is what that toggle actually switches to.
   --accent/--accent-dark (the button-fill blues) are deliberately left
   alone here: they're set inline from branding.json in views.py's
   page(), in a <style> tag that comes after this stylesheet in the
   document - same specificity, later wins, so any --accent override
   attempted here would just be silently discarded. The existing blue has
   enough contrast against a dark background regardless, so nothing is
   lost by leaving it be. */
:root[data-theme="dark"] {
  --bg: #0b1220;
  --card: #121b2e;
  --text: #e6e9f0;
  --muted: #93a0b8;
  --border: #29344a;
  --header-bg: #0b1220;
  --heading: #4ea1ff;
  --footer-bg: #0a1830;
}
:root[data-theme="dark"] .flash { background: #13283a; }
:root[data-theme="dark"] .btn-secondary { color: #7fc0ff; border-color: #7fc0ff; }
:root[data-theme="dark"] .btn-secondary:hover { background: #13283a; }
:root[data-theme="dark"] .deep-link-uri { background: #0e1626; }