/* ===== 蘇花改施工通報管理系統 - 現代化 UI 完整版 ===== */
/* 建立日期: 2025-12-05 */
/* 最佳化: 完整響應式、觸控優化、無障礙、動畫、列印樣式 */

/* ===== CSS 變數定義 ===== */
:root {
    /* 主題色彩 */
    --primary-color: #2d6a4f;
    --primary-dark: #1b5e3f;
    --primary-light: #40916c;
    --success-color: #52b788;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;

    /* 中性色 */
    --light-gray: #f8f9fa;
    --border-color: #e0e6ed;
    --text-primary: #212529;
    --text-secondary: #6c757d;

    /* 輸入框背景色 - 更淡的淺黃色 */
    --input-bg: #fffffc;

    /* 佈局尺寸 */
    --sidebar-width: 260px;
    --navbar-height: 56px;
    --mobile-navbar-height: 50px;

    /* 效果 */
    --transition-speed: 0.3s;
    --box-shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --box-shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --box-shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
    --border-radius: 8px;
    --border-radius-sm: 6px;
    --border-radius-lg: 12px;

    /* 無障礙 - 最小觸控目標 */
    --min-touch-target: 44px;
}

/* ===== 基礎設定 (不重置原有樣式) ===== */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== 動畫定義 ===== */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ===== 導航列 ===== */
.modern-navbar {
    background-color: var(--primary-color);
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: var(--box-shadow-sm);
    height: var(--navbar-height);
}

.modern-navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 100%;
    max-width: 100%;
}

.modern-navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    color: white;
    text-decoration: none;
    min-height: var(--min-touch-target);
}

.modern-navbar-brand:hover {
    color: white;
    text-decoration: none;
}

.modern-navbar-brand i {
    font-size: 22px;
}

.modern-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    margin-right: 10px;
    min-width: var(--min-touch-target);
    min-height: var(--min-touch-target);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed);
}

.modern-menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.modern-navbar-menu {
    display: flex;
    gap: 5px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.modern-navbar-menu li {
    list-style: none;
}

.modern-navbar-menu a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 6px;
    transition: all var(--transition-speed);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--min-touch-target);
}

.modern-navbar-menu a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.modern-navbar-menu .user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    min-height: var(--min-touch-target);
}

.modern-navbar-menu .user-info i {
    font-size: 18px;
}

/* ===== 主容器 ===== */
.modern-main-container {
    display: flex;
    margin-top: var(--navbar-height);
    min-height: calc(100vh - var(--navbar-height));
}

/* ===== 側邊欄 ===== */
.modern-sidebar {
    width: var(--sidebar-width);
    background-color: white;
    border-right: 1px solid var(--border-color);
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform var(--transition-speed);
    z-index: 999;
    box-shadow: var(--box-shadow-sm);

    /* 滾動條美化 */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.modern-sidebar::-webkit-scrollbar {
    width: 6px;
}

.modern-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.modern-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
}

.modern-sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--light-gray);
    position: sticky;
    top: 0;
    z-index: 1;
}

.modern-sidebar-header h3 {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.modern-sidebar-menu {
    list-style: none;
    padding: 10px 0;
    margin: 0;
}

.modern-sidebar-menu > li {
    margin: 2px 10px;
}

.modern-sidebar-menu > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-speed);
    font-size: 16px;
    min-height: var(--min-touch-target);
}

.modern-sidebar-menu > li > a:hover {
    background-color: var(--light-gray);
    color: var(--primary-color);
}

.modern-sidebar-menu > li.active > a,
.modern-sidebar-menu > li.active > a:hover,
.modern-sidebar-menu > li.active > a:focus {
    background-color: #d8f3dc !important;
    color: var(--primary-dark) !important;
    font-weight: 600 !important;
}

.modern-sidebar-menu > li > a i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

/* 子選單 */
.modern-sidebar-menu .treeview-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 20px;
    display: none;
}

.modern-sidebar-menu .treeview.active > .treeview-menu {
    display: block;
}

.modern-sidebar-menu .treeview-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-speed);
    font-size: 15px;
    min-height: var(--min-touch-target);
}

.modern-sidebar-menu .treeview-menu > li > a:hover {
    background-color: var(--light-gray);
    color: var(--primary-color);
}

