/*
 * Static styling for the demo wallet. --accent is the one theme-dependent
 * custom property, set inline in views.page() from branding.json and
 * consumed here via var(--accent). The credential-card gradient itself is
 * still built as an inline style per card (see views.guess_style()), since
 * it varies per credential family, not just by brand.
 */

/* Self-hosted rather than loaded from fonts.googleapis.com, so this app
   doesn't depend on an external request at all (same reasoning as the
   issuer's main.css: keep one shared typeface across all three demo apps
   without relying on any of them reaching out to Google Fonts live).
   Latin + Latin-ext only (English/German/EU text, not a full i18n product). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter-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: #0f1220;
  --card: #1a1e33;
  --text: #e8eaf6;
  --muted: #9aa0c3;
  --danger: #ff6b6b;
  --ok: #52d17c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

header {
  padding: 20px 24px;
  border-bottom: 1px solid #2a2f4a;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 18px; }
/* Padding + inline-flex (not just a margin around bare text) so each nav
   link's actual tap target is close to the 44px touch-target minimum,
   not just its text's own small bounding box - the same "measure with a
   real fingertip, not a mouse pointer" pass the buttons elsewhere got. */
header nav a {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 10px 8px;
  color: var(--muted);
  font-weight: 500;
  font-size: 14px;
}
header nav a:hover { color: var(--accent); }

/* Mobile only: the header's two flex children (brand + nav) don't fit side
   by side on a phone-width screen, and flex items refuse to shrink below
   their own content width by default - without this, the whole page's
   layout viewport was forced wider than the actual device width instead of
   the nav just dropping to its own line. Doesn't affect desktop at all. */
