/* ==================================================================
   Lyrics & Chords App - shared styles
   Mobile-first. Works as a plain responsive web app (no framework),
   so it can be uploaded as-is to Hostinger.
   ================================================================== */

:root {
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* Day (light) theme */
    --bg: #faf8f4;
    --bg-elevated: #ffffff;
    --text: #201d18;
    --text-muted: #6b6459;
    --border: #e4ddd0;
    --accent: #7a5c3e;
    --accent-contrast: #ffffff;
    --chord-color: #b03a2e;
    --section-color: #7a5c3e;
    --section-bg: #efe6d6;
    --danger: #b03a2e;

    --editor-chord-bg: #dff1fb;
    --editor-lyric-bg: #e3f6e0;
    --editor-section-bg: #f1e7d3;

    --shadow: 0 2px 10px rgba(30, 24, 12, 0.08);
    --radius: 10px;

    /* Site-wide backdrop (brand wallpaper) -- same in both day and night
       theme by design, so it's defined once here and not overridden below. */
    --page-backdrop: #162b18;
}

[data-theme="night"] {
    /* Night (stage) theme: dark, high contrast, low glare */
    --bg: #14120f;
    --bg-elevated: #1e1b16;
    --text: #f2ede2;
    --text-muted: #a89f8d;
    --border: #332e26;
    --accent: #d8b876;
    --accent-contrast: #14120f;
    --chord-color: #ff8a70;
    --section-color: #d8b876;
    --section-bg: #2a2419;

    --editor-chord-bg: #17324a;
    --editor-lyric-bg: #1c3320;
    --editor-section-bg: #332c1a;

    --shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    /* Plain brand-green backdrop -- the logo watermark itself now lives on
       main.container (the reading surface), not out here. */
    background-color: var(--page-backdrop);
    color: var(--text);
    font-family: var(--font-ui);
    -webkit-text-size-adjust: 100%;
    /* Removes the double-tap-to-zoom gesture (and the ~300ms tap delay
       some mobile browsers add while they wait to see if a second tap
       is coming) app-wide. Combined with the viewport meta tag's
       user-scalable=no, pinch-zoom is disabled too -- the in-app font
       size control (A-/A+) is the intended way to make text bigger. */
    touch-action: manipulation;
}

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

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

button, input, select, textarea {
    font-family: inherit;
    font-size: 1rem;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.65rem 1rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

.app-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.app-header .brand-icon {
    display: block;
    width: 1.5rem;
    height: auto;
    flex-shrink: 0;
}

/* On a narrow phone screen with the song controls also showing, drop the
   "OneChords by CVC Main" text and keep just the logo mark so everything
   else has room to sit on one or two wrapped rows instead of overflowing. */
@media (max-width: 480px) {
    /* .app-header gets "song-view-active" from app.js whenever the song
       controls are showing (belt-and-suspenders alongside the :has()
       rule below, for browsers/WebViews that don't support fit yet). */
    .app-header.song-view-active .brand-text { display: none; }
    .brand:has(~ .header-song-controls:not(.hidden)) .brand-text { display: none; }
}

/* The logo, Home, day/night, Back, and account controls must always share
   one top row (never wrap onto a second line). Back and "Join Live" are
   never both relevant at the same time -- Back only appears while a song
   is open, and there's little reason to jump into a live session while
   already viewing one -- so hiding "Join Live" during song view frees up
   exactly the room Back needs, on every screen size. */
.app-header.song-view-active #btnJoinLive { display: none; }

.app-header .spacer { flex: 1; min-width: 0.5rem; }

/* Home button beside the brand -- shown on every screen except the song
   library itself (.on-library is toggled on .app-header from showView()
   in app.js). Bright yellow so it's easy to spot/tap at a glance. */
.app-header .home-btn { display: none; color: #ffd400; flex-shrink: 0; }
.home-btn svg { display: block; fill: currentColor; }
.app-header:not(.on-library) .home-btn { display: inline-flex; }

.icon-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 999px;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.icon-btn:hover { background: var(--section-bg); }

/* Two-character labels (A-, A+) need a touch a bit more room than the
   circular single-glyph icon buttons. */
#btnFontDown, #btnFontUp, #btnFlatToggle {
    width: auto;
    min-width: 2.25rem;
    padding: 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    cursor: pointer;
    font-weight: 600;
}
.btn:hover { background: var(--section-bg); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}
.btn-primary:hover { filter: brightness(1.05); }

.btn-danger {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);
}

