@font-face {
    font-family: 'MPlantin';
    src: url('/static/fonts/MPlantin%20Regular.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ===== CSS VARIABLES FOR THEMING ===== */
/* Light mode (default) variables */
:root {a
    /* Backgrounds */
    --bg-container: #d0d0d0;
    --bg-card: rgba(255, 255, 255, 0.9);
    --bg-modal: white;
    --bg-modal-header: white;
    --bg-modal-footer: white;
    --bg-header: white;
    --bg-footer: white;
    --bg-input: white;
    --bg-list-group: white;
    --bg-card-option: white;
    --bg-comment: #f8f9fa;
    --bg-analytics-stat: white;
    --bg-analytics-chart: white;
    --bg-feedback-item: white;
	
    
    /* Text colors */
    --text-primary: #333;
    --text-secondary: #666;
    --text-muted: #666;
    --text-dark: #333;
    --text-white: #fff;
    --text-light: #e0e0e0;
    --text-heading: #333;
    
    /* Borders */
    --border-color: #eee;
    --border-light: #ddd;
    --border-dark: #0f3460;
    --border-card: #0f3460;
    --modal-border-color: #eee;
    
    /* Modal specific */
    --modal-header-bg: white;
    --modal-footer-bg: white;
    --modal-border: #eee;
    
    /* Form elements */
    --input-bg: white;
    --input-border: #ddd;
    --input-text: #333;
    --input-placeholder: #999;
    
    /* Buttons */
    --btn-secondary-bg: #6c757d;
    --btn-secondary-hover: #5a6268;
    
    /* Analytics */
    --analytics-container-bg: rgba(255, 255, 255, 0.95);
    --analytics-stat-number: #0d6efd;
    --analytics-stat-label: #666;
    
    /* Feedback */
    --feedback-meta-color: #666;
    --feedback-border: #eee;
    
    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-md: 0 5px 20px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.2);
    
    /* Card Border Bottom Hover */
    --bg-hover: #f8f9fa;
    
    /* Modal border (light mode - subtle) */
    --modal-neon-border: 1px solid rgba(0,0,0,0.1);
    --modal-neon-glow: none;
    
    /* Scrollbar (light mode) */
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #c1c1c1;
    --scrollbar-thumb-hover: #a8a8a8;
	
	/* Light mode tints - using opacity variable for intensity control */
    --tint-white: rgba(255, 249, 196, var(--tint-opacity, 0.5));
    --tint-blue: rgba(187, 222, 251, var(--tint-opacity, 0.5));
    --tint-black: rgba(189, 189, 189, var(--tint-opacity, 0.5));
    --tint-red: rgba(255, 205, 210, var(--tint-opacity, 0.5));
    --tint-green: rgba(200, 230, 201, var(--tint-opacity, 0.5));
    --tint-multicolor: linear-gradient(90deg, rgba(255,215,0, calc(var(--tint-opacity, 0.5) / 3)), 
	rgba(102,16,242, calc(var(--tint-opacity, 0.5) / 3)));
    --tint-colorless: rgba(224, 224, 224, var(--tint-opacity, 0.5));
    --tint-artifact: rgba(165, 42, 42, var(--tint-opacity, 0.5));
    --tint-land: rgba(215, 204, 200, var(--tint-opacity, 0.5));
    --tint-tokens: rgba(225, 183, 225, var(--tint-opacity, 0.5));
    --tint-unknown: rgba(200, 200, 200, var(--tint-opacity, 0.5));
	
	/* Correction Modal Highlight */
	--correction-active-bg: #0d6efd;
    --correction-active-text: #ffffff;
	
	/* Correction Modal Hover */
    --correction-hover-bg: #2a3f6e;
	
	/* EDHREC specific backgrounds */
    --edhrec-card-grid-bg: #e8e8e8;
    --edhrec-section-header-bg: #a0a0a0;
    --edhrec-section-header-text: #ffffff;
    --edhrec-section-header-border: #888888;
	--edhrec-card-text: var(--text-primary); /* light gray*/
	--edhrec-card-border: #646464;/* Slightly darker dark mode text gray*/
	
	/* DFC Label colors */
    --dfc-front-border: #000000;
    --dfc-back-bg: #000000;

    /* Official-style mana pip backings (printed card palette) */
    --mana-w: #F8F4D4;
    --mana-u: #C6DCF5;
    --mana-b: #CAC5C0;
    --mana-r: #F6B09A;
    --mana-g: #A8D4B0;
    --mana-c: #D8D4D0;
    --mana-glyph: #222222;
}

/* Dark mode variables - override when html has dark-mode class */
html.dark-mode {
    /* Backgrounds */
    --bg-container: rgba(26, 26, 46, 0.95);
    --bg-card: rgba(22, 33, 62, 0.9);
    --bg-modal: #1a1a2e;
    --bg-modal-header: #16213e;
    --bg-modal-footer: #16213e;
    --bg-header: #16213e;
    --bg-footer: #16213e;
    --bg-input: #16213e;
    --bg-list-group: #16213e;
    --bg-card-option: #16213e;
    --bg-comment: #1a2a4a;
    --bg-analytics-stat: #16213e;
    --bg-analytics-chart: #16213e;
    --bg-feedback-item: #16213e;
    
    /* Text colors */
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-muted: #a0a0a0;
    --text-dark: #e0e0e0;
    --text-white: #ffffff;
    --text-light: #c0c0c0;
    --text-heading: #ffffff;
    
    /* Borders */
    --border-color: #0f3460;
    --border-light: #0f3460;
    --border-dark: #1a4a7a;
    --border-card: #0f3460;
    --modal-border-color: #0f3460;
    
    /* Modal specific */
    --modal-header-bg: #16213e;
    --modal-footer-bg: #16213e;
    --modal-border: #0f3460;
    
    /* Form elements */
    --input-bg: #131c35;
    --input-border: #0f3460;
    --input-text: #e0e0e0;
    --input-placeholder: #8080a0;
    
    /* Buttons */
    --btn-secondary-bg: #0f3460;
    --btn-secondary-hover: #1a4a7a;
    
    /* Analytics */
    --analytics-container-bg: rgba(26, 26, 46, 0.95);
    --analytics-stat-number: #6bc5ff;
    --analytics-stat-label: #a0a0a0;
    
    /* Feedback */
    --feedback-meta-color: #a0a0a0;
    --feedback-border: #0f3460;
    
    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.2);
    --shadow-md: 0 5px 20px rgba(0,0,0,0.5);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.3);
    
    /* Card Border Bottom Hover */
    --bg-hover: #1a2a4a;
    
    /* Modal border (dark mode - magenta neon) */
    --modal-neon-border: 1px solid #ff00ff;
    --modal-neon-glow: 0 0 10px rgba(255, 0, 255, 0.5), 0 0 5px rgba(255, 0, 255, 0.3);
    
    /* Scrollbar (dark mode) */
    --scrollbar-track: #1a1a2e;
    --scrollbar-thumb: #4a4a6e;
    --scrollbar-thumb-hover: #6a6a8e;
	
	/* Sorted List Card Item Colors (Dark Mode)*/ 
	--tint-white: rgba(75, 75, 15, var(--tint-opacity, 0.3));
    --tint-blue: rgba(25, 45, 75, var(--tint-opacity, 0.3));
    --tint-black: rgba(30, 30, 30, var(--tint-opacity, 0.3));
    --tint-red: rgba(75, 10, 15, var(--tint-opacity, 0.3));
    --tint-green: rgba(30, 65, 40, var(--tint-opacity, 0.3));
    --tint-multicolor: linear-gradient(90deg, rgba(180, 140, 0, calc(var(--tint-opacity, 0.3) * 1.2)), 
	rgba(90, 30, 180, calc(var(--tint-opacity, 0.3) * 1.2)));
    --tint-colorless: rgba(65, 65, 65, var(--tint-opacity, 0.3));
    --tint-artifact: rgba(85, 35, 25, var(--tint-opacity, 0.3));
    --tint-land: rgba(75, 65, 60, var(--tint-opacity, 0.3));
    --tint-tokens: rgba(85, 55, 85, var(--tint-opacity, 0.3));
    --tint-unknown: rgba(80, 80, 80, var(--tint-opacity, 0.3));
	
	/* Correction Modal Highlight - Dark Mode*/
	--correction-active-bg: #6bc5ff;
    --correction-active-text: #1a1a2e;
	
	/* Correction Modal Hover - Dark Mode */
    --correction-hover-bg: #2a4a7a;
	
	/* EDHREC specific backgrounds - dark mode */
    --edhrec-card-grid-bg: #000b28;  /* Near black - matches dark mode aesthetic */
    --edhrec-section-header-bg: var(--bg-header);  /* Uses existing #16213e */
    --edhrec-section-header-text: var(--text-heading);  /* Uses existing #ffffff */
    --edhrec-section-header-border: var(--border-dark);  /* Uses existing #1a4a7a */
	--edhrec-card-text: var(--text-primary); /* light gray*/
	--edhrec-card-border: #646464;/* Slightly darker dark mode text gray*/
	
	/* DFC Label colors */
    --dfc-front-border: var(--border-color);
    --dfc-back-bg: var(--border-color);
}

