styles.css
/* Custom styles for decks plugin */
.decks-view {
    padding: 0;
    overflow: hidden;
    width: 100%;
    min-width: unset;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Scoped touch support for interactive elements within plugin containers */
.decks-view button,
.decks-deck-list-panel button,
.decks-review-modal button,
.decks-statistics-container button,
.decks-anki-export-ui button,
.decks-deck-config-ui button,
.decks-heatmap-container button,
.decks-view [role="button"],
.decks-deck-list-panel [role="button"],
.decks-review-modal [role="button"],
.decks-statistics-container [role="button"],
.decks-anki-export-ui [role="button"],
.decks-deck-config-ui [role="button"],
.decks-heatmap-container [role="button"],
.decks-view .decks-clickable,
.decks-deck-list-panel .decks-clickable,
.decks-review-modal .decks-clickable,
.decks-statistics-container .decks-clickable,
.decks-anki-export-ui .decks-clickable,
.decks-deck-config-ui .decks-clickable,
.decks-heatmap-container .decks-clickable {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    min-height: 44px;
    min-width: 44px;
    transition: all 0.2s ease;
}

/* Enhanced focus states for accessibility - scoped to plugin containers */
.decks-view button:focus,
.decks-deck-list-panel button:focus,
.decks-review-modal button:focus,
.decks-statistics-container button:focus,
.decks-anki-export-ui button:focus,
.decks-deck-config-ui button:focus,
.decks-heatmap-container button:focus,
.decks-view [role="button"]:focus,
.decks-deck-list-panel [role="button"]:focus,
.decks-review-modal [role="button"]:focus,
.decks-statistics-container [role="button"]:focus,
.decks-anki-export-ui [role="button"]:focus,
.decks-deck-config-ui [role="button"]:focus,
.decks-heatmap-container [role="button"]:focus,
.decks-view .decks-clickable:focus,
.decks-deck-list-panel .decks-clickable:focus,
.decks-review-modal .decks-clickable:focus,
.decks-statistics-container .decks-clickable:focus,
.decks-anki-export-ui .decks-clickable:focus,
.decks-deck-config-ui .decks-clickable:focus,
.decks-heatmap-container .decks-clickable:focus {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
    z-index: 10;
}

/* Active states for touch feedback - scoped to plugin containers */
.decks-view button:active,
.decks-deck-list-panel button:active,
.decks-review-modal button:active,
.decks-statistics-container button:active,
.decks-anki-export-ui button:active,
.decks-deck-config-ui button:active,
.decks-heatmap-container button:active,
.decks-view [role="button"]:active,
.decks-deck-list-panel [role="button"]:active,
.decks-review-modal [role="button"]:active,
.decks-statistics-container [role="button"]:active,
.decks-anki-export-ui [role="button"]:active,
.decks-deck-config-ui [role="button"]:active,
.decks-heatmap-container [role="button"]:active,
.decks-view .decks-clickable:active,
.decks-deck-list-panel .decks-clickable:active,
.decks-review-modal .decks-clickable:active,
.decks-statistics-container .decks-clickable:active,
.decks-anki-export-ui .decks-clickable:active,
.decks-deck-config-ui .decks-clickable:active,
.decks-heatmap-container .decks-clickable:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

/* Ensure proper touch targets on mobile - scoped to plugin containers */
@media (max-width: 768px) {
    .decks-view button,
    .decks-deck-list-panel button,
    .decks-review-modal button,
    .decks-statistics-container button,
    .decks-anki-export-ui button,
    .decks-deck-config-ui button,
    .decks-heatmap-container button,
    .decks-view [role="button"],
    .decks-deck-list-panel [role="button"],
    .decks-review-modal [role="button"],
    .decks-statistics-container [role="button"],
    .decks-anki-export-ui [role="button"],
    .decks-deck-config-ui [role="button"],
    .decks-heatmap-container [role="button"],
    .decks-view .decks-clickable,
    .decks-deck-list-panel .decks-clickable,
    .decks-review-modal .decks-clickable,
    .decks-statistics-container .decks-clickable,
    .decks-anki-export-ui .decks-clickable,
    .decks-deck-config-ui .decks-clickable,
    .decks-heatmap-container .decks-clickable {
        min-height: 44px;
        min-width: 44px;
    }

    /* Enhanced touch feedback on mobile - scoped to plugin containers */
    .decks-view button:active,
    .decks-deck-list-panel button:active,
    .decks-review-modal button:active,
    .decks-statistics-container button:active,
    .decks-anki-export-ui button:active,
    .decks-deck-config-ui button:active,
    .decks-heatmap-container button:active,
    .decks-view [role="button"]:active,
    .decks-deck-list-panel [role="button"]:active,
    .decks-review-modal [role="button"]:active,
    .decks-statistics-container [role="button"]:active,
    .decks-anki-export-ui [role="button"]:active,
    .decks-deck-config-ui [role="button"]:active,
    .decks-heatmap-container [role="button"]:active,
    .decks-view .decks-clickable:active,
    .decks-deck-list-panel .decks-clickable:active,
    .decks-review-modal .decks-clickable:active,
    .decks-statistics-container .decks-clickable:active,
    .decks-anki-export-ui .decks-clickable:active,
    .decks-deck-config-ui .decks-clickable:active,
    .decks-heatmap-container .decks-clickable:active {
        transform: scale(0.98);
        background: var(--background-modifier-active-hover);
    }
}

@media (max-width: 480px) {
    .decks-view button,
    .decks-deck-list-panel button,
    .decks-review-modal button,
    .decks-statistics-container button,
    .decks-anki-export-ui button,
    .decks-deck-config-ui button,
    .decks-heatmap-container button,
    .decks-view [role="button"],
    .decks-deck-list-panel [role="button"],
    .decks-review-modal [role="button"],
    .decks-statistics-container [role="button"],
    .decks-anki-export-ui [role="button"],
    .decks-deck-config-ui [role="button"],
    .decks-heatmap-container [role="button"],
    .decks-view .decks-clickable,
    .decks-deck-list-panel .decks-clickable,
    .decks-review-modal .decks-clickable,
    .decks-statistics-container .decks-clickable,
    .decks-anki-export-ui .decks-clickable,
    .decks-deck-config-ui .decks-clickable,
    .decks-heatmap-container .decks-clickable {
        min-height: 40px;
        min-width: 40px;
    }
}

/* Remove tap delay on iOS - scoped to plugin containers */
.decks-view a,
.decks-deck-list-panel a,
.decks-review-modal a,
.decks-statistics-container a,
.decks-anki-export-ui a,
.decks-deck-config-ui a,
.decks-heatmap-container a,
.decks-view button,
.decks-deck-list-panel button,
.decks-review-modal button,
.decks-statistics-container button,
.decks-anki-export-ui button,
.decks-deck-config-ui button,
.decks-heatmap-container button,
.decks-view input,
.decks-deck-list-panel input,
.decks-review-modal input,
.decks-statistics-container input,
.decks-anki-export-ui input,
.decks-deck-config-ui input,
.decks-heatmap-container input,
.decks-view textarea,
.decks-deck-list-panel textarea,
.decks-review-modal textarea,
.decks-statistics-container textarea,
.decks-anki-export-ui textarea,
.decks-deck-config-ui textarea,
.decks-heatmap-container textarea,
.decks-view select,
.decks-deck-list-panel select,
.decks-review-modal select,
.decks-statistics-container select,
.decks-anki-export-ui select,
.decks-deck-config-ui select,
.decks-heatmap-container select {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* Prevent text selection on interactive elements - scoped to plugin containers */
.decks-view .decks-deck-name-link,
.decks-deck-list-panel .decks-deck-name-link,
.decks-review-modal .decks-deck-name-link,
.decks-statistics-container .decks-deck-name-link,
.decks-anki-export-ui .decks-deck-name-link,
.decks-deck-config-ui .decks-deck-name-link,
.decks-heatmap-container .decks-deck-name-link,
.decks-view .decks-suggestion-item,
.decks-deck-list-panel .decks-suggestion-item,
.decks-review-modal .decks-suggestion-item,
.decks-statistics-container .decks-suggestion-item,
.decks-anki-export-ui .decks-suggestion-item,
.decks-deck-config-ui .decks-suggestion-item,
.decks-heatmap-container .decks-suggestion-item,
.decks-view .decks-nav-button,
.decks-deck-list-panel .decks-nav-button,
.decks-review-modal .decks-nav-button,
.decks-statistics-container .decks-nav-button,
.decks-anki-export-ui .decks-nav-button,
.decks-deck-config-ui .decks-nav-button,
.decks-heatmap-container .decks-nav-button,
.decks-view .decks-stats-button,
.decks-deck-list-panel .decks-stats-button,
.decks-review-modal .decks-stats-button,
.decks-statistics-container .decks-stats-button,
.decks-anki-export-ui .decks-stats-button,
.decks-deck-config-ui .decks-stats-button,
.decks-heatmap-container .decks-stats-button,
.decks-view .decks-refresh-button,
.decks-deck-list-panel .decks-refresh-button,
.decks-review-modal .decks-refresh-button,
.decks-statistics-container .decks-refresh-button,
.decks-anki-export-ui .decks-refresh-button,
.decks-deck-config-ui .decks-refresh-button,
.decks-heatmap-container .decks-refresh-button,
.decks-view .decks-deck-config-button,
.decks-deck-list-panel .decks-deck-config-button,
.decks-review-modal .decks-deck-config-button,
.decks-statistics-container .decks-deck-config-button,
.decks-anki-export-ui .decks-deck-config-button,
.decks-deck-config-ui .decks-deck-config-button,
.decks-heatmap-container .decks-deck-config-button {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Fast click for iOS Safari - scoped to plugin containers */
.decks-view .decks-deck-name-link,
.decks-deck-list-panel .decks-deck-name-link,
.decks-review-modal .decks-deck-name-link,
.decks-statistics-container .decks-deck-name-link,
.decks-anki-export-ui .decks-deck-name-link,
.decks-deck-config-ui .decks-deck-name-link,
.decks-heatmap-container .decks-deck-name-link,
.decks-view .decks-suggestion-item,
.decks-deck-list-panel .decks-suggestion-item,
.decks-review-modal .decks-suggestion-item,
.decks-statistics-container .decks-suggestion-item,
.decks-anki-export-ui .decks-suggestion-item,
.decks-deck-config-ui .decks-suggestion-item,
.decks-heatmap-container .decks-suggestion-item,
.decks-view .decks-nav-button,
.decks-deck-list-panel .decks-nav-button,
.decks-review-modal .decks-nav-button,
.decks-statistics-container .decks-nav-button,
.decks-anki-export-ui .decks-nav-button,
.decks-deck-config-ui .decks-nav-button,
.decks-heatmap-container .decks-nav-button,
.decks-view .decks-stats-button,
.decks-deck-list-panel .decks-stats-button,
.decks-review-modal .decks-stats-button,
.decks-statistics-container .decks-stats-button,
.decks-anki-export-ui .decks-stats-button,
.decks-deck-config-ui .decks-stats-button,
.decks-heatmap-container .decks-stats-button,
.decks-view .decks-refresh-button,
.decks-deck-list-panel .decks-refresh-button,
.decks-review-modal .decks-refresh-button,
.decks-statistics-container .decks-refresh-button,
.decks-anki-export-ui .decks-refresh-button,
.decks-deck-config-ui .decks-refresh-button,
.decks-heatmap-container .decks-refresh-button,
.decks-view .decks-deck-config-button,
.decks-deck-list-panel .decks-deck-config-button,
.decks-review-modal .decks-deck-config-button,
.decks-statistics-container .decks-deck-config-button,
.decks-anki-export-ui .decks-deck-config-button,
.decks-deck-config-ui .decks-deck-config-button,
.decks-heatmap-container .decks-deck-config-button,
.decks-view button,
.decks-deck-list-panel button,
.decks-review-modal button,
.decks-statistics-container button,
.decks-anki-export-ui button,
.decks-deck-config-ui button,
.decks-heatmap-container button {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.decks-review-modal-container {
    height: 98%;
}

/* Modal styles */
.decks-modal {
    width: 40vw;
    max-width: 40vw;
    height: 85vh;
    max-height: 85vh;
}

.decks-modal-mobile {
    height: 100% !important;
    max-height: 100vh !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}

.decks-modal-mobile .modal-close-button {
    z-index: 1000;
    position: absolute;
    transform: translateY(env(safe-area-inset-top));
}

.decks-modal-mobile .modal-header {
    padding-top: translateY(env(safe-area-inset-top));
}

.decks-deck-review-modal .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 0;
}

.decks-deck-review-modal .modal {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.decks-deck-review-modal .modal-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.decks-statistics-modal .modal {
    width: 100%;
    max-width: 85vw;
    height: 100%;
    max-height: 85vh;
    margin: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.decks-statistics-modal-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
}

.decks-statistics-modal-content {
    overflow: hidden;
    height: 100%;
}

/* Extra small screen protection */
.decks-deck-review-modal .modal,
.decks-deck-review-modal-mobile,
.decks-statistics-modal .modal,
.decks-statistics-modal-mobile,
.decks-deck-config-modal-mobile {
    min-width: 280px !important;
    min-height: 400px !important;
}

.decks-statistics-modal-title {
    font-size: 16px;
    margin: 0 0 12px 0;
    padding: 0 16px;
}

.decks-statistics-modal-component-container {
    padding: 0;
    margin: 0;
    height: calc(80vh - 60px);
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.decks-deck-config-container {
    padding: 0;
    margin: 0;
}
/*
.workspace-leaf-content[data-type="decks-view"] {
    width: 100%;
}

.workspace-leaf-content[data-type="decks-view"] .view-content {
    width: 100%;
    padding: 0;
}*/

/* Touch-friendly button sizes for all mobile devices - scoped to plugin containers */
@media (hover: none) and (pointer: coarse) {
    .decks-view button,
    .decks-deck-list-panel button,
    .decks-review-modal button,
    .decks-statistics-container button,
    .decks-anki-export-ui button,
    .decks-deck-config-ui button,
    .decks-heatmap-container button {
        min-height: 44px;
        min-width: 44px;
    }

    .decks-view .decks-difficulty-button,
    .decks-deck-list-panel .decks-difficulty-button,
    .decks-review-modal .decks-difficulty-button,
    .decks-statistics-container .decks-difficulty-button,
    .decks-anki-export-ui .decks-difficulty-button,
    .decks-deck-config-ui .decks-difficulty-button,
    .decks-heatmap-container .decks-difficulty-button {
        min-height: 48px;
    }

    .decks-view .decks-deck-config-button,
    .decks-deck-list-panel .decks-deck-config-button,
    .decks-review-modal .decks-deck-config-button,
    .decks-statistics-container .decks-deck-config-button,
    .decks-anki-export-ui .decks-deck-config-button,
    .decks-deck-config-ui .decks-deck-config-button,
    .decks-heatmap-container .decks-deck-config-button,
    .decks-view .decks-stats-button,
    .decks-deck-list-panel .decks-stats-button,
    .decks-review-modal .decks-stats-button,
    .decks-statistics-container .decks-stats-button,
    .decks-anki-export-ui .decks-stats-button,
    .decks-deck-config-ui .decks-stats-button,
    .decks-heatmap-container .decks-stats-button,
    .decks-view .decks-refresh-button,
    .decks-deck-list-panel .decks-refresh-button,
    .decks-review-modal .decks-refresh-button,
    .decks-statistics-container .decks-refresh-button,
    .decks-anki-export-ui .decks-refresh-button,
    .decks-deck-config-ui .decks-refresh-button,
    .decks-heatmap-container .decks-refresh-button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Backup Settings Styles */
.decks-backup-container {
    margin-top: 10px;
}
