/* 品牌色彩變數 */
:root {
  --primary: #FFD700;      /* 攤攤樂黃 */
  --secondary: #2F4F4F;   /* 行政深灰 */
  --surface: #F8F9FA;     /* 背景底色 */
  --success: #2E8B57;     /* 森林綠 */
  --warning: #FF4500;     /* 橘紅 */
  --info: #4169E1;        /* 系統藍 */
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: 'Noto Sans TC', sans-serif;
  background-color: var(--surface);
  line-height: 1.5;
  margin-bottom: 60px;
}

/* 輔助文字樣式 */
.helper-text {
  font-size: 12px;
}

h1, h2, h3 {
  font-size: 18px;
}

/* 卡片選取狀態 */
.vendor-card.card-selected,
.card-selected.vendor-card,
div.card-selected,
#list-shortlist .vendor-card.card-selected,
#list-shortlist .card-selected,
#list-all .vendor-card.card-selected,
#list-all .card-selected,
#list-accepted .vendor-card.card-selected,
#list-accepted .card-selected,
#list-modification .vendor-card.card-selected,
#list-modification .card-selected {
  background-color: #FFFDE7 !important;
  border: 2px solid var(--primary) !important;
  border-width: 2px !important;
  border-color: #FFD700 !important;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.1) !important;
}

/* 確保覆蓋 Tailwind 的 bg-white */
.vendor-card.card-selected.bg-white,
.card-selected.vendor-card.bg-white,
#list-shortlist .vendor-card.card-selected.bg-white,
#list-shortlist .card-selected.bg-white {
  background-color: #FFFDE7 !important;
}

/* 自訂 Checkbox */
.custom-checkbox {
  width: 24px;
  height: 24px;
  cursor: pointer;
  accent-color: var(--primary);
}

/* 自訂 Radio */
.custom-radio {
  width: 24px;
  height: 24px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 2px solid #9CA3AF;
  border-radius: 50%;
  background-color: white;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.custom-radio:hover {
  border-color: var(--primary);
}

.custom-radio:checked {
  border-color: var(--primary);
  background-color: white;
}

.custom-radio:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--primary);
}

/* Snackbar 樣式 */
#snackbar {
  visibility: hidden;
  min-width: 320px;
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
}

#snackbar.show {
  visibility: visible;
  animation: slideUp 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes slideUp {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

/* 側邊欄遮罩 */
#sidebar-overlay {
  background: rgba(0, 0, 0, 0.5);
  display: none;
}

#sidebar-overlay.active {
  display: block;
}

/* 頁面進入動畫 */
.page-enter {
  animation: pageFadeIn 0.3s ease-out;
}

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

/* Bootstrap 覆寫 - 恢復原有顏色 */
/* 覆寫 Bootstrap 的 CSS 變數 */
:root {
  --bs-primary: #FFD700 !important;      /* 攤攤樂黃 */
  --bs-secondary: #2E8B57 !important;     /* 系統綠色 */
  --bs-success: #2E8B57 !important;       /* 森林綠 */
  --bs-warning: #FF4500 !important;       /* 橘紅 */
  --bs-info: #4169E1 !important;          /* 系統藍 */
}

body {
  background-color: var(--surface) !important;
  color: var(--secondary) !important;
}

/* 確保側邊欄顏色不被 Bootstrap 覆蓋 */
#sidebar {
  background-color: #2F4F4F !important; /* var(--secondary) */
  color: white !important;
}

#sidebar * {
  color: inherit;
}

/* 確保 header 顏色正確 */
header.sticky.top-0 {
  background-color: #2F4F4F !important; /* var(--secondary) */
  color: white !important;
}

@media (min-width: 1024px) {
  header.sticky.top-0 {
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: #2F4F4F !important; /* var(--secondary) */
  }
}

header.sticky.top-0 * {
  color: inherit;
}

/* 確保 snackbar 顏色正確 */
#snackbar.bg-secondary {
  background-color: #2F4F4F !important; /* var(--secondary) */
}

#snackbar.text-white {
  color: white !important;
}

/* 確保按鈕顏色正確 */
.bg-primary {
  background-color: #FFD700 !important; /* var(--primary) */
}

.text-primary {
  color: #FFD700 !important; /* var(--primary) */
}

.border-primary {
  border-color: #FFD700 !important; /* var(--primary) */
}

.bg-secondary {
  background-color: #2F4F4F !important; /* var(--secondary) */
}

.text-secondary {
  color: #2F4F4F !important; /* var(--secondary) */
}

/* Nav-link 顏色 */
.nav-link {
  color: #2E8B57 !important; /* 系統綠色 */
}

