/*
 * Deck editor — Card View only (.deck-cards-editor.card-view).
 * Loaded after database-view.css and card-tables.css, before mobile-layout.css.
 * Layout rules: docs/current/DECK_EDITOR_CARD_VIEW_LAYOUT.md — MOBILE_DESIGN.md (M2a).
 */

/* ===== CARD VIEW STYLING ===== */

/* Card View Container - Completely Independent */
.deck-cards-editor.card-view {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    /* Override any layout system interference */
    flex-direction: column !important;
    align-items: stretch !important;
}

/* Completely override any layout system for Card View */
.deck-cards-editor.card-view * {
    box-sizing: border-box;
}

.deck-cards-editor.card-view .deck-column,
.deck-cards-editor.card-view .deck-type-section {
    display: none !important;
}

/* Individual Card View Item — responsive sizes use --cv-* custom properties */
.deck-card-card-view-item {
    --cv-portrait-w: 175px;
    --cv-portrait-h: 250px;
    --cv-land-w: 250px;
    --cv-char-wrap-h: 184px;
    --cv-loc-ev-wrap-h: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--cv-portrait-w);
    height: var(--cv-portrait-h);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    /* Removed padding to allow image to fill frame */
    box-sizing: border-box;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative; /* Enable absolute positioning for buttons */
}

/* Landscape orientation (only character, location, event): image fills, bevelled corners, no frame; buttons below */
.deck-card-card-view-item[data-type="character"],
.deck-card-card-view-item[data-type="location"],
.deck-card-card-view-item[data-type="event"] {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow: visible;
    background: transparent !important;
    border: none !important;
    outline: none;
    box-shadow: none;
}
/* Card width fixed; height from content (wrap + actions) */
.deck-card-card-view-item[data-type="character"] {
    width: var(--cv-land-w); /* aspect 380/280 → wrap height --cv-char-wrap-h */
    height: auto;
}
.deck-card-card-view-item[data-type="location"] {
    width: var(--cv-land-w);
    height: auto;
}
.deck-card-card-view-item[data-type="event"] {
    width: var(--cv-land-w);
    height: auto;
}

.deck-card-card-view-item:hover {
    background: rgba(78, 205, 196, 0.2);
    border-color: #4ecdc4;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Landscape: hover applies to image wrap only (frame stays around image); item still lifts */
.deck-card-card-view-item[data-type="character"]:hover,
.deck-card-card-view-item[data-type="location"]:hover,
.deck-card-card-view-item[data-type="event"]:hover {
    background: transparent;
    border: none;
    box-shadow: none;
    transform: translateY(-2px);
}
.deck-card-card-view-item[data-type="character"]:hover .card-foil-img-wrap,
.deck-card-card-view-item[data-type="location"]:hover .card-foil-img-wrap,
.deck-card-card-view-item[data-type="event"]:hover .card-foil-img-wrap {
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.35);
}

/* Card View Image */
.card-view-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* Move image up to reduce empty head space */
    border-radius: 6px;
    display: block;
}

/*
 * Wrapper that receives .foil-shimmer so that overflow:hidden from the
 * shimmer class never clips the action buttons beneath the card.
 * It takes the same flex role the <img> used to have.
 * overflow:hidden is required to clip the oversized ::after pseudo-element
 * (inset: -50% -20%) that creates the shimmer effect.
 * position: relative so stacked .card-view-image-thumb / .card-view-image-full overlay correctly.
 */
.card-foil-img-wrap {
    position: relative;
    flex-grow: 1;
    width: 100%;
    min-height: 0;
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
}

/* Two-layer progressive load: thumb visible until full-res loads, then thumb hidden to avoid edge bleed */
.card-view-image-thumb,
.card-view-image-full {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 6px;
    display: block;
}
.card-view-image-full {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}
.card-view-image-full.card-view-image-full--loaded {
    opacity: 1;
}
/* Once full-res is loaded, hide thumb so it never shows through at edges */
.card-foil-img-wrap:has(.card-view-image-full.card-view-image-full--loaded) .card-view-image-thumb {
    visibility: hidden;
}

