@media screen and (min-width: 0px) {
    /* FuturIntrosWebApp/Front/MainPage/Modules/Tasks/SheetView/SheetView.css */
    .SheetViewRoot {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        background: var(--mainPageContent-bg-color);
        color: var(--text-color);
        font-family: inherit;
        min-width: 0;
        min-height: 0;
    }
    .SheetViewTopBar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        border-bottom: 2px solid var(--border-color);
        background: var(--bg-color);
    }
    .SheetViewBrand {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .SheetViewAppDot {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        background: var(--button-bg-color);
        border: 1px solid var(--border-color);
    }
    .SheetViewTitleMain {
        font-size: 18px;
        font-weight: 600;
    }
    .SheetViewTitleSub {
        font-size: 12px;
        color: var(--unselected-text-color);
    }
    .SheetViewQuickActions {
        display: flex;
        gap: 8px;
    }
    .SheetViewActionBtn {
        border: 1px solid var(--border-color);
        background: var(--button-bg-color);
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 12px;
        color: var(--text-color);
        cursor: pointer;
    }
    .SheetViewActionPrimary {
        font-weight: 600;
    }
    .SheetViewMenuBar {
        display: flex;
        gap: 8px;
        padding: 6px 20px;
        background: var(--bg-color);
        border-bottom: 1px solid var(--border-color);
    }
    .SheetViewMenuTab {
        border: none;
        background: transparent;
        padding: 8px 12px;
        font-size: 13px;
        cursor: pointer;
        border-radius: 6px;
        color: var(--unselected-text-color);
        &.is-active {
            color: var(--text-color);
            background: var(--mainPageContent-bg-color);
            border: 1px solid var(--border-color);
        }
    }
    .SheetViewRibbon {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 16px;
        padding: 16px 20px;
        background: var(--bg-color);
        border-bottom: 2px solid var(--border-color);
    }
    .SheetRibbonGroup {
        border: 2px solid var(--border-color);
        border-radius: 12px;
        padding: 10px;
        background: var(--mainPageContent-bg-color);
    }
    .SheetRibbonTitle {
        font-size: 12px;
        text-transform: uppercase;
        color: var(--unselected-text-color);
        margin-bottom: 8px;
    }
    .SheetRibbonRow {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .SheetRibbonBtn {
        border: 1px solid var(--border-color);
        background: var(--button-bg-color);
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 12px;
        color: var(--text-color);
        cursor: pointer;
    }
    .SheetViewFormulaBar {
        display: grid;
        grid-template-columns: 80px 40px 1fr;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: var(--bg-color);
        border-bottom: 2px solid var(--border-color);
    }
    .SheetViewFormulaCell {
        border: 1px solid var(--border-color);
        background: var(--mainPageContent-bg-color);
        padding: 8px 10px;
        border-radius: 8px;
        font-size: 12px;
        text-align: center;
        color: var(--unselected-text-color);
        font-weight: 600;
    }
    .SheetViewFormulaFx {
        border: 1px solid var(--border-color);
        background: var(--button-bg-color);
        color: var(--unselected-text-color);
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        text-transform: uppercase;
        text-align: center;
        padding: 8px 0;
    }
    .SheetViewFormulaInput {
        border: 1px solid var(--border-color);
        background: var(--mainPageContent-bg-color);
        color: var(--text-color);
        padding: 8px 12px;
        border-radius: 10px;
        font-size: 13px;
        outline: none;
        &:focus {
            border-color: var(--button-bg-color);
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
        }
    }
    .SheetViewGridWrap {
        flex: 1;
        overflow-x: auto;
        overflow-y: auto;
        position: relative;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        padding-bottom: 56px;
    }
    .SheetViewGridScroller {
        width: max-content;
        min-width: calc(var(--sheet-col-count) * var(--sheet-col-width) + var(--sheet-row-header-width));
    }
    .SheetViewGrid {
        --sheet-col-width: 50px;
        --sheet-row-header-width: 20px;
        --sheet-col-count: 12;
        --sheet-header-letter-height: 26px;
        --sheet-header-label-height: 40px;
        width: max-content;
        border-collapse: collapse;
        min-width: calc(var(--sheet-col-count) * var(--sheet-col-width) + var(--sheet-row-header-width));
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        table-layout: fixed;
    }
    .SheetViewHeaderCell {
        position: sticky;
        background: var(--mainPageContent-bg-color);
        color: var(--text-color);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-bottom: 2px solid var(--border-color);
        border-right: 1px solid var(--border-color);
        padding: 10px 12px;
        z-index: 2;
        width: var(--sheet-col-width);
        min-width: var(--sheet-col-width);
        max-width: var(--sheet-col-width);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .SheetViewHeaderLetterCell {
        top: 0;
        height: var(--sheet-header-letter-height);
        font-size: 11px;
        letter-spacing: 0.08em;
        padding: 6px 10px;
        z-index: 3;
    }
    .SheetViewHeaderLabelCell {
        top: var(--sheet-header-letter-height);
        height: var(--sheet-header-label-height);
        padding: 10px 12px;
        z-index: 2;
    }
    .SheetViewHeaderLabelContainer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        width: 100%;
        height: 100%;
        & > span {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .SheetViewFilterIcon {
        border: none;
        background: transparent;
        color: var(--unselected-text-color);
        font-size: 10px;
        padding: 2px 4px;
        cursor: pointer;
        border-radius: 3px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        &:hover {
            background: var(--button-bg-color);
            color: var(--text-color);
        }
    }
    .SheetViewCornerCell {
        left: 0;
        z-index: 5;
        width: var(--sheet-row-header-width);
        min-width: var(--sheet-row-header-width);
        max-width: var(--sheet-row-header-width);
        box-shadow:
            inset -2px 0 0 var(--border-color),
            inset 0 -2px 0 var(--border-color);
    }
    .SheetViewRowHeader {
        position: sticky;
        left: 0;
        top: calc(var(--sheet-header-letter-height) + var(--sheet-header-label-height));
        background: var(--mainPageContent-bg-color);
        border-right: 2px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        text-align: center;
        font-size: 12px;
        color: var(--unselected-text-color);
        width: var(--sheet-row-header-width);
        min-width: var(--sheet-row-header-width);
        max-width: var(--sheet-row-header-width);
        z-index: 4;
        box-shadow:
            inset -2px 0 0 var(--border-color),
            inset 0 -1px 0 var(--border-color);
    }
    .SheetViewColResizer {
        position: absolute;
        right: -2px;
        top: 0;
        height: 100%;
        width: 6px;
        cursor: col-resize;
        z-index: 6;
    }
    .SheetViewRowResizer {
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 6px;
        cursor: row-resize;
        z-index: 6;
    }
    body.SheetViewIsResizingCol,
    body.SheetViewIsResizingRow {
        user-select: none;
    }
    .SheetViewHeaderCell {
        box-shadow:
            inset -1px 0 0 var(--border-color),
            inset 0 -1px 0 var(--border-color);
    }
    .SheetViewRow {
        height: 30px;
        &:nth-child(even) .SheetViewCell {
            background: rgba(255, 255, 255, 0.02);
        }
    }
    .SheetViewCell {
        border-right: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        padding: 0;
        font-size: 13px;
        width: var(--sheet-col-width);
        min-width: var(--sheet-col-width);
        max-width: var(--sheet-col-width);
        outline: none;
        background: var(--bg-color);
        color: var(--text-color);
        height: 25px;
        max-height: 25px;
        overflow: hidden;
        vertical-align: top;
    }
    .SheetViewCellContent {
        height: 10px;
        max-height: 10px;
        padding: 8px 10px;
        overflow: hidden;
        white-space: pre-wrap;
        word-break: break-word;
        &:focus {
            box-shadow: inset 0 0 0 2px var(--button-bg-color);
        }
    }
    .SheetViewCellSelect {
        width: 100%;
        height: 100%;
        border: none;
        background: transparent;
        color: var(--text-color);
        font-size: 13px;
        padding: 0 8px;
        font-family: inherit;
        cursor: pointer;
        appearance: auto;
        &:focus {
            outline: none;
            box-shadow: inset 0 0 0 2px var(--button-bg-color);
        }
        &.is-hidden {
            visibility: hidden;
            pointer-events: none;
        }
    }
    .SheetViewCellCheckboxWrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        min-height: 26px;
        cursor: pointer;
    }
    .SheetViewCellCheckbox {
        width: 15px;
        height: 15px;
        margin: 0;
        cursor: pointer;
        accent-color: var(--button-bg-color);
        &:focus {
            outline: none;
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--button-bg-color) 40%, transparent);
        }
        &.is-hidden {
            visibility: hidden;
            pointer-events: none;
        }
    }
    .SheetViewCell.is-selected {
        background: rgba(56, 189, 248, 0.12);
        box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.5);
    }
    .SheetViewHeaderCell {
        &.is-selected {
            background: rgba(56, 189, 248, 0.18);
            border-bottom-color: rgba(56, 189, 248, 0.6);
        }
    }
    .SheetViewRowHeader {
        &.is-selected {
            background: rgba(56, 189, 248, 0.18);
        }
    }
    .SheetViewRow {
        &.is-selected .SheetViewCell {
            background: rgba(56, 189, 248, 0.18);
        }
    }
    .SheetViewCell {
        &[data-field='taskTitle'],
        &[data-field='subTaskTitle'],
        &[data-field='stepTitle'],
        &[data-field='detailTitle'] {
            font-weight: 600;
        }
        &[data-field='detailStatus'] {
            min-width: 140px;
        }
    }
    .SheetViewSheetsBar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 16px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--mobile-urlbar-offset, 0px) + var(--mobile-bottom-offset, 0px));
        background: var(--bg-color);
        border-top: 2px solid var(--border-color);
        position: sticky;
        bottom: 0;
        z-index: 5;
    }
    .SheetViewSheetsLabel {
        font-size: 12px;
        text-transform: uppercase;
        color: var(--unselected-text-color);
        letter-spacing: 0.04em;
    }
    .SheetViewSheets {
        display: flex;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .SheetViewSheetsTabs {
        display: flex;
        gap: 10px;
        padding-bottom: 10px;
        align-items: center;
        flex-wrap: nowrap;
    }
    .SheetViewSheetTab,
    .SheetViewSheetAdd {
        border: 1px solid var(--border-color);
        background: var(--button-bg-color);
        padding: 6px 14px;
        border-radius: 999px;
        font-size: 12px;
        cursor: pointer;
        white-space: nowrap;
        color: var(--text-color);
    }
    .SheetViewSheetHiddenToggle {
        border: 1px dashed var(--border-color);
        background: transparent;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 12px;
        cursor: pointer;
        white-space: nowrap;
        color: var(--unselected-text-color);
        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }
    .SheetViewSheetTab {
        &.is-active {
            background: var(--mainPageContent-bg-color);
            border-color: var(--border-color);
            font-weight: 600;
        }
        &.is-selected {
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35) inset;
        }
    }
    .SheetViewHiddenSheets {
        position: absolute;
        right: 16px;
        bottom: 52px;
        min-width: 220px;
        max-width: 320px;
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
        padding: 8px;
        display: none;
        flex-direction: column;
        gap: 6px;
        z-index: 20;
        &.is-open {
            display: flex;
        }
    }
    /* Menu de filtrage contextuel (style Excel) */
    .SheetViewFilterMenu {
        position: fixed;
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        min-width: 200px;
        max-height: 400px;
        display: flex;
        flex-direction: column;
    }
    .SheetViewFilterMenuTitle {
        padding: 10px 12px;
        border-bottom: 1px solid var(--border-color);
        font-weight: 600;
        font-size: 12px;
        color: var(--text-color);
        background: var(--mainPageContent-bg-color);
        border-radius: 6px 6px 0 0;
    }
    .SheetViewFilterMenuList {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    .SheetViewFilterMenuItem {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        font-size: 12px;
        cursor: pointer;
        border-bottom: 1px solid var(--border-color);
        &:last-child {
            border-bottom: none;
        }
        &:hover {
            background: var(--mainPageContent-bg-color);
        }
        & input[type='checkbox'] {
            cursor: pointer;
            accent-color: var(--button-bg-color);
        }
        & span {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    /* Rangées cachées par filtrage */
    .SheetViewRow {
        &.is-hidden {
            display: none;
        }
    }
    .SheetViewHiddenSheetItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 6px 8px;
        border-radius: 8px;
        background: var(--mainPageContent-bg-color);
        font-size: 12px;
    }
    .SheetViewHiddenSheetAction {
        border: 1px solid var(--border-color);
        background: var(--button-bg-color);
        color: var(--text-color);
        padding: 4px 8px;
        border-radius: 999px;
        font-size: 11px;
        cursor: pointer;
    }
    .SheetViewSheetMenu {
        position: fixed;
        display: none;
        flex-direction: column;
        gap: 4px;
        padding: 8px;
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
        z-index: 8;
        &.is-open {
            display: flex;
        }
    }
    .SheetViewSheetMenuItem {
        border: 1px solid transparent;
        background: transparent;
        padding: 6px 10px;
        text-align: left;
        color: var(--text-color);
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
        &:hover {
            background: var(--mainPageContent-bg-color);
            border-color: var(--border-color);
        }
    }
    .SheetViewContextMenu {
        position: fixed;
        display: none;
        flex-direction: column;
        gap: 4px;
        padding: 8px;
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
        z-index: 8;
        &.is-open {
            display: flex;
        }
    }
    .SheetViewContextItem {
        border: 1px solid transparent;
        background: transparent;
        padding: 6px 10px;
        text-align: left;
        color: var(--text-color);
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
        &:hover {
            background: var(--mainPageContent-bg-color);
            border-color: var(--border-color);
        }
    }
    @media (max-width: 1200px) {
        .SheetViewGrid {
            min-width: 900px;
        }
    }
    @media (min-width: 1920px) {
        .SheetViewTopBar {
            padding: 20px 32px;
        }
        .SheetViewRibbon {
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        }
        .SheetViewGrid {
            --sheet-col-width: 180px;
            --sheet-row-header-width: 72px;
        }
    }
    @media (min-width: 1600px) and (max-width: 1919.98px) {
        .SheetViewTopBar {
            padding: 18px 28px;
        }
        .SheetViewGrid {
            --sheet-col-width: 170px;
            --sheet-row-header-width: 68px;
        }
    }
    @media (min-width: 1080px) and (max-width: 1599.98px) {
        .SheetViewRibbon {
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        }
        .SheetViewGrid {
            --sheet-col-width: 150px;
            --sheet-row-header-width: 64px;
        }
    }
    @media (min-width: 600px) and (max-width: 1079.98px) {
        .SheetViewTopBar {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            padding: 14px 18px;
        }
        .SheetViewQuickActions {
            flex-wrap: wrap;
        }
        .SheetViewMenuBar {
            flex-wrap: wrap;
        }
        .SheetViewRibbon {
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            padding: 14px 16px;
        }
        .SheetViewGrid {
            --sheet-col-width: 60px;
            --sheet-row-header-width: 20px;
        }
    }
    @media (max-width: 599.98px) {
        .SheetViewTopBar {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            padding: 12px 14px;
        }
        .SheetViewBrand {
            flex-wrap: wrap;
        }
        .SheetViewQuickActions {
            flex-wrap: wrap;
            gap: 6px;
        }
        .SheetViewMenuBar {
            flex-wrap: wrap;
            padding: 6px 12px;
        }
        .SheetViewMenuTab {
            padding: 6px 10px;
        }
        .SheetViewRibbon {
            grid-template-columns: 1fr;
            gap: 12px;
            padding: 12px 12px;
            display: none;
        }
        .SheetViewFormulaBar {
            grid-template-columns: 64px 32px 1fr;
            padding: 8px 12px;
        }
        .SheetViewGrid {
            --sheet-col-width: 110px;
            --sheet-row-header-width: 54px;
        }
        .SheetViewSheetsBar {
            flex-wrap: wrap;
            gap: 8px;
        }
        .SheetViewHiddenSheets {
            right: 12px;
            bottom: 72px;
            max-width: 260px;
        }
    }
}