@charset "UTF-8";
/*-----------------------------------------------
    発注書兼検収簿一覧 2025.12.
-----------------------------------------------*/
input,
textarea,
select,
button {
  -webkit-appearance: none;
  appearance: none;
}
header h1 {
	max-width: 90%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	word-break: break-all;
}
.atform-orderform-list {
	position: relative;
	display: block;
	width: 100%;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
}
.header-content {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 36px;
}
.header-close-botton {
	position: absolute;
	top: 50%;
	right: 15px;
	background: transparent;
	border: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}
.header-close-botton:focus {
	border: 0;
	outline: 0;
}
.atform-orderform-list main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
#orderformList {
	flex: 1;
	display: flex;
	min-height: 0;
}
#orderformList .container-fluid {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.header-search-box {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin: 1rem auto;
	padding: .75rem 1.5rem;
	width: 100%;
	border: 2px solid var(--ffaf-primary);
}
.header-search-box-title-wrapper {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}
.header-search-box .title-icon {
	width: 24px;
}
.header-search-box-title {
	margin-bottom: 0;
	color: var(--ffaf-primary);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 1px;
}
.header-search-box .search-container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 15px;
}
.form-control {
	padding: 5px;
	background: #fff;
	border: 1px solid var(--ffaf-gray-500);
	border-radius: 5px;
}
.form-control:focus {
	outline: 0;
}
.form-control::placeholder {
	color: var(--ffaf-gray-500);
}
.form-control select:disabled,
.form-control input[type="text"]:disabled,
.form-control input[type="numver"]:disabled {
	background-color: var(--ffaf-gray-100)!important;
}

.form-control-md {
	height: 36px;
	line-height: 1.4;
}
.form-control-sm {
	height: 32px;
	line-height: 1;
}

.header-search-box .search-container .select-group {
	position: relative;
	display: inline-block;
}
.header-search-box .search-container select {
	display: block;
	max-width: 148px;
	min-width: 60px;
	padding: 8px 24px 8px 8px;
	background: #fff;
	border: 1px solid var(--ffaf-gray-500);
	border-radius: 5px;
}

.header-search-box .search-container select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.header-search-box .search-container select::-ms-expand {
	display: none;
}

.header-search-box .search-container .select-group:before {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	width: 12px;
	height: 12px;
	background-image: url("../images/icon_search_select_arrow.svg");
	background-position: center center;
	background-repeat: no-repeat;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	pointer-events: none;
}
@media screen and (max-width: 992px) {
	.header-search-box {
		padding: .5rem 1rem;
	}
	.header-search-box-title {
		font-size: 18px;
	}
	.header-search-box .title-icon {
		width: 20px;
	}
}
@media screen and (max-width: 834px) {
	.header-search-box {
		flex-direction: column;
		align-items: flex-start;
	}
	.header-search-box-title-wrapper {
		margin-bottom: .5rem;
	}
	.header-search-box-title {
		font-size: 22px;
	}
	.header-search-box .title-icon {
		width: 24px;
	}
	.header-search-box .search-container {
		margin-bottom: .5rem;
		flex-wrap: wrap;
	}
}
@media screen and (max-width: 576px) {
	select {
		min-width: auto;
	}
}
.header-search-box .search-container .input-group {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0 10px;
}
.header-search-box .search-container .input-group-from-to {
	display: flex;
	align-items: center;
	gap: 0 6px;
}
.header-search-box .search-container .input-group-from-to label {
	white-space: nowrap;
}

.header-search-box .search-container .input-group-from,
.header-search-box .search-container .input-group-to {
	position: relative;
}
.input-group-from:after {
	content: '～';
}
.header-search-box .search-container .date-input {
	width: 140px;
	padding: 10px 8px;
	color: var(--ffaf-gray-800);
}
/* 検索エリア：提供日ヘルプツールチップ */
/* ラベル＋アイコン横並び */
.input-group-label-with-help {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: 14px;
	color: var(--ffaf-body-color);
	white-space: nowrap;
}
.help-icon-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}
.help-icon-img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}
.help-tooltip {
	position: absolute;
	left: 50%;
	top: calc(100% + 6px);
	width: 220px;
	padding: 8px 12px;
	text-align: center;
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	white-space: normal;
	word-break: break-word;
	background: rgba(51, 51, 51, .8);
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0, 0, 0,.25);
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	display: none;
	z-index: 20;
}
.help-tooltip.up {
  top: auto;
  bottom: calc(100% + 6px);
}
.help-icon-wrapper.show .help-tooltip {
  display: block;
}


/* 
.header-search-box .search-container .input-group-from:before,
.header-search-box .search-container .input-group-to:before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 16px;
	height: 16px;
	background-image: url("../images/icon_search_input_datepicker.svg");
	background-position: center center;
	background-repeat: no-repeat;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	pointer-events: none;
}
*/

.header-search-box .search-container .search-btn {
	width: 80px;
	padding-left: .5rem;
	padding-right: .5rem;
	color: #fff;
	background-color: #0068cb;
	border-color: #0068cb;
}