.modern-sidebar-menu .treeview-menu > li.menu-active > a,
.modern-sidebar-menu .treeview-menu > li.menu-active > a:hover,
.modern-sidebar-menu .treeview-menu > li.menu-active > a:focus,
.modern-sidebar-menu .treeview-menu li.menu-active a {
    color: var(--primary-dark) !important;
    font-weight: 600 !important;
    background-color: #d8f3dc !important;
}

/* 展開箭頭 */
.modern-sidebar-menu .menu-arrow {
    margin-left: auto;
    transition: transform var(--transition-speed);
}

.modern-sidebar-menu .treeview.active > a .menu-arrow {
    transform: rotate(90deg);
}

/* ===== 主內容區 ===== */
.modern-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 20px;
    min-height: calc(100vh - var(--navbar-height));
    background-color: #e8ebe9;
}

/* ===== 頁面標題 ===== */
.modern-page-header {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: var(--box-shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.modern-page-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modern-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.modern-breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
}

.modern-breadcrumb a:hover {
    text-decoration: underline;
}

/* ===== 按鈕 ===== */
.btn,
button.btn,
input[type="button"],
input[type="submit"] {
    border-radius: var(--border-radius-sm) !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

.btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.btn-primary,
button.btn-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: 1px solid var(--primary-color) !important;
}

.btn-primary:hover,
button.btn-primary:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: white !important;
}

.btn-success,
button.btn-success {
    background-color: var(--success-color) !important;
    color: white !important;
    border: 1px solid var(--success-color) !important;
}

.btn-success:hover,
button.btn-success:hover {
    background-color: #3da776 !important;
    border-color: #3da776 !important;
    color: white !important;
}

.btn-warning,
button.btn-warning {
    background-color: var(--warning-color) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--warning-color) !important;
}

.btn-danger,
button.btn-danger {
    background-color: var(--danger-color) !important;
    color: white !important;
    border: 1px solid var(--danger-color) !important;
}

.btn-info,
button.btn-info {
    background-color: var(--info-color) !important;
    color: white !important;
    border: 1px solid var(--info-color) !important;
}

.btn-default,
.btn-secondary,
button.btn-default,
button.btn-secondary {
    background-color: white !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.btn-default:hover,
.btn-secondary:hover,
button.btn-default:hover,
button.btn-secondary:hover {
    background-color: var(--light-gray) !important;
}

/* 保留原有按鈕尺寸 */

/* ===== 表單控制項 ===== */
.form-control {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--input-bg);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-light);
}

.form-control:disabled {
    background-color: var(--light-gray);
    cursor: not-allowed;
}

input[type=text],
input[type=number],
input[type=email],
input[type=password],
input[type=tel],
input[type=date],
select,
textarea {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=date]:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-light);
    outline: none;
}

textarea {
    resize: vertical;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ===== 卡片 ===== */
.modern-card {
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
}

.modern-card-header {
    background-color: var(--light-gray);
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modern-card-body {
    padding: 20px;
}

.modern-card-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background-color: var(--light-gray);
}

/* AdminLTE box 相容 */
.box {
    background-color: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-sm);
    margin-bottom: 20px;
    border: none;
}

.box-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.box-header .box-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.box-body {
    padding: 20px;
}

.box-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background-color: var(--light-gray);
}

/* ===== 統計卡片 Grid ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.modern-stat-card {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--box-shadow-sm);
    text-align: center;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.modern-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--box-shadow-md);
}

.modern-stat-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.modern-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 10px 0;
}

.modern-stat-label {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ===== 表格 ===== */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.table > thead > tr > th {
    background-color: #5a5a5a;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid #444;
    font-weight: 600;
    color: #fff;
    font-size: 15px;
}

.table > tbody > tr > td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.table > tbody > tr:hover {
    background-color: var(--light-gray);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-bordered {
    border: 1px solid var(--border-color);
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border: 1px solid var(--border-color);
}

/* 表格響應式容器 */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== 手機版表格卡片視圖 ===== */
.table-card-view {
    display: none;
}

.table-card {
    background-color: white;
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--box-shadow-sm);
}

.table-card-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.table-card-row:last-child {
    border-bottom: none;
}

.table-card-label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 13px;
}

.table-card-value {
    color: var(--text-primary);
    font-size: 14px;
    text-align: right;
}

.table-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.table-card-actions .btn {
    flex: 1;
}

