/* Import component styles */
/* @import "component/banner.css"; */


/* 強制表格容器永遠顯示橫向捲軸 */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 確保表格不會超出容器 */
.table {
    margin: 0;
    border-collapse: collapse;
    background-color: var(--color-bg);
}

.table th,
.table td {
    text-align: center;
    padding: var(--cell-padding) !important;
    font-size: var(--cell-font-size);
    min-width: var(--cell-min-width);
    height: var(--cell-height);
    vertical-align: middle;
    white-space: nowrap;
}

.period-cell {
    position: sticky;
    left: 0;
    background-color: var(--color-bg);
    z-index: 1;
    width: var(--period-cell-width) !important;
    min-width: var(--period-cell-width) !important;
    text-align: left !important;
    padding: var(--period-padding) !important;
    cursor: help;
}

.number-green {
    background-color: var(--color-normal) !important;
    color: var(--color-font);
}

.number-special {
    background-color: var(--color-special) !important;
    color: var(--color-special-text) !important;
    font-weight: bold;
}

.header-row {
    background-color: var(--color-header);
    color: var(--color-bg);
    position: sticky;
    top: 0;
    z-index: 2;
}

.header-row th {
    position: sticky;
    top: 0;
    background-color: var(--color-header);
}

.header-row th:first-child {
    left: 0;
    z-index: 3;
}

.table td {
    border: 1px solid var(--color-border);
}

.indicator {
    display: inline-block;
    width: var(--indicator-size);
    height: var(--indicator-size);
    line-height: var(--indicator-size);
    text-align: center;
    border-radius: 50%;
    margin: 0 var(--indicator-margin);
    font-size: var(--indicator-font-size);
    font-weight: bold;
    color: var(--color-indicator-text);
}

.big {
    background-color: var(--color-big);
}
.small {
    background-color: var(--color-small);
}
.odd {
    background-color: var(--color-odd);
}
.even {
    background-color: var(--color-even);
}

/* 適配不同螢幕大小 */
@media (max-width: 1400px) {
    :root {
        --base-cell-width: calc(1.1vw);
        --base-font-size: calc(1vw);
    }
}

@media (max-width: 1200px) {
    :root {
        --base-cell-width: calc(1.3vw);
        --base-font-size: calc(1.2vw);
    }
}

@media (max-width: 992px) {
    :root {
        --base-cell-width: calc(1.5vw);
        --base-font-size: calc(1.4vw);
    }
}

@media (max-width: 768px) {
    :root {
        --base-cell-width: calc(1.8vw);
        --base-font-size: calc(1.6vw);
    }
}

@media (max-width: 576px) {
    :root {
        --base-cell-width: calc(2vw);
        --base-font-size: calc(1.8vw);
    }
}

/* 連續未開出 */
.info-th th {
    background-color: #000000;
    color: #ffffff;
}

.info-low {
    background-color: #00a018 !important;
}

.info-medium {
    background-color: #0500a3 !important;
}

.info-high {
    background-color: #ff0000 !important;
}