/*
Template: XRay - Responsive Bootstrap 4 Admin Dashboard Template
Author: iqonicthemes.in
Design and Developed by: iqonicthemes.in
NOTE: This file contains the styling for responsive Template.
*/
@media(max-width:1699px) {
	.email-form .select2-container { width: 100% !important; }
	.sign-in-page {height: 100%;}
	.sign-in-detail{height: 100%;}
	.iq-search-bar .searchbox {width: 350px;}
}
@media(min-width:1300px) {
	/* AdminLTE 風格：確保頂部漢堡按鈕顯示 */
	.iq-top-navbar .iq-navbar-custom .iq-menu-bt { display: inline-block !important; opacity: 1; }
	/* 針對 body.sidebar-main 強制顯示頂部漢堡按鈕 */
	body.sidebar-main .iq-top-navbar .iq-navbar-custom .iq-menu-bt { display: inline-block !important; opacity: 1; position: static; }
	/* 頂部漢堡按鈕顏色 - 確保在所有狀態下都是青綠色 */
	.iq-top-navbar .wrapper-menu,
	.iq-top-navbar .wrapper-menu i,
	.iq-top-navbar .wrapper-menu .main-circle,
	.iq-top-navbar .wrapper-menu .main-circle i,
	body.sidebar-main .iq-top-navbar .wrapper-menu,
	body.sidebar-main .iq-top-navbar .wrapper-menu i,
	body.sidebar-main .iq-top-navbar .wrapper-menu .main-circle,
	body.sidebar-main .iq-top-navbar .wrapper-menu .main-circle i {
		color: var(--primary, #00A0E8);
	}

	body.sidebar-main .iq-sidebar:hover + div.content-page {margin-left: 260px;}
	body.sidebar-main .iq-sidebar:hover + div.content-page .iq-top-navbar {width: calc(100% - 320px);}
	body.sidebar-main .iq-sidebar:hover + div.content-page .iq-top-navbar.fixed-header {width: calc(100% - 260px);}
}
@media(max-width:1399px) {
	.animation-card .an-img .bodymovin { margin-bottom: -28px; }
	.animation-card .an-img { margin-top: 0; }
}
@media(max-width:1299px) and (min-width:768px) {
	.iq-circle-progressbar .percent { font-size: 1.3rem; }
	.iq-circle-progressbar svg { width: 80px; height: 80px; }
	.iq-circle-progressbar { margin: 0 auto; width: 80px; height: 80px; }
	/* 中視窗側欄基礎（body.sidebar-main = 收合 80px，custom.js 預設加此 class） */
	.iq-sidebar { display: inline-block; z-index: 99; left: 0; background: var(--sidebar-bg, #1f2a37); transition: width 0.3s ease 0s; }
	.content-page { padding: 100px 0 0; border-radius: 25px 0 0 25px; }
	.iq-top-navbar { width: calc(100% - 95px); min-height: 64px; height: 64px; margin: 0; left: 95px; top: 0; z-index: 1000; box-shadow: none; }
	.iq-top-navbar.fixed-header { width: calc(100% - 95px); left: 95px; top: 0; }
	.iq-top-navbar .iq-navbar-custom .navbar-breadcrumb { display: none; }
	.wrapper-menu { color: var(--primary, #00A0E8); }
	.iq-top-navbar .iq-navbar-custom .iq-menu-bt { display: inline-block; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); opacity: 1; color: var(--primary, #00A0E8); }
	.iq-top-navbar .iq-navbar-custom,
	.iq-top-navbar .iq-navbar-custom .navbar { height: 64px; }
	.iq-top-navbar .navbar { flex-wrap: nowrap; }
	.iq-top-navbar .navbar-collapse { display: flex !important; flex-basis: auto; margin-left: auto; position: static; top: auto; left: auto; width: auto; background: transparent; box-shadow: none; border-radius: 0; }
	.iq-top-navbar .navbar-nav.navbar-list { display: flex; align-items: center; float: none; }
	.iq-top-navbar .navbar-list li { float: none; }
	.iq-top-navbar .navbar-list li > a { line-height: 64px; min-height: 64px; padding: 0 10px; }
	/* 中視窗保留使用者 dropdown（頭像+登出），只縮小名字區避免擁擠 */
	.iq-top-navbar .navbar-list li .caption { display: none; }
	.iq-top-navbar .navbar-list li > a > img { width: 36px; height: 36px; margin-right: 0; }

	/* body.sidebar-main = 收合 mini 80px（default 狀態） */
	body.sidebar-main .iq-sidebar { width: 80px; z-index: 99; }
	body.sidebar-main .iq-sidebar-logo { width: 80px; padding-left: 0; padding-right: 0; float: none; display: flex; justify-content: center; align-items: center; overflow: hidden; }
	body.sidebar-main .iq-sidebar-logo a { justify-content: center; align-items: center; max-width: 80px; width: 80px; padding: 0; margin: 0; }
	body.sidebar-main .iq-sidebar-logo img { display: block; margin: 0 auto; }
	body.sidebar-main .iq-sidebar-logo a span,
	body.sidebar-main .iq-sidebar .iq-sidebar-menu .iq-menu li a span,
	body.sidebar-main .iq-sidebar .iq-sidebar-menu .iq-menu li a .badge,
	body.sidebar-main .iq-sidebar-menu .iq-menu li a .iq-arrow-right { opacity: 0; display: none; transition: opacity 0.3s ease 0s; }
	body.sidebar-main .content-page { margin-left: 80px; }
	body.sidebar-main .iq-footer { margin-left: 80px; padding: 15px 10px; }

	/* Mini 模式 submenu 一律隱藏 */
	body .iq-sidebar .iq-sidebar-menu .iq-menu .iq-submenu,
	body .iq-sidebar .iq-sidebar-menu .iq-menu .iq-submenu.show,
	body .iq-sidebar .iq-sidebar-menu .iq-menu .iq-submenu.collapsing { display: none; }

	/* 中視窗 sidebar hover 展開 260px（浮動 overlay，不推擠內容）。
	   z-index 1001 蓋過 navbar (1000)，讓完整選單浮在上層 */
	body.sidebar-main .iq-sidebar:hover,
	body:not(.sidebar-main) .iq-sidebar:hover { width: 260px; z-index: 1001; overflow: visible; }
	body.sidebar-main .iq-sidebar:hover .iq-sidebar-logo,
	body:not(.sidebar-main) .iq-sidebar:hover .iq-sidebar-logo { width: 260px; padding-left: 20px; padding-right: 0; display: flex; justify-content: flex-start; align-items: center; overflow: visible; }
	body.sidebar-main .iq-sidebar:hover .iq-sidebar-logo a,
	body:not(.sidebar-main) .iq-sidebar:hover .iq-sidebar-logo a { justify-content: flex-start; max-width: none; width: auto; }
	body.sidebar-main .iq-sidebar:hover .iq-sidebar-logo a span,
	body.sidebar-main .iq-sidebar:hover .iq-sidebar-menu .iq-menu li a span,
	body.sidebar-main .iq-sidebar:hover .iq-sidebar-menu .iq-menu li a .badge,
	body.sidebar-main .iq-sidebar:hover .iq-sidebar-menu .iq-menu li a .iq-arrow-right,
	body:not(.sidebar-main) .iq-sidebar:hover .iq-sidebar-logo a span,
	body:not(.sidebar-main) .iq-sidebar:hover .iq-sidebar-menu .iq-menu li a span,
	body:not(.sidebar-main) .iq-sidebar:hover .iq-sidebar-menu .iq-menu li a .badge,
	body:not(.sidebar-main) .iq-sidebar:hover .iq-sidebar-menu .iq-menu li a .iq-arrow-right { opacity: 1; display: inline-block; }
	body.sidebar-main .iq-sidebar:hover .iq-sidebar-menu .iq-menu .iq-submenu.show,
	body:not(.sidebar-main) .iq-sidebar:hover .iq-sidebar-menu .iq-menu .iq-submenu.show { display: block; }

	/* body:not(.sidebar-main) = 也是 80px mini（保持一致，避免 class 切換時變 260px 覆蓋） */
	body:not(.sidebar-main) .iq-sidebar { width: 80px; z-index: 99; }
	body:not(.sidebar-main) .iq-sidebar-logo { width: 80px; padding-left: 0; padding-right: 0; float: none; display: flex; justify-content: center; align-items: center; overflow: hidden; }
	body:not(.sidebar-main) .iq-sidebar-logo a { justify-content: center; align-items: center; max-width: 80px; width: 80px; padding: 0; margin: 0; }
	body:not(.sidebar-main) .iq-sidebar-logo img { display: block; margin: 0 auto; }
	body:not(.sidebar-main) .iq-sidebar-logo a span,
	body:not(.sidebar-main) .iq-sidebar .iq-sidebar-menu .iq-menu li a span,
	body:not(.sidebar-main) .iq-sidebar .iq-sidebar-menu .iq-menu li a .badge,
	body:not(.sidebar-main) .iq-sidebar-menu .iq-menu li a .iq-arrow-right { opacity: 0; display: none; }
	body:not(.sidebar-main) .content-page { margin-left: 80px; }
	body:not(.sidebar-main) .iq-footer { margin-left: 80px; padding: 15px 10px; }
	.iq-email-to-list ul li { margin: 0 2px 0 0; }
	.an-img-two{    width: 600px;    top: -118px;}
	.iq-menu-horizontal { position: absolute; left: -100%; right: 0; width: 100%; opacity: 0; top: 100%; width: 260px; background: var(--surface-base, #fff); height: 80vh; overflow-y: scroll; overflow-x: hidden; transition: all 0.45s ease 0s; }
	.iq-page-menu-horizontal.sidebar-main .iq-menu-horizontal { opacity: 1; left: 0; transition: all 0.45s ease 0s; }
	.iq-menu-horizontal ul.iq-menu.d-flex { display: block !important; background: var(--surface-base, #fff); }
	.iq-menu-horizontal .iq-sidebar-menu .iq-menu li a { padding: 15px 20px 15px 30px; }
	.iq-menu-horizontal .iq-sidebar-menu .iq-menu li ul { position: static; box-shadow: none;}
	.iq-search-bar .searchbox {width: 100%;}
	.iq-right-fixed {margin: 0 15px;}
	body.sidebar-main-active .iq-sidebar-logo {display: none;}
}
@media(max-width:1199px) {
	.an-img-two{display: none;}
	.iq-booking-no li .iq-seat { width: 35px; height: 45px; }
	.iq-booking-no li { width: 4.7%; }
	.iq-email-to-list { overflow-x: scroll; }
	.iq-email-to-list ul li { margin: 0 5px 0 0; }
	.iq-email-to-list .justify-content-between { float: left; width: 900px; }
	.sign-in-from {padding: 0 30px;}
	.sign-in-detail{padding: 100px 50px;}
}

@media(max-width:992px) {
	.an-img-two .bodymovin{display: none;}
	.display-1 { font-size: 4rem; font-weight: 300; }
	.display-2 { font-size: 3.5rem; font-weight: 300; }
	.display-3 { font-size: 3rem; font-weight: 300; }
	.display-4 { font-size: 2.5rem; font-weight: 300; }
	.display-5 { font-size: 2rem; font-weight: 300; }
	.display-6 { font-size: 1.5rem; font-weight: 300; }
	.iq-top-navbar .navbar { position: relative; }
	.iq-top-navbar .navbar-toggler { right: 85px; top: 18px; position: absolute; color: var(--primary, #00A0E8); border: none; padding: 7px 10px; border-radius: 10px; font-size: 24px; }
	.navbar-collapse { position: absolute; top: 75px; left: 0; width: 100%; background: var(--surface-base, #fff); box-shadow: 0px 5px 12px 0px rgba(55, 73, 72, 0.15); border-radius: 25px; }
	.navbar-nav.navbar-list { float: right; display: inline-block; }
	.iq-top-navbar .iq-navbar-custom .iq-menu-bt { right: 130px; top: 18px; }
	.animation-card .an-img .bodymovin { margin-bottom: 0; margin-left: 0; width: 100%; }
	.iq-footer, .iq-footer .col-lg-6.text-right { text-align: center !important; }
	.iq-booking-index { overflow-x: scroll; }
	.seat-booking { width: 980px; position: relative; }
	.seat-booking .col-sm-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; width: 8.333333%; }
	.seat-booking .col-sm-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; width: 83.333333%; }
	.iq-booking-offer { padding: 30px; }
	.offer-an-img { position: static; width: 100%; }
	.sign-in-from {padding: 0 20px;}
	.iq-maintenance .col-lg-4 { margin-bottom: 15px;}
	.chat-data-left { position: absolute; left: 0; max-width: 320px; top: 0; z-index: 9; background: var(--surface-base, #fff); transform: translateX(-100%); opacity: 0; transition: all 0.45s ease 0s; box-shadow: 0px 0px 12px 0px rgba(55, 73, 72, 0.06); overflow-y: scroll; height: 100%; }
	.chat-sidebar-channel{overflow: auto; height: auto;padding-left: 0;}
	.chat-search {padding-left: 0;}
	.chat-data-left.show { transform: translateX(0); opacity: 1; transition: all 0.45s ease 0s; }
	button.close-btn-res { display: block; background: transparent; border: none; font-size: 20px; font-weight: 600; position: absolute; top: 10px; left: auto; right: 0; }
	.chat-head header { padding-left: 15px; }
	div#sidebar-toggle{display: block;}
	#sidebar-toggle { background: var(--primary-tint, #e6f6fd); padding: 12px 10px; margin-right: 15px; border-radius: 5px; height: 40px; width: 40px; line-height: 17px; text-align: center; color: var(--primary, #00A0E8); }
	#chat-user-detail-popup{overflow-y: scroll;padding-bottom: 20px;}
	#user-detail-popup{overflow: scroll;}
	ul.profile-img-gallary li img{width: 100%;}
	.profile-feed-items li a{margin: 0 5px 0 0;}
	.profile-left{order: 2;}
	.profile-center{order: 1;}
	.profile-right{order: 3;}
	.iq-edit-profile .nav-link{font-size: 14px;}
	.stepwizard-row .wizard-step a{padding: 20px 15px; margin: 10px 10px;}
	.navbar-list li .caption{display: none;}
	.navbar-list li img{margin-right: 0;}
	/* 僅在寬度 < 768 手機時 sidebar-main 顯示 logo 文字（桌面/中視窗 mini 模式隱藏） */
}
@media(max-width:979px) {
	.iq-circle-progressbar .percent { font-size: 2.5rem; }
	.iq-circle-progressbar svg { width: 200px; height: 200px; }
	.iq-circle-progressbar { margin: 0 auto; width: 200px; height: 200px; }
}

/* ============================================
   公告列表優化 (Announcement List) - 全域樣式
   適用於所有螢幕尺寸
   ============================================ */

/* 統計卡片頂部 - 圖示 + 標籤（水平排列）*/
.announcement-list-mobile .stat-card-header {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	width: 100%;
	justify-content: center;
}

/* 統計卡片 - 基礎樣式 */
.announcement-list-mobile .stat-card {
	border-radius: 8px;
	border: none;
	padding: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 85px;
}

/* 統計卡片 Hover 狀態（桌面版）*/
.announcement-list-mobile .stat-card:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

/* 統計卡片 Active 狀態回饋（觸控回饋）*/
.announcement-list-mobile .stat-card:active {
	transform: scale(0.96);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: all 0.1s ease;
}

/* 統計卡片圖標 */
.announcement-list-mobile .stat-card .stat-icon {
	font-size: 18px;
	line-height: 1;
}

/* 統計卡片標籤 */
.announcement-list-mobile .stat-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-tertiary);
	line-height: 1.2;
}

/* 統計卡片數字 - 置中顯示在下方 */
.announcement-list-mobile .stat-value {
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	color: var(--text-primary);
	text-align: center;
}

/* 統計卡片顏色 - Tonal Surface */
.announcement-list-mobile .unread-card {
	background: rgba(103, 126, 234, 0.08);
}

.announcement-list-mobile .unread-card .stat-icon {
	color: var(--primary, #667eea);
}

.announcement-list-mobile .urgent-card {
	background: rgba(220, 53, 69, 0.08);
}

.announcement-list-mobile .urgent-card .stat-icon {
	color: var(--state-error-text, #dc3545);
}

.announcement-list-mobile .total-card {
	background: rgba(0, 123, 255, 0.08);
}

.announcement-list-mobile .total-card .stat-icon {
	color: var(--primary, #007bff);
}

.announcement-list-mobile .month-card {
	background: rgba(40, 167, 69, 0.08);
}

.announcement-list-mobile .month-card .stat-icon {
	color: var(--btn-success-text, #28a745);
}

/* 公告列表容器 */
.announcement-list-mobile .iq-card {
	border-radius: 12px;
	box-shadow: none;
	margin-bottom: 16px;
}

.announcement-list-mobile .iq-card-header {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-default);
	background: var(--surface-raised);
}

.announcement-list-mobile .card-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	margin-bottom: 0;
}

.announcement-list-mobile .card-title i {
	font-size: 20px;
}

/* 公告項目 */
.announcement-list-mobile .announcement-item {
	display: block;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	text-decoration: none;
	color: var(--text-primary);
	transition: background-color 0.2s ease;
	position: relative;
}

.announcement-list-mobile .announcement-item:hover {
	background-color: rgba(0, 0, 0, 0.02);
}

.announcement-list-mobile .announcement-item:active {
	background-color: rgba(0, 0, 0, 0.05);
}

.announcement-list-mobile .announcement-item:last-child {
	border-bottom: none;
}

/* 未讀公告背景 */
.announcement-list-mobile .announcement-item.unread {
	background-color: rgba(103, 126, 234, 0.03);
}

/* 優先級別左側邊框 */
.announcement-list-mobile .announcement-item.priority-2 {
	border-left: 3px solid var(--color-danger, #dc3545);
}

.announcement-list-mobile .announcement-item.priority-1 {
	border-left: 3px solid var(--color-warning, #ffc107);
}

/* 公告標題區域 */
.announcement-list-mobile .announcement-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 8px;
}

.announcement-list-mobile .announcement-title-wrapper {
	flex: 1;
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

/* 優先級徽章 */
.announcement-list-mobile .priority-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 6px;
	font-size: 10px;
	font-weight: 600;
	border-radius: 4px;
	text-transform: uppercase;
	line-height: 1.4;
}

.announcement-list-mobile .priority-badge.urgent {
	background-color: var(--color-danger, #dc3545);
	color: white;
}

.announcement-list-mobile .priority-badge.important {
	background-color: var(--color-warning, #ffc107);
	color: #000;
}

.announcement-list-mobile .priority-badge i {
	font-size: 11px;
}

/* 公告標題 */
.announcement-list-mobile .announcement-title {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 未讀指示器 */
.announcement-list-mobile .unread-indicator {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--primary, #667eea);
	margin-left: 8px;
	margin-top: 4px;
}

/* 內容預覽 */
.announcement-list-mobile .announcement-preview {
	font-size: 13px;
	color: var(--text-tertiary);
	line-height: 1.5;
	margin-bottom: 8px;
	padding-left: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 公告元資訊 */
.announcement-list-mobile .announcement-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: var(--text-tertiary);
	flex-wrap: wrap;
}

.announcement-list-mobile .announcement-meta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.announcement-list-mobile .announcement-meta i {
	font-size: 13px;
}

.announcement-list-mobile .announcement-meta .announcement-attachment {
	color: var(--color-warning, #ffc107);
	font-weight: 500;
}

/* 空狀態 */
.announcement-list-mobile .empty-state {
	text-align: center;
	padding: 60px 20px;
	color: var(--text-tertiary);
}

.announcement-list-mobile .empty-state i {
	font-size: 64px;
	color: var(--border-default);
	margin-bottom: 16px;
}

.announcement-list-mobile .empty-state p {
	font-size: 14px;
	margin: 0;
}

@media(max-width:767px) {
	.table { width: 100%; max-width: 100%; margin-bottom: 1rem; display: block; overflow-x: auto; }
	.display-1 { font-size: 2.5rem; font-weight: 500; }
	.display-2 { font-size: 2.3rem; font-weight: 500; }
	.display-3 { font-size: 2rem; font-weight: 500; }
	.display-4 { font-size: 1.6rem; font-weight: 500; }
	.display-5 { font-size: 1.3rem; font-weight: 500; }
	.display-6 { font-size: 1rem; font-weight: 500; }
	.search-box .search-input { width: 280px; }
	.navbar-nav.navbar-list { display: inline-block;}
	.sign-info{text-align: center;margin-bottom: 30px;}
	.iq-social-media{width: 100%;}
	.iq-social-media li{float: none; display: inline-block;}
	.sign-in-from button {margin-top: 10px;}
	.sign-in-from .custom-control.custom-checkbox {display: block;}
	.sign-in-detail {padding: 50px 20px;}
	.sign-in-from{padding: 20px;}
	.iq-error h1{font-size: 12rem;}
	.user-detail {margin-bottom: 15px;padding-left: 0;}
	.user-detail .d-flex {display: block !important; text-align: center;}
	.profile-img{text-align: center; padding-right: 0;}
	.profile-feed-items{width: 100%;justify-content: center;}
	.iq-edit-profile .nav-link{border: none;}
	.user-list-files.d-flex.float-right { display: block !important; text-align: center; margin-top: 30px; width: 100%; }
	.table-responsive #exampleInputSearch{width: 100%;}
	.wizard-step{width: 50%;}
	.training-block {margin-bottom: 20px;}
	.sign-in-page .sign-in-page-bg::after{right: 0;}
	.sign-in-from{position: static;}

	/* ============================================
	   手機版頂部區域優化 (Mobile Header Optimization)
	   ============================================ */

	/* 個人工作台頂部樣式 - 緊湊版 */
	.yshead {
		padding: 12px 0 8px 0;
		border-bottom: 1px solid var(--border-default);
		margin-bottom: 12px;
	}

	.yshead .row {
		margin: 0;
	}

	/* 問候語區域 - 縮小尺寸 */
	.yshead h2 {
		font-size: 20px;
		font-weight: var(--font-weight-bold);
		padding: 0;
		margin-bottom: 4px;
		color: var(--text-secondary);
		line-height: 1.2;
	}

	.yshead p {
		font-size: 13px;
		color: var(--text-tertiary);
		margin-bottom: 0;
	}

	.yshead img {
		width: 42px;
		height: 42px;
		border-radius: var(--radius-full);
		margin-right: var(--spacing-xs);
		box-shadow: var(--shadow-sm);
	}

	/* 問候語與頭像的對齊 */
	.yshead .pull-left {
		display: inline-flex;
		align-items: center;
	}

	/* 頁面標題（如果需要） */
	.page-title-mobile {
		font-size: 18px;
		font-weight: var(--font-weight-semibold);
		color: var(--text-secondary);
		margin-bottom: var(--spacing-sm);
		padding: var(--spacing-sm) 0;
	}

	/* 手機版布局調整：問候語與統計卡片分開顯示 - 緊湊間距 */
	.yshead .row > li {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 8px;
	}

	/* 問候語區域與統計卡片之間的間距 - 縮小 */
	.yshead .row > li:first-child {
		margin-bottom: 12px;
	}

	/* 統計卡片手機優化 */
	.personal-workspace .iq-card-body { padding: 1rem; }
	.personal-workspace .iq-card-body i { font-size: 24px; }
	.personal-workspace .iq-card-body h6 { font-size: 18px; }
	.personal-workspace .iq-card-body small { font-size: 12px; }

	/* 快速操作按鈕 - 符合觸控友善標準 (最小 44x44px) */
	.mobile-friendly-btn {
		font-size: 14px;
		padding: 12px 20px;
		min-height: 44px;
		min-width: 100px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}


	/* 側邊欄手機模式優化 - 預設隱藏 */
	.iq-sidebar {
		position: fixed !important;
		left: -260px !important;
		top: 0;
		bottom: 0;
		width: 260px;
		background-color: var(--sidebar-bg, #1f2a37);
		z-index: 1100;
		transition: left 0.3s ease-in-out;
		overflow-y: auto;
	}
	/* 當側邊欄展開時才顯示 */
	body.sidebar-main .iq-sidebar {
		left: 0 !important;
		width: 260px;
		z-index: 1100;
	}

	/* 覆蓋桌面版的縮小樣式，確保手機版側邊欄完整顯示 */
	body.sidebar-main .iq-sidebar .iq-sidebar-menu .iq-menu li a span,
	body.sidebar-main .iq-sidebar-logo a span,
	body.sidebar-main .iq-sidebar-menu .iq-menu li a .badge {
		opacity: 1;
		display: inline-block;
	}

	/* 側邊欄選單項目樣式優化 - 移除白色背景，保持透明 */
	.iq-sidebar-menu .iq-menu > li.menu-open,
	.iq-sidebar-menu .iq-menu > li.active {
		background: transparent;
		box-shadow: none;
		margin-bottom: 0;
	}

	/* 主選單項目文字：用 token，配合淺色 sidebar-bg */
	.iq-sidebar-menu .iq-menu > li > a,
	.iq-sidebar-menu .iq-menu > li.menu-open > a,
	.iq-sidebar-menu .iq-menu > li.active > a {
		color: var(--sidebar-text);
	}
	.iq-sidebar-menu .iq-menu > li.active > a {
		color: var(--sidebar-active-text);
		background: var(--sidebar-submenu-active-bg);
	}

	/* 子選單文字：14px + 縮排 45px + 深灰；覆蓋桌面 font-size:0 */
	.iq-sidebar .iq-submenu li a {
		font-size: 14px;
		padding: 10px 15px 10px 45px;
		color: var(--sidebar-text);
	}

	/* 子選單 active：淡藍 bg + 深藍字（Zoho 風） */
	.iq-sidebar-menu .iq-menu li.active .iq-submenu li.active > a {
		background: var(--sidebar-submenu-active-bg);
		color: var(--sidebar-active-text);
		border-radius: 8px;
	}

	/* 子選單 hover */
	.iq-sidebar .iq-submenu li a:hover {
		background: var(--sidebar-hover-bg, rgba(0, 160, 232, 0.06));
		color: var(--sidebar-active-text);
	}

	/* 移除子選單裝飾圓點（桌面版的 ::after 小圓點在手機淺底看起來很亂） */
	.iq-sidebar .iq-submenu li a::after,
	.iq-sidebar .iq-submenu li a::before {
		display: none !important;
	}

	/* Logo a 不要底線（避免 logo 旁出現「_」殘影） */
	.iq-sidebar-logo a {
		text-decoration: none !important;
	}

	/* 側邊欄使用 flex 佈局，讓底部資訊卡片置底 */
	#sidebar-scrollbar {
		display: flex;
		flex-direction: column;
	}

	#sidebar-scrollbar > nav {
		flex: 1;
	}

	/* 側邊欄底部：用戶資訊與語系切換（配合淺色 sidebar） */
	.sidebar-footer {
		display: block;
		flex-shrink: 0;
		border-top: 1px solid var(--border-default);
		background: var(--surface-muted, rgba(0, 0, 0, 0.03));
	}

	.sidebar-user-card {
		background: transparent;
		color: var(--sidebar-text);
	}

	.sidebar-user-card img {
		border: 2px solid var(--border-default);
	}

	.sidebar-user-card h6,
	.sidebar-user-name {
		font-size: 14px;
		font-weight: 600;
		color: var(--sidebar-text);
	}

	.sidebar-user-card small,
	.sidebar-user-meta {
		font-size: 12px;
		color: var(--sidebar-text-muted);
	}

	/* footer 區段分隔線與 label（取代原 border-white-10 / text-white-50） */
	.sidebar-footer-section {
		border-top: 1px solid var(--border-default);
	}
	.sidebar-footer-label {
		color: var(--sidebar-text-muted);
	}

	.sidebar-user-card .btn {
		font-size: 13px;
		font-weight: 500;
	}

	.sidebar-language .border-white-10 {
		border-color: var(--border-default);
	}

	.sidebar-language .text-white-50 {
		color: var(--sidebar-text-muted);
		opacity: 1;
	}

	.sidebar-language .btn {
		font-size: 12px;
		padding: 4px 8px;
		min-width: 45px;
	}

	.sidebar-footer .btn-outline-light {
		color: var(--sidebar-text);
		border-color: var(--border-default);
	}

	.sidebar-footer .btn-outline-light:hover {
		background: var(--sidebar-hover-bg, rgba(0, 160, 232, 0.06));
		border-color: var(--primary, #00A0E8);
		color: var(--sidebar-active-text);
	}

	/* 側邊欄背景遮罩 */
	body.sidebar-main::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1099;
	}

	/* 手機版側邊欄打開時隱藏底部 nav，避免覆蓋 sidebar-footer（admin 卡片） */
	body.sidebar-main .mobile-bottom-nav {
		display: none !important;
	}

	/* 內容區域手機優化 - 佔滿全寬，從頂部開始 */
	.content-page {
		padding: 10px 5px 0;  /* 頂部導航欄已隱藏，只需少量間距 */
		margin-left: 0;
		margin-top: 0;
		width: 100%;
		border-radius: 0;
	}
	.container-fluid {
		padding-left: 5px;
		padding-right: 5px;
	}
	.iq-card {
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 10px;
	}
	.iq-card-body { padding: 12px; }

	/* 頂部導航欄優化 - 手機版隱藏（使用底部導航欄取代） */
	.iq-top-navbar {
		display: none !important;
	}

	/* 公告列表手機優化 */
	.list-group-item {
		padding: 12px;
		font-size: 14px;
	}
	.list-group-item .badge {
		font-size: 11px;
		padding: 4px 8px;
	}

	/* ============================================
	   個人工作台卡片優化 (Personal Workspace Cards)
	   ============================================ */

	/* 統計卡片並排顯示（兩欄布局） */
	.personal-workspace .row > [class*='col-6'] {
		flex: 0 0 50%;
		max-width: 50%;
		padding-left: 4px;
		padding-right: 4px;
	}

	/* 其他內容區塊（最近活動、快速操作）保持單欄 */
	.personal-workspace .row > [class*='col-12'] {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* 統計卡片樣式優化 */
	.personal-workspace .iq-card {
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-sm);
		transition: var(--transition-default);
		margin-bottom: var(--spacing-sm);
	}

	.personal-workspace .iq-card:hover {
		box-shadow: var(--shadow-md);
		transform: translateY(-2px);
	}

	/* 卡片內容樣式 - 緊湊版（適合並排顯示） */
	.personal-workspace .iq-card-body {
		padding: 10px 6px;
		min-height: 75px; /* 縮小固定高度，更緊湊 */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.personal-workspace .iq-card-body i {
		font-size: 24px;
		margin-bottom: 4px;
	}

	.personal-workspace .iq-card-body h6 {
		font-size: 22px;
		font-weight: var(--font-weight-bold);
		margin-bottom: 2px;
		line-height: 1;
	}

	.personal-workspace .iq-card-body small {
		font-size: 10px;
		opacity: 0.9;
		white-space: nowrap; /* 防止文字換行 */
	}


	/* ============================================
	   階段 4：觸控友善優化 (Touch-Friendly Optimization)
	   ============================================ */

	/* 全域按鈕觸控優化 */
	.btn,
	button,
	a.btn {
		min-height: var(--mobile-touch-target-min);
		padding: 12px 20px;
		font-size: 15px;
		font-weight: var(--font-weight-medium);
		border-radius: var(--radius-sm);
		transition: var(--transition-default);
		touch-action: manipulation; /* 防止雙擊縮放 */
	}

	/* 按鈕間距優化 - 避免誤觸 */
	.btn + .btn,
	button + button {
		margin-left: var(--spacing-sm);
	}

	.btn-group .btn,
	.btn-group-sm .btn {
		margin-left: 0;
		margin-right: var(--spacing-xs);
		margin-bottom: var(--spacing-xs);
	}

	/* 連結觸控優化（§6.1 PR-B6：原 a:not(.btn) 廣規則改為內文範圍限定）
	   原規則會套到所有 <a>（包含 .crm-mobile-card 等容器型連結），
	   造成佈局副作用（display: inline-block 破壞 flex/grid 子項）。
	   現只對「內文文字連結」加 tap target padding。*/
	.content-page p a:not(.btn),
	.content-page li a:not(.btn),
	.content-page td a:not(.btn),
	.content-page dd a:not(.btn),
	.content-page h1 a:not(.btn),
	.content-page h2 a:not(.btn),
	.content-page h3 a:not(.btn),
	.content-page h4 a:not(.btn),
	.content-page h5 a:not(.btn),
	.content-page h6 a:not(.btn) {
		padding: var(--spacing-xs) 0;
	}

	/* 表單輸入框優化 */
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="number"],
	input[type="tel"],
	input[type="search"],
	select,
	textarea {
		min-height: var(--mobile-touch-target-min);
		padding: 12px 16px;
		font-size: 16px !important; /* iOS 防止自動縮放 */
		border-radius: var(--radius-sm);
		border: 1px solid var(--border-default);
		transition: var(--transition-default);
	}

	/* 輸入框聚焦效果 */
	input:focus,
	select:focus,
	textarea:focus {
		border-color: var(--primary);
		box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
		outline: none;
	}

	/* 下拉選單優化 */
	select {
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23777' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 12px center;
		padding-right: 40px;
	}

	/* Checkbox 和 Radio 優化 */
	input[type="checkbox"],
	input[type="radio"] {
		width: 20px;
		height: 20px;
		margin-right: var(--spacing-sm);
	}

	/* 表格觸控優化 */
	.table td,
	.table th {
		padding: 12px;
		font-size: 14px;
	}

	/* 列表項目觸控優化 */
	.list-group-item {
		min-height: var(--mobile-touch-target-min);
		padding: 12px 16px;
		transition: var(--transition-default);
	}

	.list-group-item:active {
		background-color: var(--color-gray-100);
	}

	/* ============================================
	   階段 5：視覺現代化 (Visual Modernization)
	   ============================================ */

	/* 微互動動畫 - 按鈕點擊回饋 */
	.btn:active,
	button:active {
		transform: scale(0.98);
		transition: transform 0.1s ease;
	}

	/* 卡片點擊回饋 */
	.iq-card:active {
		transform: scale(0.99);
		transition: transform 0.1s ease;
	}

	/* 載入動畫 - 骨架屏效果 */
	@keyframes skeleton-loading {
		0% {
			background-position: 200% 0;
		}
		100% {
			background-position: -200% 0;
		}
	}

	.skeleton {
		background: linear-gradient(
			90deg,
			var(--color-gray-100) 25%,
			var(--color-gray-200) 50%,
			var(--color-gray-100) 75%
		);
		background-size: 200% 100%;
		animation: skeleton-loading 1.5s ease-in-out infinite;
		border-radius: var(--radius-sm);
	}

	/* 淡入動畫 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.fade-in {
		animation: fadeIn 0.3s ease-out;
	}

	/* 統計卡片依序淡入 */
	.personal-workspace .iq-card:nth-child(1) {
		animation: fadeIn 0.3s ease-out 0.1s both;
	}

	.personal-workspace .iq-card:nth-child(2) {
		animation: fadeIn 0.3s ease-out 0.2s both;
	}

	/* 脈動效果 - 用於徽章 */
	@keyframes pulse {
		0%, 100% {
			opacity: 1;
			transform: scale(1);
		}
		50% {
			opacity: 0.8;
			transform: scale(1.05);
		}
	}

	.badge-pulse {
		animation: pulse 2s ease-in-out infinite;
	}

	/* 底部導航欄項目點擊波紋效果 */
	.mobile-bottom-nav .nav-item {
		position: relative;
		overflow: hidden;
	}

	.mobile-bottom-nav .nav-item::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		border-radius: 50%;
		background: rgba(var(--primary-rgb), 0.3);
		transform: translate(-50%, -50%);
		transition: width 0.6s, height 0.6s;
	}

	.mobile-bottom-nav .nav-item:active::after {
		width: 200px;
		height: 200px;
	}

	/* 平滑滾動 */
	html {
		scroll-behavior: smooth;
	}

	/* 改善陰影層次 */
	.iq-card {
		box-shadow: var(--shadow-sm);
		transition: box-shadow var(--transition-default), transform var(--transition-default);
	}

	.iq-card:hover {
		box-shadow: var(--shadow-md);
		transform: translateY(-2px);
	}

	/* 改善色彩對比度 */
	.text-muted {
		color: var(--text-tertiary) !important;
	}

	.text-primary {
		color: var(--primary);
	}

	/* 統一圓角 */
	.iq-card,
	.btn,
	input,
	select,
	textarea {
		border-radius: var(--radius-md);
	}

	/* 改善焦點可見性（無障礙優化） */
	*:focus-visible {
		outline: 2px solid var(--primary) !important;
		outline-offset: 2px;
	}

	/* 禁用元素樣式 */
	.btn:disabled,
	button:disabled,
	input:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	/* 載入中狀態 */
	.loading {
		position: relative;
		pointer-events: none;
		opacity: 0.6;
	}

	.loading::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 20px;
		margin: -10px 0 0 -10px;
		border: 2px solid var(--primary);
		border-top-color: transparent;
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}

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

	/* ============================================
	   手機版底部導航欄 (Mobile Bottom Navigation)
	   v3.3 - 遷移至 mobile-shared.css 變數系統
	   ============================================ */
	.mobile-bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 56px;
		background: var(--mobile-color-bg-body);
		box-shadow: var(--mobile-shadow-sm);
		z-index: var(--mobile-z-fixed);
		display: flex;
		justify-content: space-around; /* 6 個項目均分 */
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); /* iOS 安全區域支援 */
		border-top: 1px solid var(--mobile-color-border);
	}

	/* 導航項目 - 支援 6 個項目的等寬布局 */
	.mobile-bottom-nav .nav-item {
		flex: 0 0 16.666%; /* 100% / 6 = 16.666% 每個項目 */
		max-width: 16.666%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 4px 0;
		min-height: var(--mobile-touch-target);
		color: var(--mobile-color-text-secondary);
		text-decoration: none;
		position: relative;
		transition: all var(--mobile-transition-normal);
		cursor: pointer;
	}

	/* 導航項目 Hover 效果 */
	.mobile-bottom-nav .nav-item:hover {
		color: var(--mobile-color-primary);
		text-decoration: none;
	}

	/* 導航項目啟用狀態 */
	.mobile-bottom-nav .nav-item.active {
		color: var(--mobile-color-primary);
	}

	/* 導航項目圖示 */
	.mobile-bottom-nav .nav-item i {
		font-size: var(--mobile-icon-size);
		line-height: 1;
		margin-bottom: 2px;
	}

	/* 導航項目文字 */
	.mobile-bottom-nav .nav-item span {
		font-size: var(--mobile-font-size-xs);
		font-weight: var(--mobile-font-weight-medium);
		line-height: 1.2;
	}

	/* 導航項目徽章（未讀數量提示） */
	.mobile-bottom-nav .nav-badge {
		position: absolute;
		top: 2px;
		right: calc(50% - 20px);
		background: var(--mobile-color-danger);
		color: var(--mobile-color-text-inverse);
		font-size: 10px;
		font-weight: var(--mobile-font-weight-bold);
		padding: 2px 6px;
		border-radius: var(--mobile-radius-full);
		min-width: 18px;
		height: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}

	/* 內容區域底部留白，避免被導航欄遮擋
	 * 56px nav + 32px 呼吸 + env(safe-area-inset-bottom) (iOS)
	 * 某些頁面（如 pc_manager agent_detail）有多張卡片垂直堆疊，
	 * 最後一張會被底部導航蓋住，原本 66px 不夠。
	 */
	.content-page {
		padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}

}
@media(max-width:479px) {
	.display-1 { font-size: 2.0rem; font-weight: 500; }
	.display-2 { font-size: 1.8rem; font-weight: 500; }
	.display-3 { font-size: 1.6rem; font-weight: 500; }
	.display-4 { font-size: 1.4rem; font-weight: 500; }
	.display-5 { font-size: 1.2rem; font-weight: 500; }
	.iq-circle-progressbar .percent { font-size: 2rem; }
	.iq-circle-progressbar svg { width: 150px; height: 150px; }
	.iq-circle-progressbar { margin: 0 auto; width: 150px; height: 150px; }
	.iq-card-body { padding: 15px; }
	.iq-sidebar-logo a span { display: none; }
	body.sidebar-main .iq-top-navbar .iq-sidebar-logo a span { opacity: 0; display: none; }
	.iq-error h1{font-size: 8rem;}
	.chat-head header{overflow-x: scroll;}
	#chat-user-detail-popup{width: 300px;}
	.profile-feed-items{display: block !important;}
	.profile-feed-items li{margin: 0 0 20px 0;}
	ul.header-nav li{height: 35px; width: 35px; line-height: 35px; margin: 0 5px 0 0; font-size: 16px;}
	.comment-area.p-3 > div {display: block !important;}
	.comment-area.p-3 > div> div {margin-bottom: 10px;}
	.profile-feed-items li a{text-align: center;}
	.wizard-step{width: 100%;}
	.iq-search-bar {padding: 0 15px; width: 100%; margin: 15px 0 0;}
	.iq-top-navbar .navbar {display: block;}
	.iq-top-navbar .navbar-toggler, .iq-top-navbar .iq-navbar-custom .iq-menu-bt{top: 53px;}
	.navbar-collapse{top: 110px;}
	/* 只設 padding-top，不用 shorthand 否則會覆蓋 767px 的 padding-bottom */
	.content-page, body.sidebar-main .content-page { padding-top: 170px; padding-left: 0; padding-right: 0; }
	.iq-top-navbar .iq-sub-dropdown{width: 240px;}
}
@media(max-width:359px) { }

@media(max-width:767px) {

	/* ============================================
	   公告詳細頁面手機版優化 (Announcement Detail Mobile)
	   ============================================ */

	/* 詳細頁面容器 */
	.announcement-detail-mobile .iq-card {
		border-radius: var(--radius-md);
		box-shadow: none;
		margin-bottom: var(--spacing-md);
	}

	.announcement-detail-mobile .iq-card-header {
		padding: 16px;
		border-bottom: 1px solid var(--border-default);
		background: var(--surface-base);
	}

	/* 標題區域 */
	.announcement-detail-header {
		margin-bottom: 12px;
	}

	.announcement-detail-title {
		font-size: 20px;
		font-weight: var(--font-weight-bold);
		line-height: 1.4;
		margin: 8px 0 0 0;
		color: var(--text-secondary);
	}

	/* 元資訊 */
	.announcement-detail-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		font-size: 13px;
		color: var(--text-tertiary);
		padding-top: 8px;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
	}

	.announcement-detail-meta .meta-item {
		display: inline-flex;
		align-items: center;
		gap: 4px;
	}

	.announcement-detail-meta i {
		font-size: 14px;
	}

	/* 公告內容 */
	.announcement-detail-mobile .iq-card-body {
		padding: 16px;
	}

	.announcement-detail-content {
		font-size: 15px;
		line-height: 1.7;
		color: var(--text-secondary);
		word-wrap: break-word;
	}

	.announcement-detail-content p {
		margin-bottom: 12px;
	}

	/* 附件區域 */
	.announcement-attachments {
		margin-top: 24px;
		padding-top: 16px;
		border-top: 1px solid var(--border-default);
	}

	.attachments-title {
		font-size: 14px;
		font-weight: var(--font-weight-semibold);
		color: var(--text-tertiary);
		margin-bottom: 12px;
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.attachments-title i {
		font-size: 16px;
	}

	.attachments-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.attachment-item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px;
		background: var(--surface-base);
		border: 1px solid var(--border-default);
		border-radius: var(--radius-sm);
		color: var(--text-secondary);
		text-decoration: none;
		transition: all 0.2s ease;
	}

	.attachment-item:active {
		background: rgba(var(--primary-rgb), 0.05);
		border-color: var(--primary);
	}

	.attachment-item i:first-child {
		font-size: 20px;
		color: var(--primary);
	}

	.attachment-name {
		flex: 1;
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.attachment-item i:last-child {
		font-size: 18px;
		color: var(--text-tertiary);
	}

	/* 底部按鈕 */
	.announcement-detail-mobile .iq-card-footer {
		padding: 12px 16px;
		border-top: 1px solid var(--border-default);
		background: var(--surface-base);
	}

	.btn-back {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		font-size: 15px;
		font-weight: var(--font-weight-medium);
		padding: 12px;
		border-radius: var(--radius-sm);
	}

	.btn-back i {
		font-size: 18px;
	}

}

/* ============================================
   專利清單頁面手機版優化已移至獨立檔案
   請參考：static/css/patent-list-mobile.css
   ============================================ */