/* /Engines/SpreadsheetEngine/SpreadsheetEngine.css */

.SpreadSheetEngineShell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;

    & .SpreadSheetEngineMenuBar {
        display: flex;
        flex-shrink: 0;
        padding: 2px 4px;
        border-bottom: 1px solid var(--mainPageBorderColor);

        & .SpreadSheetEngineMenuItem {
            padding: 2px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 0.82rem;
            user-select: none;

            &:hover { background: var(--mainPageHoverColor, rgba(0, 0, 0, 0.06)); }
        }

        @media (max-width: 767px) { display: none; }
    }

    & .SpreadSheetEngineRibbon {
        display: flex;
        flex-shrink: 0;
        gap: 4px;
        padding: 3px 6px;
        border-bottom: 1px solid var(--mainPageBorderColor);

        & .SpreadSheetEngineRibbonButton {
            padding: 2px 8px;
            border: 1px solid transparent;
            border-radius: 3px;
            color: inherit;
            background: transparent;
            cursor: pointer;
            font-size: 0.85rem;
            line-height: 1.4;

            &:hover {
                border-color: var(--mainPageBorderColor);
                background: var(--mainPageHoverColor, rgba(0, 0, 0, 0.06));
            }
        }

        @media (max-width: 767px) { display: none; }
    }

    & .SpreadSheetEngineFormulaBar {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 6px;
        padding: 2px 6px;
        border-bottom: 1px solid var(--mainPageBorderColor);

        & .SpreadSheetEngineCellReference {
            width: 60px;
            padding: 1px 4px;
            border: 1px solid var(--mainPageBorderColor);
            border-radius: 2px;
            color: inherit;
            background: transparent;
            font-size: 0.82rem;
            text-align: center;
        }

        & .SpreadSheetEngineFunctionButton {
            color: var(--mainPageTextSecondary, #888);
            font-size: 0.85rem;
            font-style: italic;
            user-select: none;
        }

        & .SpreadSheetEngineFormulaInput {
            flex: 1;
            padding: 1px 6px;
            border: 1px solid var(--mainPageBorderColor);
            border-radius: 2px;
            outline: none;
            color: inherit;
            background: transparent;
            font-size: 0.85rem;

            &:focus { border-color: var(--mainPageAccentColor, #4a90d9); }
        }
    }

    & .SpreadSheetEngineGridWrapper {
        flex: 1;
        min-height: 0;
        overflow: auto;

        & .SpreadSheetEngineGrid {
            border-collapse: collapse;
            font-size: 0.85rem;

            & thead {
                & tr {
                    & .SpreadSheetEngineCorner {
                        position: sticky;
                        top: 0;
                        left: 0;
                        z-index: 3;
                        min-width: 30px;
                        border: 1px solid var(--mainPageBorderColor);
                        background: var(--mainPageHeaderBg, rgba(0, 0, 0, 0.03));
                    }

                    & .SpreadSheetEngineColumnHeader {
                        position: sticky;
                        top: 0;
                        z-index: 2;
                        min-width: 80px;
                        padding: 2px 8px;
                        border: 1px solid var(--mainPageBorderColor);
                        background: var(--mainPageHeaderBg, rgba(0, 0, 0, 0.03));
                        font-weight: 500;
                        text-align: center;
                        white-space: nowrap;
                        user-select: none;
                    }
                }
            }

            & tbody {
                & tr {
                    & .SpreadSheetEngineRowHeader {
                        position: sticky;
                        left: 0;
                        z-index: 1;
                        min-width: 30px;
                        padding: 2px 8px;
                        border: 1px solid var(--mainPageBorderColor);
                        background: var(--mainPageHeaderBg, rgba(0, 0, 0, 0.03));
                        font-weight: 500;
                        text-align: center;
                        white-space: nowrap;
                        user-select: none;
                    }

                    & td {
                        min-width: 80px;
                        padding: 2px 6px;
                        border: 1px solid var(--mainPageBorderColor);
                        outline: none;

                        &:focus {
                            outline: 2px solid var(--mainPageAccentColor, #4a90d9);
                            outline-offset: -2px;
                        }

                        &.SpreadSheetEngineCellSelected {
                            background: color-mix(in srgb, var(--mainPageAccentColor, #4a90d9) 16%, transparent);
                            box-shadow: inset 0 0 0 1px var(--mainPageAccentColor, #4a90d9);
                        }
                    }
                }
            }
        }
    }

    & .SpreadSheetEngineSheetTabs {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 2px;
        height: 20px;
        padding: 2px 4px;
        border-top: 1px solid var(--mainPageBorderColor);

        & .SpreadSheetEngineSheetTab {
            padding: 2px 14px;
            border: 1px solid transparent;
            border-bottom: none;
            border-radius: 3px 3px 0 0;
            cursor: pointer;
            font-size: 0.82rem;
            user-select: none;

            &:hover { background: var(--mainPageHoverColor, rgba(0, 0, 0, 0.06)); }

            &.Active {
                border-color: var(--mainPageBorderColor);
                border-bottom-color: transparent;
                font-weight: 500;
            }
        }
    }

    & .SpreadSheetEngineStatusBar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
        min-height: 22px;
        padding: 2px 12px;
        border-top: 1px solid var(--mainPageBorderColor);
        font-size: 0.78rem;
        user-select: none;

        & .SpreadSheetEngineSelectionStatus {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
}

/* Smartphones */
@media (min-width: 481px) and (max-width: 767px) {
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
}

/* Petits laptops */
@media (min-width: 1025px) and (max-width: 1280px) {
}

/* Desktop */
@media (min-width: 1281px) {
}