@media (max-width: 480px) {
  header {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* The logo is set inline (views.py's logo_html(), height:72px) and doesn't
     scale with its container; at a wide aspect ratio that alone was ~161px,
     wider than a narrow phone has room for next to the title and badge. */
  header .logo-slot {
    height: 40px !important;
  }
}

/* Small distinguishing marker: same shared brand palette as the issuer/verifier
   apps, just a different tag per app (amber here, reusing the color the
   verifier's own template.scss already uses for "warning") so the demo's
   three roles are unmistakable at a glance. */
.role-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1b1200;
  background: #F39626;
}

main { max-width: 720px; margin: 0 auto; padding: 32px 20px 80px; }

.card {
  background: var(--card);
  border: 1px solid #2a2f4a;
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.card h3 { margin-top: 0; }
.muted { color: var(--muted); font-size: 13px; }

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

.error {
  background: #3a2030;
  border: 1px solid var(--danger);
  color: #ffd7d7;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 13px;
  white-space: pre-wrap;
  font-family: monospace;
}

.card.card-error { background: #2a1c26; border-color: var(--danger); }
.card.card-error h3 { color: #ffb3b3; }

textarea, input[type=text] {
  width: 100%;
  background: #12162a;
  border: 1px solid #2a2f4a;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 13px;
}
textarea { min-height: 90px; }

button, .btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 18px;
  /* min-height (not just padding) so the touch target is a real 44px even
     when a short single-line label's own box-height would otherwise land
     a few px short of that - the padding above still governs how the
     button *looks*, this only pads out its hit area when needed. */
  min-height: 44px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-top: 10px;
}
button.secondary, .btn.secondary { background: #2a2f4a; }
button.danger, .btn.danger { background: var(--danger); }

pre {
  background: #12162a;
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 12px;
}

.claim-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed #2a2f4a; font-size: 14px; }
.claim-row:last-child { border-bottom: none; }
.empty { color: var(--muted); text-align: center; padding: 40px 0; }

/* --- credential picker on the "present" screen: the same card face as the
   main list (see .cred-card below), each one itself the click target for
   picking which credential to send - not a raw config-id string next to a
   tiny native radio. --- */
.cred-select-option {
  display: block;
  position: relative;
  cursor: pointer;
  margin-bottom: 16px;
  border-radius: 16px;
  transition: transform 120ms ease-in-out;
}
.cred-select-option:hover { transform: translateY(-2px); }

.cred-select-radio {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  z-index: 1;
}

.cred-select-option:has(.cred-select-radio:checked) .cred-card {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* --- credential card face --- */
/* Every credential type is a light/white card now (see config.py's
   CRED_TYPE_STYLES comment - this used to be the dark-gradient-plus-white-
   text default, with only EHIC as a light exception; inconsistent the
   moment a wallet held more than one type, so this is the base for all of
   them now). `color` here is just a safety-net default - every type in
   CRED_TYPE_STYLES (and guess_style()'s fallback) always sets its own
   inline text_color, which wins over this. */
.cred-card-link { display: block; text-decoration: none; margin-bottom: 18px; }
.cred-card {
  position: relative;
  border-radius: 16px;
  padding: 22px 24px;
  color: #1a1e33;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  aspect-ratio: 1.6 / 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* EHIC-only chrome (see CRED_TYPE_STYLES' "show_egk_chrome" in config.py) -
   a smart-card contact chip and the EU's 12-star emblem, both standardized
   elements a real EHIC-enabled card is required to show, positioned the
   way they'd actually sit on one: chip upper-left, emblem lower-right,
   clear of the name/fields content in between. */
.cc-chip { position: absolute; top: 52px; left: 24px; width: 34px; height: auto; }
.cc-eu-emblem { position: absolute; bottom: 16px; right: 18px; width: 26px; height: 26px; }

/* EHIC-only accent (see credential_card_html() in views.py) - every card is
   light now (see .cred-card above), so this no longer needs to carry the
   light-vs-dark distinction itself; it's just the one thing that's still
   genuinely specific to EHIC/eGK-format cards: an orange stripe in the
   same spot (left edge) and rough proportion SDK's own logo uses it - not
   a wide-open second brand color, just an echo of that one stroke. */
.cred-card--ehic::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: #F37021;
}

/* Takes over the cc-type slot on the EHIC card (see credential_card_html()) -
   SDK's logo instead of a plain text label, same left position, sized to
   sit comfortably next to .cc-issuer on the same row. */
.cc-type-logo { height: 30px; width: auto; display: block; }

/* The card-type wording that would otherwise be in .cc-type (now occupied
   by the logo instead) - moved down next to the chip rather than dropped,
   so the card still says what it is without a second logo-sized element
   competing with the real one for the same corner. */
.cc-ehic-label {
  position: absolute;
  top: 60px;
  left: 66px;
  max-width: 60%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
  opacity: 0.85;
}
.cc-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; opacity: 0.85; gap: 8px; }
.cc-type { font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-issuer { font-size: 11px; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.cc-name { font-size: 22px; font-weight: 700; margin: 6px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 4px; overflow: hidden; }
.cc-field { display: flex; flex-direction: column; min-width: 0; }
.cc-label { font-size: 10px; text-transform: uppercase; opacity: 0.65; letter-spacing: 0.03em; }
.cc-value { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-bottom { font-size: 11px; opacity: 0.8; border-top: 1px solid rgba(0,0,0,0.14); padding-top: 8px; margin-top: 8px; }

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

details.raw-block { margin-top: 14px; }
details.raw-block summary { cursor: pointer; color: var(--muted); font-size: 13px; }

/* --- QR camera scanner (static/js/qr-scanner.js) --- */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.qr-scan-btn { display: inline-flex; align-items: center; gap: 8px; }
.qr-scan-btn svg { flex-shrink: 0; }

.qr-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 7,15, 0.85);
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}
.qr-modal.open { display: flex; }

.qr-modal-inner {
  background: var(--card);
  border: 1px solid #2a2f4a;
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}
.qr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #2a2f4a;
  font-weight: 600;
}
.qr-modal-close {
  background: none;
  border: none;
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin: 0;
  /* A finger-sized hit target, not just the glyph's own tiny box - the
     whole point of the mobile pass this shipped with. */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #000;
  display: block;
}
.qr-status { text-align: center; padding: 14px 18px; margin: 0; }

/* Hidden above the mobile breakpoint by default - the @media block below
   turns it into a real fixed bar under 600px. Has to come BEFORE that
   block: same specificity (one class), so source order decides, and a
   plain rule placed after a @media block always wins regardless of
   viewport width - this one first lets the media query override it. */
.tab-bar { display: none; }

/* =========================================================================
   Mobile "app mode" - phone-width screens only (this whole block is behind
   the media query; nothing here touches the laptop/desktop layout above).
   The goal: touch-first navigation (a fixed bottom tab bar, like a native
   app, instead of top text links you have to reach for) and generous
   tap targets/spacing, not a different visual language - same dark
   theme, same cards, same colors as desktop.
   ========================================================================= */
@media (max-width: 600px) {
  /* The header's own top nav is replaced by the bottom tab bar below -
     keeping both would be redundant navigation fighting for the same
     three destinations on a screen with little room to spare. */
  header nav { display: none; }

  header { padding: 14px 16px; }

  main {
    padding: 20px 16px;
    /* Room for the fixed tab bar so the last card in any list isn't
       hidden behind it - its own height (~56px) + its safe-area inset
       padding + a little breathing room. */
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .card { border-radius: 18px; padding: 18px 18px; }

  /* Stacked, full-width action buttons read as "an app's primary CTA
     row" - two medium buttons side by side (the desktop layout) get
     cramped at phone width once labels wrap. */
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .form-actions .btn, .form-actions button { width: 100%; }

  /* Fixed bottom tab bar - the actual "looks like an app" centerpiece.
     Translucent + blurred rather than a flat card color, so it reads as
     an OS-level chrome element floating over content (matching how
     native tab bars look) rather than another card in the page. */
  .tab-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: space-around;
    background: rgba(15, 18, 32, 0.88);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid #2a2f4a;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    z-index: 900;
  }
  .tab-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 72px;
    padding: 6px 10px;
    border-radius: 14px;
    color: var(--muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
  }
  .tab-bar-item svg { flex-shrink: 0; }
  .tab-bar-item.active { color: var(--accent); background: rgba(0, 110, 223, 0.14); }

  /* Tactile tap feedback - a small, quick scale-down on press is a big
     part of what makes touch navigation read as "an app" instead of "a
     website with big buttons". Scoped to this mobile block on purpose:
     it's a real (if subtle) interaction change, and desktop's mouse-click
     behavior stays exactly as it always was. */
  button, .btn, .cred-card-link, .tab-bar-item {
    transition: transform 100ms ease;
  }
  button:active, .btn:active, .cred-card-link:active, .tab-bar-item:active {
    transform: scale(0.96);
  }
  .cred-select-option:active { transform: scale(0.99); }
}