:root {
  --color-light: #ffffff;
  --color-transparent: rgb(0 0 0 / 0%);
  --color-light-a: 0 0 0;
  --color-dark-900: #111827;
  --color-dark-800: #1F2937;
  --color-dark-700: #374151;
  --color-dark-600: #4B5563;
  --color-dark: #6B7280;
  --color-dark-400: #9CA3AF;
  --color-dark-300: #D1D5DB;
  --color-dark-200: #E5E7EB;
  --color-dark-100: #F3F4F6;
  --color-dark-50: #F9FAFB;
  --color-dark-a: 17 24 39;
  
  --color-primary-900: #4a3728;
  --color-primary-800: #5d4635;
  --color-primary-700: #6d5642;
  --color-primary-600: #7e6655;
  --color-primary: #9E8369;
  --color-primary-400: #b0967e;
  --color-primary-300: #c2a993;
  --color-primary-200: #d4bca8;
  --color-primary-100: #e6cfbd;
  --color-primary-50: #f3e4d8;
  
  --color-secondary-900: #3d2e21;
  --color-secondary-800: #4a3728;
  --color-secondary-700: #5d4635;
  --color-secondary-600: #5d4635;
  --color-secondary: #4A3728;
  --color-secondary-400: #7e6655;
  --color-secondary-300: #9E8369;
  --color-secondary-200: #c2a993;
  --color-secondary-100: #e6cfbd;
  --color-secondary-50: #f3e4d8;
  
  --color-success-900: #064E3B;
  --color-success-800: #065F46;
  --color-success-700: #047857;
  --color-success-600: #059669;
  --color-success: #10B981;
  --color-success-400: #34D399;
  --color-success-300: #6EE7B7;
  --color-success-200: #A7F3D0;
  --color-success-100: #D1FAE5;
  --color-success-50: #ECFDF5;
  
  --color-warning-900: #78350F;
  --color-warning-800: #78350F;
  --color-warning-700: #B45309;
  --color-warning-600: #D97706;
  --color-warning: #F59E0B;
  --color-warning-400: #FBBF24;
  --color-warning-300: #FCD34D;
  --color-warning-200: #FDE68A;
  --color-warning-100: #FEF3C7;
  --color-warning-50: #FFFBEB;
  
  --color-negative-900: #3d1a1a;
  --color-negative-800: #5a2828;
  --color-negative-700: #6d3535;
  --color-negative-600: #804242;
  --color-negative: #823d3d;
  --color-negative-400: #a05252;
  --color-negative-300: #be6767;
  --color-negative-200: #dc7c7c;
  --color-negative-100: #e9a1a1;
  --color-negative-50: #f5c6c6;
  
  --color-notice-900: #6b1f4b;
  --color-notice-800: #7d2858;
  --color-notice-700: #8f3165;
  --color-notice-600: #a13a72;
  --color-notice: #d81f61;
  --color-notice-400: #e04775;
  --color-notice-300: #e86f89;
  --color-notice-200: #f0979d;
  --color-notice-100: #f5b8c4;
  --color-notice-50: #fad9e0;
  
  --color-bg: #EAE3D2;
  --color-bg-elevated: var(--color-light);
  --color-bg-input: var(--color-light);
  
  /* Custom colors for NBINet */
  --color-cream: #EAE3D2;
  --color-brown: #9E8369;
  --color-brick: #823d3d;
  --color-magenta: #d81f61;

  --color-required-mark: #C53030;
  --color-btn-primary-bg: #4A3728;
  --color-btn-primary-hover: var(--color-primary-800, #5d4635);
  --color-btn-primary-text: #FFFFFF;
}

/* ========================================
   SweetAlert2 Custom Styles
   ======================================== */

/* 彈窗容器 - 使用系統的背景色與陰影 */
.swal2-popup {
  background: var(--color-bg-elevated) !important;
  color: var(--color-dark-900) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  padding: 24px !important;  /* 符合 4px 網格系統 */
  font-family: inherit !important;
}

/* 標題樣式 - 符合系統 text-18 規範 */
.swal2-title {
  color: var(--color-dark-900) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}

/* 內容文字 - 符合系統 text-14 規範 */
.swal2-html-container {
  color: var(--color-dark-600) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* 按鈕容器 - 間距符合 4px 網格 */
.swal2-actions {
  gap: 12px !important;
  margin-top: 24px !important;
}

/* 確認按鈕 - 使用主行為色（與 btn-primary 一致） */
.swal2-confirm {
  background-color: var(--color-btn-primary-bg) !important;
  color: var(--color-btn-primary-text) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  min-width: 80px !important;
  height: 36px !important;
  transition: all 0.2s ease !important;
}

.swal2-confirm:hover {
  background-color: var(--color-btn-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.swal2-confirm:active {
  transform: translateY(0) !important;
}

/* 取消按鈕 - 使用次要色 */
.swal2-cancel {
  background-color: var(--color-dark-200) !important;
  color: var(--color-dark-700) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  min-width: 80px !important;
  height: 36px !important;
  transition: all 0.2s ease !important;
}

.swal2-cancel:hover {
  background-color: var(--color-dark-300) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.swal2-cancel:active {
  transform: translateY(0) !important;
}

/* 關閉按鈕 */
.swal2-close {
  color: var(--color-dark-400) !important;
  font-size: 24px !important;
  transition: color 0.2s ease !important;
}

.swal2-close:hover {
  color: var(--color-dark-700) !important;
}

/* 成功圖示 - 使用系統成功色 */
.swal2-success {
  border-color: var(--color-success) !important;
}

.swal2-success .swal2-success-ring {
  border-color: var(--color-success-200) !important;
}

.swal2-success .swal2-success-line-tip,
.swal2-success .swal2-success-line-long {
  background-color: var(--color-success) !important;
}

/* 錯誤圖示 - 使用系統錯誤色 */
.swal2-error {
  border-color: var(--color-negative) !important;
}

.swal2-error .swal2-x-mark-line-left,
.swal2-error .swal2-x-mark-line-right {
  background-color: var(--color-negative) !important;
}

/* 警告圖示 - 使用系統警告色 */
.swal2-warning {
  border-color: var(--color-warning) !important;
  color: var(--color-warning) !important;
}

.swal2-warning .swal2-icon-content {
  color: var(--color-warning) !important;
}

/* 資訊圖示 - 使用系統提示色 */
.swal2-info {
  border-color: var(--color-notice) !important;
  color: var(--color-notice) !important;
}

.swal2-info .swal2-icon-content {
  color: var(--color-notice) !important;
}

/* 問題圖示 - 使用系統主色 */
.swal2-question {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.swal2-question .swal2-icon-content {
  color: var(--color-primary) !important;
}

/* 輸入框樣式 - 符合系統輸入框規範 */
.swal2-input,
.swal2-textarea {
  background-color: var(--color-bg-input) !important;
  border: 1px solid var(--color-dark-300) !important;
  border-radius: 6px !important;
  color: var(--color-dark-900) !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  transition: all 0.2s ease !important;
}

.swal2-input:focus,
.swal2-textarea:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(158, 131, 105, 0.1) !important;
}

.swal2-input::placeholder,
.swal2-textarea::placeholder {
  color: var(--color-dark-400) !important;
}

/* 驗證錯誤訊息 */
.swal2-validation-message {
  background-color: var(--color-negative-50) !important;
  border-left: 3px solid var(--color-negative) !important;
  color: var(--color-negative-900) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  margin-top: 8px !important;
  border-radius: 4px !important;
}

/* Loading 狀態 */
.swal2-loader {
  border-color: var(--color-primary) transparent var(--color-primary) transparent !important;
}

/* Footer 樣式 */
.swal2-footer {
  color: var(--color-dark-600) !important;
  font-size: 13px !important;
  border-top: 1px solid var(--color-dark-200) !important;
  padding-top: 16px !important;
  margin-top: 16px !important;
}

/* 背景遮罩 */
.swal2-container {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

/* Timer Progress Bar */
.swal2-timer-progress-bar {
  background-color: var(--color-primary) !important;
}

/* 自訂類別：用於特定情境 */
.swal2-popup.swal-destructive .swal2-confirm {
  background-color: var(--color-negative) !important;
}

.swal2-popup.swal-destructive .swal2-confirm:hover {
  background-color: var(--color-negative-600) !important;
}

.swal2-popup.swal-success .swal2-confirm {
  background-color: var(--color-success) !important;
}

.swal2-popup.swal-success .swal2-confirm:hover {
  background-color: var(--color-success-600) !important;
}

/* Toast 模式樣式調整 */
.swal2-toast {
  background: var(--color-bg-elevated) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 12px 16px !important;
}

.swal2-toast .swal2-title {
  font-size: 14px !important;
  margin: 0 !important;
}

.swal2-toast .swal2-icon {
  margin: 0 12px 0 0 !important;
}

.dark-style {
  --color-light: #ffffff;
  --color-transparent: rgb(0 0 0 / 0%);
  --color-light-a: 0 0 0;
  --color-dark-900: #111827;
  --color-dark-800: #1F2937;
  --color-dark-700: #374151;
  --color-dark-600: #4B5563;
  --color-dark: #6B7280;
  --color-dark-400: #9CA3AF;
  --color-dark-300: #D1D5DB;
  --color-dark-200: #E5E7EB;
  --color-dark-100: #F3F4F6;
  --color-dark-50: #F9FAFB;
  --color-dark-a: 17 24 39;
  
  --color-primary-900: #4a3728;
  --color-primary-800: #5d4635;
  --color-primary-700: #6d5642;
  --color-primary-600: #7e6655;
  --color-primary: #9E8369;
  --color-primary-400: #b0967e;
  --color-primary-300: #c2a993;
  --color-primary-200: #d4bca8;
  --color-primary-100: #e6cfbd;
  --color-primary-50: #f3e4d8;
  
  --color-secondary-900: #3d2e21;
  --color-secondary-800: #4a3728;
  --color-secondary-700: #5d4635;
  --color-secondary-600: #5d4635;
  --color-secondary: #4A3728;
  --color-secondary-400: #7e6655;
  --color-secondary-300: #9E8369;
  --color-secondary-200: #c2a993;
  --color-secondary-100: #e6cfbd;
  --color-secondary-50: #f3e4d8;
  
  --color-success-900: #064E3B;
  --color-success-800: #065F46;
  --color-success-700: #047857;
  --color-success-600: #059669;
  --color-success: #10B981;
  --color-success-400: #34D399;
  --color-success-300: #6EE7B7;
  --color-success-200: #A7F3D0;
  --color-success-100: #D1FAE5;
  --color-success-50: #ECFDF5;
  
  --color-warning-900: #78350F;
  --color-warning-800: #78350F;
  --color-warning-700: #B45309;
  --color-warning-600: #D97706;
  --color-warning: #F59E0B;
  --color-warning-400: #FBBF24;
  --color-warning-300: #FCD34D;
  --color-warning-200: #FDE68A;
  --color-warning-100: #FEF3C7;
  --color-warning-50: #FFFBEB;
  
  --color-negative-900: #3d1a1a;
  --color-negative-800: #5a2828;
  --color-negative-700: #6d3535;
  --color-negative-600: #804242;
  --color-negative: #823d3d;
  --color-negative-400: #a05252;
  --color-negative-300: #be6767;
  --color-negative-200: #dc7c7c;
  --color-negative-100: #e9a1a1;
  --color-negative-50: #f5c6c6;
  
  --color-notice-900: #6b1f4b;
  --color-notice-800: #7d2858;
  --color-notice-700: #8f3165;
  --color-notice-600: #a13a72;
  --color-notice: #d81f61;
  --color-notice-400: #e04775;
  --color-notice-300: #e86f89;
  --color-notice-200: #f0979d;
  --color-notice-100: #f5b8c4;
  --color-notice-50: #fad9e0;
  
  --color-bg: #EAE3D2;
  --color-bg-elevated: var(--color-light);
  --color-bg-input: var(--color-light);
  
  /* Custom colors for NBINet */
  --color-cream: #EAE3D2;
  --color-brown: #9E8369;
  --color-brick: #823d3d;
  --color-magenta: #d81f61;
}

.errorlist {
  font-size: .9rem;
}

/* 密碼欄位顯示/隱藏圖示（CSP 頁面不可用 inline style，改以 class 控制） */
.js-password-toggle-hide.is-hidden,
.js-password-toggle-show.is-hidden {
  display: none;
}

/* 合作館帳號新增頁與使用者密碼變更頁：讓欄位驗證錯誤更醒目。 */
.change-form .users-organizationuser-add-form ul.errorlist,
.change-form .users-organizationuser-password-page ul.errorlist,
.change-form .users-alluser-password-page ul.errorlist {
  color: var(--color-negative-900, #3d1a1a);
  font-size: 1rem;
  font-weight: 600;
  list-style: none;
  margin-bottom: 0;
  margin-top: 0.5rem;
  padding-left: 0;
}

.change-form .users-organizationuser-add-form ul.errorlist li,
.change-form .users-organizationuser-password-page ul.errorlist li,
.change-form .users-alluser-password-page ul.errorlist li {
  background: var(--color-negative-50, #f5c6c6);
  border-left: 3px solid var(--color-negative, #823d3d);
  border-radius: 4px;
  margin-top: 0.25rem;
  padding: 0.35rem 0.75rem;
}

.change-form .users-organizationuser-add-form ul.errorlist ul.errorlist,
.change-form .users-organizationuser-password-page ul.errorlist ul.errorlist,
.change-form .users-alluser-password-page ul.errorlist ul.errorlist {
  margin-top: 0.25rem;
}

.change-form .users-organizationuser-add-form .form-errors-summary {
  background: var(--color-negative-50, #f5c6c6);
  border: 1px solid var(--color-negative-100, #e9a1a1);
  border-left: 4px solid var(--color-negative, #823d3d);
  border-radius: 6px;
  color: var(--color-negative-900, #3d1a1a);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
}

/* 加粗並加深框線 */
.sb-admin-table, 
.card, 
.tab-content,
.form-control,
.sb-admin-field-container,
.sb-admin-field-inner,
.table-responsive,
table, 
th, 
td {
    border-color: #9CA3AF !important; /* 使用 --color-dark-400 */
}

.sb-admin-table, 
.card, 
.tab-content {
    border-width: 1.5px !important;
    border-style: solid !important;
}

/* 表格內框線加深 */
.table th, .table td {
    border-top: 1px solid #9CA3AF !important;
}

.table thead th {
    border-bottom: 2px solid #6B7280 !important; /* 使用 --color-dark */
}

/* 輸入框框線加深 */
.form-control, .select2-container--default .select2-selection--single {
    border: 1.5px solid #9CA3AF !important;
}

/* 讓 Tabulator 儲存格文字可被選取複製 */
.tabulator-cell {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* 上傳頁：送出中不確定進度條 */
.upload-pending-status.hidden {
    display: none;
}

.upload-pending-progress {
    height: 8px;
    border-radius: 4px;
    background-color: var(--color-primary-100, #dbeafe);
    overflow: hidden;
}

.upload-pending-progress-bar {
    height: 100%;
    width: 40%;
    border-radius: 4px;
    background-color: var(--color-primary, #2563eb);
    animation: upload-pending-indeterminate 1.2s ease-in-out infinite;
}

@keyframes upload-pending-indeterminate {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(350%);
    }
}

/* 上傳頁：成功/錯誤訊息更醒目（固定於頂部通知區） */
.upload_marc_record #notification-messages .alert,
.upload_authority_record #notification-messages .alert {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* SBAdmin 必填星號（simple_field_label / table_inline / analytics_form 等） */
.change-form span.ml-4.text-negative,
.sb-admin-table span.ml-4.text-negative {
  color: var(--color-required-mark) !important;
}

/* 重設密碼連結 */
.change-form .user-password-reset-link {
  color: #6B5341;
  text-decoration: underline;
  font-weight: normal;
}
.change-form .user-password-reset-link:hover,
.change-form .user-password-reset-link:focus {
  color: #6B5341;
  text-decoration: underline;
}

/* 主行為按鈕：btn-primary 全站（後台 + 載入 admin_custom 的品管頁） */
.btn.btn-primary:not(:disabled) {
  background-color: var(--color-btn-primary-bg) !important;
  border-color: var(--color-btn-primary-bg) !important;
  color: var(--color-btn-primary-text) !important;
}
.btn.btn-primary:not(:disabled):hover,
.btn.btn-primary:not(:disabled):focus {
  background-color: var(--color-btn-primary-hover) !important;
  border-color: var(--color-btn-primary-hover) !important;
  color: var(--color-btn-primary-text) !important;
}

/* btn-secondary 脫離洋紅：與主行為同為深褐白字 */
.btn.btn-secondary:not(:disabled) {
  background-color: var(--color-btn-primary-bg) !important;
  border-color: var(--color-btn-primary-bg) !important;
  color: var(--color-btn-primary-text) !important;
}
.btn.btn-secondary:not(:disabled):hover,
.btn.btn-secondary:not(:disabled):focus {
  background-color: var(--color-btn-primary-hover) !important;
  border-color: var(--color-btn-primary-hover) !important;
  color: var(--color-btn-primary-text) !important;
}

/* 危險操作：實心負色（SBAdmin 對 btn-danger 無實心底） */
.btn.btn-danger:not(:disabled) {
  background-color: var(--color-negative, #823d3d) !important;
  border-color: var(--color-negative, #823d3d) !important;
  color: #fff !important;
}
.btn.btn-danger:not(:disabled):hover,
.btn.btn-danger:not(:disabled):focus {
  background-color: var(--color-negative-600, #804242) !important;
  border-color: var(--color-negative-600, #804242) !important;
  color: #fff !important;
}