.form-list-contaner {
	display: block;
	position: relative;
	min-height: 0;
	width: 100%;
	margin: 0 0 1rem;
	padding: 0 0 1rem;
	overflow-x: hidden;
	overflow-y: visible;
	background-color: transparent;
}
.form-list-contaner::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}
.form-list-search-result {
	width: 100%;
	margin-left: 0;
	padding-left: 0;
}
.single-date-table {
	margin-bottom: 1.5rem;
	padding: 1rem;
	border-radius: 10px;
	border: none;
	/* border: 1px solid var(--ffaf-gray-400); */
}
.single-date-table:last-child {
	margin-bottom: 0;
}

.form-list-search-result .single-item {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.form-list-search-result .single-item .single-item-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 0 .5rem .5rem;
	border-bottom: 1px solid var(--ffaf-gray-300);
}

.form-list-search-result .single-item .single-item-header h2.date {
	margin-bottom: 0;
	color: var(--ffaf-primary);
	font-weight: 600;
}
.form-list-search-result .single-item .single-item-header h2.date i {
	font-size: 22px;
}

.single-item-header .daily-summary {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 20px;
	margin-bottom: 0;
}
.single-item-header .daily-summary .aggregate-value {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}
.single-item-header .daily-summary .aggregate-value:last-child {
	margin-right: 0;
}
.daily-summary dt {
	margin-bottom: 0;
	margin-right: .5em;
	font-weight: 500;
}
.daily-summary dd {
	margin-bottom: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.1;
}

/* 一覧側のテーブルラッパー：基本は横スクロールなし */
.form-list-search-result .single-item .single-item-body {
	width: 100%;
	max-width: 100%;
	margin: 1rem 0;
	overflow-x: hidden;
}

/* 一覧側のボタン色（テーブル共通デザインとは独立） */
.form-list-search-result .single-item .single-item-body .register {
	color: #fff;
	background-color: #f28c28;
	border-color: #f28c28;
}
.form-list-search-result .single-item .single-item-body .temporarily-save {
	color: #fff;
	background-color: #62b2ff;
	border-color: #62b2ff;
}
.form-list-search-result .single-item .single-item-body .correct {
	color: #fff;
	background-color: #606060;
	border-color: #606060;
}
.form-list-search-result .single-item .single-item-body span.yks-status {
	color: inherit;
	font-weight: inherit;
}
.form-list-search-result .single-item .single-item-body span.yks-status.error {
	color: #c00000;
	font-weight: 600;
}

.yks-notice {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	margin: 1rem 0 1.5rem;
	padding: 1rem;
	background: rgba(232, 190, 0, .3);
}

.yks-notice .yks-notice-icon {
	width: 32px;
	height: 32px;
}
.yks-notice .yks-notice-text {
	color: inherit;
	font-size: 18px;
	font-weight: 600;
}
#orderformListTable {
	width: 100%;
	table-layout: fixed;
}
#orderformListTable th,
#orderformListTable td {
	font-size: 16px;
	overflow: hidden;
}
#orderformListTable .supplier-type { width: 200px; }
#orderformListTable .supplier-name { min-width: 90px; }
#orderformListTable .order-number, #orderformListTable .inspected-items-number, #orderformListTable .defective-items-number { width: 90px; }
#orderformListTable .update-date { width: 160px; }
#orderformListTable .yks-connection, #orderformListTable .status { width: 90px; }
#orderformListTable .action { width: 160px; }

#orderformListTable td .name-displayed {
	max-width: 100%;
}
@media screen and (max-width: 1180px) {
	#orderformListTable .supplier-type { width: 200px; }
	#orderformListTable .supplier-name { min-width: 80px; }
	#orderformListTable .order-number, #orderformListTable .inspected-items-number, #orderformListTable .defective-items-number { width: 80px; }
	#orderformListTable .update-date { width: 150px; }
	#orderformListTable .yks-connection, #orderformListTable .status { width: 70px; }
	#orderformListTable .action { width: 140px; }
}
/* 小さい画面のみ横スクロール許可 */
@media screen and (max-width: 992px) {
	.form-list-search-result .single-item .single-item-body {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	#orderformListTable th,
	#orderformListTable td {
		font-size: 14px;
	}
	#orderformListTable .supplier-type { width: 180px; }
	#orderformListTable .supplier-name { min-width: 120px; }
	#orderformListTable .order-number, #orderformListTable .inspected-items-number, #orderformListTable .defective-items-number { width: 70px; }
	#orderformListTable .update-date { width: 140px; }
	#orderformListTable .yks-connection, #orderformListTable .status { width: 70px; }
}

#orderformListTable tbody td:nth-child(2) {
	overflow: visible;
	position: relative;
}
#orderformListTable tbody td:nth-child(2) .tooltip-wrapper {
	position: relative;
	display: inline-block;
	overflow: visible;
}
#orderformListTable tbody td:nth-child(2) .tooltip {
	z-index: 10000;
}

/* ================================
   タブバー & タブパネル 共通スタイル
   ================================ */