/* ===== 標籤 ===== */
.label, .badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

.label-success, .badge-success { background-color: var(--success-color); color: white; }
.label-warning, .badge-warning { background-color: var(--warning-color); color: var(--text-primary); }
.label-danger, .badge-danger { background-color: var(--danger-color); color: white; }
.label-info, .badge-info { background-color: var(--info-color); color: white; }
.label-primary, .badge-primary { background-color: var(--primary-color); color: white; }
.label-default, .badge-default { background-color: var(--text-secondary); color: white; }

/* ===== 警告提示 ===== */
.alert {
    padding: 12px 16px;
    border-radius: var(--border-radius-sm);
    margin-bottom: 20px;
}

.alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-warning { background-color: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }
.alert-danger { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-info,
.alert-info strong,
.alert-info * {
    background-color: #d1ecf1 !important;
    color: #0c5460 !important;
    border-color: #bee5eb !important;
}

/* ===== 模態框 ===== */
.modal-content {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-lg);
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    background-color: white;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background-color: var(--light-gray);
}

/* ===== 導航標籤 ===== */
.nav-tabs {
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
}

.nav-tabs > li > a {
    padding: 12px 20px;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    margin-bottom: -2px;
    transition: all var(--transition-speed);
    min-height: var(--min-touch-target);
    display: flex;
    align-items: center;
}

.nav-tabs > li > a:hover {
    background-color: var(--light-gray);
    border-color: transparent;
    color: var(--primary-color);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border: none;
    border-bottom: 3px solid var(--primary-color);
    color: var(--primary-color);
    background-color: white;
}

/* ===== 分頁 ===== */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pagination > li > a,
.pagination > li > span {
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--border-radius-sm);
    min-height: var(--min-touch-target);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination > li > a:hover {
    background-color: var(--light-gray);
    color: var(--primary-color);
}

.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* ===== 下拉選單 ===== */
.dropdown-menu {
    border: none;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadow-md);
    padding: 8px 0;
}

.dropdown-menu > li > a {
    padding: 10px 16px;
    color: var(--text-primary);
    transition: all var(--transition-speed);
    min-height: var(--min-touch-target);
    display: flex;
    align-items: center;
}

.dropdown-menu > li > a:hover {
    background-color: var(--light-gray);
    color: var(--primary-color);
}

/* ===== 載入動畫 ===== */
.ajax-loader {
    visibility: hidden;
    background-color: rgba(255, 255, 255, 0.9);
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ajax-loader.show {
    visibility: visible;
}

.modern-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 骨架屏載入 */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    border-radius: var(--border-radius-sm);
}

/* ===== jqGrid 表格樣式 ===== */
.ui-jqgrid .ui-jqgrid-htable th,
.ui-jqgrid .ui-jqgrid-htable .ui-th-column,
.ui-jqgrid-htable thead th,
.ui-jqgrid .ui-jqgrid-labels th {
    background-color: #5a5a5a !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 10px 8px !important;
    border-color: #444 !important;
}

.ui-jqgrid .ui-jqgrid-hdiv {
    background-color: #5a5a5a !important;
}

.ui-jqgrid-hbox {
    background-color: #5a5a5a !important;
}

/* ===== DataTables 樣式 ===== */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 8px 12px;
    min-height: var(--min-touch-target);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 0.15rem rgba(64, 145, 108, 0.2);
    outline: none;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 8px 12px;
    min-height: var(--min-touch-target);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-height: var(--min-touch-target);
    min-width: var(--min-touch-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--light-gray) !important;
    color: var(--primary-color) !important;
}

/* ===== Select2 樣式 ===== */
.select2-container--default .select2-selection--single {
    border-color: var(--border-color);
    border-radius: var(--border-radius-sm);
    height: var(--min-touch-target);
    padding: 5px 12px;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--primary-light);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
}

.select2-container--default .select2-results__option {
    padding: 10px 12px;
    min-height: var(--min-touch-target);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color);
}

/* ===== 無障礙 - 焦點樣式 ===== */
*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* 螢幕閱讀器專用 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ===== 響應式斷點 ===== */

/* 平板裝置 (1024px) */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 240px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .modern-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .modern-page-header .btn {
        width: 100%;
    }
}