/* Portrait wrapper — fill frame, no margin below */
.deck-card-card-view-item:not([data-type="character"]):not([data-type="location"]):not([data-type="event"]) .card-foil-img-wrap {
    flex-grow: 0;
    width: 100%;
    height: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    overflow: hidden;
}

/* Portrait image inside wrapper */
.deck-card-card-view-item:not([data-type="character"]):not([data-type="location"]):not([data-type="event"]) .card-view-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Landscape wrapper: image only, no frame; clip to bevelled corners; buttons sit below */
.deck-card-card-view-item[data-type="character"] .card-foil-img-wrap,
.deck-card-card-view-item[data-type="location"] .card-foil-img-wrap,
.deck-card-card-view-item[data-type="event"] .card-foil-img-wrap {
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    margin: 0;
    padding: 0 !important;
    border-radius: 8px;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    overflow: hidden;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease;
}
.deck-card-card-view-item[data-type="character"] .card-foil-img-wrap {
    height: var(--cv-char-wrap-h);
}
.deck-card-card-view-item[data-type="location"] .card-foil-img-wrap,
.deck-card-card-view-item[data-type="event"] .card-foil-img-wrap {
    height: var(--cv-loc-ev-wrap-h);
}

/* Landscape: image fills wrap edge-to-edge; bevelled corners (like character cards); no inner frame */
.deck-card-card-view-item[data-type="character"] .card-view-image,
.deck-card-card-view-item[data-type="location"] .card-view-image,
.deck-card-card-view-item[data-type="event"] .card-view-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center top;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    display: block;
    vertical-align: top;
}
.deck-card-card-view-item[data-type="character"] .card-view-image-thumb,
.deck-card-card-view-item[data-type="character"] .card-view-image-full,
.deck-card-card-view-item[data-type="location"] .card-view-image-thumb,
.deck-card-card-view-item[data-type="location"] .card-view-image-full,
.deck-card-card-view-item[data-type="event"] .card-view-image-thumb,
.deck-card-card-view-item[data-type="event"] .card-view-image-full {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}
/* Location and event: show full image (no bottom crop); character keeps cover */
.deck-card-card-view-item[data-type="location"] .card-view-image,
.deck-card-card-view-item[data-type="location"] .card-view-image-thumb,
.deck-card-card-view-item[data-type="location"] .card-view-image-full,
.deck-card-card-view-item[data-type="event"] .card-view-image,
.deck-card-card-view-item[data-type="event"] .card-view-image-thumb,
.deck-card-card-view-item[data-type="event"] .card-view-image-full {
    object-fit: contain !important;
    object-position: center center !important;
}

