/* ==========================================================================
   Card Crow - Base Styles (shared across all pages)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap');

/* CSS Variables */
:root {
    --bg-primary: #13111c;
    --bg-secondary: #1a1825;
    --bg-tertiary: #272438;
    --bg-card: #1f1d2a;
    --text-primary: #e6e4ed;
    --text-secondary: #a09cb2;
    --text-muted: #605c73;
    --accent-primary: #c9a84c;
    --accent-secondary: #7c6bf5;
    --accent-success: #4ade80;
    --accent-warning: #f59e0b;
    --accent-danger: #e05252;
    --border-color: #2e2c3e;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --radius: 8px;
    --radius-sm: 4px;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
}

/* App Container */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Main Content Layout */
.main-content {
    flex: 1;
    overflow: hidden;
}

/* Header */
.app-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0.6rem 1.5rem;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.app-header h1 {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 0.04em;
    padding-right: 0.5rem;
    white-space: nowrap;
}

/* Navigation */
.nav-links {
    display: flex;
    gap: 2px;
    align-items: stretch;
    background-color: var(--bg-card);
    border-radius: var(--radius);
    padding: 0.2rem;
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    font-size: 0.88rem;
    font-weight: 500;
}

.nav-link:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

.nav-current {
    color: var(--accent-primary);
    font-weight: 600;
    padding: 0.45rem 1rem;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}

/* Deck Selector (header) */
.deck-selector {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-left: auto;
}

.deck-selector select {
    padding: 0.5rem 1rem;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    min-width: 200px;
}

/* Header Actions */
/* Buttons */
.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn:hover {
    background-color: var(--accent-secondary);
}

.btn-primary {
    background-color: var(--accent-primary);
    color: #13111c;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: #dbb85c;
}

.btn-danger {
    background-color: #7f1d1d;
}

.btn-danger:hover {
    background-color: #991b1b;
}

.btn-toggle {
    background-color: transparent;
    border: 1px solid transparent;
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
}

.btn-toggle.active {
    background-color: var(--accent-secondary);
    border-color: var(--accent-secondary);
    color: white;
}

.btn-small {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

/* View Toggle (shared between search + deck) */
.view-toggle {
    display: flex;
    gap: 2px;
    background-color: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 0.15rem;
}

/* Placeholder Text */
.placeholder-text {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 2rem 1rem;
}

/* Badge */
.badge {
    background-color: var(--accent-secondary);
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Section Header Row (shared between editor + analysis) */
.section-header-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

/* Mana Symbols */
.mana-symbol {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin: 0 1px;
    display: inline-block;
}

.mana-cost-large .mana-symbol {
    width: 1.25em;
    height: 1.25em;
}

.oracle-text .mana-symbol,
#detail-card-text .mana-symbol,
.col-text .mana-symbol {
    width: 1.1em;
    height: 1.1em;
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1001;
    align-items: center;
    justify-content: center;
}

.modal.visible {
    display: flex;
}

.modal-content {
    background-color: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 400px;
    width: 90%;
    position: relative;
}

.modal-content h3 {
    margin-bottom: 1rem;
}

.modal-content input {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-large {
    max-width: 700px;
}

.modal-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* Card Detail Modal */
.card-detail {
    display: flex;
    gap: 1.5rem;
}

.card-image-container {
    flex-shrink: 0;
    position: relative;
}

.card-image-container img {
    width: 250px;
    border-radius: var(--radius);
}

.card-info {
    flex: 1;
}

.card-info h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.card-info p {
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

#detail-card-text {
    white-space: pre-line;
}

.card-image-side {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* Turn Over Button (DFC cards) */
.turn-over-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    margin-top: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.turn-over-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-secondary);
}

.turn-over-btn.flipped {
    background-color: var(--accent-secondary);
    border-color: var(--accent-secondary);
}

.turn-icon {
    font-size: 1rem;
    display: inline-block;
}

#detail-turn-over-container .turn-over-btn {
    margin-top: 0.75rem;
}

/* Action buttons under the card image in the detail modal — Bookmark
   and Scryfall share the same shape; .detail-bookmark-btn.active just
   adds the "currently bookmarked" tint. */
.detail-bookmark-btn,
.detail-scryfall-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    margin-top: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
}

.detail-bookmark-btn:hover,
.detail-scryfall-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: #22d3ee;
}

.detail-bookmark-btn.active {
    background-color: rgba(34, 211, 238, 0.15);
    border-color: #22d3ee;
    color: #22d3ee;
}

/* Price block at the bottom of the card-info column.
   Line 1: this printing's regular + foil USD (or "no recent USD" muted).
   Line 2: cheapest available printing's USD when meaningfully cheaper or
           when the current printing has no USD at all (online-only
           printings often sit in tix-only territory). Both lines are
           sourced from Scryfall — line 1 from prices.usd / usd_foil on
           the displayed card, line 2 by scanning all printings of the
           same card name. See renderDetailPrices in ui.js. */
