/* ==========================================================================
   IndieTickets base stylesheet.

   Every colour, font and radius in this file is a CSS custom property.
   Nothing below the :root blocks contains a literal colour, which is what
   makes per-organization theming possible: the branding <style> block that
   layout.html renders after this file redefines a handful of properties on
   :root and the whole page follows.

   Load order matters and is fixed in layout.html:

       1. bootstrap
       2. this file          -> defaults, light and dark
       3. inline branding    -> the tenant's overrides

   Because the inline block comes last and has the same specificity as the
   :root and [data-theme] blocks here, it wins. And because the branding
   service only emits properties a tenant explicitly configured, the dark
   theme below still applies to everything that tenant left alone.

   The palette here started as La Voladora's, extracted from
   anomaliaband.com to keep brand identity consistent. It is now the
   platform fallback rather than anyone's brand -- an organization with no
   settings rows renders in these colours.

   If you change a default colour here, change DEFAULT_COLORS in
   app/shared/branding/defaults.py to match.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Light theme (default)
   -------------------------------------------------------------------------- */

:root {
    --primary: #196593;
    --primary-dark: #00497c;
    --primary-light: #3586b1;

    --accent: #6fd1f6;
    --accent-light: #a3dfee;

    /* Legacy aliases. The original stylesheet called the accent "sky".
       Kept so older markup keeps rendering; the branding service emits
       both names for every accent override. */
    --sky: var(--accent);
    --sky-light: var(--accent-light);

    --background: #f6f8f7;
    --surface: #ffffff;
    --text: #153a5b;

    --focus: rgba(25, 101, 147, 0.30);

    /* Derived surfaces. Expressed against the themeable colours so they
       track a tenant override without needing to be configured. */
    --header-bg: var(--text);
    --header-text: var(--surface);
    --footer-bg: var(--text);
    --footer-text: var(--surface);
    --border: var(--accent-light);
    /* Deliberately the same colour as --text rather than a color-mix():
       muting is done with opacity on .text-muted-brand, which works in
       every browser and stays legible whatever a tenant sets --text to. */
    --muted-text: var(--text);

    --font-body: 'Figtree', 'IBM Plex Sans', sans-serif;
    --font-heading: 'Plus Jakarta Sans', 'Figtree', sans-serif;
    --font-display: 'Covered By Your Grace', cursive;

    --radius: 8px;
    --radius-sm: 4px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}


/* --------------------------------------------------------------------------
   Dark theme

   Selected by data-theme="dark" on <html>, which layout.html writes from
   appearance.theme in organization_settings. Same specificity as :root, so
   these win by source order -- and a tenant's own overrides win over both,
   because they are injected after this file.
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
    --primary: #4aa3d4;
    --primary-dark: #2d7fae;
    --primary-light: #7cc3e8;

    --accent: #6fd1f6;
    --accent-light: #3d8fb0;

    --background: #10161c;
    --surface: #1a232c;
    --text: #e8f1f7;

    --focus: rgba(74, 163, 212, 0.35);

    --header-bg: #0a0f14;
    --header-text: #e8f1f7;
    --footer-bg: #0a0f14;
    --footer-text: #e8f1f7;
    --border: #2c3945;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}


/* --------------------------------------------------------------------------
   Base layout
   -------------------------------------------------------------------------- */

html,
body {
    height: 100%;
    margin: 0;
}

body {
    font-family: var(--font-body);
    background-color: var(--background);
    color: var(--text);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    padding: 2rem;
    max-width: 800px;
    margin: auto;
    line-height: 1.6;
    flex: 1;
}


/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--text);
}

a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-dark);
}

.brand-display {
    font-family: var(--font-display);
}

.text-muted-brand {
    color: var(--muted-text);
    opacity: 0.72;
}


/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

header {
    background-color: var(--header-bg);
    color: var(--header-text);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1,
header h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin: 0;
    color: var(--header-text);
}

.navbar-brand {
    color: var(--header-text);
    font-weight: bold;
    font-size: 1.5rem;
    font-family: var(--font-display);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-brand:hover {
    color: var(--primary);
}

.navbar-logo {
    height: 2rem;
    width: auto;
    display: block;
}

.navbar-nav .nav-link {
    color: var(--header-text);
}

.navbar-nav .nav-link:hover {
    color: var(--primary);
}

.navbar-toggler {
    border-color: var(--accent);
}

/* The toggler glyph used to be a data-URI SVG with the stroke colour baked
   into the URL, which is the one place a colour cannot be a var(). Drawing
   it as a mask instead lets background-color -- and therefore the tenant's
   accent colour -- show through the shape. */
.navbar-toggler-icon {
    background-image: none;
    background-color: var(--accent);
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

button,
input[type="submit"],
.btn-brand {
    background-color: var(--accent);
    color: var(--text);
    border: none;
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-weight: 500;
    font-family: var(--font-body);
    transition: background-color 0.3s;
}

button:hover,
input[type="submit"]:hover,
.btn-brand:hover {
    background-color: var(--primary);
    color: var(--surface);
}

button:focus-visible,
input[type="submit"]:focus-visible,
.btn-brand:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Bootstrap's .btn-primary, retinted so a tenant override reaches it. */
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
    --bs-btn-color: var(--surface);
    --bs-btn-hover-color: var(--surface);
}


/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
}

.form-control,
.form-select {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.25rem var(--focus);
    border-color: var(--primary);
    background-color: var(--surface);
    color: var(--text);
}

label {
    font-family: var(--font-body);
    color: var(--text);
}


/* --------------------------------------------------------------------------
   Cards and panels
   -------------------------------------------------------------------------- */

.brand-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
}


/* --------------------------------------------------------------------------
   Flash messages and alerts
   -------------------------------------------------------------------------- */

.flashes {
    list-style: none;
    padding: 0;
}

.flashes li {
    background-color: var(--primary);
    color: var(--surface);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: var(--radius-sm);
}

.alert-brand-success {
    background-color: var(--accent-light);
    color: var(--text);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
}

.alert-brand-error {
    background-color: var(--surface);
    color: var(--text);
    border: 2px solid var(--primary-dark);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
}


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    text-align: center;
    padding: 1rem;
    margin-top: auto;
}

footer a {
    color: var(--footer-text);
}

.btn-music {
    display: inline-flex;
    align-items: center;
    background-color: var(--accent);
    color: var(--text);
    padding: 0.75em 1.5em;
    text-decoration: none;
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-weight: 500;
    transition: background-color 0.3s;
}

.btn-music:hover {
    background-color: var(--primary-dark);
    color: var(--surface);
}

.btn-icon {
    margin-right: 0.5em;
    font-size: 1.2em;
}


/* --------------------------------------------------------------------------
   Ticket / QR
   -------------------------------------------------------------------------- */

.ticket-frame {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: inline-block;
    padding: 1rem;
}

.ticket-qr {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
}

#reader {
    width: 100%;
    max-width: 400px;
    border-radius: var(--radius);
    overflow: hidden;
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    button,
    input[type="submit"],
    .btn-brand,
    .btn-music {
        transition: none;
    }
}
