/* =====================================================================
   COLOR PALETTE CONTROLS
   Change these values to re-theme the whole exhibition UI in one place.
   ===================================================================== */
:root {
    --color-primary: #7d9cc4;        /* calm slate blue (was yellow) */
    --color-primary-bright: #9bb4d6; /* brighter slate blue for hovers (was #fff700) */
    --color-accent: #c97f93;         /* pale deep rose (was lime green #00ff00) */
}

/* 1990's HTML Web Style */
body {
    background-color: black;
    color: white;
    font-family: 'Consolas', 'Courier New', monospace;
    margin: 0;
    padding: 0;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4 {
    color: var(--color-primary);
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 5px;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    background-color: var(--color-primary);
    color: black;
}

button {
    background-color: black;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: 5px 15px;
    font-family: inherit;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 0;
}

button:hover {
    background-color: var(--color-primary);
    color: black;
}

button:disabled {
    border-color: #666;
    color: #666;
    cursor: not-allowed;
}

select.action-select {
    appearance: none;
    background-color: black;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: 5px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0;
}

select.action-select:hover {
    background-color: var(--color-primary);
    color: black;
}

select.action-select:focus {
    outline: none;
}

.main-content {
    padding: 20px;
    flex: 1;
}

.top-bar {
    border-bottom: 1px solid white;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.top-bar-logo:hover {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
}

/* Top-bar navigation: keep ACCOUNT / LOGOUT / Log in identical size and aligned */
.top-bar-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Shared "button" look for both <a> (NavLink) and <button> so they match exactly */
.nav-btn {
    box-sizing: border-box;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 2px solid var(--color-primary);
    background-color: black;
    color: var(--color-primary);
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.nav-btn:hover {
    background-color: var(--color-primary);
    color: black;
    text-decoration: none;
}

.nav-welcome {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    font-weight: bold;
}

.exhibition-title {
    font-size: 2em;
    margin-bottom: 10px;
}

.artwork-list {
    margin-top: 30px;
}

.artwork-item {
    border: 1px solid #444;
    padding: 15px;
    margin-bottom: 20px;
    /* Semi-transparent black backdrop so artwork rows stay legible over the
       exhibition background image. */
    background-color: rgba(0, 0, 0, 0.6);
}

.artwork-header {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

/* The banner area holds the title/artists and spans the whole bar up to the
   action buttons. When a banner image is present it is scaled up (or down) to
   fill the entire bar while preserving its aspect ratio; any overflow is
   clipped so the image never gets distorted. */
.artwork-banner {
    flex: 1 1 auto;
    min-width: 0;
}

.artwork-banner.has-banner {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    padding: 10px 15px;
    margin: -5px 10px -5px -5px;
    border-radius: 2px;
    /* Base drop shadow so any text over the banner (including the bare year
       text node) stays legible; more specific rules below strengthen it. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Keep the action buttons (INSTALL / VERIFY / COST / LAUNCH) grouped and never
   overlapped by the banner. */
.artwork-actions {
    flex: 0 0 auto;
    white-space: nowrap;
    align-self: center;
}

.artwork-title {
    font-weight: bold;
}

/* Drop shadow so the title stays legible over the banner background. */
.artwork-banner.has-banner .artwork-title {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.85);
}

.artwork-banner.has-banner .artist-list {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.artist-list {
    color: #aaa;
    margin-bottom: 10px;
}

.metadata {
    font-size: 0.9em;
    color: #888;
}

.loading {
    text-align: center;
    margin-top: 50px;
    font-size: 1.5em;
    color: var(--color-primary);
}

/* Blazor WASM initial loading spinner */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem;
}

.loading-progress circle {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #333;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto;
    color: var(--color-primary);
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* Purchase page */
.purchase-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.purchase-card {
    border: 2px solid var(--color-primary);
    padding: 20px;
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.purchase-ticket-count {
    font-size: 1.6em;
    font-weight: bold;
    color: var(--color-accent);
}

.purchase-price {
    font-size: 1.3em;
    color: var(--color-primary);
}

.purchase-desc {
    font-size: 0.85em;
    color: #aaa;
    flex: 1;
}

.top-bar-buy-btn {
    border: 3px solid red;
    animation: rainbow-outline 1s linear infinite;
}

/* Embedded Stripe Checkout form lives inside the page */
#stripe-checkout-element {
    max-width: 480px;
    margin-top: 20px;
    background: white;
    padding: 10px;
}

.purchase-success {
    border: 2px solid #00ff00;
    padding: 20px;
    margin-top: 20px;
    max-width: 480px;
}

@keyframes rainbow-outline {
    0%   { border-color: red; box-shadow: 0 0 8px red; }
    16%  { border-color: orange; box-shadow: 0 0 8px orange; }
    33%  { border-color: yellow; box-shadow: 0 0 8px yellow; }
    50%  { border-color: lime; box-shadow: 0 0 8px lime; }
    66%  { border-color: cyan; box-shadow: 0 0 8px cyan; }
    83%  { border-color: magenta; box-shadow: 0 0 8px magenta; }
    100% { border-color: red; box-shadow: 0 0 8px red; }
}

/* --- Custom scrollbar to match the black/yellow theme --- */

/* WebKit / Chromium (this is what the WebView uses) */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: black;
    border-left: 1px solid #444;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border: 3px solid black;   /* creates padding around the thumb */
    border-radius: 0;          /* keep it blocky to match the theme */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary-bright);
}

::-webkit-scrollbar-corner {
    background: black;
}

/* Standard properties (fallback / other engines) */
html {
    scrollbar-width: thin;          /* auto | thin | none */
    scrollbar-color: var(--color-primary) black;  /* thumb  track */
}