/* DEFAULTS
----------------------------------------------------------*/
html,
body {
	margin:0;
	padding:0;
	height:100%;
	font-family: Microsoft JhengHei, MingLiU, DFKai-sb;
}

#footer {
	background-color:#999791;
	height: 40px;
	padding-top: 10px;
	border-top: 1px solid;
	font-size: 12px;
	text-align: center;
	display: block;
	margin-top: auto; /* 關鍵修改：在 Flexbox 容器中，此設定會自動將頁尾推至底部 */
}

.clear {
	display:block;
	float:none;
	clear:both;
	height:0px;
	width:100%;
	margin:0;
	padding:0;
	border:0;
}

#container {
	width: 1280px;
	/* 關鍵修改：啟用 Flexbox 佈局，並設定為垂直方向 */
	display: flex;
	flex-direction: column;
	/* 關鍵修改：設定容器的最小高度為螢幕高度減去頂部間距，以避免不必要的滾動條 */
	min-height: calc(100vh - 20px);
	margin: 20px auto 0px auto;
}
* {
	box-sizing: border-box;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    padding-left: 10px;
    font-weight: 400;
}

h1 {
    color: #401A04;
    font-size: 35px;
}

h2 {
    font-size: 20px;
    color: #A30000;
    margin-bottom: 5px;
}

h3 {
    font-size: 16px;
    color: #dc143c;
	margin-top: 5px;
    margin-bottom: 5px;
}

h4 {
	font-weight: bolder;
    font-size: 16px;
    color: #FF0000;
	margin-top: 5px;
    margin-bottom: 5px;
	text-align: center;
}

p {
	font-size: 20px;
	padding-left: 30px;
}

a {
	text-decoration: none;
	color: black;
}
/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/
h3.login {
    font-size: 20px;
	font-weight: bolder;
    color: #A30000;
	margin: 5px auto 10px -15px;
}

table {
	table-layout: fixed;
	width: 100%;
	/* float:center; */
    font-size: 20px;
    border-collapse: collapse;
    margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto; 
	margin-right: auto;
	text-align: center;
}

th {
    border-bottom: 2px solid #111111;
    border-top: 1px solid #999;
    background-color: white;
	padding: 15px 0;
	text-align: inherit;
}

td {
	white-space: nowrap; /* 防止換行 */
	padding: 10px 0px;
	text-align: inherit;
}

tr:nth-of-type(odd) {
    background-color: #FFFFCC;
    border-bottom: 1px solid #cbd2d8;
}

tr.incoming:nth-of-type(odd) {
    background-color: #ADD8E6;
    border-bottom: 1px solid #cbd2d8;
}

tr:nth-of-type(even) {
    background-color: white;
	border-bottom: 1px solid #cbd2d8;
}

tr.incoming:nth-of-type(even) {
    background-color: #F5FFFA;
	border-bottom: 1px solid #cbd2d8;
}

table.users{
    font-size: 20px;
    border-collapse: collapse;
    margin: 10px 0px;
	width: 100%;
}

table.users th{
    border-bottom: 1px solid #111111;
    border-top: 0px solid #999;
    background-color: transparent;
	padding: 1px 0;
}

table.users td{
	padding: 5px 0;
}

table.users a.button{
	margin: 0% 5%;
}

table.users tr{
    text-align: center;
    background-color: transparent;
    border-bottom: 0px solid #cbd2d8;
}

[contenteditable]:hover:after {
  content: '修改';
  font-size: 14px;
  font-family: sans-serif;
  color: #ccc;
  .text-stroke(0);
}

[contenteditable]:hover, [contenteditable]:focus {
  background: #ffffff;
}

[contenteditable]:focus {
	padding: 1px 10px;
	border-width: 1px;
	border-style: solid;
	outline:none;
}

[contenteditable]:focus:after {
  content: '';
}

fieldset {
	font-size: 20px;
    padding: 5px 20px;
    margin: 1px auto 1px 50px;
    border: 1px solid;
	border-radius: 5px;
    background-color: floralwhite;
    display:inline-block; 
}

legend {
    color: #665544;
    background-color:#efefef ;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
}

input {
    border: 1px solid #665544;
    color: #fffffff;
}

input[type="radio"] {
	margin: 10px 30px;
}

input[type="submit"] {
	margin:10px auto 10px 60px;
	padding: 5px 10px;
	border-radius: 5px;
	background-color: #D3D3D3;
	font-size: 16px;
	border: 1px solid black;
	display: block;/*讓提交按鈕獨佔一行*/
}

input[type="submit"]:hover {
	background-color: #BDBDBD;
}

input[type="submit"]:active {
	position: relative;
	top: 1px;
	right: -1px;
	background-color: #BDBDBD;
}