/* 手機裝置 (768px) */
@media (max-width: 768px) {
    :root {
        --navbar-height: var(--mobile-navbar-height);
    }

    .modern-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modern-sidebar {
        transform: translateX(-100%);
        width: 280px;
    }

    .modern-sidebar.show {
        transform: translateX(0);
    }

    .modern-content {
        margin-left: 0;
        padding: 16px;
    }

    .modern-navbar-menu {
        display: none;
    }

    .modern-navbar-brand span {
        display: none;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* 表格轉卡片視圖 */
    .table-wrapper {
        display: none;
    }

    .table-card-view {
        display: block;
    }

    /* 模態框全螢幕 */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    .modal-content {
        height: 100%;
        border-radius: 0;
    }

    /* Tab 導航滾動 */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs > li > a {
        white-space: nowrap;
    }
}

/* 小手機裝置 (375px) */
@media (max-width: 375px) {
    .modern-content {
        padding: 12px;
    }

    .btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    .modern-card-body,
    .box-body {
        padding: 16px;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 16px;
    }

    .table-card {
        padding: 12px;
    }
}

/* ===== 觸控裝置優化 ===== */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .form-control,
    .nav-tabs > li > a,
    .modern-sidebar-menu a,
    .dropdown-menu > li > a,
    .pagination > li > a {
        min-height: var(--min-touch-target);
    }

    .table-card {
        cursor: pointer;
    }

    .table-card:active {
        background-color: var(--light-gray);
    }

    /* 移除 hover 效果 */
    .btn:hover,
    .modern-stat-card:hover {
        transform: none;
    }
}

/* ===== 列印樣式 ===== */
@media print {
    .modern-navbar,
    .modern-sidebar,
    .modern-sidebar-backdrop,
    .modern-menu-toggle,
    .btn,
    .page-actions,
    .ajax-loader,
    .pagination,
    .dataTables_filter,
    .dataTables_length,
    .dataTables_paginate {
        display: none !important;
    }

    .modern-content {
        margin: 0;
        padding: 0;
    }

    .modern-main-container {
        margin-top: 0;
    }

    .modern-card,
    .box {
        box-shadow: none;
        border: 1px solid var(--border-color);
        page-break-inside: avoid;
    }

    .table {
        font-size: 12px;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 8px;
    }

    body {
        background-color: white;
        color: black;
    }

    a {
        text-decoration: none;
        color: black;
    }
}

/* ===== 輔助類別 ===== */
.text-primary { color: var(--primary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-info { color: var(--info-color) !important; }
.text-muted { color: var(--text-secondary) !important; }

.bg-primary { background-color: var(--primary-color) !important; }
.bg-success { background-color: var(--success-color) !important; }
.bg-warning { background-color: var(--warning-color) !important; }
.bg-danger { background-color: var(--danger-color) !important; }
.bg-info { background-color: var(--info-color) !important; }
.bg-light { background-color: var(--light-gray) !important; }

.rounded { border-radius: var(--border-radius) !important; }
.rounded-sm { border-radius: var(--border-radius-sm) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.shadow-sm { box-shadow: var(--box-shadow-sm) !important; }
.shadow-md { box-shadow: var(--box-shadow-md) !important; }
.shadow-lg { box-shadow: var(--box-shadow-lg) !important; }

/* 動畫輔助 */
.animate-fade-in { animation: fadeIn 0.3s ease; }
.animate-fade-in-up { animation: fadeInUp 0.3s ease; }
.animate-slide-up { animation: slideUp 0.3s ease; }

/* ===== 隱藏 AdminLTE 原有樣式 ===== */
.skin-black-light .main-header .navbar,
.skin-black-light .main-header .logo,
.main-sidebar,
.main-header,
.main-footer {
    display: none !important;
}

.content-wrapper {
    margin-left: 0 !important;
    background-color: transparent !important;
}

.wrapper {
    min-height: 100vh;
}

/* ===== 側邊欄遮罩 ===== */
.modern-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

.modern-sidebar-backdrop.show {
    display: block;
}

/* ===== 日期選擇器修正 ===== */
.bootstrap-datetimepicker-widget {
    min-width: 280px !important;
    z-index: 10000 !important; /* 確保日期選擇器在最上層 */
}

.bootstrap-datetimepicker-widget .datepicker-days thead th,
.bootstrap-datetimepicker-widget .datepicker-months thead th,
.bootstrap-datetimepicker-widget .datepicker-years thead th {
    min-width: 40px;
}

.bootstrap-datetimepicker-widget .picker-switch {
    min-width: 120px !important;
}

/* ===== HTML5 日期/時間輸入框修正 ===== */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    position: relative;
    z-index: 1;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    position: relative;
    z-index: 2;
}

/* ===== Select 下拉選單修正 ===== */
select.form-control {
    position: relative;
    z-index: 1;
}

/* Select2 下拉選單 z-index 修正 */
.select2-container--open {
    z-index: 10001 !important;
}

.select2-dropdown {
    z-index: 10001 !important;
}

/* ===== 表單區塊修正 ===== */
.form-section {
    position: relative;
    z-index: auto;
    overflow: visible !important;
}

.form-group {
    position: relative;
    overflow: visible !important;
}

/* 確保 tab-content 不會遮蔽下拉選單 */
.tab-content {
    overflow: visible !important;
}

.tab-pane {
    overflow: visible !important;
}

/* 確保 box-body 不會遮蔽下拉選單 */
.box-body {
    overflow: visible !important;
}

/* ===== 登入頁面 / 註冊頁面樣式 ===== */
.login-content {
    max-width: 450px;
    margin: 40px auto;
    padding: 0 20px;
}

.login-form {
    background-color: white;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg);
    padding: 40px;
    animation: fadeInUp 0.5s ease;
}

.login-title {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--primary-color);
}

