/* ==========================================================================
   Utopia theme for the OpenID4VCI issuer pages (DMV, Bank of Utopia)
   --------------------------------------------------------------------------
   SHADOWS multipaz-openid4vci.jar's own resources/www/style.css.

   serveResources() resolves each asset with getResourceAsStream("/resources/
   www/<path>") and takes the FIRST match on the classpath. start-servers.sh
   puts /app/jars/<instance>.jar ahead of /app/jars/multipaz-<service>.jar, and
   Gradle puts a project's own resource output ahead of its dependencies, so
   this file wins in both the container and `./gradlew run`.

   Shadowing REPLACES rather than merges — the jar's rules are not loaded at
   all, so everything the pages need must be reproduced here.

   Markup targeted (all generated by the jar, none of it ours):
     index.html    -> display_metadata.js: .header, .issuer_logo, .issuer_name,
                      .credential_list_item, .credential_list_logo_container,
                      .credential_list_logo, .credential_list_name,
                      .credential_container, .credential_logo,
                      .credential_type, .qr
     session.html  -> session.js: .cred, span.label
     admin.html    -> body.wide, table#sessions
     paint.html    -> .paint, textarea, button
     all pages     -> #login, .logged_in / .logged_out (login.js toggles these
                      by injecting a <style> that sets display:none on one of
                      them — never set `display` on those two classes here.)
   ========================================================================== */

@import "utopia-base.css";

/* -- Issuer header -------------------------------------------------------
   display_metadata.js emits .header containing .issuer_logo (floated right)
   and .issuer_name. Presented as the masthead of the issuer.             */

.header {
    display: flow-root;                 /* contain the floated logo */
    border-bottom: 2px solid var(--utopia-ink);
    padding-bottom: 14px;
    margin-bottom: 28px;
}

/* The artboards lead with a circular issuer mark. The jar gives us a floated
   logo image, so it becomes that mark rather than a banner graphic. */
.issuer_logo {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
    float: right;
    margin-left: 1.5em;
    background: var(--utopia-surface);
}

.issuer_name {
    font-family: var(--utopia-font-display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--utopia-ink);
}

/* -- Credential list (index.html) ----------------------------------------
   One row per credential configuration the issuer supports. Each row is a
   card; the whole row is wrapped in an <a> by display_metadata.js, so the
   link underline from the base sheet has to be cleared here.             */

.credential_list_item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0;
    margin-bottom: 12px;
    padding: 14px 18px;
    background: var(--utopia-surface-raised);
    border: 1px solid var(--utopia-border);
    border-radius: var(--utopia-radius);
    transition: border-color var(--utopia-transition), box-shadow var(--utopia-transition),
                transform var(--utopia-transition);
}

.credential_list_item:hover {
    border-color: var(--utopia-accent);
    box-shadow: var(--utopia-shadow-sm);
    transform: translateY(-1px);
}

a:has(> .credential_list_item),
.credential_list_item a {
    border-bottom: none;
}