td input[type="submit"]{
	text-align:center;
	margin:5px 2px;
}

input[type="text"] {
	margin:0px auto 0px 0px;
	padding: 5px 5px;
	border-radius: 5px;
	background-color: #ffffff;
	font-size:16px;
}

input[type="date"] {
	white-space: nowrap; /* 防止換行 */
	margin:5px auto 5px 0px;
	padding: 3px 5px;
	border-radius: 5px;
	font-size: 20px;
	font-weight: lighter;
}

input[type="password"] {
	margin:5px auto 5px 0px;
	padding: 5px 5px;
	border-radius: 5px;
	background-color: #ffffff;
	font-size:20px;
}

input[type="checkbox"] {
    height: 20px;
	width: 20px;
}

td input{
	text-align:center;
	margin:5px 2px;
}

.button {
	display:block;
	font-size:16px;
	text-decoration: none;
	color: black;
	border: 1px solid;
	margin:5px 2px;
	padding: 5px 10px;
	border-radius: 5px;
	background-color: #D3D3D3;
	cursor: default;
}

.button:hover {
	background-color: #BDBDBD;
	cursor: default;
}

.button:active {
	position: relative;
	top: 1px;
	right: -1px;
	background-color: #BDBDBD;
}

.selectbranch{
	height:35px;
	border-radius:5px;
	/* border:1px solid #665544; */
	font-size:20px;
	margin:20px 0px 0px auto;
	padding-left:5px;
	padding-right:5px;
	/* float:left; */
	text-align: left;
	display: inline-block;
}

.update{
	width:100%;
	font-size: 22px;	
	font-weight:bold;
    color: #484848;
	margin:10px auto -10px auto;
	text-align: center;
    display: inline-block;
}

#select_trip {
	width:100%;
    font-size: 20px;
	margin:0px auto;
	/* float:right; */
    text-align: right;
    display: inline-block;
}

.top h1 {
    font-weight: 900;
    text-align: center;
    letter-spacing: 3px;
    color: black;
    margin-top: 0px;
    margin-bottom: 10px;
    padding: 10px 0px 20px 0px;
}

.top h2 {
    font-weight: 900;
    text-align: center;
    letter-spacing: 2px;
    color: grey;
    margin-top: -40px;
    margin-bottom: -20px;
    padding: 10px 0px 20px 0px;
}

.top h3 {
    font-weight: 900;
    letter-spacing: 2px;
	color:#2b2b2b;
    padding: 0px 0px 0px 0px;
	display:block;
	margin-bottom:0px;
}

.top a{
    font-weight: 900;
    letter-spacing: 2px;
	color:#2b2b2b;
    padding: 0px 0px 0px 0px;
	display:inline-block;
	margin-bottom:0px;
}

.link ul{
    padding: 15px;
    margin: 0px auto 0px auto;
    border-top: 2px solid #000;
    border-bottom: 1px solid #000;
    text-align: center;
	background-color:#ffe047;
}

.link li {
    font-size: 18px;
    display: inline;
    margin: 0px 10px;
    border: none;
    font-weight: 700;
}

.link a {
    color: #000000;
    text-decoration: none;
}

.link a.special-link {
	font-size: 23px;
}

.announcements ol{
	list-style-type: decimal;
    width: 90%;
    padding: 20px 40px;
    margin: 0px auto 0px auto;
    border: 1px solid #000;
	border-radius: 5px;
	background-color: #f0ffff;
    text-align: left;

}

.announcements li{
    font-size: 20px ;
    margin: 0px 10px;
    border: none;
	white-space: pre-wrap;
}

.announcements textarea {
	display: block;
	margin:0px auto 0px auto;
	padding: 20px 40px;
	border: 1px solid #000;
	border-radius: 5px;
	background-color: #ffffff;
	width: 90%;
	text-align: left;
	font-size: 20px;
}

#store{
    font-size: 30px;
    font-weight:bolder;
	color:#dc143c;
    display: inline;
	margin-bottom:-10px;
}