/* タブバー本体 */
.ffaf-tabs {
	display: flex;
	align-items: flex-end;
	gap: 2rem;
	padding: 0 1.5rem;
	border-bottom: 1px solid var(--ffaf-gray-300);
	background-color: #fff;

	/* タブ数が増えたとき用：横スクロール */
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

/* iOSでタブバーのスクロールバー非表示 */
.ffaf-tabs::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* 各タブボタン */
.ffaf-tab {
	position: relative;
	flex: 0 0 auto;
	min-width: 90px;
	min-height: 44px;
	padding: .9rem 0;
	color: var(--ffaf-body-color);
	font-size: 16px;
	font-weight: 400;
	background: none;
	border: none;
	outline: none;
	cursor: pointer;
}

/* アクティブタブ */
.ffaf-tab.is-active {
	color: var(--ffaf-primary);
	font-weight: 700;
}

/* アクティブタブの下線（太線） */
.ffaf-tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background-color: var(--ffaf-primary);
	border-radius: 2px;
}

/* タブパネル全体 */
.ffaf-tab-panels {
	position: relative;
	width: 100%;
}

/* デフォルトは非表示 */
.ffaf-tab-panel {
	display: none;
}

/* アクティブパネルだけ表示 */
.ffaf-tab-panel.is-active {
	display: block;
}

/* 画面幅が狭いとき（縦向き / mini）に少し詰める */
@media (max-width: 768px) {
	.ffaf-tabs {
		gap: 1.5rem;
		padding: 0 1rem;
	}
	.ffaf-tab {
		font-size: 15px;
		padding: .7rem 0;
	}
}

/****************************************
 * 2.1.1 入力フォームのデータ入力
 ****************************************/
/* 縦スクロールを禁止（全体はアプリ的に固定） */
body.atform-orderform-list {
	display: flex;
	flex-direction: column;
	height: 100vh;
	margin: 0;
	overflow: hidden;
}
body.atform-orderform-list > main {
	position: relative;
	flex: 1;
	width: 100%;
	padding-bottom: 80px;
	overflow: hidden;
	box-sizing: border-box;
}

/* 入力フォームのタブエリア全体 */
#inputformList {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}
#inputformList .ffaf-tab-panels {
	position: relative;
	flex: 1;
	width: 100%;
	min-height: 0;
}
#inputformList .ffaf-tab-panel {
	height: 100%;
	overflow: hidden;
}
#inputformList .ffaf-tab-panel:not([data-tab-panel="table"]) {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}


/****************************************
 * ヘッダータブ
 ****************************************/
.ffafrp {
	width: 100%;
	/* height: 100%; */
	padding: 1rem 1.5rem 1rem;
	/* overflow: hidden;*/
	box-sizing: border-box;
}
.report-list,
.defective-products-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.report-list li,
.defective-products-list li {
	margin: 0 0 1rem;
}
.report-list li > div:first-of-type {
	display: flex;
	align-items: center;
	margin: 0;
	padding: .25rem 1rem;
	background-color: #f6f6f6;
}

.report-list li > div:first-of-type h3,
.defective-products-list li > div:first-of-type h3 {
	margin: 0;
	padding-left: 0;
	color: #333;
	font-size: 18px;
	font-weight: normal;
}

.ffafrp .data,
.ffafrp .time,
.ffafrp select {
	display: block;
	width: 100%;
	height: 36px;
	margin: .5rem auto;
	padding: 8px 10px;
	font-size: 16px;
	box-sizing: border-box;
}
.ffafrp input[type="date"].data,
.ffafrp input[type="time"].time {
	display: block;
	width: 100% !important;
	min-width: 0;
	box-sizing: border-box;
	-webkit-appearance: none;
}
.input-div {
	width: 100%;
	margin: .5rem auto;
	padding: 0 .5rem;
}

/* ============================
   Datepicker
   ============================ */
.ui-datepicker {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 320px !important;
	max-width: calc(100vw - 24px);
	z-index: 9999 !important;
	background: #fff !important;
	padding: 16px !important;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
	box-sizing: border-box;
}

.ui-datepicker .ui-datepicker-header {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 5px 0 10px 0 !important;
	background: #fff !important;
	border: 0 !important;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	height: 36px;
	padding: 4px 8px;
	margin-left: 5px;
	font-size: 14px;
	background: #fff;
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, .2);
}
.ui-datepicker table {
	background: #fff;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #606060;
	width: 36px;
	height: 36px;
	top: 2px;
	border-radius: 5px;
	cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	color: #fff;
	font-size: 16px;
}
.ui-datepicker th {
	text-align: center;
	padding: 6px 0 !important;
	font-size: 14px;
}
.ui-datepicker td {
	padding: 6px 0 !important;
}
.ui-datepicker td a,
.ui-datepicker td span {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 16px;
	line-height: 1;
	border-radius: 5px;
}

/* hover/activeの視認性（PC確認用） */
/* */ .ui-datepicker td a:hover {
	background: rgba(0, 0 ,0, .06);
}
.ui-datepicker .ui-state-active {
	color: #fff !important;
	background: #003366!important;
	border: 0 !important;
}