/* Code blocks in dark mode - "4x Lightning Bolt (FOIL) #sideboard #burn"*/
html.dark-mode code {
	color: #ff69ff !important;
}

/* Increase font size of the example code block */
.text-muted.small code {
    font-size: 1rem;
}

/* ===== SIDEBAR DARK MODE TEXT FIX ===== */
/* Ensures all sidebar text is light/readable in dark mode */

html.dark-mode .sidebar,
html.dark-mode .sidebar * {
    color: var(--text-light) !important;
}

/* Specifically target sidebar links and text elements */
html.dark-mode .sidebar-link,
html.dark-mode .sidebar-section-title,
html.dark-mode .queue-item-name,
html.dark-mode .sidebar-size-label,
html.dark-mode .filter-label,
html.dark-mode .queue-empty,
html.dark-mode .sidebar-user span {
    color: var(--text-light) !important;
}

/* Keep remove button red (minus sign) */
html.dark-mode .queue-item-remove {
    color: #ff6666 !important;
}

/* Sidebar buttons - keep their button styling but ensure text is visible */
html.dark-mode .sidebar-btn,
html.dark-mode .queue-btn,
html.dark-mode .sidebar-logout-btn,
html.dark-mode .sidebar-login-btn {
    color: white !important;
}

/* Sidebar input fields */
html.dark-mode .filter-input {
    color: var(--text-primary);
    background: var(--input-bg);
}

/* ===== CLOSE BUTTON DARK MODE FIX ===== */
html.dark-mode .close-btn {
    color: var(--text-primary);
}

html.dark-mode .close-btn:hover {
    color: var(--text-white);
    background: rgba(255,255,255,0.1);
}

/* ===== LOADING OVERLAY DARK MODE ===== */
html.dark-mode #loadingOverlay > div {
    background: var(--bg-modal);
}

html.dark-mode #loadingOverlay > div p {
    color: var(--text-primary);
}

/* ===== FEEDBACK PAGE DARK MODE ===== */
html.dark-mode .feedback-container {
    background: var(--bg-container);
}

html.dark-mode .feedback-item {
    background: var(--bg-feedback-item);
}

html.dark-mode .feedback-meta {
    color: var(--feedback-meta-color);
    border-bottom-color: var(--feedback-border);
}

html.dark-mode .feedback-text {
    color: var(--text-primary);
}

html.dark-mode .comment-item {
    background: var(--bg-comment);
}

html.dark-mode .comment-meta {
    color: var(--text-muted);
}

html.dark-mode .comment-text {
    color: var(--text-primary);
}

html.dark-mode .alert-info {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* ===== ANALYTICS PAGE DARK MODE ===== */
html.dark-mode .analytics-container {
    background: var(--analytics-container-bg);
}

html.dark-mode .analytics-container .stat-card {
    background: var(--bg-analytics-stat);
}

html.dark-mode .analytics-container .stat-number {
    color: var(--analytics-stat-number);
}

html.dark-mode .analytics-container .stat-label {
    color: var(--analytics-stat-label);
}

html.dark-mode .analytics-container .chart-container {
    background: var(--bg-analytics-chart);
}

html.dark-mode .analytics-container .chart-title {
    color: var(--text-heading);
    border-bottom-color: var(--analytics-stat-number);
}

html.dark-mode .analytics-container .table {
    color: var(--text-primary);
}

html.dark-mode .analytics-container .table thead th {
    border-bottom-color: var(--border-color);
}

html.dark-mode .analytics-container .table td {
    border-top-color: var(--border-color);
}

html.dark-mode .analytics-container .table-hover tbody tr:hover {
    background: var(--bg-comment);
}

/* ===== EDHREC DARK MODE ===== */
/* EDHREC section headers - dark mode */
html.dark-mode .edhrec-container .edhrec-section-header {
    background: var(--edhrec-section-header-bg, var(--bg-header));
    color: var(--edhrec-section-header-text, var(--text-heading));
    border-bottom-color: var(--edhrec-section-header-border, var(--border-dark));
}

/* Dark mode - inherits from html.dark-mode variables */
html.dark-mode .edhrec-container .card-frame {
    color: var(--edhrec-card-text);	
	border-color: var(--edhrec-card-border);
}

/* EDHREC card grid - dark mode background */
html.dark-mode .edhrec-container .edhrec-card-grid {
    background: color-mix(in srgb, var(--edhrec-card-grid-bg, #1e2a3a) 72%, transparent);
}

/* ===== CORRECTION MODAL DARK MODE FIXES ===== */
html.dark-mode #correctionCardsList .card-option {
    background: var(--bg-card-option);
    border-color: var(--border-light);
    color: var(--text-primary);
}

html.dark-mode #correctionModal .modal-footer {
    background: var(--modal-footer-bg);
    border-top-color: var(--modal-border);
}

/* ===== VERSION RESET MODAL DARK MODE ===== */
html.dark-mode #versionResetModal .modal-content {
    background: var(--bg-modal);
}

html.dark-mode #versionResetModal .modal-header {
    background: var(--modal-header-bg);
    border-bottom-color: var(--modal-border);
}

html.dark-mode #versionResetModal .modal-footer {
    background: var(--modal-footer-bg);
    border-top-color: var(--modal-border);
}

/* ===== AUTH MODAL DARK MODE ===== */
html.dark-mode #authModal .modal-content {
    background: var(--bg-modal);
}

html.dark-mode #authModal .modal-header {
    background: var(--modal-header-bg);
    border-bottom-color: var(--modal-border);
}

html.dark-mode #authModal .modal-footer {
    background: var(--modal-footer-bg);
    border-top-color: var(--modal-border);
}

/* ===== UNIFIED LIST GROUP STYLING ===== */
html.dark-mode {
    /* Make all list-group elements match input styling */
    --bs-list-group-bg: var(--input-bg);
    --bs-list-group-color: var(--input-text);
    --bs-list-group-border-color: var(--input-border);
    --bs-list-group-hover-bg: var(--bg-hover);
    --bs-list-group-action-hover-bg: var(--bg-hover);
    --bs-list-group-action-hover-color: var(--input-text);
}

/* Ensure not-found items respect the CSS variables */
html.dark-mode .list-group-item.not-found-item {
    background: var(--bs-list-group-bg);
    color: var(--bs-list-group-color);
}