.noright {
    color: #9b2226;
    font-size: 50px;
	text-align: center;
	display:block;
	margin-top: 100px;
}
/* A4 print
-----------------------------------------------*/
.a4page {
	width: 21cm;
	height: 29.7cm;
	padding: 0.4cm 0.5cm 0.7cm 0.5cm;
	margin: 0px auto;	
	border: 1px #D3D3D3 solid;
	background: white;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

table.head {
	font-size:14px;
	width: 100%;
	table-layout:fixed;
	margin:0;
	page-break-before: always;
}

table.head th{
	text-align:left;
	background:#2b90d9;
	border-collapse:collapse;
	border-top: 1px solid #2b90d9;
	border-bottom: 2px solid #2b90d9;
	border-right: 5px solid #2b90d9;
	border-left: 5px solid #2b90d9;
	padding:0;
}

table.head th.h1{
	font-size:24px;
	white-space:nowrap;
	height: 1cm;
	padding-top:0;
	color: #d9e1e8;
}

table.head th.h2{
	font-size:18px;
	height: 1cm;
	background:#d9e1e8;
}

table.head th.h3{
	font-size:14px;
	height: 0.6cm;
	color: #d9e1e8;
	background: #282c37;
}

table.head th.h4{
	text-align: right;
	font-size:22px;
	height: 1cm;
	padding-top:3px;
	color: #d9e1e8;
}

.serial{
	width:6%;
}

.item{
	width:40%;
}

.quantity{
	text-align:left;
	width:11%;
}

td.quantity{
	padding-left:0px;
}

.quantity input[type="text"]{
	width: 30%;
}

.note{
	width:45%;
}

table.report1{
	table-layout: fixed;
	float: left;
	width: 49%;
	margin-top: 3px;
	white-space: nowrap;
}

table.report2{
	table-layout: fixed;
	float: right;
	width: 49%;
	margin-top: 3px;
	white-space: nowrap;
}

table.report3{
	table-layout: fixed;
	float: right;
	width: 100%;
	margin-top: 3px;
	white-space: nowrap;
}

table.report1 td{
	text-align: left;
	padding: 6px;
}

table.report2 td{
	text-align: left;
	padding: 6px;
}

table.report3 td{
	text-align: left;
	padding: 6px;
}

table.report1 tr:nth-of-type(even) {
    background-color: #d9e1e8;
    border-bottom: 0px solid #cbd2d8;
	font-size: 18px;
}

table.report1 tr:nth-of-type(odd) {
    background-color: white;
	border-bottom: 0px solid #cbd2d8;
	font-size: 18px;
}

table.report2 tr:nth-of-type(even) {
    background-color: #d9e1e8;
    border-bottom: 0px solid #cbd2d8;
	font-size: 18px;
}

table.report2 tr:nth-of-type(odd) {
    background-color: white;
	border-bottom: 0px solid #cbd2d8;
	font-size: 18px;
}

table.report3 tr:nth-of-type(even) {
    background-color: #d9e1e8;
    border-bottom: 0px solid #cbd2d8;
	font-size: 18px;
}

table.report3 tr:nth-of-type(odd) {
    background-color: white;
	border-bottom: 0px solid #cbd2d8;
	font-size: 18px;
}

table.report1 tr.blank_row{
    background-color: white;
}

table.report2 tr.blank_row {
    background-color: white;
}

table.report3 tr.blank_row{
    background-color: white;
}

table.branch {
	table-layout:fixed;
	margin-left:40px;
    padding:0;  
	width: 80%;
	border-collapse: separate;
	border-spacing:5px;
	font-size:18px;
}

table.branch th {
    padding:2px;
    background-color: white;   
	border: 1px solid;
}

table.branch td {
    padding:15px;
    background-color: 94d2bd;   
	border: 1px solid;
	font-size:20px;
}

table.branch th:first-child{
  border-top-left-radius: 5px;
}

table.branch th:last-child{
  border-top-right-radius: 5px;
}

table.branch td:first-child{
  border-bottom-left-radius: 5px;
}

table.branch td:last-child{
  border-bottom-right-radius: 5px;
}

#button_print {
	font-size:20px;
	margin:0px 2px;
	position:relative;
	left:48%;
}

#button_email {
	font-size:20px;
	margin:0px 2px;
	position:relative;
	left:48%;
}

.report_footer{
	font-size:16px;
	position:relative;
	bottom: 1.4cm;
	display:inline;
}

.columns-container {
	display: flex;
	justify-content: space-between; /* 在兩欄之間創建空間 */
	gap: 2%; /* 創建 2% 的間距，取代原來的 49% + 49% = 98% */
}

.column1, .column2{
	width: 49%;
	/* white-space: nowrap;  <-- 移除此行，它會導致標題等元素不換行 */
	overflow-x: auto; /* 當內容（如表格）超寬時，顯示水平滾動條 */
}

.row {
	display: flex; /* equal height of the children */
}