.ui-datepicker .ui-state-highlight {
	background: rgba(0, 0, 0, .08);
	border: 0;
}
.ui-datepicker .ui-datepicker-buttonpane {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px !important;
	padding-top: 10px !important;
	background: #fff !important;
	border-top: 1px solid rgba(0, 0, 0, .08);
}
.ui-datepicker .ui-datepicker-buttonpane button {
	min-width: 100px;
	height: 32px !important;
	padding: 0 16px !important;
	font-size: 14px !important;
	border-radius: 5px !important;
	background: #fff !important;
	border: 1px solid rgba(0, 0, 0, .18) !important;
}
.ui-datepicker .ui-state-default {
	border: 0;
	background: transparent;
}

/****************************************
 * 表形式タブ：検索エリア
 ****************************************/
.ffaf-tab-panel[data-tab-panel="table"] .table-tab {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* 検索ボックス */
.table-search {
	padding: 1.5rem 1.5rem .5rem;
	background-color: #fff;
}
.table-search-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
}
.table-search-field {
	display: flex;
	flex: 1 0 auto;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
}
.table-search-label {
	margin: 0 5px 0 0;
	font-size: 14px;
	color: var(--ffaf-body-color);
	line-height: 1.6;
}
#tablePurchasedIngredientsName,
#tableInspectionCheck {
	flex: 1;
}
.table-search-field--buttons {
	margin-left: auto;
}
.table-search-buttons {
	display: flex;
	gap: 10px;
}
.table-search-btn {
	min-width: 80px;
	color: #fff;
	background-color: #0068cb;
	border-color: #0068cb;
}
.table-clear-btn {
	min-width: 80px;
	background-color: #fff;
	color: var(--ffaf-gray-700);
	border-color: var(--ffaf-gray-400);
}

/* 画面幅が狭いとき（縦持ち / mini）はボタンの右寄せを解除 */
@media screen and (max-width: 834px) {
	.table-search-row {
		align-items: flex-start;
	}
	.table-search-field--buttons {
		margin-left: 0;
	}
}

/****************************************
 * 表形式タブ：テーブルラッパー（縦横スクロール）
 ****************************************/
.ffaf-tab-panel[data-tab-panel="table"] .table-tab-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	margin: 0 0 1rem;
}
.ffaf-tab-panel[data-tab-panel="table"] .table-tab-body > .table-scroll {
	flex: 1;
	min-height: 0;
	/* height: 100%; */
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.ffaf-tab-panel[data-tab-panel="table"] .table-tab-body > .table-scroll .table-tab-body {
	height: auto;
}
.ffaf-tab-panel[data-tab-panel="table"] .table-tab-body > .table-scroll .table-tab-body .table-scroll {
	height: auto;
	overflow: visible;
}

/****************************************
 * 共通テーブルデザイン（ffaf-table）
 ****************************************/
.ffaf-table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	table-layout: auto;
}

/* ヘッダー行（背景水色） */
.ffaf-table thead tr {
	background: #ddebf7;
}

/* ヘッダー・データセル共通 */
.ffaf-table th {
	padding: .5rem .75rem;
	font-size: 14px;
	text-align: left;
	white-space: nowrap;
}
#tableViewListTable th {
	text-align: center;
}
.ffaf-table td {
	padding: .5rem .75rem;
	font-size: 16px;
	text-align: left;
	white-space: nowrap;
}

/* 行のストライプ */
.ffaf-table tbody tr:nth-child(odd) td {
	background-color: #fbfbfb;
}
.ffaf-table tbody tr:nth-child(even) td {
	background-color: #efefef;
}

/* 数値列の右寄せ */
.ffaf-table td.number {
	text-align: right;
}

/* 操作列の中央寄せ（必要なときだけ th/td に action クラスを付ける） */
.ffaf-table th.action,
.ffaf-table td.action {
	text-align: center;
}

/* 操作ボタンの幅（action列内） */
.ffaf-table td.action .btn {
	width: 120px;
	padding-left: .5rem;
	padding-right: .5rem;
}

/****************************************
 * 商品不良セル（不良数量＋ボタン）
 ****************************************/
.defect-products {
	text-align: center!important;
}
.defect-number {
	padding-right: .25rem!important;
	color: #c00000;
	font-weight: 600;
}
.defect-btn {
	height: fit-content;
	padding: 3px 12px;
	color: #fff;
	font-size: 14px;
	background-color: #c00000;
	border: 1px solid #c00000;
}
.defect-btn:hover {
	color: #fff;
}

/****************************************
 * 食材名：省略表示 + ツールチップ
 ****************************************/
.tooltip-wrapper {
	position: relative;
	display: inline-block;
	max-width: 100%;
	outline: none;
	cursor: pointer;
}
.name-displayed {
	display: inline-block;
	max-width: 160px;
	vertical-align: middle;
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tooltip {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	max-width: 240px;
	padding: 6px 10px;
	color: var(--faff-body-color);
	font-size: 13px;
	line-height: 1.4;
	white-space: normal;
	word-break: break-all;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.25);
	z-index: 9999;
	display: none;
}
.tooltip.up {
	bottom: calc(100% + 4px);
	top: auto;
}
/****************************************
 * テーブル内入力要素
 ****************************************/
.table-input {
	padding: 5px;
}
.table-input.number {
	max-width: 72px;
}
.table-input.date {
	max-width: 116px;
}
.table-input.text {
	max-width: 120px;
}
.table-input.remark {
	width: 240px!important;
	max-width: 320px;
}