.login-title h4 {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.login-form .form-control {
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    font-size: 15px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--input-bg);
    transition: all var(--transition-speed);
    box-sizing: border-box;
}

.login-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15);
    outline: none;
}

.login-form .form-control::placeholder {
    color: #adb5bd;
}

.login-form .formBtn {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    margin-bottom: 15px;
}

.login-form .formBtn .btn {
    flex: 1;
    height: 48px;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: var(--border-radius-sm) !important;
    transition: all var(--transition-speed);
}

.login-form .formBtn .btn-info {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light)) !important;
    border: none !important;
}

.login-form .formBtn .btn-info:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(45, 106, 79, 0.3);
}

.login-form .formBtn .btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
}

.login-form .formBtn .btn-secondary:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
}

.login-form .formBtn1 {
    text-align: center;
    margin-bottom: 20px;
}

.login-form .formBtn1 .btn-addon {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 10px 24px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    transition: all var(--transition-speed);
}

.login-form .formBtn1 .btn-addon:hover {
    background-color: var(--primary-color);
    color: white;
}

.login-form .float-right {
    display: block;
    text-align: center;
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: none;
    padding: 10px;
    transition: all var(--transition-speed);
}

.login-form .float-right:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* 驗證碼區塊 */
.login-form .code {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    font-family: 'Courier New', monospace;
    font-style: normal;
    color: var(--primary-dark);
    font-size: 28px;
    border: 2px solid var(--primary-light);
    border-radius: var(--border-radius-sm);
    padding: 0;
    letter-spacing: 6px;
    font-weight: 700;
    cursor: pointer;
    width: 160px;
    height: 56px;
    line-height: 52px;
    text-align: center;
    transition: all var(--transition-speed);
}

.login-form .code:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(45, 106, 79, 0.2);
}

/* 登入頁背景 */
body:has(.login-content) {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%);
    min-height: 100vh;
}

/* 兼容舊瀏覽器的登入頁背景 */
.body-content:has(.login-content) {
    padding-top: 20px;
    padding-bottom: 40px;
}

/* 密碼提示文字 */
.login-form span[style*="color: red"] {
    display: block;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--border-radius-sm);
    padding: 12px;
    font-size: 13px;
    color: #856404 !important;
    line-height: 1.5;
}

/* 登入頁響應式 */
@media (max-width: 576px) {
    .login-content {
        margin: 20px auto;
        padding: 0 15px;
    }

    .login-form {
        padding: 30px 24px;
    }

    .login-title h4 {
        font-size: 20px;
    }

    .login-form .form-control {
        height: 44px;
        font-size: 14px;
    }

    .login-form .formBtn {
        flex-direction: column;
    }

    .login-form .formBtn .btn {
        width: 100%;
    }

    .login-form .code {
        width: 140px;
        height: 50px;
        font-size: 24px;
        line-height: 46px;
    }
}