.col {
	flex: 1; /* additionally, equal width */
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.col_r {
	flex: 1; /* additionally, equal width */
	text-align: right;
}

.value {
	position:relative;
	top:-2px;
	/* width: 30px; */
	height: 30px;
	text-align: center;
	border: 1px solid #aaa;
}

input.plus {
  width: 30px;
  height: 30px;
  margin: 0 -5px 0 -5px;
  border: 1px solid #aaa;
  border-radius: 5px;
  background: #f8f8f8;
}

input.minus {
  width: 30px;
  height: 30px;
  margin: 0 -5px 0 -5px;
  border: 1px solid #aaa;
  border-radius: 5px;
  background: #f8f8f8;
}

input.plus_h {
  width: 30px;
  height: 30px;
  margin: 0 -5px 0 -5px;
  border: 1px solid #aaa;
  border-radius: 5px;
  background: #c7c5c5;
}

input.minus_h {
  width: 30px;
  height: 30px;
  margin: 0 -5px 0 -5px;
  border: 1px solid #aaa;
  border-radius: 5px;
  background: #c7c5c5;
}

@media print{
	#button_print, #button_email{
		display: none;
	}
	.a4page{
		size: A4 portrait;
		height: auto; 
		border: none;
	}
	.report_footer{
		position: relative;
		bottom: 0cm;
	}
	table{
		-webkit-print-color-adjust: exact;
		color-adjust:exact;
	}
}

@media screen and (max-width: 1024px){
	#container{
		width: 1020px;
	}
	.quantity{
		/* width:20%; */
		width:135px;
	}
}

@media screen and (max-width: 980px){
	.columns-container {
		flex-direction: column; /* 關鍵修正：在小螢幕上將 flex 方向改為垂直 */
		gap: 0; /* 垂直排列時，通常不需要間距，由 margin-bottom 控制 */
	}

	#container{
		width: 100%;
	}
	table.supply {
        /* 覆蓋 style20250409.css 中 table { width: 100%; } 的設定 */
        /* 允許表格根據其內容或 min-width 來決定自身寬度 */
        width: auto;
        /* 設定一個合理的最小寬度，以容納您表格的六個主要內容欄位。
           您可以根據實際在手機上測試的效果來調整此數值。
           這有助於防止在 'fixed'佈局下的欄位內容過於擁擠或重疊。*/
        min-width: 800px; /* 根據您的欄位內容估算，可調整 */
    }
	#supplyTable td:nth-child(2), /* "供貨狀況" 表格的第二個 td (商品欄位) */
	#inventoryTable td:nth-child(2) { /* "庫存狀況" 表格的第二個 td (品名欄位) */
		white-space: normal; /* 覆蓋全域 td 的 nowrap 設定，允許文字換行 */
		word-break: break-word; /* 輔助長單字斷行 */
	}
	.t_container{
		width:100%;
		overflow-x: scroll;
	}
	.update{
		font-size: 18px;
	}
	#select_trip {
		font-size: 20px;
	}
	#manage_goods .button{
			font-size:12px;
	}
	.quantity{
		/* width:20%; */
		width:135px;
	}
	.quantity input[type="text"]{
		width: 30%;
	}
	.column1, .column2{
		width: 100%;
		margin-bottom:20px; 
	}
	table.branch{
		/* margin: 16px; */
		width:550px;
		display:block;
		font-size: 18px;
		table-layout: fixed;
		word-break: break-all;
		/* white-space:nowrap */
	}
}

@media screen and (max-width: 420px){
	#container{
		width: 420px;
	}
	.t_container{
		width:100%;
		overflow-x: scroll;
	}
	.update{
		font-size: 16px;
	}
	.noright{
		font-size: 30px;
	}
	.vision{
		display: none;
	}
	.serial{
		/* width:20%; */
		width:45px;
	}
	.item{
		/* width:60%; */
		width:220px;
		white-space: normal; 
	}
	.quantity{
		/* width:20%; */
		width:135px;
	}
	.quantity input[type="text"]{
		position: relative;
		top: 0px;
		width: 30%;
	}
	.note{
		/* width:70%; */
		width:240px;
	}
	table.menu{
		width:510px;
		display:block;
		font-size: 16px;
		table-layout: fixed;
		word-break: break-all;
		/* white-space:nowrap */
	}
}

/* 修正庫存盤點輸入欄位重疊與對齊問題 */
.stock-control {
	display: inline-flex; /* 使用 flexbox 讓元件在同一行對齊 */
	align-items: center;   /* 垂直置中對齊 */
	white-space: nowrap;   /* 防止內部元件換行 */
	vertical-align: middle; /* 確保 span 本身與周圍的文字 (如斜線) 對齊 */
}
.stock-control input.value {
	width: 40px; /* 維持輸入框寬度 */
	text-align: center; /* 數字置中 */
	margin: 0 2px; /* 在按鈕和輸入框之間增加一點間距 */
	/* 修正：明確覆寫 .value 的 top 樣式，解決垂直對齊問題 */
	position: relative;
	top: 0;
}
/* 確保庫存欄位有足夠的寬度，防止內容重疊 */
.stock-column {
	min-width: 220px; /* 給予足夠的最小寬度以容納兩組控制項 */
}