/****************************************
 * 合計値input + 基本値tooltip
 ****************************************/
.total-value-field {
	position: relative;
}
.base-value-balloon {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 8px;
	padding: 8px 12px;
	color: #fff;
	font-size: 14px;
	white-space: nowrap;
	background: rgba(51, 51, 51, .8);
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0, 0, 0,.25);
	transition: opacity .2s ease;
	pointer-events: none;
	opacity: 0;
	z-index: 99;
}
.total-value-field:focus-within .base-value-balloon {
	opacity: 1;
}

/****************************************
 * テーブル専用チェックボックス
 ****************************************/
.table-check-input {
	display: none;
}
.table-check-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-bottom: 0;
	color: #fff;
	font-size: 14px;
	background: #fff;
	border: 1px solid var(--ffaf-gray-500);
	border-radius: 4px;
	transition: all .15s ease-in-out;
	cursor: pointer;
}
.table-check-input:checked + .table-check-label {
	background: var(--ffaf-success);
	border-color: var(--ffaf-success);
}
.table-check-input:checked + .table-check-label::after {
	content: "\f00c";
	position: absolute;
	top: 50%;
	left: 50%;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 14px;
	line-height: 1;
	transform: translate(-50%, -52%);
}
.table-check-label:hover {
	border-color: var(--ffaf-primary);
}
.table-view-list td.check-cell {
	text-align: center;
	vertical-align: middle;
	line-height: .6;
}
/****************************************
 * ヘッダー用一括チェックボタン
 ****************************************/

/* 検品チェックのヘッダーセルを中央寄せに */
.ffaf-table th.check-header {
	text-align: center;
}
/* ヘッダーボタン全体（ピル型＋タップ領域確保） */
.check-header-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100px!important;
	padding: 5px 10px;
	color: var(--ffaf-body-color);
	font-size: 14px;
	line-height: 1.4;
	border-radius: 5px;
	border: none;
	background: transparent;
	cursor: pointer;
}
/* ON状態（全解除） */
.check-header-btn[data-state="on"] {
	color: #fff;
	background: var(--ffaf-info);
	border-color: var(--ffaf-info);
}
/* 四角いアイコン部分 */
.check-header-box {
	position: relative;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 4px;
	border: 1px solid var(--ffaf-gray-500);
}
/* ON時のアイコン（FontAwesome利用） */
.check-header-btn[data-state="on"] .check-header-box::after {
	position: absolute;
	top: 50%;
	left: 50%;
	content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 10px;
	color: #fff;
	transform: translate(-50%, -50%);
}
/* ON時は枠も少し目立たせる */
.check-header-btn[data-state="on"] .check-header-box {
	background: rgba(0, 0, 0, .2);
	border-color: #fff;
}
.check-header-label {
	font-size: 14px;
	line-height: 1.2;
	font-weight: 600;
}

/* 検品チェックが付いている行の背景色を変更 */
.ffaf-table tbody tr.is-inspected td {
	background-color: rgba(0, 177, 138, .14);
}

/****************************************
 * 食材名ソート
 ****************************************/
/* ソートヘッダー（食材名） */
.ffaf-tab-panel[data-tab-panel="table"] th.sort-header {
	padding: 0;
}
.ffaf-tab-panel[data-tab-panel="table"] .sort-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	padding: 10px 12px;
	text-align: left;
	color: inherit;
	font: inherit;
	border: 0;
	background: transparent;
	appearance: none;
	cursor: pointer;
}

.ffaf-tab-panel[data-tab-panel="table"] .sort-icon {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}


/****************************************
 * スクロールコンテナ付きテーブルの
 * ヘッダー固定（汎用）
 ****************************************/

/* stickyヘッダーを有効にしたいスクロールコンテナ */
.table-scroll--sticky-header {
	position: relative;
}

/* この中のテーブルヘッダーを縦方向だけ固定 */
.table-scroll--sticky-header .ffaf-table thead th {
	position: sticky;
	top: 0;
	z-index: 5;
	background-color: #ddebf7;/* ヘッダー色で塗りつぶし */
	border-bottom: 2px solid #ddebf7; /* 上ににじむ行の境界を隠す */
}


/****************************************
 * 表形式タブ：横スクロール操作の比較プロトタイプ
 ****************************************/

/* 2案共通：横幅は表の内容に合わせ、スクロールは外側の1要素に集約 */
.table-scroll-prototype .table-scroll-inner {
	width: max-content;
	min-width: 100%;
}

.table-scroll-prototype .table-scroll-inner > .ffaf-table {
	width: max-content;
	min-width: 100%;
	max-width: none;
}