/* Bootstrap 覆寫 */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* 手機版 FAB 浮動操作列 */
#mobile-fab {
  animation: slideUpFAB 0.3s ease-out;
}

@keyframes slideUpFAB {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 24px;
    opacity: 1;
  }
}


/* 市集狀態標籤樣式 */
.market-card[data-status="draft"] .absolute.top-4.right-4 {
  background-color: #9CA3AF;
}

.market-card[data-status="published"] .absolute.top-4.right-4 {
  background-color: var(--success);
}

.market-card[data-status="closed"] .absolute.top-4.right-4 {
  background-color: var(--warning);
}

.market-card[data-status="archived"] .absolute.top-4.right-4 {
  background-color: var(--secondary);
}

/* 已封存市集樣式 */
.archived-market {
  opacity: 0.75;
}

.archived-market:hover {
  opacity: 0.9;
}

/* 相簿拖拽排序樣式 */
.sortable-gallery .gallery-item {
  cursor: move;
  transition: transform 0.2s;
}

.sortable-gallery .gallery-item:hover {
  transform: scale(1.05);
}

.sortable-gallery .sortable-ghost {
  opacity: 0.4;
}

/* 地圖容器樣式 */
#map-picker-container {
  border: 2px solid var(--info);
  border-radius: 12px;
  padding: 1rem;
  background: var(--surface);
}

/* 側邊欄初始載入時禁用過渡動畫 */
html[data-sidebar-initial-expanded="true"] #main-content {
  transition: none !important;
}

html[data-sidebar-initial-expanded="true"] #sidebar {
  transition: none !important;
}

/* 響應式調整 */
@media (max-width: 768px) {
  #mobile-fab {
    left: 1rem;
    right: 1rem;
    transform: none;
    width: calc(100% - 2rem);
  }
  
  #mobile-fab .flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* 隱藏滾動條但保持滾動功能 */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* 金額顯示防止換行 */
.currency-amount {
  white-space: nowrap;
  display: inline-block;
}

/* 表格中的金額欄位不應使用 inline-block，避免影響對齊 */
table .currency-amount,
td .currency-amount,
th .currency-amount {
  display: inline;
}

/* 通用響應式樣式 */
/* 確保按鈕在手機上不會破出畫面 */
@media (max-width: 640px) {
  /* 按鈕組合響應式 */
  .button-group {
    flex-direction: column;
    width: 100%;
  }
  
  .button-group > * {
    width: 100%;
  }
  
  /* 輸入框組合響應式 */
  .input-group {
    flex-direction: column;
  }
  
  .input-group > * {
    width: 100%;
  }
  
  /* 表格響應式 */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .table-responsive table {
    min-width: 600px;
  }
  
  /* 確保文字不會溢出 */
  .text-overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* 卡片按鈕區域響應式 */
  .card-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .card-actions > * {
    width: 100%;
  }
  
  /* Snackbar 在手機上的調整 */
  #snackbar {
    min-width: calc(100% - 2rem);
    max-width: calc(100% - 2rem);
    left: 1rem;
    right: 1rem;
    transform: none;
  }
  
  /* 市集卡片選單在手機上的調整 */
  [id^="more-menu-"],
  [id^="management-menu-"] {
    max-width: calc(100vw - 2rem);
    right: 0 !important;
    left: auto !important;
  }
  
  /* 確保選單不會超出畫面右側 */
  [id^="more-menu-"]:not(.hidden),
  [id^="management-menu-"]:not(.hidden) {
    transform: translateX(0);
  }
}

/* 手機版選單位置調整 */
@media (max-width: 768px) {
  /* 市集卡片選單響應式 */
  [id^="more-menu-"],
  [id^="management-menu-"] {
    max-width: calc(100vw - 1rem);
    min-width: auto;
  }
  
  /* 如果選單會超出右側，改為左對齊 */
  [id^="more-menu-"].menu-left-aligned,
  [id^="management-menu-"].menu-left-aligned {
    right: auto !important;
    left: 0 !important;
  }
  
  /* 選單滾動條樣式 */
  [id^="more-menu-"][style*="overflow-y"],
  [id^="management-menu-"][style*="overflow-y"] {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  
  [id^="more-menu-"][style*="overflow-y"]::-webkit-scrollbar,
  [id^="management-menu-"][style*="overflow-y"]::-webkit-scrollbar {
    width: 4px;
  }
  
  [id^="more-menu-"][style*="overflow-y"]::-webkit-scrollbar-thumb,
  [id^="management-menu-"][style*="overflow-y"]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
  }
}