.credential_list_logo_container {
    width: 4em;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.credential_list_logo {
    height: 2.4em;
    max-width: 100%;
    object-fit: contain;
}

.credential_list_name {
    font-family: var(--utopia-font-display);
    font-size: 1.1rem;
    color: var(--utopia-ink);
}

/* -- Credential detail (index.html?config_id=…) --------------------------- */

.credential_container {
    background: var(--utopia-surface-raised);
    border: 1px solid var(--utopia-border);
    border-radius: var(--utopia-radius);
    padding: 24px 26px;
    margin-top: 1.5em;
    box-shadow: var(--utopia-shadow-md);
}

.credential_container h2 {
    font-family: var(--utopia-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--utopia-ink);
    margin: 0 0 0.6em;
}

.credential_logo {
    display: block;
    max-height: 120px;
    max-width: 200px;
    margin-bottom: 1em;
    border-radius: var(--utopia-radius-sm);
}

/* "Format: mDoc [org.iso.18013.5.1.mDL]" — technical, so set in mono. */
.credential_type {
    display: inline-block;
    font-family: var(--utopia-font-mono);
    font-size: var(--utopia-text-sm);
    color: var(--utopia-ink-soft);
    background: var(--utopia-bg-sunken);
    border-radius: var(--utopia-radius-control);
    padding: 4px 10px;
    margin-bottom: 1em;
    word-break: break-all;
}

.credential_container h4 {
    font-family: var(--utopia-font-sans);
    font-size: var(--utopia-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--utopia-tracking-label);
    color: var(--utopia-ink-soft);
    margin: 1.5em 0 0.5em;
}

.credential_container ul {
    margin: 0 0 1em;
    padding-left: 1.2em;
}

.credential_container li {
    font-size: var(--utopia-text-base);
    margin-bottom: 0.25em;
}

/* -- Session view (session.html) -----------------------------------------
   session.js emits .cred blocks of span.label + value pairs.             */

.cred {
    margin: 0 0 1.25em;
    padding: 16px 18px;
    background: var(--utopia-surface-raised);
    border: 1px solid var(--utopia-border);
    border-left: 3px solid var(--utopia-emphasis);
    border-radius: var(--utopia-radius-sm);
}

.cred h4 {
    margin-bottom: 8px;
    font-family: var(--utopia-font-sans);
    font-size: var(--utopia-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--utopia-tracking-label);
    color: var(--utopia-ink-soft);
}

span.label {
    display: inline-block;
    width: 8em;
    text-align: right;
    padding-right: 8px;
    font-size: var(--utopia-text-sm);
    color: var(--utopia-ink-soft);
}

/* -- Admin session table (admin.html) ------------------------------------
   Inherits the base table treatment; only the id-column needs help since
   session identifiers are long opaque strings.                           */

table#sessions td {
    font-size: var(--utopia-text-sm);
    word-break: break-word;
}

table#sessions td:first-child {
    font-family: var(--utopia-font-mono);
    font-size: var(--utopia-text-xs);
    color: var(--utopia-ink-soft);
}

/* -- Login control (all pages) -------------------------------------------
   login.js appends buttons and a password field into #login and toggles
   .logged_in / .logged_out via an injected <style>. Do not set `display`
   on those two classes or the toggle stops working.                      */

div#login {
    float: right;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

div#login button {
    color: var(--utopia-ink-soft);
    background-color: transparent;
    border-color: var(--utopia-border-strong);
    padding: 6px 14px;
    font-size: var(--utopia-text-xs);
}

div#login button:hover {
    color: var(--utopia-ink);
    background-color: transparent;
    border-color: var(--utopia-ink);
}

div#login input[type=password] {
    width: 180px;
    padding: 6px 10px;
    font-size: var(--utopia-text-sm);
}

div#main > h1 {
    clear: both;
}

/* -- Drawing playground (paint.html) -------------------------------------
   A developer tool for the card_art DSL. Kept deliberately plain, but the
   preview needs the pixel-density sizing the jar sheet applied.          */

.paint {
    margin: 1em 0;
    padding: 16px;
    background: var(--utopia-bg-sunken);
    border-radius: var(--utopia-radius);
    display: inline-block;
}

.paint img {
    /* Card art renders at 810x510 assuming a pixel density of 2. */
    width: 405px;
    height: 205px;
    display: block;
    border-radius: var(--utopia-radius-sm);
    box-shadow: var(--utopia-shadow-lg);
}

textarea {
    width: 100%;
    max-width: 50em;
    font-family: var(--utopia-font-mono);
    font-size: var(--utopia-text-sm);
    line-height: 1.5;
    padding: 12px;
    background: var(--utopia-surface-raised);
    border: 1px solid var(--utopia-border-strong);
    border-radius: var(--utopia-radius-sm);
}