/* 案2：縦は通常スクロール、横移動は下部のレンジ操作に集約 */
.table-scroll-prototype--seekbar .table-scroll--seekbar {
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

.table-horizontal-control {
	flex: 0 0 auto;
	padding: .625rem 1rem .75rem;
	background: #f7f9fc;
	border: 1px solid var(--ffaf-gray-300);
	border-top: 0;
	box-shadow: 0 -4px 12px rgba(0, 51, 102, .08);
}

.table-horizontal-control-meta,
.table-horizontal-control-row {
	display: flex;
	align-items: center;
}

.table-horizontal-control-meta {
	justify-content: space-between;
	margin-bottom: .25rem;
	font-size: 13px;
	font-weight: 600;
	color: #334e68;
}

.table-horizontal-control-meta output {
	font-variant-numeric: tabular-nums;
	color: #0068cb;
}

.table-horizontal-control-row {
	gap: .75rem;
	min-height: 44px;
	font-size: 12px;
	color: #52667a;
}

.table-horizontal-range {
	flex: 1;
	height: 44px;
	margin: 0;
	background: transparent;
	accent-color: #0068cb;
	touch-action: none;
	-webkit-appearance: none;
	appearance: none;
}

.table-horizontal-range::-webkit-slider-runnable-track {
	height: 8px;
	background: linear-gradient(to right, #0068cb 0 var(--seekbar-progress, 0%), #c9d6e2 var(--seekbar-progress, 0%) 100%);
	border-radius: 999px;
}

.table-horizontal-range::-webkit-slider-thumb {
	width: 30px;
	height: 30px;
	margin-top: -11px;
	background: #fff;
	border: 3px solid #0068cb;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 51, 102, .25);
	-webkit-appearance: none;
	appearance: none;
}

.table-horizontal-range:disabled {
	opacity: .45;
}

.table-horizontal-range:focus-visible {
	outline: 3px solid rgba(0, 104, 203, .3);
	outline-offset: 2px;
}

/* 案3：固定ヘッダー全体を横移動用のドラッグ面として示す */
.table-header-drag-guide {
	flex: 0 0 auto;
	margin: 0;
	padding: .375rem .75rem;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	color: #134e78;
	background: #eaf5ff;
	border: 1px solid #b7d8f3;
	border-bottom: 0;
}

.table-scroll--header-drag {
	cursor: grab;
	scroll-behavior: auto;
	overscroll-behavior-x: contain;
}

.table-scroll--header-drag .table-header-drag-handle {
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.table-scroll--header-drag .table-header-drag-handle th {
	cursor: grab;
}

.table-scroll--header-drag.is-dragging,
.table-scroll--header-drag.is-dragging .table-header-drag-handle th {
	cursor: grabbing;
}

.table-scroll--header-drag.is-dragging .table-header-drag-handle th {
	background-color: #cfe6f7;
}

.table-scroll--header-drag:focus-visible {
	outline: 3px solid rgba(0, 104, 203, .35);
	outline-offset: -3px;
}


/****************************************
 * 全タブ共通フッター（保存ボタン） 固定表示
 ****************************************/
.form-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	padding: .75rem 0;
	background-color: #fff;
	border-top: 1px solid var(--ffaf-gray-500);
	z-index: 1000;
}
.form-footer-buttons {
	display: flex;
	justify-content: center;
	padding: .5rem 1rem;
	gap: 1.5rem;
	font-size: 16px;
}
.form-footer-btn {
	display: block;
	flex: 1;
	padding: .5rem 1.5rem;
	font-size: 1.0em;
	font-weight: bold;
	color: #fff;
	border-radius: 5px;
	box-shadow: 2px 2px 1px #d9d9d9;
	cursor: pointer;
	border: 1px solid transparent;
	text-align: center;
}
.form-footer-btn.tempsave {
	background: #66b2ff;
	border-color: #66b2ff;
}
.form-footer-btn.saveandmore {
	background: #003366;
	border-color: #003366;
}
.form-footer-btn.saveonly {
	background: #007a5e;
	border-color: #007a5e;
}
.form-footer-btn:disabled {
	border-color: var(--ffaf-gray-600);
	background: var(--ffaf-gray-600);
	cursor: not-allowed;
}

@media (max-width: 576px) {
	.form-footer-buttons {
		flex-direction: column;
		gap: .75rem;
	  }
	.form-footer-btn {
		max-width: none;
		width: 100%;
	}
}

/****************************************
 * 不良一覧
 ****************************************/
.defective-products-list li {
	margin-bottom: 3rem;
}
.defective-products-list li > div:first-of-type {
	display: flex;
	align-items: center;
	margin: 0;
	padding: .25rem 1rem;
	background-color: #f6f6f6;
}
.defective-products-list-table {
	margin: 1rem 0;
}
.defective-products-list-table th.number {
	width: 120px;
}
.defective-products-list-tablee th.image-check {
	width: 360px;
}
.defective-products-list-table .name-displayed {
	max-width: 480px;
}
@media (max-width: 576px) {
	.defective-products-list-table th.number {
		width: 90px;
	}
	.defective-products-list-table th.image-check {
		width: 180px;
	}
	.defective-products-list-table .name-displayed {
		max-width: 240px;
	}
}
/****************************************
 * モーダル（共通）
 ****************************************/
.ui-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}
.ui-modal.is-open {
	display: flex;
}

/* 背景のオーバーレイ */
.ui-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .4);
}
.ui-modal-dialog {
	position: relative;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
	padding: 24px 24px 20px;
	max-width: calc(100% - 40px);
	box-sizing: border-box;
}

