/* ==========================================
   table.css
   投稿一覧（list.html）
   Version 1.0.1
   列幅最適化版
========================================== */

.table-wrapper{
    width:100%;
    overflow-x:auto;
    border:1px solid #ddd;
    border-radius:12px;
    background:#fff;
}

#resultTable{
    width:100%;
    min-width:1600px;
    border-collapse:collapse;
    table-layout:auto;
    font-size:14px;
}

#resultTable thead th{
    position:sticky;
    top:0;
    background:#f4f6f8;
    color:#333;
    font-weight:600;
    text-align:center;
    padding:12px 8px;
    border-bottom:2px solid #d9d9d9;
    white-space:nowrap;
    z-index:2;
}

#resultTable td{
    padding:8px;
    border-bottom:1px solid #ececec;
    text-align:center;
    vertical-align:middle;
}

#resultTable tbody tr{
    transition:background .18s ease;
}

#resultTable tbody tr:hover{
    background:#eef7ff;
}

#resultTable img{
    width:100px;
    height:auto;
    display:block;
    margin:auto;
    border:1px solid #ddd;
    border-radius:8px;
}

/* 編集欄 */

.edit-lake,
.edit-location{
    width:120px;
    padding:6px 8px;
    box-sizing:border-box;
}

.edit-date{
    width:120px;
    padding:6px 8px;
    box-sizing:border-box;
}

.edit-memo{
    width:160px;
    min-height:70px;
    padding:8px;
    resize:vertical;
    box-sizing:border-box;
    font-family:inherit;
}

.save-btn{
    min-width:74px;
}

/* ---------- 編集欄共通 ---------- */

.edit-lake,

.edit-location,

.edit-date{
    width:120px;
    padding:6px 8px;
    box-sizing:border-box;
}

/* ---------- 検索欄共通 ---------- */

.search-row input[type="text"]{
    width:120px;
    height:36px;
    padding:6px 8px;
    box-sizing:border-box;
}

.search-row input[type="date"]{
    width:120px;
    height:36px;
    padding:6px 8px;
    box-sizing:border-box;
}

/* ----------列幅---------- */

.filename-cell{
    width:120px;
    max-width:120px;
    white-space:normal;
    word-break:break-all;
    line-height:1.3;
    text-align:left;
}

.datetime-cell{
    min-width:135px;
    white-space:normal;
    word-break:break-word;
    line-height:1.3;
}

.coordinate-cell{
    min-width:95px;
    white-space:normal;
    word-break:break-all;
    line-height:1.25;
}

/* 数値列は右寄せ */
.numeric-cell{
    text-align:right;
    white-space:nowrap;
}

/* ==========================================
   ソート可能ヘッダー
========================================== */

.sortable{

    cursor:pointer;

    user-select:none;

    transition:.2s;

}

#resultTable thead th.sortable:hover{

    background:#dfefff;

}

#resultTable thead th.sortable.sorted{

    background:#dbeeff;
    color:#0056b3;
    font-weight:bold;

}

/* ==========================
   Graph
========================== */

.graph-checks{

    display:flex;

    flex-direction:column;

    gap:8px;

}

#graphArea{

    margin-top:18px;

}

.chart-block{

    display:none;

    margin-bottom:22px;

}

.chart-block:last-child{

    margin-bottom:0;

}

/* ==========================================
   利用者管理テーブル
========================================== */

#userTable{

    width:100%;
    min-width:950px;

    border-collapse:collapse;

    table-layout:auto;

    font-size:14px;

}

#userTable thead th{

    position:sticky;

    top:0;

    background:#f4f6f8;

    color:#333;

    font-weight:600;

    text-align:center;

    padding:12px 8px;

    border-bottom:2px solid #d9d9d9;

    white-space:nowrap;

    z-index:2;

}

#userTable td{

    padding:8px;

    border-bottom:1px solid #ececec;

    text-align:center;

    vertical-align:middle;

}

#userTable tbody tr{

    transition:background .18s ease;

}

#userTable tbody tr:hover{

    background:#eef7ff;

}

/* ---------- 利用者管理 列幅 ---------- */

.col-no{

    width:60px;

}

.col-email{

    width:260px;

}

.col-password{

    width:180px;

}

.col-name{

    width:200px;

}

.col-action{

    width:180px;

}

/* 操作列は改行しない */
#userTable td:last-child{

    white-space: nowrap;

}

/* モバイル */

@media (max-width:768px){

    .table-wrapper{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    #resultTable{
        min-width:1500px;
        font-size:13px;
    }

    #resultTable th,
    #resultTable td{
        padding:8px 6px;
    }

    #resultTable img{
        width:90px;
    }

    .edit-memo{
        width:150px;
    }

    .filename-cell{
        width:110px;
        max-width:110px;
    }

    .datetime-cell{
        width:100px;
        max-width:100px;
    }

    .coordinate-cell{
        width:75px;
        max-width:75px;
    }

    .edit-lake,
    .edit-location,
    .edit-date,

    #searchLake,
    #searchLocation,
    #searchEmail,
    #searchDateFrom,
    #searchDateTo{
        width:150px;
        padding:6px 8px;
        box-sizing:border-box;
    }

    #userTable{

        min-width:900px;

        font-size:13px;

    }

    #userTable th,
    #userTable td{

        padding:8px 6px;

    }

}