/* 基本表格樣式 */
table {
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: 1rem; /* 使用相對單位 */
}

table th, table td {
    border: 1px solid #ddd;
    padding: 0.625rem; /* 10px */
    text-align: center;      /* 水平置中 */
    vertical-align: middle;  /* 垂直置中 */
    word-wrap: break-word;   /* 強制換行 */
    white-space: normal;     /* 允許換行 */
    box-sizing: border-box;  /* 確保padding不會影響寬度 */
}

table th {
    background-color: #f4f4f4;
    font-size: 1.125rem; /* 18px */
}

table th:nth-child(1), table td:nth-child(1) { 
    width: 15%; /* 分類欄位 */
}

table th:nth-child(2), table td:nth-child(2) { 
    width: 15%; /* 發佈日期欄位 */
}

table th:nth-child(3), table td:nth-child(3) { 
    width: 20%; /* 發佈人欄位 */
}

table th:nth-child(4), table td:nth-child(4) { 
    width: 50%; /* 標題欄位 */
}

/* 分頁按鈕樣式 */
.pagination {
    margin-top: 1.25rem; /* 20px */
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding: 0;
}

.pagination li {
    margin: 0 0.3125rem; /* 5px */
}

.pagination li a {
    padding: 0.625rem 0.9375rem; /* 10px 15px */
    background-color: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 0.3125rem; /* 5px */
    font-size: 1rem; /* 16px */
    transition: background-color 0.3s ease;
}

.pagination li a:hover {
    background-color: #2980b9;
}

/* 公告分類樣式 */
.category {
    padding: 0.3125rem 0.625rem; /* 5px 10px */
    border-radius: 0.9375rem; /* 15px */
    color: #fff;
    font-weight: bold;
    font-size: 0.875rem; /* 14px */
}

.category-important {
    background-color: rgba(248, 38, 38, 0.7); /* 紅色透明 */
}

.category-eehpc {
    background-color: rgba(0, 128, 0, 0.7); /* 綠色透明 */
}

.category-adfp-cloud-2 {
    background-color: rgba(0, 0, 255, 0.7); /* 藍色透明 */
}

.category-adfp-cloud-3 {
    background-color: rgba(128, 0, 128, 0.7); /* 紫色透明 */
}

.category-ed415 {
    background-color: rgba(165, 42, 42, 0.7); /* 咖啡色透明 */
}

.category-recruit {
    background-color: rgba(255, 165, 0, 0.7); /* 橘色透明 */
}

.category-general {
    background-color: rgba(128, 128, 128, 0.7); /* 灰色透明 */
}

/* 響應式設計 */

/* 大型桌面設備 (1200px 以上) */
@media screen and (min-width: 1200px) {
    table {
        font-size: 1rem; /* 16px */
    }

    .pagination li a {
        font-size: 1rem; /* 16px */
    }

    .category {
        font-size: 0.875rem; /* 14px */
    }
}

/* 中型桌面和平板設備 (992px - 1199px) */
@media screen and (max-width: 1199px) and (min-width: 992px) {
    table {
        width: 95%;
        font-size: 0.95rem; /* 15.2px */
    }

    table th, table td {
        padding: 0.5rem; /* 8px */
    }

    table th {
        font-size: 1rem; /* 16px */
    }

    .pagination li a {
        padding: 0.5rem 0.75rem; /* 8px 12px */
        font-size: 0.95rem; /* 15.2px */
    }

    .category {
        padding: 0.25rem 0.5rem; /* 4px 8px */
        font-size: 0.8rem; /* 12.8px */
    }
}

/* 小型桌面和大型平板設備 (768px - 991px) */
@media screen and (max-width: 991px) and (min-width: 768px) {
    table {
        width: 100%;
        font-size: 0.9rem; /* 14.4px */
    }

    table th, table td {
        padding: 0.375rem; /* 6px */
    }

    table th {
        font-size: 1rem; /* 16px */
    }

    .pagination li a {
        padding: 0.5rem 0.75rem; /* 8px 12px */
        font-size: 0.9rem; /* 14.4px */
    }

    .category {
        padding: 0.25rem 0.5rem; /* 4px 8px */
        font-size: 0.8rem; /* 12.8px */
    }
}

/* 小螢幕設備 (小於 768px) */
@media screen and (max-width: 767px) {
    /* 表格橫向滾動 */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        font-size: 0.875rem; /* 14px */
    }

    table th, table td {
        padding: 0.5rem; /* 8px */
    }

    table th {
        font-size: 0.95rem; /* 15.2px */
    }

    .pagination {
        flex-wrap: wrap;
    }

    .pagination li a {
        padding: 0.5rem 0.75rem; /* 8px 12px */
        font-size: 0.9rem; /* 14.4px */
    }

    /* 方法 1 和 2: 防止換行並縮小字體和內邊距 */
    .category {
        white-space: nowrap;         /* 防止換行 */
        overflow: hidden;            /* 隱藏溢出部分 */
        text-overflow: ellipsis;     /* 使用省略號表示溢出 */
        padding: 0.2rem 0.4rem;      /* 減小內邊距 */
        font-size: 0.7rem;           /* 減小字體大小 */
        max-width: 100px;            /* 設定最大寬度，根據需求調整 */
    }

    /* 方法 3: 使用圖示或顏色指示替代文字標籤 */
  


}

/* 超小螢幕設備 (小於 576px) */
@media screen and (max-width: 575px) {
    table {
        font-size: 0.8rem; /* 12.8px */
    }

    table th, table td {
        padding: 0.375rem; /* 6px */
    }

    table th {
        font-size: 0.9rem; /* 14.4px */
    }

    .pagination li a {
        padding: 0.4rem 0.6rem; /* 6.4px 9.6px */
        font-size: 0.8rem; /* 12.8px */
    }

    /* 方法 1 和 2: 防止換行並縮小字體和內邊距 */
    .category {
        white-space: nowrap;         /* 防止換行 */
        overflow: hidden;            /* 隱藏溢出部分 */
        text-overflow: ellipsis;     /* 使用省略號表示溢出 */
        padding: 0.2rem 0.4rem;      /* 減小內邊距 */
        font-size: 0.7rem;           /* 減小字體大小 */
        max-width: 90px;             /* 設定最大寬度，根據需求調整 */
    }
}