/* サイズバリエーション */
.ui-modal-dialog.modal-sm {
	width: 320px;
}
.ui-modal-dialog.modal-md {
	width: 560px;
}
.ui-modal-dialog.modal-lg {
	width: 90%;
	max-width: calc(100% - 40px);
}
.ui-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: var(--ffaf-gray-700);
}
.ui-modal-close:focus {
	outline: none;
}
.ui-modal-close-btn {
	width: 16px;
	height: 16px;
}
.ui-modal-body {
	padding-top: 8px;
}
.ui-modal-title {
	margin: 0 0 2rem;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}
.ui-modal-message {
	margin: 0 0 1rem;
	padding: 1rem 0 0;
	font-size: 14px;
	text-align: center;
	line-height: 1.6;
}
.ui-modal-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
}
.ui-modal-btn-cancel,
.ui-modal-btn-confirm,
.ui-modal-btn-retry {
	min-width: 96px;
	padding: 6px 16px;
	font-size: 14px;
	border-radius: 4px;
	border: 1px solid transparent;
	cursor: pointer;
}
.ui-modal-btn-cancel {
	background: #fff;
	color: var(--ffaf-body-color);
	border-color: var(--ffaf-gray-400);
}
.ui-modal-btn-confirm {
	background: #004080;
	color: #fff;
	border-color: #004080;
}
.ui-modal-btn-retry {
	background: #f28c28;
	color: #fff;
	border-color: #f28c28;
}
@media (max-width: 576px) {
	.ui-modal-dialog.modal-md,
	.ui-modal-dialog.modal-lg {
		width: calc(100% - 40px);
	}
	.ui-modal-actions {
		flex-direction: column;
	}
	.ui-modal-btn-cancel,
	.ui-modal-btn-confirm {
		width: 100%;
	}
}
/****************************************
 * YKSリトライ用ローディングスピナー
 ****************************************/
.retry-loader {
	display: none;
	width: 28px;
	height: 28px;
	margin: 0 auto 16px auto;
	border-radius: 50%;
	border: 3px solid rgba(0, 0, 0, .15);
	border-top-color: var(--ffaf-primary);
	animation: retry-spin 0.7s linear infinite;
}
.retry-loader.is-active {
	display: block;
}

@keyframes retry-spin {
	to { transform: rotate(360deg); }
}

/****************************************
 * 画像確認モーダル（固定サイズの4:3サムネイル）
 ****************************************/
.image-modal-body {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 120px);
	overflow: hidden;
}
/* スクロールエリア（画像だけスクロール） */
.image-grid {
	flex: 1;
	display: grid;
	justify-content: start;
	justify-items: start;
	grid-template-columns: repeat(auto-fill, 320px);
	gap: 16px;
	padding-right: 4px;
	margin-bottom: 16px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* 4:3 の固定サイズカード */
.image-grid-item {
	position: relative;
	width: 320px;
	height: 240px;
	background: #f5f5f5;
	border-radius: 4px;
	overflow: hidden;
}
/* 画像をカード内いっぱいに表示（トリミングなし） */
.image-grid-item img {
	display: block;
	width: 100%;
	height: auto;
}

/* -------- breakpoints -------- */
@media (max-width: 834px) {
	.image-grid {
		grid-template-columns: repeat(2, 320px);
	}
}
@media (min-width: 835px) and (max-width: 1180px) {
	.image-grid {
		grid-template-columns: repeat(auto-fill, 320px);
	}
}
@media (min-width: 1181px) {
	.image-grid {
		grid-template-columns: repeat(auto-fill, 320px);
	}
}
.image-modal-actions {
	margin-top: 8px;
}

/****************************************
 * 不良登録タブ（上部の 1 / 2 / ＋）
 ****************************************/

/* タブ全体を包むバー */
.defect-tabs-bar {
	margin: 0 1.5rem 1rem;
	border-bottom: 1px solid var(--ffaf-primary);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.defect-tabs-bar::-webkit-scrollbar {
	display: none;
}
/* タブ列 */
.defect-tabs {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 0;
	margin: 0;
	list-style: none;
}

/****************************************
 * 不良登録タブ（シンプルな四角タブ）
 ****************************************/

/* li はコンテナとしてだけ使う */
.defect-tab {
	margin: 0 2px 0 0;
	padding: 0;
}
/* タブボタン本体 */
.defect-tab button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 40px;
	padding: 0;
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--ffaf-primary);
	background-color: #fff;
	border: 1px solid var(--ffaf-primary);
	border-bottom: none;
	border-radius: 3px 3px 0 0;
	cursor: pointer;
}

/* アクティブタブ：青地＋白文字 */
.defect-tab.is-active button {
	background-color: var(--ffaf-primary);
	color: #fff;
}