/* ===== SORTED LIST HEADERS (MATCH CARD TITLE STYLE) ===== */
html.dark-mode .card-header.bg-light {
    background: transparent !important;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

/* Override Bootstrap's default text color */
html.dark-mode .card-header.fw-bold {
    color: var(--text-primary);
}

/* Keep the color section headers consistent too */
html.dark-mode .px-3.py-1.pb-0.border-start {
    background: transparent !important;
}

/* Color header text */
html.dark-mode .px-3.py-1.pb-0.border-start .fw-semibold {
    color: var(--text-primary);
}

/* Count numbers */
html.dark-mode .count-parentheses {
    color: var(--text-muted);
}

/* Force dark mode on all modals when html has dark-mode class */
html.dark-mode .modal-content,
html.dark-mode .modal-header,
html.dark-mode .modal-body,
html.dark-mode .modal-footer {
    background: var(--bg-modal) !important;
}

html.dark-mode .modal-header {
    background: var(--modal-header-bg) !important;
    border-bottom-color: var(--modal-border) !important;
}

html.dark-mode .modal-footer {
    background: var(--modal-footer-bg) !important;
    border-top-color: var(--modal-border) !important;
}

html.dark-mode .modal-content {
    border: var(--modal-neon-border) !important;
    box-shadow: var(--modal-neon-glow) !important;
}

/* Fix all text inside modals */
html.dark-mode .modal label,
html.dark-mode .modal .form-check-label,
html.dark-mode .modal .form-group label,
html.dark-mode .modal .settings-section label,
html.dark-mode .modal h5,
html.dark-mode .modal h6,
html.dark-mode .modal .text-muted,
html.dark-mode .modal small {
    color: var(--text-primary) !important;
}

/* Fix the close button */
html.dark-mode .modal .close-btn {
    color: var(--text-primary) !important;
}

html.dark-mode .modal .close-btn:hover {
    color: var(--text-white) !important;
}

/* ===== ENSURE ALL LABELS USE TEXT PRIMARY ===== */
html.dark-mode label,
html.dark-mode .form-check-label,
html.dark-mode .modal-body label,
html.dark-mode .form-group label,
html.dark-mode .settings-section label {
    color: var(--text-primary);
}

/* ===== SELECT DROPDOWN DARK MODE ===== */
html.dark-mode select,
html.dark-mode .form-select {
    background: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}

/* ===== RADIO BUTTON TEXT DARK MODE ===== */
html.dark-mode .d-flex.gap-3 label {
    color: var(--text-primary);
}

/* ===== BODY DARK MODE CLASS TRIGGER ===== */
/* These styles apply when html has dark-mode class */
html.dark-mode body {
    background: #0e1525;
    background-image: none;
}

/* Remove the old body.dark-mode selector - replace with html.dark-mode */
html.dark-mode .container {
    background: var(--bg-container);
}

html.dark-mode .card {
    background: var(--bg-card);
}

/* ===== CARD ITEM ENHANCEMENTS ===== */
html.dark-mode .card-item {
    /* Subtle border to define card boundaries in dark mode */
    border-bottom-color: var(--border-light);
}

/* Ensure text remains readable with colored backgrounds */
html.dark-mode .card-item .card-name,
html.dark-mode .card-item .card-type,
html.dark-mode .card-item .comment-inline,
html.dark-mode .card-item .comment-wrapped {
    color: var(--text-primary);
}

/* Quantity text styling in dark mode */
html.dark-mode .card-item .fw-bold {
    color: var(--text-secondary);
}

/* ===== CARD TYPE AND COMMENTS TEXT COLORS ===== */
html.dark-mode .card-type,
html.dark-mode .comment-inline,
html.dark-mode .comment-wrapped {
    color: var(--text-primary) !important;
}

/* Also fix the quantity text if it's different */
html.dark-mode .card-item .fw-bold {
    color: var(--text-secondary);
}

/* Ensure foil text uses correct color */
html.dark-mode .card-name[data-cardname*="FOIL"] {
    color: var(--text-primary);
}
/* ===== END CSS VARIABLES ===== */

/* ===== APP BACKGROUND ===== */
body {
    background: #eef2f7;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
}

/* Make content containers semi-transparent so background shows */
.container {
    background: var(--bg-container);
    border-radius: 15px;
    padding: 20px;
    margin: 20px auto;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(5px);
    width: 95% !important;
    max-width: none !important;
}

/* Ensure title doesn't wrap unnecessarily */
.card-title {
    flex: 1;
    min-width: fit-content;
}

/* Full-width pages */
.analytics-container,
.edhrec-container,
.dev-settings-container {
    width: var(--full-page-width, 90%);
    max-width: none;
    margin: 0 auto;
}

/* Phone + tablet: full-bleed the card grid only once a list is open */
@media (max-width: 1366px) {
    body.edhrec-has-list .edhrec-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    body.edhrec-has-list .edhrec-card-grid {
        width: 100%;
        margin-top: 0;
        border-radius: 0;
        padding: 4px;
        gap: 4px;
    }
}

@media (max-width: 767px) {
    body.edhrec-has-list .edhrec-card-grid {
        padding: 2px;
        gap: 2px;
    }
    /* Title stays fully visible, including after a list opens */
    .edhrec-page-header {
        min-height: auto;
        padding: 20px 12px 12px;
    }
    body.edhrec-has-list .edhrec-page-header {
        padding-top: 28px;
    }
    .edhrec-title {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        display: block;
        width: 100%;
        max-width: 100%;
        text-align: center;
        font-size: 1.45rem;
        -webkit-text-stroke: 2px #1a1a1a;
    }
    /* Solid theme colour. No page image, so no fixed-attachment workaround. */
    body.edhrec-page,
    body.edhrec-page.edhrec-has-list {
        background: #eef2f7 !important;
        background-image: none !important;
        min-height: 100dvh;
    }
    html.dark-mode body.edhrec-page,
    html.dark-mode body.edhrec-page.edhrec-has-list {
        background: #0e1525 !important;
    }
    html.edhrec-page:not(.edhrec-has-list),
    body.edhrec-page:not(.edhrec-has-list) {
        height: auto;
        min-height: 100dvh;
        overflow: auto;
    }
    /* Phone only: search full width; mode + Retrieve side by side beneath */
    .search-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas: "search search" "mode retrieve" !important;
        gap: 8px !important;
        width: 100% !important;
        align-items: stretch !important;
    }
    .search-inputs-wrapper {
        grid-area: search !important;
        width: 100% !important;
        max-width: 100% !important;
        order: unset !important;
    }
    #partnerStatus {
        display: none;
    }
    .partner-toggle {
        grid-area: mode !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        margin: 0 !important;
        order: unset !important;
    }
    #retrieveBtn {
        grid-area: retrieve !important;
        width: 100% !important;
        height: 44px !important;
        margin: 0 !important;
        order: unset !important;
    }
}



/* Sample data button */
#sampleBtn {
    font-size: 0.85rem;
    padding: 0.2rem 0.75rem;
    border-radius: 20px;
    transition: all 0.2s;
	white-space: nowrap;
	flex-shrink: 0;
	margin-left: auto;
	max-width: 100px;
}

#sampleBtn:hover {
    background-color: #6c757d;
    color: white;
    transform: scale(1.02);
}

#sampleBtn:active {
    transform: scale(0.98);
}

/* Mobile: stacked sample button */
@media (max-width: 576px) {
    #sampleBtn {
        font-size: 0.75rem !important;
        padding: 0.2rem 0.4rem !important;
        height: auto !important;
        min-height: 32px !important;
        line-height: 1.2 !important;
        width: auto !important;
        max-width: 90px !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: center !important;
    }
}

/* Ultra small screens */
@media (max-width: 400px) {
    #sampleBtn {
        font-size: 0.7rem !important;
        padding: 0.15rem 0.3rem !important;
        max-width: 80px !important;
    }
}

/* Cards inside the app */
.card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(5px);
    border: none !important;
    box-shadow: var(--shadow-sm);
}

/* Card hover effect */
.card .border-bottom:hover {
    background-color: var(--bg-hover);
}

/* ===== LOGIN PAGE BACKGROUND ===== */
body.modal-open {
    overflow: hidden;
}

#authModal .modal-content {
    position: relative;
    z-index: 1002;
}

#authModal::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/images/mtg-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.7); /* Darken slightly so white modal pops */
    z-index: 1001;
}

/* Optional: Add a subtle overlay to make text more readable */
#authModal::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1001;
}

/* Keep modal content above background */
#authModal .modal-content {
    position: relative;
    z-index: 1003;
}

.login-header-btn {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 0px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    height: 20px;
    margin-right: 20px;
	line-height: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.2s;
}

.login-header-btn:hover {
    background: #45a049;
    transform: scale(1.05);
}

.login-header-btn:active {
    transform: scale(0.95);
}

/* ===== MANA SYMBOLS ==== */
.mana-symbols {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    line-height: 1;
}

/* Base dot style */
.mana-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    position: relative;
}

/* SVG mana pip on colored-dot backing (cost + oracle) */
.mana-pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.18em;
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
}

.mana-pip-glyph {
    width: 72%;
    height: 72%;
    object-fit: contain;
    pointer-events: none;
    display: block;
    filter: brightness(0);
}

.mana-pip-inline {
    width: 1.05em;
    height: 1.05em;
    margin: 0 0.08em;
}

