/* ボタン配置（右寄せに） */
.table-btn-container {
    display: flex;
    justify-content: flex-end;
}

/* スクロールを制御するコンテナ */
.scroll-container {
    overflow-x: auto;
    border-radius: 8px;
    width: 100%;
    
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
}

/* テーブル本体 */
.data-table {
    /*width: 800x; /* 固定幅により、親コンテナが1548px未満の場合にスクロールが発生 */
    min-width: 100%;
    /*min-width: max-content;*/
    /*width: 100%;*/
    table-layout: fixed; /* カラムの幅を固定 */
    border-collapse: collapse; 
}

/* 2. セル (th, td) の共通スタイル */
.header-cell, .data-cell {
    padding: 6px 12px;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
}

/* 3. ヘッダー (<thead>) スタイル */
.header-cell {
    height: 40px;
    background: #FBFCFE; 
    border-bottom: 2px #DDE7EE solid; 
}

.header-content {
    color: #32383E; 
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    line-height: 21px;
}

.col-detail-link .header-content {
    text-align: center;
}

/* 4. データ行 (<tbody> tr) スタイル */
.data-row {
    background: white; 
    border-bottom: 1px #DDE7EE solid; 
    height: 40px; 
}
.data-row:last-child {
    border-bottom: none; 
}

.data-content {
    color: #323232; 
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    line-height: 24px;
  /*overflow: hidden;
    text-overflow: ellipsis;*/
    white-space: normal;
    overflow: hidden;
    word-break: break-all;
}

.data-content input[type="text"]{
    /* paddingとborderをwidthに含めるための設定（推奨） */
    box-sizing: border-box; 

    /* その他のスタイリング (画像に近付けるための例) */
    height: 32px; /* 高さ */
    padding: 6px 8px; /* 内側の余白 */
    border: 1px solid #DDE7EE; /* 枠線 */
    border-radius: 8px; /* 角丸 */
    box-shadow: 0px 1px 2px rgba(21, 21, 21, 0.08); /* 影 */
}

.data-content input[type="number"] {
    /* paddingとborderをwidthに含めるための設定（推奨） */
    box-sizing: border-box; 

    /* その他のスタイリング (画像に近付けるための例) */
    height: 32px; /* 高さ */
    padding: 6px 8px; /* 内側の余白 */
    border: 1px solid #DDE7EE; /* 枠線 */
    border-radius: 8px; /* 角丸 */
    box-shadow: 0px 1px 2px rgba(21, 21, 21, 0.08); /* 影 */
    
    text-align: right;
    width: 100% !important;
}

.col-no-wrap .data-content {
    /* 親要素の.data-cellではなく、折り返しを許可している.data-contentの設定を上書き */
    white-space: nowrap;
    overflow: hidden; 
    word-break: normal; 
}

/* 5. カラム幅の指定 (th, td に直接適用)  　幅は基本thに指定すること*/

/*基本幅*/

.header-cell, 
.data-cell {
    width: 160px ;
    min-width: 160px !important;
    max-width: 400px  !important; 
    box-sizing: border-box;
    overflow: hidden; /* セルからはみ出すのを防ぐ */
}
/*
.header-cell:not([class*="col-"]),
.data-cell:not([class*="col-"]) {
    width: auto !important;
    min-width: 160px !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
*/

/*項目別 番号・日付*/
.header-cell.col-no, .data-cell.col-no,.data-cell.col-fukuro-no,
.header-cell.col-daily, .data-cell.col-daily{
 width: 60px!important; 
 min-width: 60px !important; 
 max-width: 60px !important;
}
 
  /*項目別  img*/
.header-cell.col-img, .data-cell.img{
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    text-align: center;
}

 /*項目別  ボタン*/
.header-cell.col-btn,
.data-cell.col-sentaku-btn,.data-cell.col-action-btn,.data-cell.handle,
.header-cell.col-shoisai-btn, .data-cell.col-shoisai-btn,
.header-cell.check-box, .data-cell.check-box {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 100% !important;
    text-align: center;
}

 /*項目別 ステータス*/