/* ---------------- Account menu (header dropdown) ---------------- */
.account-menu { position: relative; }
.account-menu-caret {
    font-size: 0.65em;
    margin-left: 0.1rem;
    color: var(--text-muted);
}
.account-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.35rem;
    z-index: 30;
}
.account-menu-item {
    display: block;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.account-menu-item:hover { background: var(--section-bg); }
.account-menu-item-danger { color: var(--danger); }
.account-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 0.3rem 0.2rem;
}

main.container {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0.75rem auto;
    padding: 1rem;
    /* Floats as a readable surface on top of the wallpaper -- keeps every
       existing text/background contrast pairing exactly as it was, while
       letting the brand backdrop show through as a frame around it. */
    background-color: var(--bg-elevated);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    /* Stacking-context anchor for the watermark pseudo-element below.
       position:relative alone doesn't establish one (it needs a non-auto
       z-index too) -- without this, this card's own background paints
       above the pseudo-element's z-index:-1 instead of below it, hiding
       the watermark entirely. Doesn't change position:fixed's viewport
       anchoring (only transform/filter/etc. on an ancestor would do that). */
    position: relative;
    z-index: 0;
}

/* Logo watermark, faded to 30% opacity in the image itself (real alpha
   transparency, so it reads correctly on both the light day card and the
   dark night card). This used to be a background-attachment:fixed image,
   but iOS Safari/Chrome (both WebKit) largely ignore fixed background
   attachment, so it just scrolled away with the text there. A real
   position:fixed layer is supported everywhere, including iOS, and gives
   the same "stays centered on screen while the lyrics/chords scroll past
   it" effect. z-index:-1 keeps it behind the actual song text. */
main.container::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(70vw, 420px);
    height: min(70vw, 420px);
    background-image: url('../assets/bg-watermark.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
}

.field { margin-bottom: 1rem; }
.field label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.field input[type="text"],
.field input[type="number"],
.field input[type="password"],
.field select,
.field textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text);
}
.field-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.field-row > .field { flex: 1; min-width: 140px; }

.bulk-import-example {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.5;
    background: var(--section-bg);
    color: var(--section-color);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    overflow-x: auto;
    white-space: pre;
    margin: 0.5rem 0 0;
}
#bulkImportText { min-height: 16rem; resize: vertical; }

.bulk-import-result {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.bulk-import-result:last-child { border-bottom: none; }
.bulk-import-result-icon { flex-shrink: 0; font-weight: 700; }
.bulk-import-result-ok .bulk-import-result-icon { color: var(--accent); }
.bulk-import-result-error .bulk-import-result-icon { color: var(--danger); }
.bulk-import-result-error .bulk-import-result-detail { color: var(--danger); }
.bulk-import-summary { font-weight: 700; margin-bottom: 0.4rem; }

.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
}

.song-list { list-style: none; margin: 0; padding: 0; }
.song-list li {
    border-bottom: 1px solid var(--border);
}
.song-list a {
    display: block;
    padding: 0.85rem 0.25rem;
    text-decoration: none;
    color: var(--text);
}
.song-list .title { font-weight: 700; }
.song-list .meta { font-size: 0.85rem; color: var(--text-muted); }

.search-box { position: relative; margin-bottom: 1rem; }
.search-box input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
}

/* ---------------- Section-tag picker chips ---------------- */
.section-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.section-chip {
    font-size: 0.8rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--section-bg);
    color: var(--section-color);
    cursor: pointer;
    font-weight: 600;
}
.section-chip:hover { filter: brightness(1.05); }