.loyalty-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible;
    box-sizing: border-box;
    vertical-align: -0.28em;
}
.loyalty-badge-glyph {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    filter: brightness(0);
}
.loyalty-badge-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.62em;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 0 1.5px #000;
}
.loyalty-inline {
    width: 1.62em;
    height: 1.62em;
    margin: 0 0.16em 0 0;
}
.loyalty-start {
    width: 1.65em;
    height: 1.65em;
    vertical-align: middle;
}
.loyalty-start .loyalty-badge-value {
    font-size: 0.68em;
}
.loyalty-invert .loyalty-badge-glyph {
    filter: brightness(0) invert(1) drop-shadow(0 0 0.55px #000) drop-shadow(0 0 0.55px #000);
}
.loyalty-invert .loyalty-badge-value {
    color: #000;
    text-shadow: none;
}


.mana-pip-hybrid {
    overflow: hidden;
}

.mana-pip-hybrid .mana-pip-glyph.half-a,
.mana-pip-hybrid .mana-pip-glyph.half-b {
    position: absolute;
    width: 42%;
    height: 42%;
}

.mana-pip-hybrid .mana-pip-glyph.half-a {
    top: 10%;
    left: 10%;
}

.mana-pip-hybrid .mana-pip-glyph.half-b {
    bottom: 10%;
    right: 10%;
}

.mana-pip-fallback {
    font-size: 0.65em;
    font-weight: 700;
    line-height: 1;
    color: var(--mana-glyph, #222);
}

/* SVG phyrexian uses P glyph — hide the old CSS slash */
.mana-pip.mana-phyrexian-white::after,
.mana-pip.mana-phyrexian-blue::after,
.mana-pip.mana-phyrexian-black::after,
.mana-pip.mana-phyrexian-red::after,
.mana-pip.mana-phyrexian-green::after {
    content: none;
    display: none;
}

/* ===== COLORED MANA DOTS ===== */
.mana-white { 
    background: var(--mana-w);
    border: 1px solid #b0b0b0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mana-blue { background: var(--mana-u); }
.mana-black { 
    background: var(--mana-b);
    border: 1px solid #b0b0b0;
    background-clip: padding-box;
}
.mana-red { background: var(--mana-r); }
.mana-green { background: var(--mana-g); }
.mana-colorless { background: var(--mana-c); }

/* ===== HYBRID MANA - DIAGONAL SPLIT (135deg, first half upper-left) ===== */
.mana-hybrid-wu { 
    background: linear-gradient(135deg, var(--mana-w) 50%, var(--mana-u) 50%);
    border: 1px solid #b0b0b0;
}
.mana-hybrid-wb { 
    background: linear-gradient(135deg, var(--mana-w) 50%, var(--mana-b) 50%);
    border: 1px solid #b0b0b0;
}
.mana-hybrid-ub { background: linear-gradient(135deg, var(--mana-u) 50%, var(--mana-b) 50%); }
.mana-hybrid-ur { background: linear-gradient(135deg, var(--mana-u) 50%, var(--mana-r) 50%); }
.mana-hybrid-br { background: linear-gradient(135deg, var(--mana-b) 50%, var(--mana-r) 50%); }
.mana-hybrid-bg { background: linear-gradient(135deg, var(--mana-b) 50%, var(--mana-g) 50%); }
.mana-hybrid-rw { 
    background: linear-gradient(135deg, var(--mana-r) 50%, var(--mana-w) 50%);
    border: 1px solid #b0b0b0;
}
.mana-hybrid-rg { background: linear-gradient(135deg, var(--mana-r) 50%, var(--mana-g) 50%); }
.mana-hybrid-gw { 
    background: linear-gradient(135deg, var(--mana-g) 50%, var(--mana-w) 50%);
    border: 1px solid #b0b0b0;
}
.mana-hybrid-gu { background: linear-gradient(135deg, var(--mana-g) 50%, var(--mana-u) 50%); }

/* ===== 2/MANA HYBRID (e.g., {2/W}) - TWO DOTS STACKED ===== */
/* These use a different approach - two smaller dots */
.mana-hybrid-2w,
.mana-hybrid-2u,
.mana-hybrid-2b,
.mana-hybrid-2r,
.mana-hybrid-2g {
    position: relative;
    width: 20px;
    height: 16px;
    background: none;
}

.mana-pip.mana-hybrid-2w,
.mana-pip.mana-hybrid-2u,
.mana-pip.mana-hybrid-2b,
.mana-pip.mana-hybrid-2r,
.mana-pip.mana-hybrid-2g {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, var(--mana-c) 50%, var(--mana-w) 50%);
}

.mana-pip.mana-hybrid-2u { background: linear-gradient(135deg, var(--mana-c) 50%, var(--mana-u) 50%); }
.mana-pip.mana-hybrid-2b { background: linear-gradient(135deg, var(--mana-c) 50%, var(--mana-b) 50%); }
.mana-pip.mana-hybrid-2r { background: linear-gradient(135deg, var(--mana-c) 50%, var(--mana-r) 50%); }
.mana-pip.mana-hybrid-2g { background: linear-gradient(135deg, var(--mana-c) 50%, var(--mana-g) 50%); }

.mana-pip.mana-hybrid-2w::before,
.mana-pip.mana-hybrid-2w::after,
.mana-pip.mana-hybrid-2u::before,
.mana-pip.mana-hybrid-2u::after,
.mana-pip.mana-hybrid-2b::before,
.mana-pip.mana-hybrid-2b::after,
.mana-pip.mana-hybrid-2r::before,
.mana-pip.mana-hybrid-2r::after,
.mana-pip.mana-hybrid-2g::before,
.mana-pip.mana-hybrid-2g::after {
    content: none;
    display: none;
}

.mana-hybrid-2w::before,
.mana-hybrid-2w::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 3px;
}

.mana-hybrid-2w::before {
    left: 0;
    background: #E0E0E0;  /* Number circle color */
    border: 1px solid #888;
}

.mana-hybrid-2w::after {
    right: 0;
    background: #F0F0F0;  /* White dot */
    border: 1px solid #888;
}

/* Similar for other colors - adjust the after background */
.mana-hybrid-2u::after { background: #2A6EBB; }
.mana-hybrid-2b::after { background: #1A1A1A; }
.mana-hybrid-2r::after { background: #C41E3A; }
.mana-hybrid-2g::after { background: #1B7B4A; }

/* ===== PHYREXIAN MANA - VERTICAL LINE THROUGH DOT ===== */
.mana-phyrexian {
    position: relative;
}

/* Base colored dots */
.mana-phyrexian-white { background: var(--mana-w); border: 1px solid #b0b0b0; }
.mana-phyrexian-blue { background: var(--mana-u); }
.mana-phyrexian-black { background: var(--mana-b); }
.mana-phyrexian-red { background: var(--mana-r); }
.mana-phyrexian-green { background: var(--mana-g); }

/* Vertical line through all Phyrexian symbols - extends beyond dot */
.mana-phyrexian-white::after,
.mana-phyrexian-blue::after,
.mana-phyrexian-black::after,
.mana-phyrexian-red::after,
.mana-phyrexian-green::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    width: 2.5px;
    height: 22px;
    background: currentColor;
    transform: translateX(-50%);
    border-radius: 1px;
}

/* Balanced line colors - not too dark, not too light */
.mana-phyrexian-white::after { 
    color: #666;  /* Medium grey */
    background: #666;
}
.mana-phyrexian-blue::after { 
    color: #1A2F4A;  /* Dark navy - contrasts with blue */
    background: #1A2F4A;
}
.mana-phyrexian-black::after { 
    color: #AAA;  /* Light grey on black */
    background: #AAA;
}
.mana-phyrexian-red::after { 
    color: #5C1A1A;  /* Dark burgundy - contrasts with red */
    background: #5C1A1A;
}
.mana-phyrexian-green::after { 
    color: #0A3320;  /* Deep forest - contrasts with green */
    background: #0A3320;
}

/* ===== PHYREXIAN HYBRID MANA (e.g., {G/W/P}) ===== */
.mana-phyrexian-hybrid {
    position: relative;
    width: 18px;
    height: 18px;
}

/* Base split dot for the color half */
.mana-phyrexian-hybrid-wu { background: linear-gradient(135deg, #F0F0F0 50%, #2A6EBB 50%); }
.mana-phyrexian-hybrid-wb { background: linear-gradient(135deg, #F0F0F0 50%, #1A1A1A 50%); }
.mana-phyrexian-hybrid-ub { background: linear-gradient(135deg, #2A6EBB 50%, #1A1A1A 50%); }
.mana-phyrexian-hybrid-ur { background: linear-gradient(135deg, #2A6EBB 50%, #C41E3A 50%); }
.mana-phyrexian-hybrid-br { background: linear-gradient(135deg, #1A1A1A 50%, #C41E3A 50%); }
.mana-phyrexian-hybrid-bg { background: linear-gradient(135deg, #1A1A1A 50%, #1B7B4A 50%); }
.mana-phyrexian-hybrid-rw { background: linear-gradient(135deg, #C41E3A 50%, #F0F0F0 50%); }
.mana-phyrexian-hybrid-rg { background: linear-gradient(135deg, #C41E3A 50%, #1B7B4A 50%); }
.mana-phyrexian-hybrid-gw { background: linear-gradient(135deg, #1B7B4A 50%, #F0F0F0 50%); }
.mana-phyrexian-hybrid-gu { background: linear-gradient(135deg, #1B7B4A 50%, #2A6EBB 50%); }

/* Vertical line through all Phyrexian hybrids */
.mana-phyrexian-hybrid-wu::after,
.mana-phyrexian-hybrid-wb::after,
.mana-phyrexian-hybrid-ub::after,
.mana-phyrexian-hybrid-ur::after,
.mana-phyrexian-hybrid-br::after,
.mana-phyrexian-hybrid-bg::after,
.mana-phyrexian-hybrid-rw::after,
.mana-phyrexian-hybrid-rg::after,
.mana-phyrexian-hybrid-gw::after,
.mana-phyrexian-hybrid-gu::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    width: 2.5px;
    height: 24px;
    background: #4A4A4A;  /* Single medium-dark grey for all hybrids */
    transform: translateX(-50%);
    border-radius: 1px;
    z-index: 2;
    opacity: 0.9;
}

/* ===== NUMBERS - CIRCLE WITH BOLD NUMBER ===== */
.mana-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #E0E0E0;
    color: #1A1A1A;
    font-weight: 800;
    font-size: 0.8rem;
    line-height: 1;
    border: 1px solid #888;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* X placeholder */
.mana-number-x {
    background: #D4C9B8;
    font-style: italic;
}

/* ===== MODAL STYLES (CLEAN, SINGLE COPY) ===== */
#settingsModal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    border: var(--modal-neon-border);
    box-shadow: var(--modal-neon-glow);
}

#settingsModal .modal-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: var(--modal-header-bg);
    z-index: 10;
    border-bottom: 1px solid var(--modal-border);
    color: var(--text-primary);
}

#settingsModal .modal-body {
    flex: 1;
    overflow-y: auto;
}

#settingsModal .modal-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: var(--modal-footer-bg);
    border-top: 1px solid var(--modal-border);
}

/* Settings section headers - override Bootstrap defaults */
.settings-section h6 {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

/* Add margin only to the bottom of Display Options section */
#displaySettingsSection, #copySettingsSection, #versionMemorySettingsSection, #versionsResetSettingsSection {
    margin-bottom: 3rem !important;
}

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

.modal.show {
    display: flex;
}

.modal-content {
    background: var(--bg-modal);
    border-radius: 15px;
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    border: var(--modal-neon-border);
    box-shadow: var(--modal-neon-glow);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--modal-border);
    background: var(--modal-header-bg);
	color: var(--text-primary);
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--modal-border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    background: var(--modal-footer-bg);
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0 10px;
}

#correctionModal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    width: min(960px, 96vw);
    max-width: 960px;
}

#correctionModal .modal-header {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
}

#correctionModal .modal-header h5 {
    margin: 0;
    font-size: 1rem;
}

#correctionModal .modal-body {
    flex: 1;
    overflow: hidden;
	padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#correctionModal .correction-layout {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

#correctionModal .correction-thumbs {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    max-height: min(62vh, 540px);
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
}

#correctionModal .correction-controls {
    width: 280px;
    flex: 0 0 280px;
    overflow: auto;
}

.print-chip-box {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 34px;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
}
.print-chip {
    border: 1px solid #888;
    background: #f3f3f3;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.75rem;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
}
.print-chip.on {
    background: #1f4e79;
    color: #fff;
    border-color: #1f4e79;
}
.print-chip.locked {
    cursor: default;
    background: #1f4e79;
    color: #fff;
    border-color: #1f4e79;
}
.print-chip.off-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    #correctionModal .modal-content {
        width: 96vw;
        max-width: 96vw;
        max-height: 100dvh;
    }
    #correctionModal .modal-body {
        overflow-y: auto;
    }
    #correctionModal .correction-layout {
        flex-direction: column;
    }
    #correctionModal .correction-thumbs {
        width: 100%;
        max-height: 96px;
        flex: 0 0 96px;
    }
    #correctionModal .correction-controls {
        width: 100%;
        flex: 0 0 auto;
    }
}

#correctionModal .modal-footer {
    flex-shrink: 0;
    border-top: 1px solid #ddd;
    background: white;
	padding: 0.5rem 1rem;
}

/* Condense the elements above the version list */
#correctionProgress {
    font-size: 0.75rem;
    margin-bottom: 4px !important;
}

#correctionOptions .mb-3 {
    margin-bottom: 0.5rem !important;
}

#correctionOptions .fw-bold {
    font-size: 0.85rem;
    margin-bottom: 4px !important;
}

#expectedRarity {
    padding: 4px 8px;
    font-size: 0.85rem;
}

#rememberCorrection {
    margin-right: 4px;
}

#correctionOptions .form-check-label {
    font-size: 0.85rem;
}

/* Correction modal dropdown styles - using custom class to avoid Bootstrap conflicts */
#correctionCardsList .card-option.correction-active-option {
    background-color: var(--correction-active-bg) !important;
}