/* Card View Actions Container */
.card-view-actions {
    display: flex !important;
    flex-direction: row; /* Always horizontal row */
    gap: 6px; /* Increased gap for horizontal buttons */
    width: auto; /* Auto width for horizontal buttons */
    align-items: center;
    justify-content: center; /* Center buttons horizontally */
    margin-top: auto; /* Push buttons to bottom of card - same as landscape */
    flex-shrink: 0; /* Prevent buttons from shrinking */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Portrait card actions - position outside frame */
.deck-card-card-view-item:not([data-type="character"]):not([data-type="location"]):not([data-type="event"]) .card-view-actions {
    position: absolute; /* Position outside the frame */
    bottom: -35px; /* Position below the frame with more space */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center horizontally */
    margin-top: 0; /* Override margin-top: auto */
    z-index: 10; /* Ensure buttons are visible */
}

/* Landscape card actions: row below image with padding */
.deck-card-card-view-item[data-type="character"] .card-view-actions,
.deck-card-card-view-item[data-type="location"] .card-view-actions,
.deck-card-card-view-item[data-type="event"] .card-view-actions {
    margin-top: auto;
    flex-shrink: 0;
    padding: 8px;
}

/* Card View Buttons */
.card-view-btn {
    font-size: 10px;
    padding: 3px 6px;
    min-width: 32px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid rgba(78, 205, 196, 0.3);
    background: rgba(78, 205, 196, 0.2);
    color: #4ecdc4;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-view-btn:hover {
    background: rgba(78, 205, 196, 0.3);
    border-color: rgba(78, 205, 196, 0.4);
    transform: translateY(-1px);
}

/* Specific button types in card view */
.card-view-btn.alternate-art-btn {
    font-size: 9px;
    padding: 2px 4px;
    min-width: 28px;
    height: 18px;
}

.card-view-btn.remove-one-btn,
.card-view-btn.add-one-btn,
.card-view-btn.quantity-btn {
    font-size: 11px;
    font-weight: bold;
    min-width: 24px;
    height: 18px;
}

/* Mission "Display" button: match the teal scheme of "-" */
.display-mission-btn {
    background: rgba(78, 205, 196, 0.2) !important;
    color: #4ecdc4 !important;
    border: 1px solid rgba(78, 205, 196, 0.3) !important;
}

.display-mission-btn:hover {
    background: rgba(78, 205, 196, 0.3) !important;
    border-color: rgba(78, 205, 196, 0.4) !important;
}

/* Dimmed active state (similar to other toggle buttons) */
.display-mission-btn.active {
    background: rgba(78, 205, 196, 0.15) !important;
    border-color: rgba(78, 205, 196, 0.25) !important;
    color: rgba(78, 205, 196, 0.75) !important;
    opacity: 0.85;
}

.display-mission-btn.active:hover {
    background: rgba(78, 205, 196, 0.2) !important;
    border-color: rgba(78, 205, 196, 0.3) !important;
    color: rgba(78, 205, 196, 0.85) !important;
}

/* KO Button in Card View - Red color scheme matching Tile View */
.card-view-btn.ko-btn {
    background: rgba(255, 107, 107, 0.2) !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(255, 107, 107, 0.3) !important;
}

.card-view-btn.ko-btn:hover {
    background: rgba(255, 107, 107, 0.3) !important;
    border-color: rgba(255, 107, 107, 0.4) !important;
}

/* Inverted color scheme when character is KO'd */
.card-view-btn.ko-btn.active {
    background: #ff6b6b !important;
    color: rgba(26, 26, 46, 0.9) !important;
    border-color: #ff6b6b !important;
}

.card-view-btn.ko-btn.active:hover {
    background: #ff5252 !important;
    border-color: #ff5252 !important;
}

/* Card View Category Sections - Vertical Stack */
.card-view-category-section {
    width: 100% !important;
    margin-bottom: 30px;
    padding-bottom: 15px;
    display: block;
    clear: both;
}

/* Reduced spacing for collapsed categories */
.card-view-category-section.collapsed {
    margin-bottom: 15px;
    padding-bottom: 8px;
}

.card-view-category-header {
    background: rgba(78, 205, 196, 0.1);
    border: 1px solid rgba(78, 205, 196, 0.3);
    border-radius: 6px;
    padding: 8px 16px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 100%; /* Ensure header doesn't exceed container */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
    gap: 16px; /* Add gap between name and controls */
    overflow: hidden; /* Prevent overflow */
    position: relative; /* Contain absolutely positioned children */
}

.card-view-category-header:hover {
    background: rgba(78, 205, 196, 0.15);
    border-color: rgba(78, 205, 196, 0.4);
}

.card-view-category-controls {
    display: flex !important;
    align-items: center;
    gap: 12px; /* Increased gap for better spacing */
    position: relative;
    z-index: 1;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0; /* Don't shrink controls */
    margin-left: auto; /* Push controls to the right */
    justify-content: flex-end; /* Right-align items within controls */
    min-width: fit-content; /* Size to content */
}

/* Remove Unusables button in Card View */
.card-view-remove-unusables-btn {
    font-size: 10px;
    padding: 1px 4px !important; /* Increased padding - 6% wider */
    min-width: auto !important; /* Override remove-all-btn min-width: 80px */
    width: auto !important; /* Override remove-all-btn width: 100% */
    max-width: none !important; /* Remove any max-width constraints */
    height: auto !important; /* Let height adjust to content */
    line-height: 1.2; /* Tight line height */
    border-radius: 4px;
    border: 1px solid rgba(78, 205, 196, 0.3);
    background: rgba(78, 205, 196, 0.2);
    color: #4ecdc4;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-weight: 500;
    flex-shrink: 0; /* Prevent button from shrinking */
    box-sizing: border-box; /* Include border in width calculation */
    display: inline-block !important; /* Override remove-all-btn display: inline-flex */
}

.card-view-remove-unusables-btn:hover {
    background: rgba(78, 205, 196, 0.3);
    border-color: rgba(78, 205, 196, 0.5);
    transform: translateY(-1px);
}

.card-view-category-toggle {
    color: #4ecdc4 !important;
    font-size: 1.1rem !important;
    font-weight: bold;
    transition: transform 0.2s ease;
    user-select: none;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: auto !important; /* Allow natural width */
    width: auto !important; /* Allow natural width */
    text-align: center !important;
    background: rgba(78, 205, 196, 0.1) !important;
    border: 1px solid rgba(78, 205, 196, 0.3) !important;
    border-radius: 3px !important;
    padding: 2px 4px !important; /* Minimal padding to prevent squishing */
    margin: 0 !important; /* Remove any margin */
    line-height: 1 !important; /* Tight line height */
}

.card-view-category-toggle.collapsed {
    transform: rotate(-90deg);
}

.card-view-category-toggle:hover {
    background: rgba(78, 205, 196, 0.2) !important;
    border-color: rgba(78, 205, 196, 0.5) !important;
    transform: scale(1.1);
}

.card-view-category-name {
    color: #4ecdc4;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 1; /* Allow name to shrink if needed */
    min-width: 0; /* Allow flex shrinking */
    overflow: hidden; /* Prevent text overflow */
    text-overflow: ellipsis; /* Show ellipsis if text is too long */
    white-space: nowrap; /* Keep name on one line */
}

.card-view-category-count {
    color: #bdc3c7 !important;
    font-size: 0.9rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0; /* Prevent count from shrinking */
    white-space: nowrap; /* Keep count on one line */
}

.card-view-category-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 70px 15px; /* vertical gap: 70px to accommodate buttons below cards, horizontal gap: 15px */
    width: 100%;
    transition: all 0.3s ease;
    overflow: visible; /* Allow buttons positioned outside cards to be visible */
}

