.finger-board {
    display: inline-flex;
    flex-direction: column;
    grid-area: board;

    &.is-flipped {
        flex-direction: column-reverse;
    }

    &.is-vertical {
        flex-direction: row-reverse;
        &.is-reversed {
            flex-direction: row;
        }
    }
}

.finger-board-row {
    display: flex;

    .is-reversed & {
        flex-direction: row-reverse;
    }

    .is-vertical & {
        flex-direction: column;
        .is-flipped & {
            flex-direction: column-reverse;
        }
    }
}

/* ----------------------------------
   Cell Base Layout & Typography
   ---------------------------------- */
.finger-board-cell {
    height: 28px;
    width: 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    position: relative;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: system-ui, -apple-system, sans-serif;
    color: #e2e8f0; /* Default text color for cells */
    z-index: 1;

    &.finder-dimmed {
        opacity: 0.32;
    }

    &.finder-selected {
        color: #ffffff;
        opacity: 1;
        font-weight: 800;
        text-shadow: 0 0 6px rgba(96, 165, 250, 0.95);
    }

    .has-dots &.finder-selected::after {
        background-color: #0f766e;
        border: 2px solid #5eead4;
        box-shadow: 0 0 10px rgba(45, 212, 191, 0.8);
    }

    /* Base Circle Badge (Rendered behind text via pseudo-element) */
    .has-dots &:is(.has-root, .has-note, .has-note-primary, .has-note-secondary)::after {
        position: absolute;
        content: "";
        width: 22px;
        height: 22px;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    /* ----------------------------------
       Standard State Colors (Non-Mode View)
       ---------------------------------- */

    /* Neutral Scale / Chord Tone */
    &.has-note {
        color: #e2e8f0;
    }
    .has-dots &.has-note::after {
        background-color: #2b303c;
        border: 1px solid rgba(255, 255, 255, 0.18);
    }

    /* Key Root / Chord Tonic (High Contrast Accent) */
    &.has-root {
        color: #ffffff !important;
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    }
    .has-dots &.has-root::after {
        background-color: #2563eb; 
        box-shadow: 0 0 8px rgba(37, 99, 235, 0.7);
        border: 1px solid #60a5fa;
    }

    /* Primary interval set (ascending or base scale: Green) */
    /* .has-dots &.has-note-primary::after {
        background-color: #132b1a;
        border: 1px solid #2e6b47;
    } */
     .has-dots &.has-note-primary::after {
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M 11 4 L 21 4 Q 25 4 25.5 8 L 28.5 24 Q 29 28 25 28 L 8 28 Q 3 28 3.5 24 L 6.5 8 Q 7 4 11 4 Z' fill='%23133b1e' stroke='%232b7a3e' stroke-width='1'/%3E%3C/svg%3E");

        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* Secondary interval set (descending or mode: Red / Burgundy) */
    /* .has-dots &.has-note-secondary::after {
        background-color: #3b131e;
        border: 1px solid #7a2b3e;
    } */
    .has-dots &.has-note-secondary::after {
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;

        /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M 8 4 L 25 4 Q 29 4 28.5 8 L 25.5 24 Q 25 28 21 28 L 11 28 Q 7 28 6.5 24 L 3.5 8 Q 3 4 8 4 Z' fill='%233b131e' stroke='%237a2b3e' stroke-width='1'/%3E%3C/svg%3E"); */
        background-image: url("../Assets/red-trapezoid-svg.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }


    /* Dim red note cells for modes */
    .has-mode &.has-note-secondary {
        color: #e2e8f066;
        &::after {
            opacity: 0.45;
        }
    }


    &.box-even {
        /* background-color: rgba(119, 10, 214, 0.179); */
        background: repeating-linear-gradient( 
            60deg, 
            rgba(214, 166, 10, 0.25) 0px, 
            rgba(214, 166, 10, 0.25) 2px, 
            transparent 2px, 
            transparent 5px
        );
        /* background: repeating-linear-gradient(
            60deg, 
            rgba(119, 10, 214, 0.179) 0px, 
            rgba(119, 10, 214, 0.179) 10px, 
            transparent 10px, 
            transparent 20px
        ); */
        /* background: repeating-linear-gradient( 
            60deg, 
            rgba(119, 10, 214, 0.2) 0px, 
            rgba(119, 10, 214, 0.2) 2px, 
            transparent 2px, 
            transparent 6px
        ); */
    }

    &.corner-top-left {
        border-top-left-radius: 4px;
    }

    &.corner-top-right {
        border-top-right-radius: 4px;
    }

    &.corner-bottom-left {
        border-bottom-left-radius: 4px;
    }

    &.corner-bottom-right {
        border-bottom-right-radius: 4px;
    }

    /* ----------------------------------
       Horizontal Fretboard Layout
       ---------------------------------- */
    .has-frets:where(:not(.is-vertical)) & {
        border-left: 1px solid var(--color-fret-border);

        .finger-board.is-reversed & {
            border-left: none;
            border-right: 1px solid var(--color-fret-border);
        }

        :where(.finger-board-row):first-child & {
            border-top: 1px solid var(--color-fret-border);

            :where(.finger-board.is-flipped) & {
                border-top: none;
                border-bottom: 1px solid var(--color-fret-border);
            }
        }

        :where(.finger-board-row):last-child & {
            border-bottom: 1px solid var(--color-fret-border);

            :where(.finger-board.is-flipped) & {
                border-bottom: none;
                border-top: 1px solid var(--color-fret-border);
            }
        }

        &:last-child {
            border-right: 1px solid var(--color-fret-border);

            :where(.finger-board).is-reversed & {
                border-left: 1px solid var(--color-fret-border);
            }
        }

        :where(.finger-board.is-reversed) &:first-child[data-open] {
            border-right: none;
        }

        /* Horizontal String Line */
        &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 0;
            /* border-bottom: 1px solid var(--color-fret-border); */
            border-bottom: 2px dashed var(--color-fret-border);
            margin: auto;
            z-index: -2;
            /* opacity: 0.6; */
            opacity: 0.35;
        }

        /* Nut Line */
        &[data-nut] {
            border-left: 4px solid var(--color-fret-border);

            :where(.finger-board).is-reversed & {
                border-right: 4px solid var(--color-fret-border);
            }
        }

        &.is-offset {
            background-color: var(--color-offset-fret-color);

            &:where(:not(:is([data-nut], :first-child))) {
                border-left-color: transparent;
            }

            :where(.finger-board.is-reversed) &:where(:not(:is([data-nut], :last-child))) {
                border-left-color: transparent;
            }
            
            &::before {
                border: none;
            }
        }

        /* Open / Unplayed Column */
        &[data-open] {
            border: none;

            &::before {
                border: none;
            }
        }

        &[data-open]:not(.box-even):not(.box-odd) {
            background-color: transparent;
        }
    }

    /* ----------------------------------
       Vertical Fretboard Layout
       ---------------------------------- */
    .has-frets:where(.is-vertical) & {
        border-top: 1px solid var(--color-fret-border);

        .finger-board.is-flipped & {
            border-top: none;
            border-bottom: 1px solid var(--color-fret-border);
        }

        :where(.finger-board-row):first-child & {
            border-right: 1px solid var(--color-fret-border);

            :where(.finger-board.is-reversed) & {
                border-right: none;
                border-left: 1px solid var(--color-fret-border);
            }
        }

        :where(.finger-board-row):last-child & {
            border-left: 1px solid var(--color-fret-border);

            :where(.finger-board.is-reversed) & {
                border-left: none;
                border-right: 1px solid var(--color-fret-border);
            }
        }

        &:last-child {
            border-bottom: 1px solid var(--color-fret-border);

            :where(.finger-board).is-flipped & {
                border-top: 1px solid var(--color-fret-border);
            }
        }

        :where(.finger-board.is-flipped) &:first-child[data-open] {
            border-bottom: none;
        }

        /* Vertical String Line */
        &::before {
            content: "";
            position: absolute;
            width: 0;
            height: 100%;
            border-left: 2px dashed var(--color-fret-border);
            margin: auto;
            z-index: -2;
            opacity: 0.35;
        }

        /* Nut Line */
        &[data-nut] {
            border-top: 4px solid var(--color-fret-border);

            :where(.finger-board).is-flipped & {
                border-bottom: 4px solid var(--color-fret-border);
            }
        }

        &.is-offset {
            background-color: var(--color-offset-fret-color);

            &:where(:not(:is([data-nut], :first-child))) {
                border-top-color: transparent;
            }

            :where(.finger-board).is-flipped &:where(:not(:is([data-nut], :first-child))) {
                border-bottom-color: transparent;
            }
            &::before {
                border: none;
            }
        }

        /* Open / Unplayed Column */
        &[data-open] {
            border: none;

            &::before {
                border: none;
            }
        }

        &[data-open]:not(.box-even):not(.box-odd) {
            background-color: transparent;
        }
    }


    &.is-dimmed {
        color: rgba(226, 232, 240, 0.2) !important;
        text-shadow: none !important;
        transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;

        /* Dim the note background badge circle without fading cell borders or string lines */
        &::after {
            opacity: 0.15;
            transition: opacity 0.2s ease-in-out;
        }
    }
}

.component-wrapper {
    display: grid;
    grid-template-areas: 
        "header"
        "board"
        "footer";


    & header {
        grid-area: header;
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        padding: 6px 0 6px 12px;
    }
    & footer {
        grid-area: footer; 
        display: flex; 
    }

    .fret-number-cell {
        height: 28px;
        width: 32px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        position: relative;
        font-size: 0.75rem;
        font-weight: 600;
        font-family: system-ui, -apple-system, sans-serif;
        color: #e2e8f0; /* Default text color for cells */
    }

    &:has(.is-vertical) {
        grid-template-areas: 
            "header header"
            "footer board";
            grid-template-columns: auto auto;

            & footer {
                flex-direction: column;
            }
    }

    &:has(.is-reversed):not(:has(.is-vertical)) {
        & footer {
            flex-direction: row-reverse;
        }
    }
    &:has(.is-vertical.is-flipped) {
        & footer {
            flex-direction: column-reverse;
        }
    }


}


@media print {
    .has-dots &.has-note-secondary::after {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}