#correctionCardsList .card-option.correction-active-option,
#correctionCardsList .card-option.correction-active-option * {
    color: var(--correction-active-text) !important;
}

#correctionCardsList .card-option.correction-active-option .text-muted {
    opacity: 0.8;
}

/* Hover state - darker than default, lighter than selected */
#correctionCardsList .card-option:hover:not(.correction-active-option) {
    background-color: var(--correction-hover-bg) !important;
}

/* ===== CHECKBOX AND RADIO LABELS ===== */
.form-check-label,
label:not(.btn),
.modal-body label {
    color: var(--text-primary);
}

.form-check-input {
    accent-color: var(--analytics-stat-number);
}

/* ===== SCROLLBAR STYLES ===== */
/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
}

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

/* For textarea specifically */
#cardInput::-webkit-scrollbar {
    width: 8px;
}

#cardInput::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 4px;
}

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

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ===== END OF MODAL ===== */

/* ===== FORM STYLES ===== */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    background: var(--input-bg);
    color: var(--input-text);
}

.form-group input[type="checkbox"] {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.error-message {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
    padding: 10px;
    background: #f8d7da;
    border-radius: 5px;
}

/* ===== TEXT INPUT STYLES ===== */
#cardInput,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
.form-control {
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
}

#cardInput:focus,
input:focus,
textarea:focus {
    border-color: #0d6efd;
    outline: none;
    background: var(--input-bg);
}

#cardInput::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder);
}

#cardInput {
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
}

#cardInput:focus {
    border-color: #0d6efd;
    outline: none;
    background: var(--input-bg);  /* Keep background consistent on focus */
}

#cardInput::placeholder {
    color: var(--text-muted);
}
/* ===== END OF FORM STYLES ===== */

/* ===== USER INFO ===== */
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 60px;
}

#usernameDisplay {
    font-weight: 500;
    color: var(--text-primary);
}

.logout-btn {
    background: none;
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

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

/* ===== SETTINGS GEAR ===== */
.settings-gear {
    position: relative;
    top: 0px;
    right: 15px;
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    cursor: pointer;
    z-index: 100;
    -webkit-tap-highlight-color: transparent;
}

.settings-gear:active {
    background: #f0f0f0;
    transform: scale(0.95);
}

/* ===== TEXT COLOR VARIABLES APPLIED ===== */
.text-muted {
    color: var(--text-muted) !important;
}

.text-dark {
    color: var(--text-dark) !important;
}

h1, .container > h1 {
    color: var(--text-heading);
    font-family: 'MPlantin', Palatino, 'Palatino Linotype', serif;
}

h2, .analytics-container h2 {
    color: var(--text-heading);
    font-family: 'MPlantin', Palatino, 'Palatino Linotype', serif;
}

h5, h6 {
    color: var(--text-primary);
}

.card-title {
    color: var(--text-primary);
}

#usernameDisplay {
    color: var(--text-primary);
}

