/* Zeloss+2 管理画面の共通フォーム / テーブルスタイル
 *
 * 各ページのインライン <style> から共通部分をここに移して統一する。
 * 並び替えボタン (.btn-up / .btn-down) もここに集約。
 */

/* ========= フォーム ========= */
/* 縦並びの key-value 形式テーブル (左に th, 右に td: 入力欄) */
.form-table {
    width: 100%;
    max-width: 880px;
    background: #fff;
    border-collapse: collapse;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    border-radius: 6px;
    overflow: hidden;
}
.form-table th,
.form-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #eef0f3;
    vertical-align: middle;
    text-align: left;
}
.form-table tr:last-child > th,
.form-table tr:last-child > td {
    border-bottom: none;
}
.form-table th {
    background: #f2f6fa;
    color: #2c3e50;
    width: 22%;
    font-weight: 600;
    font-size: 13px;
}
.form-table td.action {
    text-align: center;
    padding: 14px;
    background: #fafbfc;
}
.form-table .required,
.form-table .req {
    color: #e74c3c;
    margin-left: 2px;
}
.form-table .hint {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

.form-table input[type="text"],
.form-table input[type="number"],
.form-table input[type="email"],
.form-table input[type="password"],
.form-table input[type="date"],
.form-table input[type="time"],
.form-table textarea,
.form-table select {
    padding: 6px 10px;
    border: 1px solid #cdd5dd;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    box-sizing: border-box;
}
.form-table input[type="text"],
.form-table input[type="email"],
.form-table input[type="password"],
.form-table textarea {
    width: 100%;
    max-width: 480px;
}
.form-table input[type="number"] {
    width: 8em;
}
.form-table input[type="date"],
.form-table input[type="time"] {
    width: 11em;
}
.form-table select {
    min-width: 8em;
    max-width: 100%;
}
.form-table input:focus,
.form-table textarea:focus,
.form-table select:focus {
    outline: none;
    border-color: #0a3d62;
    box-shadow: 0 0 0 2px rgba(10, 61, 98, .15);
}

/* ボタン共通 */
.btn-submit,
.btn-cancel,
.btn-add,
.btn-link,
.btn-add-row,
.btn-edit,
.btn-delete,
.btn-delete-link,
.btn-csv,
.btn-csv-import {
    display: inline-block;
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 4px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    line-height: 1.4;
}
.btn-submit,
.btn-add,
.btn-add-row {
    background: #16a085;
    color: #fff;
}
.btn-submit:hover,
.btn-add:hover,
.btn-add-row:hover { background: #138a72; }
.btn-cancel,
.btn-link { background: #95a5a6; color: #fff; }
.btn-cancel:hover,
.btn-link:hover { background: #7f8c8d; }
.btn-edit { background: #3498db; color: #fff; font-size: 12px; padding: 2px 10px; }
.btn-edit:hover { background: #2980b9; }
.btn-delete,
.btn-delete-link { background: #e74c3c; color: #fff; font-size: 12px; padding: 2px 10px; }
.btn-delete:hover,
.btn-delete-link:hover { background: #c0392b; }
.btn-csv,
.btn-csv-import { background: #27ae60; color: #fff; }
.btn-csv:hover,
.btn-csv-import:hover { background: #1f8b4d; }
.btn-submit { padding: 8px 28px; font-size: 14px; }

/* ========= 動的列 (パターン編集など) のセル内入力欄 =========
 * 細いセルでも overflow しないよう width:100% + box-sizing で固定。 */
.columns-table {
    width: 100%;
    max-width: 1100px;
    border-collapse: collapse;
    background: #fff;
    margin-bottom: 8px;
    table-layout: fixed;
}
.columns-table th {
    background: #eef2f6;
    padding: 6px 8px;
    font-size: 12px;
    text-align: left;
}
.columns-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #eef0f3;
}
.columns-table td.row-no {
    text-align: center;
    color: #888;
}
.columns-table input,
.columns-table select {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #cdd5dd;
    border-radius: 3px;
    font-size: 12px;
    box-sizing: border-box;
}
.columns-table .btn-remove,
.columns-table .btn-row-up,
.columns-table .btn-row-down {
    padding: 2px 8px;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    margin-right: 2px;
}
.columns-table .btn-row-up,
.columns-table .btn-row-down { background: #7f8c8d; }
.columns-table .btn-row-up:hover,
.columns-table .btn-row-down:hover { background: #5d6d7e; }
.columns-table .btn-remove { background: #e74c3c; }
.columns-table .btn-remove:hover { background: #c0392b; }

/* ========= 検索ボックス (一覧画面の上部フィルタ) =========
 * 各 index ページの .search_box / .search-box でメンバー選択や年月入力に
 * 共通スタイルを当てる。インライン flex は各ページ側で指定済み。 */
.search_box,
.search-box {
    background: #fff;
    padding: 14px 16px;
    border-radius: 6px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.search_box form,
.search-box form {
    display: flex;
    gap: 14px;
    align-items: end;
    flex-wrap: wrap;
}
.search_box .input,
.search-box .input {
    display: flex;
    flex-direction: column;
}
.search_box label,
.search-box label {
    font-size: 12px;
    color: #555;
    margin-bottom: 2px;
}
.search_box input[type="text"],
.search_box input[type="number"],
.search_box input[type="date"],
.search_box select,
.search-box input[type="text"],
.search-box input[type="number"],
.search-box input[type="date"],
.search-box select {
    padding: 6px 10px;
    border: 1px solid #cdd5dd;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    min-width: 160px;
}
.search_box select,
.search-box select { min-width: 180px; }
.search_box input:focus,
.search_box select:focus,
.search-box input:focus,
.search-box select:focus {
    outline: none;
    border-color: #0a3d62;
    box-shadow: 0 0 0 2px rgba(10, 61, 98, .15);
}
.search_box button[type="submit"],
.search-box button[type="submit"] {
    padding: 6px 16px;
    background: #0a3d62;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.search_box button[type="submit"]:hover,
.search-box button[type="submit"]:hover { background: #082c46; }

/* ========= 並び替えボタン (index ページ用) ========= */
.btn-up,
.btn-down {
    display: inline-block;
    padding: 2px 8px;
    background: #7f8c8d;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    text-decoration: none;
    margin-right: 2px;
}
.btn-up:hover,
.btn-down:hover { background: #5d6d7e; }
.btn-up.disabled,
.btn-down.disabled {
    background: #d5d9dc;
    cursor: not-allowed;
    pointer-events: none;
}
.sort-cell { white-space: nowrap; text-align: center; }