/* Оформление сетки матрицы, этажей и переключателей режимов */

#componentMatrix {
    position: absolute;
    inset: 0;
}

#componentMatrixScrollDiv {
    position: absolute;

    top: 8.214vh;
    left: 4.884vh;

    width: calc(100% - 7.104vh);
    height: calc(100% - 8.214vh - 3.552vh);

    overflow-x: auto;
    overflow-y: auto;

    scrollbar-color: #3F4246 #292C30;
    scrollbar-width: 1;
}

#matrixGrid .matrix-cell {
    cursor: pointer;
}

.comp-matrix-no-projects-text-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.comp-matrix-no-projects-text-container span {
    font-weight: 500;
    font-size: 1.776vh;
    line-height: 2.664vh;
    color: #A9ABAC;
}

.comp-matrix-no-access {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.comp-matrix-no-access__text {
    font-weight: 500;
    font-size: 1.776vh;
    line-height: 2.664vh;
    color: #FFA500;
    text-align: center;
    justify-content: center;
}

.comp-matrix-top-row {
    box-sizing: border-box;
    border-radius: 0.444vh;
    border: var(--app-border-width) solid rgba(247, 241, 236, 0.08);
    color: #D0D0D1;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 1.554vh;
    line-height: 2.664vh;
}

.comp-matrix-top-row--mop {
    letter-spacing: 0;
    padding: 0.333vh 0.444vh;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comp-matrix-floor-chip {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.444vh;
    outline: var(--app-border-width) solid rgba(247, 241, 236, 0.08);
    outline-offset: calc(-1 * var(--app-border-width));
    color: #D0D0D1;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 1.554vh;
    line-height: 2.664vh;
}

.comp-matrix-floor-chip--mop-empty {
    border-radius: 0.666vh;
}

.comp-matrix-floor-gap {
    box-sizing: border-box;
    border-radius: 0.444vh;
    outline: var(--app-border-width) solid rgba(247, 241, 236, 0.08);
    outline-offset: calc(-1 * var(--app-border-width));
}

/* Полоса сайдбара */
.comp-matrix-sidebar-backdrop {
    background-color: transparent;
}

.comp-matrix-work-label {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.333vh 0.444vh;
    border-radius: 0.444vh;
    outline: var(--app-border-width) solid rgba(247, 241, 236, 0.08);
    outline-offset: calc(-1 * var(--app-border-width));
    color: #D0D0D1;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 1.554vh;
    line-height: 1.998vh;
    cursor: default;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}

.comp-matrix-floor-bar {
    box-sizing: border-box;
    overflow: hidden;
    outline: var(--app-border-width) solid rgba(247, 241, 236, 0.08);
    outline-offset: calc(-1 * var(--app-border-width));
    border-radius: 0.444vh;
}

/* Полоса этажа без заливки прогресса */
.comp-matrix-floor-bar__fill {
    height: 100%;
    background-color: transparent;
}

#matrixNumbersCol {
    background-color: transparent;
}

#matrixNumbersRow {
    background-color: transparent;
}

.comp-matrix-mop-stack {
    overflow: visible;
}

.comp-matrix-mop-floor {
    overflow: visible;
}

.comp-matrix-mop-floor__numbers {
    background-color: transparent;
}

.comp-matrix-mop-floor__grid {
    box-sizing: border-box;
    overflow: visible;
}

.comp-matrix-mop-floor__empty {
    box-sizing: border-box;
    background-color: rgba(247, 241, 236, 0.06);
    outline: var(--app-border-width) solid rgba(247, 241, 236, 0.08);
    outline-offset: calc(-1 * var(--app-border-width));
    border-radius: 0.666vh;
}

.comp-matrix-mop-floor__remainder,
.comp-matrix-mop-floor__header-placeholder,
.comp-matrix-mop-floor__separator {
    box-sizing: border-box;
    border-radius: 0.444vh;
    outline: var(--app-border-width) solid rgba(247, 241, 236, 0.08);
    outline-offset: calc(-1 * var(--app-border-width));
    background-color: rgba(247, 241, 236, 0.06);
}

.comp-matrix-mop-floor__separator {
    overflow: hidden;
}

.comp-matrix-mop-floor__separator-fill {
    height: 100%;
    background-color: transparent;
}

.comp-matrix-card {
    background: rgba(247, 241, 236, 0.06);
    border-radius: 1.332vh;
    outline: var(--app-border-width) solid rgba(247, 241, 236, 0.08);
    outline-offset: calc(-1 * var(--app-border-width));
}

/* Статусы «Дефекты» и «Просрочка» в заголовке матрицы */
.comp-matrix-status-filters {
    position: absolute;
    top: 2.22vh;
    right: 2.22vh;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.888vh;
}

.comp-matrix-status-filters--hidden {
    display: none;
}

.comp-matrix-status-filter {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.888vh;
    padding: 0.888vh;
    background: transparent;
    border-radius: 0.888vh;
    outline: none;
    cursor: pointer;
    user-select: none;
}

.comp-matrix-status-filter__radio {
    flex-shrink: 0;
    width: 1.776vh;
    height: 1.776vh;
}

.comp-matrix-status-filter--defects .comp-matrix-status-filter__ring {
    stroke: #F2A40E;
}

.comp-matrix-status-filter--overdue .comp-matrix-status-filter__ring {
    stroke: #E5524C;
}

.comp-matrix-status-filter--defects .comp-matrix-status-filter__dot {
    fill: #F2A40E;
}

.comp-matrix-status-filter--overdue .comp-matrix-status-filter__dot {
    fill: #E5524C;
}

.comp-matrix-status-filter:not(.is-checked) .comp-matrix-status-filter__dot {
    display: none;
}

.comp-matrix-status-filter__label {
    color: #D0D0D1;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 1.554vh;
    line-height: 1.998vh;
}

.comp-matrix-status-filter--defects .comp-matrix-status-filter__label {
    width: 7.548vh;
}

.comp-matrix-card--mode-tabs > .grid-header {
    display: none;
}

.comp-matrix-mode-tabs {
    position: absolute;
    top: 2.22vh;
    left: 4.884vh;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 0.888vh;
}

.comp-matrix-mode-tab {
    appearance: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.888vh 1.332vh;
    border: 0;
    overflow: hidden;
    border-radius: 5.328vh;
    outline: none;
    background: transparent;
    color: #D0D0D1;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 1.554vh;
    line-height: 1.998vh;
    cursor: pointer;
    user-select: none;
}

.comp-matrix-mode-tab--active {
    color: #D0D0D1;
    outline: var(--app-border-width) solid rgba(247, 241, 236, 0.08);
    outline-offset: calc(-1 * var(--app-border-width));
    background: rgba(247, 241, 236, 0.06);
}

.comp-matrix-mode-tab--disabled {
    color: #7B8087;
    cursor: default;
}