.logout-btn {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.login-header-btn {
    color: var(--text-white);
}
/* ===== END TEXT COLOR VARIABLES ===== */

/* ===== CARD DISPLAY STYLES - ADDED FOR SETTINGS ===== */

/* Custom border colors for multicolor and artifact headers */
.border-multicolor, .border-start.border-multicolor {
    border-color: #aa80ff !important;
}

.border-artifact, .border-start.border-artifact {
    border-color: #8d6e63 !important;
}

/* Card type styling - can be hidden via settings */
.card-type {
    font-size: 0.85rem;
    color: #000000 !important;
    display: block;
    margin-top: 2px;
}

/* Hide type when disabled */
.card-item.hide-type .card-type {
    display: none;
}

/* Hide mana cost when disabled */
.card-item.hide-mana .mana-symbols {
    display: none;
}

/* Card content wrapper for proper flex layout */
.card-content-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0px;
    min-width: 0;
    flex-wrap: wrap;
}

/* Quantity styling */
.card-quantity {
    min-width: 30px;
    font-weight: bold;
    color: #666;
	align-items: top;
}

.card-quantity.empty-quantity {
    opacity: 0;
    pointer-events: none;
}

/* Card image tooltip */
#card-image-tooltip {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* Target only the card body inside the input section */
.col-12 .card-body {
    padding: 1rem 1rem;  /* Restore padding only for this section */
}

/* ===== MOUSE POINTER DISPLAY ===== */

/* Make card name use pointer cursor (hand with finger) */
.card-name {
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Quantity stays default - no hover, no pointer */
.card-quantity {
    cursor: default;
}

/* Prevent text selection cursor anywhere in the app */
body, 
.container, 
.card, 
.card-body,
.card-item,
.card-item * {
    cursor: default;
}

/* Only card names get the hand/pointer */
.card-name {
    cursor: pointer !important;
}

/* Keep the input/textarea as text selection cursor since you type there */
textarea, input {
    cursor: text;
}

/* Buttons should keep their default pointer */
button, .btn, .settings-gear, .login-header-btn, .logout-btn {
    cursor: pointer;
}

/* Radio button itself shows pointer cursor */
input[type="radio"] {
    cursor: pointer;
}

/* ===== END OF MOUSE POINTER DISPLAY ===== */

/* ===== COMMENT DISPLAY RULES ===== */

/* Inline comments - normal weight, not italic, black text */
.comment-inline {
    display: inline-block;
    white-space: nowrap;
    color: #000000 !important;
	margin-left: 6px;
}

/* Wrapped comments - italic, appear after card type, black text */
.comment-wrapped {
    display: none;
    white-space: nowrap;
    color: #000000 !important;
}

/* Card top row - allow wrapping on small screens */
.card-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Card bottom row */
.card-bottom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* ===== END OF COMMENT DISPLAY RULES ===== */

/* ===== ANALYTICS PAGE STYLES ===== */
/* Wide container for analytics dashboard - not full width, shows background on sides */

/* Analytics page theming with CSS variables */
.analytics-container {
    max-width: 1400px;
    margin: 20px auto;
    padding: 20px;
    background: var(--analytics-container-bg);
    border-radius: 15px;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(5px);
}

.analytics-container .stat-card {
    background: var(--bg-analytics-stat);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.analytics-container .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.analytics-container .stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: var(--analytics-stat-number);
    line-height: 1.2;
}

.analytics-container .stat-label {
    font-size: 0.8rem;
    color: var(--analytics-stat-label);
    margin-top: 8px;
}

.analytics-container .chart-container {
    background: var(--bg-analytics-chart);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.analytics-container .chart-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-heading);
    border-bottom: 2px solid var(--analytics-stat-number);
    display: inline-block;
    padding-bottom: 5px;
}

.analytics-container .session-table {
    font-size: 0.8rem;
    color: var(--text-primary);
}

.analytics-container .table {
    color: var(--text-primary);
}

.analytics-container .table thead th {
    border-bottom-color: var(--border-color);
}

.analytics-container .table td {
    border-top-color: var(--border-color);
}

.analytics-container .table-hover tbody tr:hover {
    background: var(--bg-comment);
}

.analytics-container .badge-active {
    background: #28a745;
    color: white;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    display: inline-block;
}

.analytics-container .badge-ended {
    background: #6c757d;
    color: white;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    display: inline-block;
}

.analytics-container .refresh-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease;
}

.analytics-container .refresh-btn:hover {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .analytics-container {
        margin: 10px;
        padding: 15px;
    }
    
    .analytics-container .stat-number {
        font-size: 1.3rem;
    }
    
    .analytics-container .session-table {
        font-size: 0.65rem;
    }
    
    .analytics-container .session-table th,
    .analytics-container .session-table td {
        padding: 4px;
    }
    
    .analytics-container .refresh-btn {
        width: 40px;
        height: 40px;
        bottom: 15px;
        right: 15px;
    }
}

@media (max-width: 480px) {
    .analytics-container .stat-card {
        padding: 12px;
    }
    
    .analytics-container .stat-number {
        font-size: 1rem;
    }
    
    .analytics-container .stat-label {
        font-size: 0.65rem;
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .analytics-container {
        margin: 10px;
        padding: 15px;
    }
    
    .analytics-container .stat-number {
        font-size: 1.3rem;
    }
    
    .analytics-container .session-table {
        font-size: 0.65rem;
    }
    
    .analytics-container .session-table th,
    .analytics-container .session-table td {
        padding: 4px;
    }
    
    .analytics-container .refresh-btn {
        width: 40px;
        height: 40px;
        bottom: 15px;
        right: 15px;
    }
}

/* Ultra small screens */
@media (max-width: 480px) {
    .analytics-container .stat-card {
        padding: 12px;
    }
    
    .analytics-container .stat-number {
        font-size: 1rem;
    }
    
    .analytics-container .stat-label {
        font-size: 0.65rem;
    }
}

/* ===== ANALYTICS DARK MODE STYLES ===== */
/* Dark mode is now handled by CSS variables above.
   Only specific image/backdrop filters remain here. */

body.dark-mode {
    background: #0e1525;
    background-image: none;
}

body.dark-mode::before {
    filter: none !important;
    background-image: none !important;
}

/* Mana symbols need special handling for dark mode */
body.dark-mode .mana-number {
    background: #3a3a3a;
    color: #e0e0e0;
    border: 1px solid #aaa;
}

/* Analytics refresh button */
body.dark-mode .analytics-container .refresh-btn {
    background: #0d6efd;
    color: white;
}

body.dark-mode .analytics-container .refresh-btn:hover {
    background: #0b5ed7;
}

/* Badges for analytics */
body.dark-mode .analytics-container .badge-active {
    background: #198754;
}

body.dark-mode .analytics-container .badge-ended {
    background: #6c757d;
}

/* Loading overlay in dark mode */
body.dark-mode #loadingOverlay > div {
    background: var(--bg-card) !important;
}

body.dark-mode #loadingOverlay > div p {
    color: var(--text-primary) !important;
}
/* ===== END ANALYTICS ===== */

/* ===== EDHREC PAGE STYLES ===== */
/* All EDHREC-specific styles consolidated in one place */

/* Container */
html.edhrec-page:not(.edhrec-has-list),
body.edhrec-page:not(.edhrec-has-list) {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
}

/* Scroll fade overlay sits behind the page content */
#edhrecScrollFade {
    z-index: 0;
}
body.edhrec-page .edhrec-container,
body.edhrec-page .main-content {
    position: relative;
    z-index: 1;
}

.edhrec-container {
    max-width: var(--edhrec-container-width, 90vw);
    width: 100%;
    margin: 20px auto;
    padding: 0 20px;
}

.edhrec-page-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    padding: 8px 0 16px 0;
    margin-bottom: 12px;
    min-height: 52px;
}

.edhrec-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 56px);
    margin: 0;
    padding: 0;
    background: transparent;
    text-align: center;
    font-family: 'MPlantin', Palatino, 'Palatino Linotype', serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.2vw, 2.35rem);
    line-height: 1.15;
    color: #f4f4f4;
    -webkit-text-stroke: 3.5px #1a1a1a;
    paint-order: stroke fill;
    text-shadow:
        -3px -3px 0 #1a1a1a,
        3px -3px 0 #1a1a1a,
        -3px 3px 0 #1a1a1a,
        3px 3px 0 #1a1a1a,
        -3px 0 0 #1a1a1a,
        3px 0 0 #1a1a1a,
        0 -3px 0 #1a1a1a,
        0 3px 0 #1a1a1a;
    filter:
        drop-shadow(0 0 6px rgba(10, 10, 10, 0.9))
        drop-shadow(0 0 16px rgba(10, 10, 10, 0.55));
}

