/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
html,
body,
#root,
#app,
app {
    height: 100%;
}

.colorWeak {
    filter: invert(80%);
}

.ant-layout {
    min-height: 100vh;
}

.ant-pro-sider-logo {
    height: 48px;
}

.ant-no-header-layout .ant-header {
    display: none !important;
}

@media (min-width: 1000px) {
    .ant-layout {
        background-image: url("/bgNormal.svg");
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: auto;
    }
}

canvas {
    display: block;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

ul,
ol {
    list-style: none;
}

h3 {
    font-weight: 700;
}

.ant-pro-basicLayout-content {
    margin: 5px 16px 5px 16px !important;
}

.ant-pro-global-footer {
    margin: 0px 0px 0px 0px !important;
}

a.newGreen {
    color: green;
    font-weight: bold;
}

a.newRed {
    color: red;
    font-weight: bold;
}

a.newDarkRed {
    color: DarkRed;
    font-weight: bold;
}

a.newLightCoral {
    color: LightCoral;
    font-weight: bold;
}

a.newOrange {
    color: Orange;
    font-weight: bold;
}

a.newBlue {
    color: Blue;
    font-weight: bold;
}

a.newDodgerBlue {
    color: DodgerBlue;
    font-weight: bold;
}

a.newDeepSkyBlue {
    color: DeepSkyBlue;
    font-weight: bold;
}

a.success {
    color: #2ed8b6;
    font-weight: bold;
}

a.delay {
    color: #FF5370;
    font-weight: bold;
}

a.plan {
    color: #4099ff;
    font-weight: bold;
}

@media (max-width: 480px) {
    .ant-table {
        width: 100%;
        overflow-x: auto;
    }

    .ant-table-thead > tr > th,
    .ant-table-tbody > tr > th,
    .ant-table-thead > tr > td,
    .ant-table-tbody > tr > td {
        white-space: pre;
    }

    .ant-table-thead > tr > th > span,
    .ant-table-tbody > tr > th > span,
    .ant-table-thead > tr > td > span,
    .ant-table-tbody > tr > td > span {
        display: block;
    }
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    body .ant-design-pro > .ant-layout {
        min-height: 100vh;
    }
}

.hover-effect:hover {
    color: #435a96;
    cursor: pointer;
}

.not-completed-column {
    background-color: #ff6b85 !important;
}

.completed-column-2 {
    background-color: #2ed8b6 !important;
}

.completed-late-column {
    background-color: #fec063 !important;
}

.completed-on-time-column {
    background-color: #59e0c5 !important;
}

.completed-ahead-column {
    background-color: #56acff !important;
}

.sub-title-table-header {
    font-size: smaller;
}

.ant-modal-body {
    padding: 8px 12px;
}

/* Legend styles */
.status-legend {
    display: flex;
    gap: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: inline-block;
}

.status-cell {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.left-col {
    width: 40px; /* đủ cho 3 số */
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #f0f0f0;
    font-size: 16px;
    font-weight: bold;
    padding: 4px 0;
}

.right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.right-col > div:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 0;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #f0f0f0;
}


.detail-slots {
    display: flex;
    width: 100%;
}

.detail-slot {
    flex: 1;
    text-align: center;
    padding: 4px 0;
    font-size: 13px;
    font-weight: bold;
    border-right: 1px solid #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bỏ border phải ở item cuối cùng */
.detail-slot:last-child {
    border-right: none;
}

.separator {
    color: #999;
}

.zero-value {
    color: #e0e0e0;
    font-size: 11px;
}

/* Status colors */
.not-completed-number {
    color: #e63946 !important;
}

.legend-color.not-completed-number {
    background-color: #e63946;
}

.completed-number {
    color: green !important;
}

.legend-color.completed-number {
    background-color: green;
}

.completed-late-number {
    color: orange !important;
}

.legend-color.completed-late-number {
    background-color: orange;
}

.completed-on-time-number {
    color: #168aad !important;
}

.legend-color.completed-on-time-number {
    background-color: #168aad;
}

.completed-ahead-number {
    color: #4361ee !important;
}

.legend-color.completed-ahead-number {
    background-color: #4361ee;
}