/* ============================================================================
   binder.css — Binder view page (/binders/<id>) specific styles
   ----------------------------------------------------------------------------
   Page-specific CSS for the individual binder view. Depends on tokens.css and
   components.css being loaded first. No hex. No :root. No body.dark-mode.
============================================================================ */

/* ── Page container ────────────────────────────────────────────────────────── */
.binder-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--space-5);
}

@media (max-width: 768px) {
    .binder-container {
        padding: var(--space-3);
    }
}

/* ── Binder header (colored gradient band) ─────────────────────────────────── */
.binder-header {
    color: var(--color-white);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
    /* --binder-color is set inline from binder.color */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--binder-color) 60%, transparent) 0%,
        color-mix(in srgb, var(--binder-color) 80%, transparent) 100%);
}

@media (max-width: 768px) {
    .binder-header {
        padding: var(--space-4) var(--space-4);
        margin-bottom: var(--space-4);
        border-radius: var(--radius-md);
    }
}

/* JS hook: .binder-title is read by BinderPhoto JS — do not rename */
.binder-title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin: 0 0 var(--space-3) 0;
    line-height: var(--line-tight);
    color: var(--color-white);
}

@media (max-width: 768px) {
    .binder-title {
        font-size: var(--font-size-2xl);
    }
}

.binder-description {
    font-size: var(--font-size-base);
    opacity: 0.9;
    margin-bottom: var(--space-5);
    line-height: var(--line-normal);
}

@media (max-width: 768px) {
    .binder-description {
        font-size: var(--font-size-sm);
    }
}

/* ── Binder action buttons row ─────────────────────────────────────────────── */
.binder-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .binder-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }
}

/* ── Section header (title + view toggle + sort) ───────────────────────────── */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.section-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

/* ── View toggle buttons (.view-toggle-btn — JS hook: .active class toggled by setView()) */
.view-toggle {
    display: flex;
    gap: var(--space-1);
}

.view-toggle-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast);
    min-height: 36px;
    min-width: 36px;
}

.view-toggle-btn:hover {
    background: var(--surface-elevated);
    border-color: var(--border-strong);
    color: var(--text);
}

/* JS hook: .active class toggled by setView() */
.view-toggle-btn.active {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--color-white);
}

.view-toggle-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ── Add-cards tip banner ───────────────────────────────────────────────────── */
/* JS hook: id="addCardsTip", dismissAddCardsTip() */
.add-cards-tip {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--brand-soft);
    border: 1px solid var(--brand);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--text);
}

.add-cards-tip .tip-text {
    flex: 1;
    line-height: var(--line-normal);
}

.add-cards-tip .tip-text a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}

.add-cards-tip .tip-text a:hover {
    text-decoration: underline;
}

.add-cards-tip .tip-text em {
    font-style: normal;
    font-weight: 600;
    background: var(--surface-elevated);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    color: var(--text);
}

.tip-dismiss {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
}

.tip-dismiss:hover {
    color: var(--text);
}

.tip-dismiss:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ── Bulk-select toolbar ────────────────────────────────────────────────────── */
/* JS hooks: id="bulkToolbar", .visible class, id="bulkCount" */
.bulk-toolbar {
    display: none;
    align-items: center;
    gap: var(--space-3);
    background: var(--status-warn-bg-dark);
    border: 1px solid var(--status-warn);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--status-warn);
    flex-wrap: wrap;
}

/* JS hook: .visible toggled by toggleSelectMode() */
.bulk-toolbar.visible {
    display: flex;
}

.bulk-toolbar .bulk-count {
    font-weight: 600;
    flex: 1;
}

/* Card-select checkbox (accent color = brand red for danger signaling) */
.card-select-checkbox {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--status-danger);
    flex-shrink: 0;
}

/* List view checkbox column */
.col-select {
    width: 36px;
    text-align: center;
}

/* Grid view checkbox overlay — JS hook: .select-mode-active on parent triggers display */
.card-select-overlay {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 20;
    display: none;
}

/* JS hook: .select-mode-active toggled by toggleSelectMode() on #cardsGridView */
.select-mode-active .card-select-overlay {
    display: block;
}

.select-mode-active .card-item {
    cursor: default;
}

/* JS hook: .card-selected toggled by onRowCheckboxChange() */
.card-item.card-selected .card-image-container {
    outline: 3px solid var(--status-danger);
    outline-offset: 2px;
}