.edhrec-page-header .settings-gear {
    position: fixed;
    top: 15px;
    right: 15px;
    left: auto;
    z-index: 1002;
    width: 30px;
    height: 30px;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: none;
    filter:
        drop-shadow(0 0 6px rgba(10, 10, 10, 0.9))
        drop-shadow(0 0 16px rgba(10, 10, 10, 0.55));
}

/* ===== SEARCH SECTION ===== */
.search-section {
    margin-top: 56px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.search-container {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

#commanderSearch {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--input-bg) 70%, transparent);
    color: #1a1a1a;
    font-size: 1rem;
    font-weight: 600;
    box-shadow:
        0 0 8px rgba(10, 10, 10, 0.8),
        0 0 18px rgba(10, 10, 10, 0.4);
}

#commanderSearch:focus {
    outline: none;
    border-color: #007bff;
}

/* Search Suggestions */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.search-suggestions.active {
    display: block;
}

.suggestion-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.suggestion-item:hover {
    background: var(--bg-hover);
}

.suggestion-name {
    font-weight: 500;
    color: var(--text-primary);
}

.suggestion-type {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Retrieve Button */
.add-btn {
    padding: 14px 22px;
    background: rgba(40, 167, 69, 0.78);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
    flex-shrink: 0;
    align-self: flex-start;
    height: 52px;
    box-shadow:
        0 0 8px rgba(10, 10, 10, 0.8),
        0 0 18px rgba(10, 10, 10, 0.4) !important;
}

.add-btn:hover {
    background: rgba(33, 136, 56, 0.86);
    color: #ffffff;
}

.add-btn:disabled {
    background: rgba(32, 32, 32, 0.88);
    color: #ffffff;
    cursor: not-allowed;
}

/* Loading & Status Messages */
.loading-spinner {
    text-align: center;
    padding: 40px;
}

.error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 12px 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.status-message {
    background: #d4edda;
    color: #155724;
    padding: 12px 20px;
    border-radius: 8px;
    margin: 20px 0;
}

/* ===== CARD GRID ===== */
.edhrec-card-grid {
    display: grid;
    gap: 4px;
    margin-top: 20px;
    padding: 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--edhrec-card-grid-bg, #e8e8e8) 72%, transparent);
    width: 100%;
    box-sizing: border-box;
}

.edhrec-card-grid.is-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 240px;
}

.edhrec-card-grid.is-loading .edhrec-loading {
    text-align: center;
    margin: 0;
    color: #141414;
}

.edhrec-card-grid.is-loading .edhrec-loading p {
    color: #141414;
    font-weight: 600;
}

html.dark-mode .edhrec-card-grid.is-loading .edhrec-loading,
html.dark-mode .edhrec-card-grid.is-loading .edhrec-loading p,
body.dark-mode .edhrec-card-grid.is-loading .edhrec-loading,
body.dark-mode .edhrec-card-grid.is-loading .edhrec-loading p {
    color: #ffffff;
}

/* Card Container - Let grid control width */
html.dark-mode .edhrec-container .card-price-usd,
html.dark-mode .edhrec-container .card-price-nzd,
html.dark-mode .edhrec-container .card-inclusion,
html.dark-mode .edhrec-container .card-set-code,
html.dark-mode .edhrec-container .card-set-name,
html.dark-mode .edhrec-container .card-price-stack,
html.dark-mode .edhrec-container .card-bottom-info,
html.dark-mode .edhrec-container .card-bottom-info span {
    color: #ffffff !important;
}

.edhrec-card-container {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Card inner content - fill container */
.edhrec-card-container > div {
    width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
}

/* ===== SECTION HEADERS ===== */
.edhrec-section-header {
    text-align: left;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 16px;
    grid-column: 1 / -1;
    border-bottom: 2px solid;
    background: var(--edhrec-section-header-bg, #a0a0a0);
    color: var(--edhrec-section-header-text, #ffffff);
    border-bottom-color: var(--edhrec-section-header-border, #888888);
}

.edhrec-section-header:first-of-type {
    margin-top: 0;
}

/* ===== CARD FRAME (Light/Dark Mode via CSS variables) ===== */
.edhrec-container .card-frame {
    border: 1px solid var(--text-primary);
    padding: 4px;
}

/* ===== DARK MODE OVERRIDES ===== */
html.dark-mode .edhrec-card-grid {
    background: color-mix(in srgb, var(--edhrec-card-grid-bg, #000b28) 72%, transparent);
}

html.dark-mode .edhrec-container .edhrec-section-header {
    background: var(--edhrec-section-header-bg, var(--bg-header));
    color: var(--edhrec-section-header-text, var(--text-heading));
    border-bottom-color: var(--edhrec-section-header-border, var(--border-dark));
}

html.dark-mode .edhrec-container .card-frame {
    color: var(--edhrec-card-text);
    border-color: var(--edhrec-card-border);
}

/* ===== RESPONSIVE: tighter spacing on small screens (full-bleed handled above) ===== */
@media (max-width: 767px) {
    .edhrec-card-grid {
        gap: 2px;
        padding: 2px;
    }
}

/* Override mana symbol spacing for split card subcards */
.split-subcard > .mana-symbols,
.split-subcard .mana-symbols {
    gap: 0 !important;
}

/* ===== PARTNER TOGGLE ===== */
.partner-toggle {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: rgba(140, 200, 255, 0.72);
    color: #141414;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: filter 0.2s ease, background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    box-shadow:
        0 0 8px rgba(10, 10, 10, 0.8),
        0 0 18px rgba(10, 10, 10, 0.4) !important;
}

.partner-toggle:hover {
    filter: brightness(1.08);
}

.partner-toggle[aria-pressed="true"] {
    background: rgba(20, 70, 140, 0.72);
    color: #f4f4f4;
    border-color: rgba(20, 70, 140, 0.9);
}

html.dark-mode .partner-toggle,
body.dark-mode .partner-toggle {
    background: rgba(20, 70, 140, 0.72) !important;
    color: #f4f4f4 !important;
    border-color: rgba(20, 70, 140, 0.9);
}

html.dark-mode .partner-toggle[aria-pressed="true"],
body.dark-mode .partner-toggle[aria-pressed="true"] {
    background: rgba(140, 200, 255, 0.72) !important;
    color: #141414 !important;
    border-color: rgba(140, 200, 255, 0.9);
}

html:not(.dark-mode) .partner-toggle {
    background: rgba(140, 200, 255, 0.72) !important;
    color: #141414 !important;
}

html:not(.dark-mode) .partner-toggle[aria-pressed="true"] {
    background: rgba(20, 70, 140, 0.72) !important;
    color: #f4f4f4 !important;
}

/* Search inputs wrapper */
.search-inputs-wrapper {
    flex: 0 1 26rem;
    width: 26rem;
    max-width: min(26rem, calc(100% - 8.5rem));
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

/* Both search inputs should look identical */
#commanderSearch,
#partnerSearch {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--input-bg) 70%, transparent);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    min-height: 52px;
    box-sizing: border-box;
    transition: border-color 0.2s;
    box-shadow:
        0 0 8px rgba(10, 10, 10, 0.8),
        0 0 18px rgba(10, 10, 10, 0.4) !important;
}

html:not(.dark-mode) #commanderSearch,
html:not(.dark-mode) #partnerSearch {
    color: #141414 !important;
    -webkit-text-fill-color: #141414 !important;
    caret-color: #141414;
}

html.dark-mode #commanderSearch,
html.dark-mode #partnerSearch,
body.dark-mode #commanderSearch,
body.dark-mode #partnerSearch {
    background: rgba(255, 255, 255, 0.72) !important;
    color: #141414 !important;
    -webkit-text-fill-color: #141414 !important;
    caret-color: #141414;
}

#commanderSearch::placeholder,
#partnerSearch::placeholder {
    color: #5a5a5a;
    opacity: 1;
    font-weight: 500;
}

html.dark-mode #commanderSearch::placeholder,
html.dark-mode #partnerSearch::placeholder,
body.dark-mode #commanderSearch::placeholder,
body.dark-mode #partnerSearch::placeholder {
    color: #c8c8c8;
    opacity: 1;
}

#commanderSearch:focus,
#partnerSearch:focus {
    outline: none;
    border-color: #007bff;
}

#commanderSearch.valid,
#partnerSearch.valid {
    border-color: #28a745;
}

