/**
 * Neo Framework - 共用樣式
 * 前後台都可使用的通用樣式
 */

/* ==================== 品牌色彩變數 ==================== */
:root {
  /* 主要漸層色 - 草地綠金 */
  --gradient-start: #dbd5a4;
  --gradient-end: #649173;
  --gradient-fallback: #649173;

  /* 主色調（用於按鈕、連結、文字等） */
  --color-primary: #649173;
  --color-primary-light: #dbd5a4;
  --color-primary-hover: #4a7359;

  /* 成功/警告/失敗狀態色 */
  --color-success: #48bb78;
  --color-warning: #ed8936;
  --color-danger: #e53e3e;
}

/* ==================== 全域漸層背景類別 ==================== */
/* 主要漸層背景 - 用於頁面背景、按鈕等 */
.bg-gradient-primary {
  background: #649173; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #dbd5a4,
    #649173
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #dbd5a4,
    #649173
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/* 按鈕漸層 */
.btn-gradient-primary {
  background: #649173;
  background: -webkit-linear-gradient(to right, #dbd5a4, #649173);
  background: linear-gradient(to right, #dbd5a4, #649173);
  color: white;
  border: none;
}

.btn-gradient-primary:hover {
  background: #4a7359;
  box-shadow: 0 4px 12px rgba(100, 145, 115, 0.4);
}

/* 主色文字 */
.text-primary {
  color: var(--color-primary) !important;
}

/* 主色連結 */
a.link-primary {
  color: var(--color-primary);
}

a.link-primary:hover {
  color: var(--color-primary-hover);
}

/* 全域重置 */
* {
  box-sizing: border-box;
}

body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans TC",
    /* 繁體中文 */ "Noto Sans JP",
    /* 日文 */ "Noto Sans KR",
    /* 韓文 */ Roboto,
    "Microsoft JhengHei",
    /* Windows 繁中 */ "Yu Gothic",
    /* Windows 日文 */ "Malgun Gothic",
    /* Windows 韓文 */ "Helvetica Neue",
    Arial,
    sans-serif;
  line-height: 1.6;
}

.uk-link,
a {
  text-decoration: none !important;
}

/* 通用工具類 */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.mt-10 {
  margin-top: 10px;
}
.mt-20 {
  margin-top: 20px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-20 {
  margin-bottom: 20px;
}

/* 狀態標籤 */
.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-active {
  background: #d4edda;
  color: #155724;
}

.status-inactive {
  background: #f8d7da;
  color: #721c24;
}

.status-draft {
  background: #fff3cd;
  color: #856404;
}

.status-published {
  background: #d1ecf1;
  color: #0c5460;
}

/* 圖片預覽 */
.image-preview {
  max-width: 200px;
  max-height: 200px;
  border: 2px solid #e1e8ed;
  border-radius: 4px;
  padding: 5px;
  object-fit: cover;
}

.form-input-reminder {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #999;
  margin-top: 10px;
}

.uk-button {
  justify-content: center;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  line-height: 1.5;
}

.uk-notification-message {
  background: #2f2f2f;
  color: #fff;
  font-size: 0.9rem;
}

.uk-input,
.uk-select,
.uk-textarea,
.uk-button,
.uk-notification-message {
  border-radius: 4px;
}

tr {
  transition: background-color 0.6s ease-out;
}

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

/* ==================== Neo Toggle Switch ==================== */
.neo-toggle-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.neo-toggle {
  position: relative;
  display: inline-block;
}

/* 尺寸變體 */
.neo-toggle-small {
  width: 36px;
  height: 20px;
}

.neo-toggle-medium {
  width: 44px;
  height: 24px;
}

.neo-toggle-large {
  width: 52px;
  height: 28px;
}

.neo-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.neo-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 50px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.neo-toggle-slider:before {
  position: absolute;
  content: "";
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 小尺寸滑塊 */
.neo-toggle-small .neo-toggle-slider:before {
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
}

/* 中尺寸滑塊 */
.neo-toggle-medium .neo-toggle-slider:before {
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
}

/* 大尺寸滑塊 */
.neo-toggle-large .neo-toggle-slider:before {
  height: 24px;
  width: 24px;
  left: 2px;
  bottom: 2px;
}

/* 選中狀態 - 滑塊位置 */
.neo-toggle-small input:checked + .neo-toggle-slider:before {
  transform: translateX(16px);
}

.neo-toggle-medium input:checked + .neo-toggle-slider:before {
  transform: translateX(20px);
}

.neo-toggle-large input:checked + .neo-toggle-slider:before {
  transform: translateX(24px);
}

/* 顏色變體 - Primary */
.neo-toggle-primary input:checked + .neo-toggle-slider {
  background-color: #1e87f0;
}

/* 顏色變體 - Success */
.neo-toggle-success input:checked + .neo-toggle-slider {
  background-color: #32d296;
}

/* 顏色變體 - Warning */
.neo-toggle-warning input:checked + .neo-toggle-slider {
  background-color: #faa05a;
}

/* 顏色變體 - Danger */
.neo-toggle-danger input:checked + .neo-toggle-slider {
  background-color: #f0506e;
}

/* 停用狀態 */
.neo-toggle input:disabled + .neo-toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Focus 狀態 */
.neo-toggle input:focus + .neo-toggle-slider {
  box-shadow: 0 0 0 2px rgba(30, 135, 240, 0.3);
}

/* 標籤樣式 */
.neo-toggle-label,
.neo-toggle-label-on,
.neo-toggle-label-off {
  font-size: 0.875rem;
  color: #666;
}

.neo-toggle-wrapper:hover .neo-toggle-label,
.neo-toggle-wrapper:hover .neo-toggle-label-on,
.neo-toggle-wrapper:hover .neo-toggle-label-off {
  color: #333;
}

/* ==================== UIkit Toast/Notification z-index ==================== */
/* 確保 Toast 顯示在載入遮罩之上 (loading overlay z-index: 9999) */
.uk-notification {
  z-index: 10100 !important;
}

/* ==================== 全域滾動條美化 ==================== */
/* 通用滾動條樣式 - 適用於所有元素 */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 針對深色背景的滾動條（預設） */
.dark-theme *::-webkit-scrollbar-thumb,
.nn-modal *::-webkit-scrollbar-thumb,
[class*="modal"] *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

.dark-theme *::-webkit-scrollbar-thumb:hover,
.nn-modal *::-webkit-scrollbar-thumb:hover,
[class*="modal"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 針對淺色背景的滾動條 */
.light-theme *::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

.light-theme *::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* ==========================================
   UIkit 按鈕增強樣式（全站適用）
   ========================================== */

/* 主要按鈕 - 品牌漸層綠 */
.uk-button-primary {
  background: linear-gradient(
    135deg,
    var(--gradient-end) 0%,
    var(--color-primary-hover) 100%
  ) !important;
  line-height: inherit;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 24px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(100, 145, 115, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
}

.uk-navbar .uk-drop.uk-open {
  border-radius: 6px !important;
}

.uk-button-primary:hover {
  background: linear-gradient(
    135deg,
    var(--gradient-end) 0%,
    var(--color-primary-hover) 100%
  ) !important;
  box-shadow: 0 6px 16px rgba(100, 145, 115, 0.4) !important;
  transform: translateY(-1px) !important;
  color: white !important;
  opacity: 0.9;
}

.uk-button-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(100, 145, 115, 0.3) !important;
}

.uk-button-primary:disabled {
  background: linear-gradient(135deg, #b0bec5 0%, #90a4ae 100%) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* 次要按鈕 - 白底綠框 */
.uk-button-secondary {
  background: white !important;
  border: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-transform: none !important;
}

.uk-button-secondary:hover {
  background: var(--color-primary) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(100, 145, 115, 0.3) !important;
  transform: translateY(-2px) !important;
}

.uk-button-secondary:active {
  transform: translateY(0) !important;
}

/* 預設按鈕 - 灰色 */
.uk-button-default {
  background: #f5f7fa !important;
  border: 1px solid #e1e8ed !important;
  color: #657786 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-transform: none !important;
}

.uk-button-default:hover {
  background: #e8eef2 !important;
  border-color: #cbd6e2 !important;
  color: #14171a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* 危險按鈕 - 紅色 */
.uk-button-danger {
  background: linear-gradient(135deg, #fc8181 0%, #e53e3e 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 24px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-transform: none !important;
}

.uk-button-danger:hover {
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%) !important;
  box-shadow: 0 6px 16px rgba(229, 62, 62, 0.4) !important;
  transform: translateY(-2px) !important;
}

.uk-button-danger:active {
  transform: translateY(0) !important;
}

/* 按鈕內的圖示調整 */
.uk-button .material-icons,
.uk-button svg {
  vertical-align: middle;
  margin-right: 6px;
  font-size: 1.25rem !important;
}

/* 小型按鈕 */
.uk-button-small {
  padding: 8px 16px !important;
  font-size: 0.875rem !important;
  border-radius: 6px !important;
}

.uk-button-small .material-icons {
  font-size: 1rem !important;
}

/* 大型按鈕 */
.uk-button-large {
  padding: 16px 32px !important;
  font-size: 1.125rem !important;
  border-radius: 10px !important;
}

/* 全寬按鈕 */
.uk-width-1-1.uk-button {
  width: 100% !important;
}