/* ---------------- Editor: colored chord/lyric line overlay ---------------- */
.editor-wrap {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-elevated);
}
.editor-backdrop,
.editor-textarea {
    margin: 0;
    padding: 0.7rem 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    tab-size: 4;
}
.editor-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    color: transparent;
}
.editor-backdrop .line { display: block; min-height: 1.7em; }
.editor-backdrop .line.role-chord { background: var(--editor-chord-bg); }
.editor-backdrop .line.role-lyric { background: var(--editor-lyric-bg); }
.editor-backdrop .line.role-section { background: var(--editor-section-bg); }

.editor-textarea {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    min-height: 340px;
    resize: vertical;
    border: none;
    background: transparent;
    color: var(--text);
    caret-color: var(--text);
}
.editor-textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

.editor-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.5rem 0 1rem;
    flex-wrap: wrap;
}
.editor-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.swatch {
    width: 0.8rem; height: 0.8rem; border-radius: 3px; display: inline-block;
    border: 1px solid var(--border);
}
.swatch.chord { background: var(--editor-chord-bg); }
.swatch.lyric { background: var(--editor-lyric-bg); }
.swatch.section { background: var(--editor-section-bg); }

/* ---------------- Song viewer ---------------- */
/* Song/setlist controls now live INSIDE the one sticky header (see
   .app-header below) instead of a second sticky bar -- that second bar
   used to fight the header for the same "stuck at top" position and
   end up hidden behind it. One sticky element only, ever. */
.header-song-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    /* Forces this group onto its own full-width row below the top row
       (logo/Home/Back/day-night/account), instead of wrapping in among
       those and sometimes splitting them across two lines. */
    flex: 1 1 100%;
}
.group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.2rem 0.4rem;
}
.group select { border: none; background: transparent; color: var(--text); }

/* In the night (stage) theme the shared --border token is intentionally
   subtle everywhere else, but that reads as barely-there around the
   transpose/speed/font-size controls a worship leader is actively
   tapping mid-song -- brighten just those borders so the control
   groupings stay easy to find at a glance on a dim stage screen. */
[data-theme="night"] .header-song-controls .group,
[data-theme="night"] .header-song-controls .btn,
[data-theme="night"] .header-song-controls .icon-btn {
    border-color: #6b5f4c;
}

/* The back arrow is a plain glyph, not an SVG icon like the rest of the
   app -- font-weight alone renders barely any difference in most fonts,
   so pair a heavier weight with a faux-bold text-shadow to make the
   stroke actually read as thicker. */
#btnBackToList {
    font-weight: 900;
    font-size: 1.2rem;
    text-shadow: 0 0 1px currentColor, 0 0 1px currentColor;
}

.song-title-block { padding: 1rem 1rem 0.25rem; }
.song-title-block h1 { margin: 0 0 0.15rem; font-size: 1.4rem; }
.song-title-block .sub { color: var(--text-muted); font-size: 0.9rem; }
.song-title-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }

