body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
    line-height: 1.6;
    color: #333;
}

.container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 450px;
    text-align: center;
    box-sizing: border-box;
    margin: 20px;
}

h1, h2 {
    margin-bottom: 25px;
    color: #333;
    font-weight: bold;
}

h3 {
    margin-top: 20px;
    margin-bottom: 15px;
    color: #555;
}

label {
    display: block;
    text-align: left;
    margin-bottom: 8px;
    color: #555;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select { /* 添加 select 類型 */
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1em;
    /* 針對 select 的一些默認樣式調整 */
    appearance: none; /* 移除默認箭頭 */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2C197.9a14.6%2C14.6%2C0%2C0%2C1-21%2C0L146.2%2C89.3%2C26.4%2C197.9a14.6%2C14.6%2C0%2C0%2C1-21%2C0%2C14.6%2C14.6%2C0%2C0%2C1%2C0-21l130.4-130.7a14.6%2C14.6%2C0%2C0%2C1%2C21%2C0L287%2C176.9a14.6%2C14.6%2C0%2C0%2C1%2C0%2C21Z%22%2F%3E%3C%2Fsvg%3E'); /* 自定義箭頭 */
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 12px auto;
    padding-right: 30px; /* 為箭頭留出空間 */
}

/* 針對設定頁面的數字輸入框 (如果 style.css 用於 settings.php) */
.form-group input[type="number"] {
    width: auto;
    display: inline-block;
    margin-bottom: 0;
    margin-right: 5px;
}

button[type="submit"] {
    background-color: #87ceeb;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
    background-color: #5f9ea0;
}

a {
    color: #87ceeb;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #5f9ea0;
    text-decoration: underline;
}

p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1em;
}

ul {
    list-style: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 1em;
}

ul li {
     margin-bottom: 8px;
}

.warning {
    color: #ff6347;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* 老師儀表板的 MAC 列表樣式 */
.mac-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    text-align: left;
}

.mac-list li {
    background-color: #e0f7fa;
    border: 1px solid #b2ebf2;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex; /* 使用 Flex 佈局 */
    flex-wrap: wrap; /* 允許內容換行 */
    align-items: center; /* 垂直居中對齊 */
    gap: 8px; /* 調整項目之間的間距 */
    justify-content: space-between; /* 內容分散對齊 */ /* 這行放到最後 */
}

/* 調整 Flex 元素的基礎大小和收縮/生長比例 */
.mac-list li strong { /* MAC address */
    flex-basis: 140px; /* 設置基礎寬度 */
    flex-shrink: 0; /* 不縮小 */
    margin-right: 10px;
    color: #00796b;
    text-align: left;
}

.mac-category { /* New span for category */
    flex-basis: 80px; /* 設置基礎寬度 */
    flex-shrink: 0; /* 不縮小 */
    margin-right: 10px;
    color: #666;
    font-size: 0.9em;
    text-align: left;
}

.mac-status { /* Status span */
    flex-grow: 1; /* 盡可能佔據剩餘空間 */
    flex-shrink: 1; /* 允許縮小 */
    text-align: left;
    min-width: 80px; /* 狀態文本的最小寬度 */
}

.mac-actions { /* Actions span */
    flex-shrink: 0; /* 不縮小 */
    margin-left: auto; /* 將操作推到最右邊 */
    display: flex; /* 使按鈕在 actions 區域內也 Flex 排列 */
    gap: 5px; /* 按鈕間距 */
    align-items: center;
}

.mac-actions form {
    display: inline-block; /* 保留 inline-block 或根據需要調整 */
    margin: 0; /* 移除表單的默認外邊距 */
}

.mac-actions button {
   padding: 5px 10px;
   font-size: 0.9em;
   background-color: #ff8a80;
}

.mac-actions button:hover {
    background-color: #ff5252;
}