/* タブタイトル（数字） */
.defect-tab-title {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* タブクローズボタン */
/* ×ボタンをタブ右上に固定配置 */
.defect-tab-close {
	position: absolute;
	top: 7px;
	right: 1px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 4px;
}

/* 非アクティブタブの×アイコン色 */
.defect-tab .defect-tab-close i {
	color: var(--ffaf-primary);
	font-size: 20px;
}

/* アクティブタブの×アイコン色（青地の上なので白） */
.defect-tab.is-active .defect-tab-close i {
	color: #fff;
}

/* 誤タップ防止のため、タブ1は×を非表示（JS側でも削除禁止） */
.defect-tab[data-tab-id="1"] .defect-tab-close {
	display: none;
}


/* ========== ＋ボタン ========== */

.defect-tab-add {
	margin-left: 15px;
}
/* 正方形のシンプルなボタン */
.defect-tab-add button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--ffaf-gray-800);
	font-size: 18px;
	line-height: 1;
	background: #fff;
	border-radius: 4px;
	border: 1px solid var(--ffaf-gray-400);
	cursor: pointer;
}
.defect-tab-add button:active {
	background: var(--ffaf-gray-100);
}


/****************************************
 * 不良登録タブパネル
 ****************************************/
#defectiveRegistration {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

/* タブパネル領域をスクロール可能エリアにする */
#defectiveRegistration .defect-tab-panels {
	flex: 1;
	min-height: 0;
	padding: 0 1.5rem 5rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
/* ffafrp の上書き：この画面では中身だけスクロールでOK */
#defectiveRegistration .ffafrp {
	padding: 1rem 0 2rem;
	height: auto;
	overflow-y: visible;
}
.defect-tab-panel {
	display: none;
}
.defect-tab-panel.is-active {
	display: block;
}
.defective-products-registration {
	padding: 0;
	list-style: none;	
}
.defective-products-registration li {
	margin-bottom: 1rem;
}
.defective-products-registration li > div:first-of-type {
	display: flex;
	align-items: center;
	margin: 0;
	padding: .25rem 1rem;
	background-color: #f6f6f6;
}
.defective-products-registration li > div:first-of-type h3 {
	margin: 0;
	padding-left: 0;
	color: #333;
	font-size: 18px;
	font-weight: normal;
}
.btn-verify-images,
.btn-verify-images:hover {
	background: #007acc;
	border-color: #007acc;
	color: #fff;
}
.btn-connected,
.btn-connected:hover {
	background: #fafafa;
	border-color: #333;
	color: #333;
	cursor: default;
}

.requierd {
	color: #ff0022;
}
/****************************************
 * 画像追加グリッド（4:3サムネイル）
 ****************************************/
.defect-image-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
/* 1枚分のカード枠 */
.defect-image-card,
.defect-image-add {
	position: relative;
	width: 160px;
	max-width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 4px;
	border: 1px solid var(--ffaf-gray-400);
	background: #f5f5f5;
	overflow: hidden;
}

/* プラスボタン */
.defect-image-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.defect-image-plus {
	font-size: 32px;
	color: var(--ffaf-gray-400);
}

.defect-image-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}
/* サムネイル画像 */
.defect-image-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* タブ削除ボタン*/
.defect-tab-delete-btn {
	display: block;
	width: 100%;
	margin: 2rem auto 0;
	padding: .75rem;
	text-align: center;
	font-size: 16px;
	color: #e84c17;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #e84c17;
}
/* 画像削除ボタン*/
.defect-image-delete {
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	background: rgba(0, 0, 0, .6);
	border-radius: 50%;
	border: none;
	cursor: pointer;
}

/* 追加ボタン非表示用クラス */
.defect-image-add.is-hidden {
	display: none;
}

/****************************************
 * 発注書兼検収簿一覧ページ用レイアウト調整
 * （ヘッダーのみ固定／全体スクロール）
 ****************************************/

/* 一覧ページでは body の flex & overflow: hidden を無効化する */
body.atform-orderform-list.orderform-list-page {
	display: block;
	height: auto;
	min-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
}

/* main も通常のブロックレイアウトに戻す */
body.atform-orderform-list.orderform-list-page > main {
	position: static;
	flex: none;
	width: 100%;
	padding-bottom: 0;
	overflow: visible;
}

/* orderformList セクション以下も通常のフローでOK */
body.atform-orderform-list.orderform-list-page #orderformList {
	display: block;
	min-height: auto;
}
body.atform-orderform-list.orderform-list-page #orderformList .container-fluid {
	display: block;
	min-height: auto;
}

/* =================================================
   入力フォームから不良登録系の画面表示
   ================================================= */
.subscreens {
	position: fixed;
	inset: 0;
	background: #fff;
	overflow: hidden;
	z-index: 20000;
	display: none;
}
.header.subscreens-header {
	background: var(--ffaf-primary);
}
.subscreens.is-active {
	display: block;
}
.subscreen {
	position: absolute;
	inset: 0;
	display: none;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
}
.subscreen.is-active {
	display: block;
}
body.is-subscreens-open {
	overflow: hidden;
}

/* =========================================
   Global Full Screen Loading
   ========================================= */
.global-loading {
	position: fixed;
	align-items: center;
	justify-content: center;
	inset: 0;
	background: rgba(255, 255, 255, 0.85);
	z-index: 99999;
	display: none;
}
.global-loading.is-active {
	display: flex;
}
.global-loading__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.global-loading__spinner {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 5px solid rgba(0, 0, 0, .15);
	border-top-color: var(--ffaf-primary);
	animation: retry-spin 0.7s linear infinite;
}
.global-loading__text {
	margin-top: 16px;
	font-size: 14px;
	color: #333;
}