/** font */

@font-face {
    font-family: "Orbitron";
    src: url("/font/Orbitron-Regular.ttf");
}

@font-face {
    font-family: "Edu Australia";
    src: url("/font/EduAUVICWANTGuides-Regular.ttf");
}

@font-face {
    font-family: "Fredoka";
    src: url("/font/Fredoka-Regular.ttf");
}

@font-face {
    font-family: "Exo2";
    src: url("/font/Exo2-Regular.ttf");
}

@font-face {
    font-family: "NotoSansTC";
    src: url("/font/NotoSansTC-Regular.ttf");
}

@font-face {
    font-family: "Comfortaa";
    src: url("/font/Comfortaa-Regular.ttf");
}

@font-face {
    font-family: "ComfortaaBold";
    src: url("/font/Comfortaa-Bold.ttf");
}


/** bootstrap */
.table {
    --bs-table-hover-bg: #ffc987;
    --bs-table-hover-color: #000;
}

.table-orange {
    --bs-table-bg: #ff8f00; /* 主背景：亮橘 */
    --bs-table-striped-bg: #ff9800; /* 條紋：中橘 */
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #ef6c00; /* 點選行：深橘 */
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #ffa726; /* 滑過行：淺橘 */
    --bs-table-hover-color: #fff;
    color: #fff; /* 文字白色 */
    border-color: #d35400; /* 邊框橘紅 */
    text-shadow: 1px 1px 2px rgba(0,0,0,.4); /* 柔和陰影，避免太硬 */
}

    /* 表頭再強化 (額外加) */
    .table-orange thead th {
        background: linear-gradient(135deg, #ff9800, #ef6c00);
        color: #fff;
        font-weight: 600;
        text-shadow: 1px 1px 2px rgba(0,0,0,.6);
    }

/* 基本橘色背景 (漸層+陰影) */
.bg-orange {
    background: linear-gradient(135deg, #ff8800, #ff6f00);
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

    /* 表格標題用 */
    .bg-orange th {
        background: linear-gradient(135deg, #ff9800, #e65100);
        color: #fff;
        font-weight: 600;
        text-align: center;
    }

/* 可選：hover 效果 */
.bg-orange-hover:hover {
    background: linear-gradient(135deg, #ffa733, #ff6f00);
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
    transition: all 0.3s ease;
}


.table-xs > :not(caption) > * > * {
    padding: 0.1rem 0.1rem;
    font-size: 0.9em
}

.btn-outline-orange {
    color: #ff7a08;
    border-color: #ec8f3f;
}

    .btn-outline-orange:hover {
        color: #fff;
        background-color: #ff7a08;
        border-color: #ec8f3f;
    }

.btn-orange {
    color: #fff;
    background-color: #ff7a08;
    border-color: #ec8f3f;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.toggle {
    border: 1px solid #acacac !important;
}

#main_area {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    padding: 0.2em
}

@media only screen and (max-width: 600px) {
    #main_area {
        font-size: 70% !important;
    }
}

#btn-filter-position {
    overflow-y:auto;
    height:400px;
}



/* 自訂：性別色條寬度（要變粗細改這裡就好） */
:root {
    --gender-bar-w: 6px;
}

/* 列維持預設白底/條紋，不要改 tr 的背景 */
.gender-m, .gender-f {
    background: transparent !important;
}

/* 第一格掛色條：不影響整列 */
.table tbody tr.gender-m td:first-child,
.table tbody tr.gender-f td:first-child {
    position: relative; /* 給 ::before 定位用 */
    /* 不動 padding，維持原本 table-sm 的緊湊度 */
}

    /* 色條本體 */
    .table tbody tr.gender-m td:first-child::before,
    .table tbody tr.gender-f td:first-child::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--gender-bar-w);
        border-radius: 3px; /* 圓角更細緻 */
        pointer-events: none; /* 避免擋到點擊 */
        z-index: 1; /* 在文字底下也沒關係，保守值 */
    }

/* 男女列基底：保持白色，不要再動 tr 背景 */
.gender-m td:first-child,
.gender-f td:first-child {
    position: relative;
}

    /* 色條本體 */
    .gender-m td:first-child::before,
    .gender-f td:first-child::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        border-radius: 3px;
        pointer-events: none;
    }

    /* 男生：藍色條 */
    .gender-m td:first-child::before {
        background: linear-gradient(180deg, #64b5f6, #1976d2);
    }

    /* 女生：粉紅條 */
    .gender-f td:first-child::before {
        background: linear-gradient(180deg, #f48fb1, #c2185b);
    }

/* 可選：滑過時整列微亮，跟 Bootstrap 的 hover 語彙一致 */
.table-hover > tbody > tr.gender-m:hover > *,
.table-hover > tbody > tr.gender-f:hover > * {
    background-color: #f8f9fa; /* 很淺的灰 */
}


/* 綠色提示列 */
.hint-green td:first-child {
    position: relative;
    padding-left: 12px; /* 預留空間避免文字被色條壓住 */
}

    .hint-green td:first-child::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px; /* 粗條寬度 */
        border-radius: 3px;
        background: linear-gradient(180deg, #81c784, #388e3c); /* 淺綠 → 深綠 */
    }

/* 橘色提示列 */
.hint-orange td:first-child {
    position: relative;
    padding-left: 12px;
}

    .hint-orange td:first-child::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        border-radius: 3px;
        background: linear-gradient(180deg, #ffb74d, #f57c00); /* 淺橘 → 深橘 */
    }