/* ── Cards grid layout ──────────────────────────────────────────────────────── */
/* JS hook: id="cardsGridView" */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width, 160px), 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: var(--space-3);
    }
}

@media (max-width: 380px) {
    .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Card item (grid tile) ──────────────────────────────────────────────────── */
/* JS hooks: .card-item[data-card-detail-url], data-card-id, data-card-detail-url */
.card-item {
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    cursor: pointer;
    position: relative;
}

.card-item:hover .card-image-container {
    transform: translateY(-4px);
}

/* ── Card image container (color-classified) ───────────────────────────────── */
.card-image-container {
    position: relative;
    width: 100%;
    height: auto;
    background: var(--brand-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-weight: 500;
    border-radius: var(--radius-lg);
    overflow: visible;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card-image-container.red {
    background: var(--gradient-red);
}

.card-image-container.blue {
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--teal-600) 100%);
}

.card-image-container.green {
    background: var(--gradient-green);
}

.card-image-container.white {
    background: var(--gradient-white);
    color: var(--neutral-700);
}

.card-image-container.colorless {
    background: var(--gradient-gray);
}

.card-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    padding: 0;
    display: block;
}

/* ── Quantity badge (top-right corner of card) ──────────────────────────────── */
.card-quantity-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--color-success);
    color: var(--color-white);
    border-radius: var(--radius-full);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 700;
    z-index: 10;
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .card-quantity-badge {
        width: 28px;
        height: 28px;
        font-size: var(--font-size-xs);
        top: 10px;
        right: 10px;
    }
}

/* ── Card action overlay (hover: qty input + remove + wishlist) ─────────────── */
.card-actions-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    gap: var(--space-2);
    z-index: 10;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.card-item:hover .card-actions-overlay {
    opacity: 1;
}

@media (max-width: 768px) {
    .card-actions-overlay {
        opacity: 1;
        top: 10px;
        left: 10px;
        flex-direction: column;
        gap: var(--space-1);
    }
}

/* Inline action buttons on card overlay */
.btn-action-overlay {
    background: rgba(0, 0, 0, 0.75);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
}

.btn-action-overlay:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-1px);
}

.btn-action-overlay.danger {
    background: rgba(220, 53, 69, 0.85);
}

.btn-action-overlay.danger:hover {
    background: rgba(200, 35, 51, 0.95);
}

@media (max-width: 768px) {
    .btn-action-overlay {
        padding: var(--space-1) var(--space-2);
        font-size: var(--font-size-xs);
    }
}

/* Quantity input inside card overlay */
.quantity-input {
    width: 44px;
    padding: var(--space-1) var(--space-1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: var(--font-size-xs);
    background: rgba(0, 0, 0, 0.6);
    color: var(--color-white);
}

/* ── Card info overlay (hover: slide up from bottom) ────────────────────────── */
.card-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
    color: var(--color-white);
    padding: var(--space-5) var(--space-3) var(--space-3);
    transform: translateY(100%);
    transition: transform var(--transition-base);
}

.card-item:hover .card-info-overlay {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .card-info-overlay {
        transform: translateY(0);
        padding: var(--space-3) var(--space-2) var(--space-2);
    }
}

.card-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--space-1);
    line-height: var(--line-tight);
    color: var(--color-white);
}

.card-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: var(--font-size-xs);
    color: var(--neutral-300);
}

.card-types {
    color: var(--color-blue);
    font-weight: 500;
}

.card-rarity { text-transform: capitalize; }
.card-rarity.common       { color: var(--neutral-400); }
.card-rarity.uncommon     { color: var(--status-ok); }
.card-rarity.rare         { color: var(--status-warn); font-weight: 600; }
.card-rarity.legendary_rare { color: var(--color-red); font-weight: 600; }

.card-set {
    font-style: italic;
    color: var(--neutral-400);
}

.card-added-date {
    font-size: var(--font-size-xs);
    color: var(--neutral-400);
    margin-top: var(--space-1);
}

.card-price {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--green-400);
    margin-top: 3px;
}

@media (max-width: 768px) {
    .card-name { font-size: var(--font-size-sm); }
    .card-meta { font-size: var(--font-size-xs); }
}

/* ── List view table (id="cardsListView") ───────────────────────────────────── */
.cards-list-view {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-8);
    font-size: var(--font-size-sm);
}