.header-cell.col-status,.data-cell.col-status{ 
	width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
	text-align: center;
}

.header-cell.col-code,.header-cell.col-date,.header-cell.col-number{ 
	width: 180px !important;
	min-width: 120px !important; 
}

/*項目別 貸出品（日別表示対尾）*/
.header-cell.col-kasidasi-hin, .data-cell.col-kasidasi-hin{
 width: 160px !important; 
 min-width: 160px !important; 
 max-width: 200px !important;
}

/*データ表示形式 基本設定*/
td.data-cell .data-content {
    display: block !important;    /* インライン要素的な挙動を排除 */
    width: 100% !important;       /* 親(td)の幅（160px等）に強制的に合わせる */
    max-width: 100% !important;
    white-space: nowrap !important; /* 改行を禁止（これが無いとはみ出さない） */
    overflow: hidden !important;    /* はみ出した分を非表示にする */
    text-overflow: ellipsis !important; /* はみ出した末尾を ... に変える */
}
/* 「show-all」が指定された場合の解除設定 */
.header-cell.show-all, 
.header-cell.show-all .header-content,
.data-cell.show-all, 
.data-cell.show-all .data-content {
	min-width: 200px !important;
    white-space: normal !important;
    overflow: visible !important;   
    text-overflow: clip !important; 
}

/*データ表示形式 項目別*/
.data-cell.col-checkbox,
.data-cell.col-radio {
  align-items: center;
  gap: 10px;
}

.data-cell.col-sentaku-btn,
.data-cell.col-shoisai-btn, 
.data-cell.col-daily{
 text-align: center;
}

 /*項目別 チェックボックス*/
 .data-content .checkbox-group{
 	align-items: center;
 }

 /*項目別 お知らせ一覧*/
.header-cell.col-oshirase-date,.data-cell.col-oshirase-date {
	width: 120px !important;
	min-width: 120px !important;
    max-width: 120px !important;
}

.col-oshirase-title .data-content,
.col-oshirase-msg .data-content {
    white-space: normal !important;      /* 改行を許可する */
    text-overflow: clip !important;      /* 三点リーダーを表示しない */
    overflow: visible !important;        /* はみ出しを隠さず表示する */
    word-break: break-all !important;    /* 必要に応じて英数字も強制改行する */
    line-height: 1.4 !important;         /* 複数行になった際の行間を調整 */
}

/* ついでに、メッセージ等で内容が多い場合を考慮してセルの最大幅を解除 */
.header-cell.col-oshirase-title, .data-cell.col-oshirase-title,
.header-cell.col-oshirase-msg, .data-cell.col-oshirase-msg {
    max-width: none !important;          /* 160px等の限界幅を撤廃 */
    width: 300px !important;             /* 読みやすいように基本幅を広めに設定 */
    min-width: 200px !important;
}


/* 6. 操作ボタンのスタイル */
.action-button {
    height: 32px;
    padding: 2px 12px;
    background: white; 
    border-radius: 6px;
    border: 1px #555E68 solid;
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color 0.15s;

    /* ボタン内テキストが広がるのを防ぐ（念のため） */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.action-button:hover {
    background-color: #f0f0f0;
}
.action-button .button-text {
    color: #171A1C; 
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
}

.action-button.button-del{
    border: 1px red solid;
}
.action-button .button-del-text {
    color: red; 
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
}
.data-cell.col-action-btn {
    text-align: center;
}

/*詳細ボタンのスタイル*/
a.button.detail-button.link-button {
	height: 32px;
	min-height: 32px;
	padding: 2px 12px;
}

/* スマホ専用クラスをデフォルトで非表示にする */
.col-mobile-only {
    display: none;
}
.mobile-col-vew-header{
	display: none;
}
.view-mobile{
	display: none;
}

/* テーブルの形式は維持するけど、一部デザインを変更 */
@media screen and (max-width: 700px) {
	.list {
        border-radius: 0px !important;
    }
    tr.header-row th.col-hide-mobile {
        display: none !important;
    }
    tr.data-row td.col-hide-mobile {
        display: none !important;
    }
}

.zaiko_thumbnail {
	height: 24px;
}