/* The built-in eudi-dev theme. theme.js sets data-theme to "dark" or "light".
   :root holds the dark colours, so a page also has them before the script
   runs. */
:root {
  color-scheme: dark;
  --bg: #17191e;
  --bg-header: #1a1d22;
  --bg-surface: #21242a;
  --bg-hover: #2c3038;
  --bg-btn: #2c3038;
  --bg-btn-hover: #3a3f48;
  --bg-btn-dialog: #343841;
  --bg-input: #1c1f24;
  --bg-dialog: #24272d;
  --bg-raised: #383d45;
  --bg-track: #15171b;
  --bg-segment: #3a404d;
  --text-segment: #ffffff;
  --shadow-segment: none;
  --scrim: rgba(8, 9, 11, 0.6);
  --shadow-card: 0 6px 14px rgba(0, 0, 0, 0.35);
  --shadow-dialog: 0 24px 60px rgba(0, 0, 0, 0.45);
  --text: #eceef1;
  --text-dim: #a9afb9;
  --border: #383d45;
  --border-subtle: #2a2e35;
  --border-dialog: #3a3f47;
  --border-raised: #24272d;
  --accent: #8fb4ff;
  --on-accent: #17191e;
  --link: #9dbcff;
  --info-bg: #243559;
  --info-fg: #b9cdfa;
  --ok-bg: #1d3a27;
  --ok-fg: #9fdcae;
  --neutral-bg: #2c3038;
  --neutral-fg: #c9ccd2;
  --warn-bg: #33291a;
  --warn-fg: #f3e3bd;
  --danger-bg: #43231f;
  --danger: #ff9b8f;
  --cyan: #8bd3ea;
  --green: #9fdcae;
  --yellow: #f0c674;
  --red: #ff9b8f;
  --orange: #f5a97f;
  --purple: #c4a7f5;
  --pink: #f0a3c6;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f3f5;
  --bg-header: #ffffff;
  --bg-surface: #ffffff;
  --bg-hover: #eceef2;
  --bg-btn: #eceef2;
  --bg-btn-hover: #dde1e7;
  --bg-btn-dialog: #e6e9ee;
  --bg-input: #ffffff;
  --bg-dialog: #ffffff;
  --bg-raised: #f3f4f7;
  --bg-track: #eceef2;
  --bg-segment: #ffffff;
  --text-segment: #15171a;
  --shadow-segment: 0 1px 3px rgba(20, 30, 60, 0.18);
  --scrim: rgba(20, 24, 32, 0.42);
  --shadow-card: 0 4px 10px rgba(20, 30, 60, 0.18);
  --shadow-dialog: 0 24px 60px rgba(20, 30, 60, 0.22);
  --text: #15171a;
  --text-dim: #5a606a;
  --border: #d5d8de;
  --border-subtle: #e4e6ea;
  --border-dialog: #dfe2e7;
  --border-raised: #dde0e6;
  --accent: #1f4fd1;
  --on-accent: #ffffff;
  --link: #1f4fd1;
  --info-bg: #e8eefc;
  --info-fg: #1a3a8f;
  --ok-bg: #e3f4e8;
  --ok-fg: #17602e;
  --neutral-bg: #eef0f3;
  --neutral-fg: #3e434a;
  --warn-bg: #fff3d6;
  --warn-fg: #4a3a10;
  --danger-bg: #fbe9e7;
  --danger: #b3261e;
  --cyan: #0a6a87;
  --green: #17602e;
  --yellow: #7a5600;
  --red: #b3261e;
  --orange: #9a4a12;
  --purple: #6b3fb8;
  --pink: #a3245f;
}

/* Colours from enpit.de. Its font Calibre is licensed to enpit.de only, so the pages use the system font. */

:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

[data-theme="dark"] {
  --bg: #101219;
  --bg-header: #14161f;
  --bg-surface: #1b1d27;
  --bg-hover: #262935;
  --bg-btn: #262935;
  --bg-btn-hover: #323646;
  --bg-btn-dialog: #2a2d3a;
  --bg-input: #15171f;
  --bg-dialog: #1d2029;
  --bg-raised: #2d2e34;
  --bg-track: #0c0e14;
  --border: #2f3240;
  --border-subtle: #22252f;
  --border-dialog: #333747;
  --border-raised: #1d2029;
  --text: #f6f5f2;
  --text-dim: #b3b3b5;
  --accent: #9197fc;
  --on-accent: #101219;
  --link: #a5aafd;
  --info-bg: #23285e;
  --info-fg: #c7caff;
}

[data-theme="light"] {
  --bg: #f6f5f2;
  --bg-header: #ffffff;
  --bg-surface: #ffffff;
  --bg-hover: #ebecfb;
  --bg-btn: #ebecfb;
  --bg-btn-hover: #dcdef8;
  --bg-btn-dialog: #e4e5f8;
  --bg-raised: #f6f5f2;
  --bg-track: #ebecfb;
  --border: #dcdbd6;
  --border-subtle: #ebeae5;
  --border-dialog: #e2e1dc;
  --border-raised: #e2e1dc;
  --text: #101219;
  --text-dim: #404147;
  --accent: #323cd5;
  --on-accent: #ffffff;
  --link: #323cd5;
  --info-bg: #ebecfb;
  --info-fg: #232a9c;
}

/* The enpit.de look: the logo is a blue block in the header's corner, corners are square,
   secondary buttons are outlined in blue and the footer is dark. These rules go beyond the
   stable theme variables, so they may need changes after a wallet update. */
/* The theme loads before style.css, so these selectors need a higher specificity. */
html body > header { padding: 0 24px 0 0; min-height: 60px; }
html body > header .header-brand { align-self: stretch; gap: 16px; }
html body > header .header-logo { width: 105px; height: 60px; object-fit: cover; }
html #header-title { display: flex; align-items: center; font-size: 0; line-height: 1; }
html #header-title::after { font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; content: "Wallet"; }
html:has(#share-btn) #header-title::after { content: "Decoder"; }
html:has(#grant-toggle) #header-title::after { content: "Issuer"; }
html:has(#format-toggle) #header-title::after { content: "Verifier"; }

.btn, button, input, select, textarea, .form-input, .conf-input, .filter-chip, .auto-chip, .query-chip, .who-chip,
.mismatch-chip, .status-badge, .header-submenu, .header-submenu a, .activity-drawer, .log-entry, .trust-section,
.template-row, .certificate-row, .registrar-party, .registrar-credential, .deferred-item, .candidate, .error-detail,
.error-findings, .finding-spec, .consent-claims, .consent-credential, .consent-findings, .consent-purpose, .consent-sets,
.consent-untrusted, .consent-mismatch, .consent-unanswered, .consent-multiple-note, .trust-list-menu-items, .who,
#demo-banner, #pending-banner, dialog, pre, .actions-bar input[type="text"] { border-radius: 0 !important; }

.btn { border-color: var(--accent); background: transparent; color: var(--accent); font-weight: 500; }
.btn:hover { background: var(--bg-hover); }
.btn-primary, .btn-primary:hover { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.activity-drawer, .trust-section, .log-entry { box-shadow: 0 2px 12px rgba(16, 18, 25, 0.06); }

.app-footer { background: #2d2e34; color: #f6f5f2; padding-top: 16px; padding-bottom: 16px; }
.app-footer a, .app-footer span { color: #f6f5f2; }
.app-footer .footer-row:first-child::before { content: "enpit GmbH & Co. KG"; font-weight: 600; margin-right: 12px; }
.credential-logo { border-radius: 0 !important; }
html .app-footer #demo-note { color: #b3b3b5; }