/* ============================
   Global / 基礎
=========================== */

/* 變數：navbar 高度（navbar.js 會覆蓋成實際高度） */
:root {
	--navbar-total-height: 56px;
	/* fallback */
	--login-top-gap: 16px;
	/* 手機額外保留的上方空隙 */
}

html,
body {
	height: 100%;
	padding-top: 0;
}

/* 前台才會用到：預留 fixed navbar 高度 */
body.has-navbar {
	padding-top: var(--navbar-total-height);
}

/* 登入頁：只有「沒有 has-navbar」時才清零，避免被 fixed-top 壓住 */
body.login-page2:not(.has-navbar) {
	padding-top: 0 !important;
}


/* ===========================
   前台 Auth / Layout Boxes
=========================== */
.login-box,
.login2-box,
.form-box {
	width: 100%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
	/* 避免 padding 撐爆寬度 */
}

/* 桌機 / 平板 預設（置中） */
.login-box {
	max-width: 360px;
	top: 50%;
	transform: translate(-50%, -50%);
}

.login2-box {
	max-width: 420px;
	top: 50%;
	transform: translate(-50%, -50%);
}

.form-box {
	max-width: 600px;
	top: 12%;
	padding: 1rem;
}

/* ✅ 手機版（寬度小於 576px）：扣掉 navbar 高度，避免貼頂 */
@media (max-width: 576px) {

	.login-box,
	.login2-box,
	.form-box {
		max-width: calc(100% - 40px);
		/* 左右各留 20px 空白 */
		top: calc(var(--navbar-total-height) + var(--login-top-gap));
		transform: translateX(-50%);
		/* 手機不做 translateY(-50%) */
		padding: 1.5rem 1.25rem;
		/* 四周留更多內距，視覺更舒適 */
		border-radius: 1rem;
		/* 手機上圓角更柔和 */
	}
}

/* 橫向小高度裝置：再多留一點距離 */
@media (orientation: landscape) and (max-height: 500px) {
	.login2-box {
		top: calc(var(--navbar-total-height) + 8px);
		transform: translateX(-50%);
	}
}

/* 預設字級（桌機用） */
.hdr-topbar .navbar-user-name {
    /*font-size: 1rem;      /* 比 fs-5 小一點 */
    white-space: nowrap;
}