.cards-list-view th {
    text-align: left;
    padding: var(--space-3) var(--space-3);
    border-bottom: 2px solid var(--border);
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.cards-list-view td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}

.cards-list-view tr:hover td {
    background: var(--surface-elevated);
}

.cards-list-view .col-qty {
    width: 60px;
    text-align: center;
}

.cards-list-view .col-price,
.cards-list-view .col-total {
    text-align: right;
    width: 80px;
    white-space: nowrap;
}

.cards-list-view .col-actions {
    width: 80px;
    text-align: center;
}

/* JS hook: .list-card-name used by card navigation */
.list-card-name {
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    cursor: pointer;
}

.list-card-name:hover {
    text-decoration: underline;
}

.list-rarity-badge {
    font-size: var(--font-size-xs);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    margin-left: var(--space-1);
    font-weight: 500;
    vertical-align: middle;
}

.list-rarity-badge.common       { background: var(--surface-elevated); color: var(--text-muted); }
.list-rarity-badge.uncommon     { background: var(--color-success-soft); color: var(--green-300); }
.list-rarity-badge.rare         { background: var(--color-warning-soft); color: var(--amber-300); }
.list-rarity-badge.legendary_rare { background: var(--color-danger-soft); color: var(--red-300); }

.list-price   { color: var(--status-ok);   font-weight: 600; }
.list-total   { color: var(--brand);       font-weight: 700; }
.list-no-price { color: var(--text-faint); font-size: var(--font-size-xs); }

.list-qty-input {
    width: 44px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: var(--font-size-sm);
    background: var(--surface-sunken);
    color: var(--text);
}

.list-qty-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-ring);
}

.list-delete-btn {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--status-danger);
    padding: var(--space-1) var(--space-1);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    display: inline-flex;
    align-items: center;
}

.list-delete-btn:hover {
    background: var(--color-danger-soft);
}

.list-delete-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (max-width: 768px) {
    .cards-list-view .col-actions { display: none; }
    .cards-list-view .hide-mobile { display: none; }
}

/* ── Empty binder state ─────────────────────────────────────────────────────── */
.empty-binder {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--border);
    color: var(--text-muted);
}

.empty-binder h3 {
    color: var(--text);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.empty-binder p {
    color: var(--text-muted);
    margin-bottom: var(--space-5);
}

/* Onboarding steps inside empty binder */
.empty-binder-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-5) 0 var(--space-6);
    flex-wrap: wrap;
}

.empty-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    flex: 1;
    min-width: 110px;
    max-width: 150px;
}

.empty-step-icon {
    font-size: 1.75rem;
    color: var(--brand);
}

.empty-step-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    line-height: var(--line-normal);
}

.empty-step-arrow {
    color: var(--text-faint);
    font-size: 1.375rem;
    flex-shrink: 0;
}

/* ── Share modal (style.display toggled by JS, not .is-open) ────────────────── */
/* JS hooks: id="shareModal", openShareModal(), closeShareModal(), copyShareUrl() */
/* NOTE: JS uses modal.style.display = 'flex'/'none' directly (not .is-open) */
.share-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--space-4);
}

.share-modal-content {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    width: min(520px, 100%);
    box-shadow: var(--shadow-xl);
}

.share-modal-title {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text);
}

.share-input-group {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.share-input-group input {
    flex: 1;
    padding: var(--space-3) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--surface-sunken);
    color: var(--text);
}

.share-input-group input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-ring);
}

.share-qr-wrapper {
    margin-top: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

@media (max-width: 768px) {
    .share-qr-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
}

.share-qr-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    background: var(--surface-elevated);
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .share-qr-box {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 380px) {
    .share-qr-box {
        width: 140px;
        height: 140px;
    }
}

.share-qr-hint {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: var(--line-normal);
}

.share-modal-actions {
    margin-top: var(--space-3);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

@media (max-width: 768px) {
    .share-modal-content {
        padding: var(--space-4);
    }

    .share-input-group input {
        font-size: var(--font-size-sm);
    }
}

/* ── Confirm modal (replaces native confirm() for bulk delete) ──────────────── */
/* JS hook: shown via showConfirmModal() in deleteSelected() */
.modal--confirm .modal-content {
    max-width: 400px;
}

/* ── Toast notification (id="binderToast") ──────────────────────────────────── */
/* Styles applied inline by showBinderToast(); kept minimal here */
#binderToast {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    z-index: var(--z-toast);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
    white-space: nowrap;
}