#commanderSearch.invalid,
#partnerSearch.invalid {
    border-color: #dc3545;
}

/* Partner status indicator */
.partner-status {
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 4px 0;
    min-height: 24px;
}

.partner-status.valid {
    color: #28a745;
}

.partner-status.invalid {
    color: #dc3545;
}

/* Search suggestions */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.search-suggestions.active {
    display: block;
}

.suggestion-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}

.suggestion-item:hover {
    background: var(--bg-hover);
}

.suggestion-name {
    font-weight: 500;
    color: var(--text-primary);
}

.suggestion-type {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.suggestion-partner-class {
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--bg-comment);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 2px;
}

/* Mobile adjustments — layout of the search row is handled in the 767px block above */
@media (max-width: 768px) {
    .partner-toggle {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        font-size: 1rem;
    }

    #commanderSearch,
    #partnerSearch {
        padding: 10px 14px;
        font-size: 0.95rem;
    }
}

/* Suggestion active state for keyboard navigation */
.suggestion-item.suggestion-active {
    background: var(--correction-active-bg) !important;
    color: var(--correction-active-text) !important;
}

.suggestion-item.suggestion-active .suggestion-name,
.suggestion-item.suggestion-active .suggestion-type,
.suggestion-item.suggestion-active .suggestion-partner-class {
    color: var(--correction-active-text) !important;
}

.suggestion-loading {
    padding: 10px 16px;
    color: var(--text-muted);
    font-style: italic;
}

.suggestion-error {
    padding: 10px 16px;
    color: #dc3545;
}

/* ===== END OF EDHREC PAGE SPECIFIC STYLES ===== */

/* ===== FULL-WIDTH DEVELOPER SETTINGS ===== */
.dev-settings-container,
.settings-container {
    width: 98% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

/* Override container width for developer settings page only */
body:has(.layout-tuner-section) .container {
    width: 98% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
}

/* ===== MOBILE OPTIMIZATIONS (CONSOLIDATED) ===== */
/* Desktop: 50% width with auto margins */
@media (min-width: 992px) {
    .container {
        width: 50% !important;
        max-width: 800px !important; /* Prevents it from getting too wide on ultra-wide screens */
        margin-left: auto !important;
        margin-right: auto !important;
    }
    #cardInput {
        height: 400px; /* Slightly shorter since container is narrower */
    }
}

/* Tablet: Slightly wider but still centered */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        width: 70%;
        max-width: none;
    }
}

/* Mobile: Keep original behavior (almost full width) */
@media (max-width: 576px) {
    .mana-symbols {
        padding: 6px 12px;
        font-size: 1rem;
    }
    
    .badge {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
    
    .fs-5 {
        font-size: 1.25rem !important;
    }
    
    button, .btn {
        min-height: 48px;
        font-size: 1.1rem !important;
    }
}



/* MOBILE */
@media (max-width: 768px) {
	/* Fix for mobile overscroll background distortion */
    html, body {
        height: 100%;
        overflow-x: hidden;
    }

    body {
        background-size: cover;
    }
	
	.body {
		background-image: none !important;
        position: fixed;  /* Change from relative to fixed */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: scroll;  /* Enable scrolling */
        -webkit-overflow-scrolling: touch;  /* Smooth iOS scrolling */
	}
	
	body::before {
		content: none;
		background-image: none;
	}
	
	/* Ensure content stays above the fixed background */
    .container {
        position: relative;
        z-index: 1;
        min-height: 100%;  /* Take full height */
        margin: 0 auto;
        padding: 20px;
        z-index: 1;
    }
	
	.container {
        width: 95%;
        margin: 10px auto;
        padding: 15px;
    }
	
    .modal-content {
        width: 95%;
        margin: 10px;
        max-height: 85vh;
    }
    
    .form-group input {
        font-size: 16px;
    }
    
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .btn {
        width: 100%;
        padding: 14px;
    }
	
	.login-header-btn {
        height: 21px !important;
        line-height: 21px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: unset !important; /* Override any mobile min-height */
    }
	
/* Mobile touch improvements */	
	    .card-item {
        cursor: pointer;
    }
    
    .card-item:active {
        background-color: rgba(0,0,0,0.05);
    }
	
	/* Improve touch response on mobile */
	.card-name,
	.not-found-item,
	.settings-gear,
	.btn,
	button,
	.login-header-btn,
	.logout-btn,
	.card-option {
		touch-action: manipulation;
	}

	/* Ensure modal buttons are touch-friendly */
	#correctionModal .modal-footer button {
		touch-action: manipulation;
		min-height: 44px; /* Minimum touch target size */
	}
	
	/* Override card-item grid for mobile */
    .card-item {
        grid-template-rows: auto auto !important;  /* Auto height, not fixed */
        gap: 4px 8px !important;
    }
    
    /* Allow mana cost to move to type row if needed */
    .mana-symbols {
        display: inline-flex;
        flex-wrap: wrap;
    }
	
	/* Force top row to single line on mobile */
    .card-top-row {
        flex-wrap: nowrap !important;
        gap: 4px;
        width: 100%;
    }
    
    /* Card name larger than type and hashtags on phone */
    .card-name {
        font-size: 1.15rem;
        flex-shrink: 1;
        min-width: 0;
        white-space: normal;
        word-break: break-word;
        max-width: 70%;
    }
    
    .card-type {
        font-size: 0.75rem;
    }
    
    .comment-wrapped,
    .comment-inline {
        font-size: 0.75rem;
    }
    
    /* Mana cost never shrinks */
    .mana-symbols {
        flex-shrink: 0;
    }
    
    /* Inline comments hidden on mobile (they will wrap) */
    .comment-inline {
        display: none !important;
    }
    
    /* Wrapped comments shown on mobile */
    .comment-wrapped {
        display: inline-block !important;
        white-space: normal;
        word-break: break-word;
    }
	
	#card-image-tooltip {
        max-width: 90vw !important;
        max-height: auto !important;
        width: auto !important;
        height: auto !important;
    }
    
    #card-image-tooltip img {
        width: 100% !important;
        height: auto !important;
        transform: none !important;  /* Override rotation on mobile */
    }
    
    /* For landscape cards on mobile, let them scale naturally */
    #card-image-tooltip[data-rotated="true"] {
        width: auto !important;
        height: auto !important;
    }
	
	    .feedback-container {
        padding: 10px;
    }
    
    .feedback-item {
        padding: 12px;
    }
    
    .btn-sm {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
	/* ##### END MEDIA (MAX-WIDTH: 768PX) ##### */
	
    
    /* If still doesn't fit on very small screens */
    @media (max-width: 480px) {
        .card-name {
            font-size: 1.05rem;
            max-width: 65%;
        }
        .card-type,
        .comment-wrapped,
        .comment-inline {
            font-size: 0.7rem;
        }
    }
}


html.dark-mode .print-chip-box {
    background: #1b1d27 !important;
    border-color: #5a5a6a !important;
    color: #f2f2f2 !important;
}
html.dark-mode .print-chip {
    background: #2a2d3a !important;
    color: #f2f2f2 !important;
    border-color: #6a6a7a !important;
}
html.dark-mode .print-chip.on,
html.dark-mode .print-chip.locked {
    background: #3d7ec9 !important;
    color: #fff !important;
    border-color: #6aa8e8 !important;
}
html.dark-mode .print-chip-box .text-muted {
    color: #c8c8d0 !important;
}


.mana-split {
    color: inherit;
    font-weight: 600;
}
.card-item .mana-split,
html.dark-mode .card-item .mana-split {
    color: var(--text-primary) !important;
}

#notFoundHeader .badge,
#notFoundHeader .badge.bg-light,
#notFoundHeader .badge.text-dark {
    background: #fff !important;
    color: #9b1c1c !important;
    border: 1px solid rgba(0,0,0,0.15);
}
html.dark-mode #notFoundHeader .badge,
html.dark-mode #notFoundHeader .badge.bg-light,
html.dark-mode #notFoundHeader .badge.text-dark {
    background: #1f1f1f !important;
    color: #ffd2d2 !important;
    border: 1px solid rgba(255,255,255,0.25);
}

/* Version modal: default finish/treatment/frame tag checkboxes */
.default-tag-label {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}
.default-tag-check {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    accent-color: #0d6efd;
    cursor: pointer;
}