/* 手機寬度時再縮一階，並避免把右邊擠出去 */
@media (max-width: 575.98px) {
    .hdr-topbar .navbar-user-name {
        font-size: 0.90rem;  /* 手機版再更小 */
        max-width: 45vw;     /* 最多佔 50% 螢幕寬 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ===========================
   主內容高度：避免與 body padding 疊加
=========================== */
.app-main {
	margin-top: 0 !important;
	padding-top: 0 !important;
	overflow: auto;
	min-height: calc(100vh - var(--navbar-total-height));
}

.app-main> :first-child {
	margin-top: 0;
}


/* ===========================
   全域 label 與 nowrap 元件
=========================== */
.form-label {
	margin-bottom: .25rem;
}

.table th,
.table td,
.badge,
.btn {
	white-space: nowrap;
}


/* ===========================
   Navbar（上方導覽列）
=========================== */
.nav-thin {
	padding-block: .25rem;
	border-bottom: 1px solid var(--bs-border-color);
}

.nav-thin .nav-link {
	padding: .25rem .5rem;
	line-height: 1.2;
}

.nav-actions .nav-link span {
	font-size: .85rem;
	/* .8125rem */
}

/* 右側：切換公司/變更密碼/登出 */
.nav-actions .bi {
	font-size: 1rem;
}

.company-name {
	font-size: .9375rem;
	line-height: 1.2;
	max-width: 40vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 576px) {
	.company-name {
		font-size: .875rem;
	}
}

.app-header.navbar.nav-thin {
	position: relative;
	border-bottom: 0;
}

.app-header.navbar.nav-thin::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	/* 線離底部的距離，想更靠上就加大 */
	height: 1px;
	background: var(--bs-border-color);
	pointer-events: none;
}


/* ===========================
   頁首標題（h5）與麵包屑
=========================== */
.app-content-header {
	padding: .25rem 1rem;
}

.app-content-header .row {
	align-items: flex-end;
}

.app-content-header h5 {
	margin: 0;
	line-height: 1.1;
}

.app-content-header .breadcrumb {
	margin: 0;
}

.app-content-header+.app-content {
	margin-top: .25rem;
}


/* ===========================
   app-content 位置控制
=========================== */
:root {
	--app-header-height: 120px;
}

/* 預設靠上 (查詢 / 列表頁面) */
.app-content {
	display: flex;
	flex-direction: column;
	/* 讓內容垂直排列 */
	justify-content: flex-start;
	/* 靠上 */
	align-items: stretch;
	/* 寬度自動撐開 */
	padding: 0.3rem 0;
	/* 上下間距 */
	min-height: calc(100vh - var(--app-header-height));
	/* 扣掉 header 高度 */
}

/* ✅ 若頁面加上 .centered，則垂直置中 */
.app-content.centered {
	justify-content: center;
	align-items: center;
	/* 垂直置中 */
	padding-top: 0;
}

/* ✅ 內層查詢區（藍框表單區）微調寬度與邊距 */
.app-content>.border {
	background-color: #fff;
	max-width: 100%;
}


/* ===========================
   兩層 Header（如有）
=========================== */
.hdr-topbar.navbar {
	min-height: 40px;
	height: 40px;
	white-space: nowrap;
}

.hdr-menubar {
	min-height: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.hdr-menubar .d-flex {
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.hdr-menubar .nav-link {
	padding: .25rem .5rem;
	line-height: 1.25;
}

.hdr-menubar img {
	height: 35px;
	width: auto;
	object-fit: contain;
}


/* 讓 DataTables 自行計算欄寬，不受舊 width 影響 */
table.dataTable thead th[style] {
	width: auto !important;
}


/* ===========================
   DataTables（密度切換）
=========================== */
.dataTables_wrapper.dataTables_length,
.dataTables_wrapper.dataTables_filter,
.dataTables_wrapper.dataTables_info,
.dataTables_wrapper.dataTables_paginate {
	min-height: 40px;
	font-size: .925rem;
}

table.dataTable thead th,
table.dataTable tbody td {
	white-space: normal !important;
	vertical-align: middle;
	text-align: center;
}

table.dataTable thead th,
table.dataTable thead td {
	padding-top: .45rem;
	padding-bottom: .45rem;
	line-height: 1.2;
	text-align: center;
}

/* 若不是刻意讓「最後一欄」置左，建議改為加類別到需要置左的欄位 */
table.dataTable tbody th,
table.dataTable tbody td:last-child {
	text-align: left;
}

/* 預設密度 */
.table-dt-default table.dataTable tbody th,
.table-dt-default table.dataTable tbody td {
	padding: .55rem .75rem;
	line-height: 1.25;
	font-size: .95rem;
}

/* 緊湊密度 */
.table-dt-compact table.dataTable thead th,
.table-dt-compact table.dataTable thead td {
	padding-top: .25rem;
	padding-bottom: .25rem;
}

.table-dt-compact table.dataTable tbody th,
.table-dt-compact table.dataTable tbody td {
	padding: .2rem .5rem;
	line-height: 1.2;
	font-size: .9rem;
}

.table-dt-compact .btn-sm {
	font-size: .9rem !important;
	line-height: 1.1 !important;
	padding: .2rem .5rem !important;
}

.table-dt-compact .btn-sm i {
	font-size: .9rem;
	line-height: 1;
	vertical-align: middle;
}

/* 舒適密度 */
.table-dt-relaxed table.dataTable thead th,
.table-dt-relaxed table.dataTable thead td {
	padding-top: .6rem;
	padding-bottom: .6rem;
}

.table-dt-relaxed table.dataTable tbody th,
.table-dt-relaxed table.dataTable tbody td {
	padding: .8rem 1rem;
	line-height: 1.35;
	font-size: 1rem;
}

/* 固定列高（選用） */
.table-dt-fixed-rows table.dataTable tbody th,
.table-dt-fixed-rows table.dataTable tbody td {
	height: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap !important;
}

/* 操作列 / checkbox 尺寸 */
table.dataTable td.btn,
table.dataTable td.btn-sm {
	padding: .2rem .45rem;
	line-height: 1;
}

table.dataTable td.form-check {
	margin-bottom: 0;
}

table.dataTable .form-check-input {
	width: 1rem;
	height: 1rem;
}

/* child row padding 一致 */
table.dataTable>tbody>tr.child ul.dtr-details>li {
	padding: .25rem 0;
	border-bottom: none;
}

/* === DataTables 手機自適應強化 === */
@media (max-width: 768px) {
	.dataTables_wrapper {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	table.dataTable {
		width: 100% !important;
		white-space: nowrap;
		table-layout: auto;
	}

	table.dataTable thead th,
	table.dataTable tbody td {
		white-space: nowrap;
		vertical-align: middle;
	}

	/* 下方分頁、資訊置中 */
	div.dataTables_info,
	div.dataTables_paginate {
		text-align: center;
	}
}

/* 手機版表格縮排 + 縮小文字 */
@media (max-width: 576px) {

	table.table-sm td,
	table.table-sm th {
		padding: 0.35rem 0.5rem;
		font-size: 0.85rem;
	}

	.dataTables_wrapper .dataTables_filter {
		margin-top: 0.25rem;
		margin-bottom: 0.5rem;
	}
}

/* 隱藏欄位標示用（非必要） */
.no-export {
	opacity: 0.7;
}

/* 保持表格內文清晰，避免擠在一起 */
table.table-sm td,
table.table-sm th {
	white-space: nowrap;
	vertical-align: middle;
}

/* 手機展開卡片樣式 */
@media (max-width: 768px) {
	div.dtr-modal-content {
		border-radius: 12px;
		background-color: #fff;
		padding: 1rem 1.25rem;
		box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
	}

	.dtr-modal-header {
		border-bottom: 1px solid #dee2e6;
		margin-bottom: 0.5rem;
		font-weight: 600;
	}
}


/* ===========================
   Admin 版面（可選）
=========================== */
.admin-content {
	display: grid;
	grid-template-rows: auto auto 1fr;
	min-height: 100dvh;
}

.admin-table-wrap {
	overflow: auto;
	max-height: calc(100dvh - 140px);
}

/* Desktop 才把大型按鈕加大（可選） */
@media (min-width: 768px) {
	.btn-lg-md {
		padding-top: .75rem;
		padding-bottom: .75rem;
		font-size: 1.1rem;
	}
}

/* 小螢幕圖示導覽（可選） */
@media (max-width: 576px) {
	.nav-compact .nav-link {
		padding: .4rem .8rem;
	}

	.nav-compact .nav-link i {
		font-size: 1.5rem !important;
	}
}


/* ===========================
   Sidebar（彈性高度）
=========================== */
.app-sidebar {
	display: flex;
	flex-direction: column;
}

.sidebar-wrapper {
	flex: 1 1 auto;
	overflow-y: auto;
}

.sidebar-version {
	flex-shrink: 0;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

/* 調整 Sidebar 品牌區高度（一次到位） */
:root {
	--sidebar-brand-h: 56px;
	/* 想多高改這裡：48 / 56 / 64 … */
	--sidebar-brand-px: 16px;
	/* 左右內距 */
}

/* 品牌區容器 */
.app-sidebar .sidebar-brand {
	min-height: var(--sidebar-brand-h);
	padding: 0 var(--sidebar-brand-px);
	display: flex;
	align-items: center;
	/* 垂直置中內容 */
	border-bottom: 0px solid var(--bs-border-color);
	/* 需要底線就留著 */
}

/* 連結本體：橫向置中排列 */
.app-sidebar .brand-link {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	text-decoration: none;
}

/* 圖標尺寸自適應：比品牌區高度略小一點 */
.app-sidebar .brand-image {
	height: calc(var(--sidebar-brand-h) - 16px);
	/* 高度 = 總高 - 內邊距 */
	width: auto;
	object-fit: contain;
}

/* 文字不換行，過長省略號 */
.app-sidebar .brand-text {
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 側欄縮起來時（如有使用 collapsed 模式）可選擇置中圖標、隱藏文字 */
body.sidebar-collapse .app-sidebar .sidebar-brand {
	justify-content: center;
}

body.sidebar-collapse .app-sidebar .brand-text {
	display: none;
	/* 或改成縮小字體 */
}


/* ===========================
   Tom Select（若有用）
=========================== */
body .ts-dropdown {
	overflow: hidden;
	z-index: 3000;
}

body .ts-dropdown .ts-dropdown-content {
	overflow-y: auto;
}

.ts-dropdown.ts-hide {
	display: none !important;
}

.ts-dropdown .option.active,
.ts-dropdown .option.selected,
.ts-dropdown .create.active {
	background-color: var(--bs-primary, #0d6efd) !important;
	color: #fff !important;
}

.ts-dropdown .option:hover:not(.active):not(.selected) {
	background-color: var(--bs-primary-bg-subtle, rgba(13, 110, 253, .15)) !important;
	color: var(--bs-body-color, #212529) !important;
}

.ts-wrapper .ts-control.focus {
	border-color: var(--bs-primary, #0d6efd) !important;
	box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25) !important;
}


/* ===========================
   後台 Login / Sky Theme（選用）
=========================== */
html[data-theme="sky"] body.login-page2 {
	background: var(--lte-sidebar-bg);
	color: var(--lte-sidebar-color);
}

html[data-theme="sky"] .login2-box {
	border: 1px solid rgb(56 189 248 / 25%);
	box-shadow: 0 10px 30px rgb(56 189 248 / 18%);
}

.btn-sky {
	background-color: var(--lte-sidebar-active-bg) !important;
	border-color: var(--lte-sidebar-active-bg) !important;
	color: var(--lte-sidebar-active-color) !important;
}

.btn-sky:hover {
	filter: brightness(.95);
}

html[data-theme="sky"] .form-control:focus {
	border-color: rgb(56 189 248 / 45%);
	box-shadow: 0 0 0 .25rem rgb(56 189 248 / 15%);
}

html[data-theme="sky"] body.login-page2 .btn-danger {
	background-color: var(--lte-sidebar-active-bg) !important;
	border-color: var(--lte-sidebar-active-bg) !important;
	color: var(--lte-sidebar-active-color) !important;
}


/* ===========================
   統一查詢區間距 / 表單微調
=========================== */
.content-header {
	margin-bottom: .75rem !important;
}

.content-header h3 {
	margin: 0;
	padding: 0;
}

#qForm .form-label {
	margin-bottom: .25rem;
}

#qForm .btn {
	min-width: 6rem;
}

/* 響應式調整 */
@media (max-width: 768px) {
	.content-header {
		text-align: center;
	}
}

/* 只有加了 tl-fixed 才用 fixed，避免沒寬度時被均分 */
#resultTable.tl-fixed {
	table-layout: fixed;
}

/* 只讓操作欄可換行 */
#resultTable th.col-ops,
#resultTable td.col-ops {
	white-space: normal !important;
	overflow: visible;
}