.logout-btn {
    display: inline-block;
    margin-bottom: 20px;
    background-color: #ffcc80;
    color: #333;
    padding: 8px 15px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.logout-btn:hover {
    background-color: #ffb74d;
    text-decoration: none;
}

/* 狀態顏色 CSS */
.status-pending { color: #ff9800; font-weight: bold; }
.status-approved { color: #4caf50; font-weight: bold; }
.status-active { color: #2196f3; font-weight: bold; }
.status-inactive { color: #9e9e9e; font-weight: bold; }
.status-rejected { color: #f44336; font-weight: bold; }
.status-expired { color: #795548; font-weight: bold; }
.status-deleted { color: #607d8b; font-weight: bold; }


/* --- 表格樣式 (用於 admin/users.php, admin/macs.php 如果仍使用 style.css) --- */
/* 注意：admin 後台表格已在 admin_style.css 中重新定義 */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.9em;
    margin-bottom: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

tbody tr:nth-child(even) {
   background-color: #f9f9f9;
}

td.actions {
    text-align: center;
    white-space: nowrap;
}
.actions form {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 3px;
}
.actions button {
    padding: 4px 8px;
    font-size: 0.85em;
    border-radius: 5px;
    cursor: pointer;
}
 /* 為不同操作按鈕設置顏色 */
button.approve-btn { background-color: #4CAF50; color: white; }
button.reject-btn { background-color: #f44336; color: white; }
button.delete-btn { background-color: #9e9e9e; color: white; }
button.activate-btn { background-color: #2196f3; color: white; }
button.deactivate-btn { background-color: #ff9800; color: white; }


/* --- 系統設定頁面的表單樣式 (如果 style.css 用於 settings.php) --- */
/* 注意：admin 後台表單已在 admin_style.css 中重新定義 */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.message {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    word-break: break-word;
}
.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}


/* --- 響應式設計調整 (針對手機等小螢幕) --- */

@media (max-width: 600px) {

    body {
        padding: 5px;
    }

    .container {
        padding: 10px;
        margin: 5px;
    }

    h1, h2 {
        margin-bottom: 10px;
        font-size: 1.3em;
    }
     h3 {
         margin-top: 15px;
         margin-bottom: 10px;
     }

    /* 調整表單元素和按鈕 */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select { /* 添加 select 類型 */
        padding: 8px;
        margin-bottom: 10px;
        font-size: 0.9em;
    }

     button[type="submit"] {
         padding: 8px 15px;
         font-size: 0.95em;
     }
     .logout-btn {
         padding: 6px 12px;
         font-size: 0.9em;
         margin-bottom: 15px;
     }


    /* 老師儀表板的 MAC 列表項調整 */
     .mac-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px; /* 減小間距 */
        padding: 10px;
     }

     .mac-list li strong { /* MAC address */
         width: auto; /* 小螢幕下寬度自適應 */
         flex-basis: auto; /* 移除基礎寬度 */
         margin-right: 0;
         margin-bottom: 5px;
         text-align: left;
     }

      .mac-category { /* New span for category */
         width: auto; /* 小螢幕下寬度自適應 */
         flex-basis: auto; /* 移除基礎寬度 */
         margin-right: 0;
         margin-bottom: 5px;
         text-align: left;
      }

     .mac-status { /* Status span */
         width: 100%; /* 狀態佔滿一行 */
         flex-grow: 0; /* 不生長 */
         flex-shrink: 1; /* 允許縮小 */
         text-align: left;
         margin-bottom: 5px; /* 添加下方間距 */
         min-width: auto; /* 移除最小寬度 */
     }

     .mac-actions { /* Actions span */
         width: 100%; /* 操作佔滿一行 */
         text-align: left;
         margin-left: 0;
         justify-content: flex-start; /* 按鈕靠左對齊 */
         gap: 5px; /* 按鈕間距 */
     }

     .mac-actions form {
         display: inline-block;
         margin: 0; /* 確保沒有外邊距 */
     }
     .mac-actions button {
          width: auto;
     }


    /* --- 響應式表格 (用於 admin/users.php, admin/macs.php 如果仍使用 style.css) --- */
    /* 注意：admin 後台表格已在 admin_style.css 中重新定義 */
    table {
        border: 0;
        margin-top: 15px;
    }

    table thead {
        display: none;
    }

    table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: #fff;
        padding: 10px;
    }
     tbody tr:nth-child(even) {
        background-color: #fff;
     }

    table td {
        display: block;
        border: 0;
        padding: 8px 0;
        text-align: right;
        position: relative;
        padding-left: 50%;
        word-break: break-word;
    }

    table td::before {
        content: attr(data-label);
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        text-align: left;
    }

    table td.actions {
         text-align: left;
         padding-left: 6px;
         padding-bottom: 0;
    }
       table td.actions form {
           display: inline-block;
           margin-right: 5px;
           margin-bottom: 5px;
       }
       table td.actions button {
           padding: 5px 10px;
           font-size: 0.9em;
       }


      /* 系統設定頁面的表單組調整 (如果 style.css 用於 settings.php) */
     .form-group {
         margin-bottom: 15px;
     }
     .form-group label {
         margin-bottom: 5px;
     }
      .form-group input[type="number"] {
          width: auto;
          margin-right: 5px;
      }

      .message {
          padding: 10px;
          margin-bottom: 15px;
      }


}