/* * 檔案名稱：sheet_style.css
 * 說明：用於 sheet.php 頁面的響應式樣式
 */

/* --- 1. 基本響應式佈局 --- */
.sheet-container {
    display: flex; /* 啟用 Flexbox 佈局 */
    max-width: 1200px; /* 內容最大寬度 */
    margin: 10px auto; /* 頁面置中 */
    padding: 0 15px; /* 頁面左右留白 */
    box-sizing: border-box;
}
.sheet-left-menu {
    flex: 0 0 180px; /* 左側選單固定寬度 180px */
    margin-right: 20px;
}
.sheet-main-content {
    flex: 1; /* 主內容區佔據剩餘所有寬度 */
    min-width: 0; /* 關鍵：防止內容溢出 */
}

/* --- 2. 子選單 (來自 menu.inc.php) --- */
.page-submenu {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 8px 10px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.page-submenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* 水平排列 */
    flex-wrap: wrap; /* 自動換行 */
    gap: 5px 15px; /* 行間距 和 項目間距 */
    justify-content: flex-start;
}
.page-submenu a {
    text-decoration: none;
    color: #007bff;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: 3px;
    white-space: nowrap;
}
.page-submenu a:hover {
    color: #0056b3;
    background-color: #e9ecef;
    border-color: #ced4da;
	font-size: inherit;             /* 4. 保持字體大小不變 */
}

/* --- 3. 通用表格樣式 (sheet-table) --- */
.sheet-table, #sheet-item-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    table-layout: auto;
}
.sheet-table th, .sheet-table td,
#sheet-item-table th, #sheet-item-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.sheet-table th, #sheet-item-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    white-space: nowrap;
}

/* --- 4. 工時列表 (sheet_Item.inc.php) --- */
#sheet-item-table th { text-align: center; }
#sheet-item-table th.th-item-work { text-align: left; }
#sheet-item-table .th-item-num { min-width: 40px; }
#sheet-item-table .th-item-date { min-width: 120px; }
#sheet-item-table .th-item-time { min-width: 70px; }
#sheet-item-table .th-item-hours { min-width: 45px; }
#sheet-item-table .th-item-action { min-width: 50px; }
#sheet-item-table .row-odd td { background-color: #ffffff; }
#sheet-item-table .row-even td { background-color: #f9f9f9; }
#sheet-item-table .sheet-notes { font-size: 0.9em; color: #555; padding: 15px; border-top: 2px solid #ccc; }
#sheet-item-table .sheet-notes ul { margin-top: 5px; margin-bottom: 0; padding-left: 20px; list-style: disc; }
#sheet-item-table .sheet-notes li { margin-bottom: 3px; }

/* --- 5. 表單 (sheet_Form.inc.php) --- */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; }
.form-input, .form-input-static {
    display: block; width: 100%; padding: 8px; border: 1px solid #ccc;
    border-radius: 4px; box-sizing: border-box; font-size: 1em;
}
.form-input-static { background-color: #f8f9fa; }
select.form-input { height: 38px; width: auto; max-width: 100%; }
input.date-input, input.time-input { width: auto; max-width: 180px; }
.date-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.date-nav span { color: #555; }
.time-input-group { display: flex; gap: 20px; flex-wrap: wrap; }
.time-input-group > div { flex: 1; min-width: 180px; }
.type-radios { margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px; }
.type-radios label.radio-label { display: inline-block; font-weight: normal; margin-right: 15px; margin-left: 3px; }
.type-radios input[type="radio"] { width: auto; vertical-align: middle; }
.radio-option { white-space: nowrap; }
.form-actions { margin-top: 25px; padding-top: 15px; border-top: 1px solid #eee; }
.form-actions button, .form-actions input[type="button"] { width: auto; margin-right: 10px; }
.submit-button { border: 0; background: none; padding: 0; cursor: pointer; }
.submit-button img { height: 24px; vertical-align: middle;