.card-view-category-cards.collapsed {
    max-height: 0;
    margin-bottom: 0;
    opacity: 0;
}

/* Sidebar category collapse icons */
.collapse-icon {
    font-size: 1.02rem;
    flex-shrink: 0;
    min-width: 17px;
    color: #4ecdc4;
    transition: transform 0.2s ease;
}

/* Responsive: scale portrait tile and landscape wrap (variables preserve thumb aspect) */
@media (max-width: 1200px) {
    .deck-card-card-view-item {
        --cv-portrait-w: 160px;
        --cv-portrait-h: 229px;
        --cv-land-w: 225px;
        --cv-char-wrap-h: 166px;
        --cv-loc-ev-wrap-h: 144px;
    }
}

@media (max-width: 1000px) {
    .deck-card-card-view-item {
        --cv-portrait-w: 146px;
        --cv-portrait-h: 208px;
        --cv-land-w: 203px;
        --cv-char-wrap-h: 149px;
        --cv-loc-ev-wrap-h: 130px;
    }
}

@media (max-width: 800px) {
    .deck-card-card-view-item {
        --cv-portrait-w: 131px;
        --cv-portrait-h: 188px;
        --cv-land-w: 183px;
        --cv-char-wrap-h: 135px;
        --cv-loc-ev-wrap-h: 117px;
    }
}

@media (max-width: 600px) {
    .deck-card-card-view-item {
        --cv-portrait-w: 116px;
        --cv-portrait-h: 167px;
        --cv-land-w: 161px;
        --cv-char-wrap-h: 118px;
        --cv-loc-ev-wrap-h: 103px;
    }
}