.detail-prices {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.detail-price-line {
    line-height: 1.4;
}

.detail-prices .detail-price-value {
    color: var(--accent-success);
    font-weight: 600;
}

.detail-prices .muted,
.detail-price-line.muted {
    color: var(--text-muted);
    font-style: italic;
}

/* Context Menu */
.context-menu {
    display: none;
    position: fixed;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 1000;
    min-width: 180px;
}

.context-menu.visible {
    display: block;
}

.context-menu ul {
    list-style: none;
}

.context-menu li {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.context-menu li:hover {
    background-color: var(--bg-tertiary);
}

.context-menu li.separator {
    height: 1px;
    padding: 0;
    background-color: var(--border-color);
    margin: 0.25rem 0;
}

.context-menu li.separator:hover {
    background-color: var(--border-color);
}

.context-menu .menu-header {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: default;
    border-bottom: 1px solid var(--border-color);
}

.context-menu .menu-header:hover {
    background-color: transparent;
}

.context-menu .menu-disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.context-menu .menu-disabled:hover {
    background-color: transparent;
}

.menu-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.menu-status-dot.status-in-deck { background-color: var(--accent-success); }
.menu-status-dot.status-proposed { background-color: var(--accent-secondary); }
.menu-status-dot.status-maybe { background-color: var(--accent-warning); }
.menu-status-dot.status-nope { background-color: var(--text-muted); }

/* Auth Container */
.auth-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    padding-left: 1rem;
}

.auth-username {
    color: var(--accent-success);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Rate Limit Warning Toast */
.rate-limit-warning {
    position: fixed;
    top: 1rem;
    right: 1rem;
    background-color: var(--accent-danger);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 2000;
    max-width: 320px;
    animation: slideIn 0.3s ease;
}

.rate-limit-warning strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.rate-limit-warning p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.rate-limit-warning.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
}

/* Hamburger Menu */
.hamburger-mount {
    margin-left: auto;
    position: relative;
}

.hamburger-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.hamburger-btn:hover,
.hamburger-btn[aria-expanded="true"] {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

.hamburger-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 240px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 0.5rem;
    z-index: 100;
}

.hamburger-section + .hamburger-section {
    border-top: 1px solid var(--border-color);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.hamburger-section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
}

.hamburger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
}

.hamburger-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.hamburger-toggle:hover {
    background-color: var(--bg-tertiary);
}

.hamburger-toggle input[type="checkbox"] {
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.hamburger-action {
    display: block;
    width: 100%;
    margin: 0.25rem 0;
    text-align: center;
}

.hamburger-action-link {
    display: block;
    padding: 0.4rem 0.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}

.hamburger-action-link:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

.auth-username {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.auth-username.auth-muted {
    color: var(--text-muted);
    font-style: italic;
}

/* Sync-failure banner: shown when consecutive cloud pushes fail. Same slot
   as the schema-mismatch banner; uses the danger accent so it reads as
   "your changes aren't saved" rather than "admin task". */
.sync-failure-banner {
    position: sticky;
    top: 0;
    z-index: 200;
    background-color: rgba(224, 82, 82, 0.18);
    border-bottom: 1px solid var(--accent-danger);
    color: var(--text-primary);
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
    line-height: 1.4;
}

/* Login gate: replaces the page main content for auth-required pages when
   the visitor isn't signed in. The hamburger Login button + this gate's
   button both kick off the same redirect. */
.login-gate {
    max-width: 540px;
    margin: 4rem auto;
    padding: 2rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    text-align: center;
}
.login-gate h2 {
    margin: 0 0 1rem;
    color: var(--accent-primary);
}
.login-gate p {
    color: var(--text-secondary);
    margin: 0 0 1rem;
    line-height: 1.55;
}
.login-gate .btn {
    margin: 0.5rem 0;
}
.login-gate-hint {
    font-size: 0.85rem;
    color: var(--text-muted) !important;
    margin-top: 1.25rem !important;
}

/* Schema-mismatch banner: shown when the server's deck-API schema is older
   than what this CardCrow build expects. Pinned to the top of the page so
   it's hard to miss but doesn't push other content (the page can scroll). */
.schema-mismatch-banner {
    position: sticky;
    top: 0;
    z-index: 200;
    background-color: rgba(245, 158, 11, 0.18);
    border-bottom: 1px solid var(--accent-warning);
    color: var(--text-primary);
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
    line-height: 1.4;
}

.schema-mismatch-banner code {
    background-color: var(--bg-tertiary);
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
}

/* View preferences (driven by classes on <body>) */
body.pref-hide-type .col-type { display: none; }
body.pref-hide-pt .col-pt { display: none; }

/* Hide rows whose card is a Land. Type is stamped on the row via
   data-card-type so this is a pure CSS filter — sort and counts stay
   intact, the rows just don't render. */
body.pref-hide-lands .deck-table tr[data-card-type*="Land"] { display: none; }
body.pref-hide-lands .deck-image-card[data-card-type*="Land"] { display: none; }

/* "Show only Provisional cards" filters the deck view to entries flagged
   provisional (📦) so the user can see at-a-glance what they still need
   to acquire. IDs scope this to the top deck panel so the bottom Alt
   Boards (proposed/maybe/nope/cut) aren't affected. Pure CSS, like the
   Hide Lands filter — sort and the deck-stats counts stay accurate. */
body.pref-provisional-only #deck-table-body tr:not(.provisional-row) { display: none; }
body.pref-provisional-only #deck-image-grid .deck-image-card:not(.provisional-card) { display: none; }

/* Collapse the bottom panel (proposed/maybe/nope) entirely so the deck view
   gets the full viewport. The user can re-show via the menu. */
body.pref-hide-bottom-panel .split-bottom,
body.pref-hide-bottom-panel .split-handle { display: none; }
/* The splitter writes inline `style.flex` on .split-top when the user
   drags it, which would otherwise win over this rule. !important keeps
   the user's drag state preserved (it just doesn't apply while hidden;
   un-toggling restores the dragged ratio). */
body.pref-hide-bottom-panel .split-top { flex: 1 1 100% !important; }