.btn-youtube {
    background: #fff;
    border-color: #ff0000;
    color: #cc0000;
}
.btn-youtube:hover { background: #fff0f0; }
.btn-youtube svg { flex-shrink: 0; }
[data-theme="night"] .btn-youtube {
    background: var(--bg-elevated);
    color: #ff5c5c;
}
[data-theme="night"] .btn-youtube:hover { background: #2a1a1a; }

/* ---------------- Modal (YouTube player) ---------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 100;
}
.modal-box {
    position: relative;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.75rem 1rem 1rem;
    max-width: 640px;
    width: 100%;
}
.modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 2rem;
    height: 2rem;
}
.youtube-modal-frame {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.youtube-modal-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.youtube-modal-external {
    display: block;
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.song-body {
    padding: 1rem;
    font-family: var(--font-mono);
    font-size: calc(1.05rem * var(--font-scale, 1));
    line-height: 1.5;
}
.song-section { margin-bottom: 1.4rem; }
.song-section .section-label {
    display: inline-block;
    font-family: var(--font-ui);
    font-weight: 700;
    color: var(--section-color);
    background: var(--section-bg);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: calc(0.8rem * var(--font-scale, 1));
    margin-bottom: 0.5rem;
}
.line-pair {
    position: relative;
    white-space: pre;
    overflow-x: auto;
}
.chord-row {
    position: relative;
    height: 1.3em;
}
.chord-row .chord {
    position: absolute;
    top: 0;
    color: var(--chord-color);
    font-weight: 700;
    white-space: pre;
}
.chord-row .chord.not-a-chord {
    color: var(--text-muted);
    font-weight: 400;
    font-style: italic;
}
.lyric-row { white-space: pre-wrap; word-break: break-word; }

@media (min-width: 640px) {
    .song-body { font-size: calc(1.15rem * var(--font-scale, 1)); }
}

/* ---------------- Auth ---------------- */
.login-wrap {
    max-width: 380px;
    margin: 3rem auto;
    padding: 0 1rem;
}

/* ---------------- Live session ---------------- */
.live-banner {
    background: var(--accent);
    color: var(--accent-contrast);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    font-size: 0.9rem;
}
.live-dot {
    width: 0.55rem; height: 0.55rem; border-radius: 50%;
    background: #e23; display: inline-block;
    animation: pulse 1.4s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(226,34,51,0.6); }
    70% { box-shadow: 0 0 0 8px rgba(226,34,51,0); }
    100% { box-shadow: 0 0 0 0 rgba(226,34,51,0); }
}

.join-code-display {
    font-family: var(--font-mono);
    font-size: 2rem;
    letter-spacing: 0.3rem;
    font-weight: 700;
    text-align: center;
    padding: 1rem;
    background: var(--section-bg);
    color: var(--section-color);
    border-radius: var(--radius);
    margin: 1rem 0;
}

.toast {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--bg);
    padding: 0.6rem 1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    z-index: 50;
    box-shadow: var(--shadow);
}

.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1rem;
}

/* ---------------- Setlists ---------------- */
.list-subnav { margin-bottom: 0.75rem; }

.setlist-items { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.setlist-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.setlist-item-pos {
    width: 1.6rem;
    text-align: center;
    color: var(--text-muted);
    font-weight: 700;
    flex-shrink: 0;
}
.setlist-item-info { flex: 1; min-width: 8rem; }
.setlist-item-info .title { font-weight: 700; }
.setlist-item-info .meta { font-size: 0.8rem; color: var(--text-muted); }
.setlist-item-key {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text);
    padding: 0.3rem 0.3rem;
    max-width: 4.4rem;
    flex-shrink: 0;
}

/* ---------------- Song notes callout ---------------- */
.song-notes {
    background: var(--section-bg);
    color: var(--text);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin: 0 1rem 1rem;
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-wrap;
}
.song-notes strong { color: var(--section-color); }

/* ---------------- Help & FAQ ---------------- */
.help-topics { display: flex; flex-direction: column; gap: 0.65rem; }
.help-topic {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    overflow: hidden;
}
.help-topic summary {
    padding: 0.9rem 1rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.help-topic summary::-webkit-details-marker { display: none; }
.help-topic summary::after {
    content: '+';
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.help-topic[open] summary::after { content: '\2212'; }
.help-topic[open] summary { border-bottom: 1px solid var(--border); }
.help-body {
    padding: 0.85rem 1rem 1rem;
    font-size: 0.92rem;
    line-height: 1.65;
}
.help-body p { margin: 0 0 0.6rem; }
.help-body p:last-child { margin-bottom: 0; }
.help-body ul, .help-body ol { margin: 0 0 0.6rem 1.2rem; padding: 0; }
.help-body li { margin-bottom: 0.35rem; }
.help-body li:last-child { margin-bottom: 0; }
.help-body code {
    background: var(--section-bg);
    color: var(--text);
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 0.85em;
}

/* Utility */
.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }