/* ============================================
   MUSICAL MODES FLASHCARDS - APP SPECIFIC CSS
   Only styles unique to this app
   Common styles are in flashcard-common.css
   ============================================ */

/* Notation container */
.notation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
    margin: 16px 0;
}

.notation-container svg {
    max-width: 100%;
    height: auto;
}

/* Dark mode SVG inversion */
body.dark-mode .notation-container svg {
    filter: invert(1) hue-rotate(180deg);
}

/* Flashcard size override */
.flashcard {
    height: 280px;
}

/* Individual mode button colors - unique to this app */
.pill[data-mode="ionian"] { border-color: #3b82f6; color: #3b82f6; }
.pill[data-mode="dorian"] { border-color: #8b5cf6; color: #8b5cf6; }
.pill[data-mode="phrygian"] { border-color: #ec4899; color: #ec4899; }
.pill[data-mode="lydian"] { border-color: #f59e0b; color: #f59e0b; }
.pill[data-mode="mixolydian"] { border-color: #10b981; color: #10b981; }
.pill[data-mode="aeolian"] { border-color: #06b6d4; color: #06b6d4; }
.pill[data-mode="locrian"] { border-color: #64748b; color: #64748b; }

/* Hover states with background fill */
.pill[data-mode="ionian"]:hover:not(:disabled) { background: #3b82f6; color: white; }
.pill[data-mode="dorian"]:hover:not(:disabled) { background: #8b5cf6; color: white; }
.pill[data-mode="phrygian"]:hover:not(:disabled) { background: #ec4899; color: white; }
.pill[data-mode="lydian"]:hover:not(:disabled) { background: #f59e0b; color: white; }
.pill[data-mode="mixolydian"]:hover:not(:disabled) { background: #10b981; color: white; }
.pill[data-mode="aeolian"]:hover:not(:disabled) { background: #06b6d4; color: white; }
.pill[data-mode="locrian"]:hover:not(:disabled) { background: #64748b; color: white; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .notation-container {
        min-height: 100px;
    }

    .flashcard {
        height: 260px;
    }

    .flashcard-front,
    .flashcard-back {
        padding: 24px 16px;
    }
}

@media (max-width: 480px) {
    .notation-container {
        min-height: 80px;
        overflow-x: auto;
    }

    .flashcard {
        height: 240px;
    }
}