/*
  ONEONELITE Global CSS (Lite only)
  - 僅新增 .ol-* 前綴的工具類與原子類，避免覆蓋既有樣式
  - 不變更既有版面與配色，只提供統一規範以利擴展
  - 任何需要覆蓋的樣式請在頁面專屬 CSS 中處理
*/

/*
  CSS Variables (ol-*)
  說明：盡量引用既有 main.css 的變數，避免重複定義與衝突
*/
:root {
  /* 色彩對應（引用主題既有變數） */
  --ol-color-primary: var(--gold);
  --ol-color-primary-dark: var(--dark-gold);
  --ol-color-primary-light: var(--light-gold);
  --ol-color-danger: #D1080F;
  --ol-color-warning: #dc6e2d;
  --ol-color-info: #2d9adc;
  --ol-color-success: #73c400;
  --ol-color-gray: var(--gray);
  --ol-color-gray-strong: var(--dark-gray);
  --ol-color-gray-light: var(--light-gray);
  --ol-color-gray-silver: var(--sliver-gray);
  --ol-color-gray-gainsboro: var(--gainsboro-gray);
  --ol-color-white: #ffffff;
  --ol-color-black: #000000;

  /* 間距（僅供 .ol-* 工具類使用） */
  --ol-space-0: 0;
  --ol-space-1: 0.25rem; /* 4px */
  --ol-space-2: 0.5rem;  /* 8px */
  --ol-space-3: 0.75rem; /* 12px */
  --ol-space-4: 1rem;    /* 16px */
  --ol-space-5: 1.5rem;  /* 24px */
  --ol-space-6: 2rem;    /* 32px */

  /* 圓角與陰影 */
  --ol-radius-sm: 6px;
  --ol-radius-md: 10px;
  --ol-radius-lg: 16px;

  --ol-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --ol-shadow-md: 0 6px 18px rgba(0,0,0,0.12);
  --ol-shadow-lg: 0 12px 28px rgba(0,0,0,0.16);

  /* 字體（僅供 .ol-* 類使用，不覆蓋全域） */
  --ol-font-family-base: 'Noto Sans TC', 'Microsoft JhengHei', system-ui, -apple-system, sans-serif;
  --ol-line-height: 1.5;
}

/*
  排版與文本工具（僅 .ol-* 類，不影響現有）
*/
.ol-text-left { text-align: left !important; }
.ol-text-center { text-align: center !important; }
.ol-text-right { text-align: right !important; }
.ol-text-primary { color: var(--ol-color-primary) !important; }
.ol-text-muted { color: var(--ol-color-gray) !important; }
.ol-text-danger { color: var(--ol-color-danger) !important; }
.ol-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ol-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/*
  版面工具（不覆蓋 Bootstrap，僅輔助）
*/
.ol-flex { display: flex !important; }
.ol-inline-flex { display: inline-flex !important; }
.ol-items-center { align-items: center !important; }
.ol-items-start { align-items: flex-start !important; }
.ol-items-end { align-items: flex-end !important; }
.ol-justify-center { justify-content: center !important; }
.ol-justify-between { justify-content: space-between !important; }
.ol-justify-start { justify-content: flex-start !important; }
.ol-justify-end { justify-content: flex-end !important; }
.ol-gap-1 { gap: var(--ol-space-1) !important; }
.ol-gap-2 { gap: var(--ol-space-2) !important; }
.ol-gap-3 { gap: var(--ol-space-3) !important; }
.ol-gap-4 { gap: var(--ol-space-4) !important; }

/*
  間距工具（少量、常用）
*/
.ol-m-0 { margin: 0 !important; }
.ol-mt-1 { margin-top: var(--ol-space-1) !important; }
.ol-mt-2 { margin-top: var(--ol-space-2) !important; }
.ol-mt-3 { margin-top: var(--ol-space-3) !important; }
.ol-mt-4 { margin-top: var(--ol-space-4) !important; }
.ol-mb-1 { margin-bottom: var(--ol-space-1) !important; }
.ol-mb-2 { margin-bottom: var(--ol-space-2) !important; }
.ol-mb-3 { margin-bottom: var(--ol-space-3) !important; }
.ol-mb-4 { margin-bottom: var(--ol-space-4) !important; }
.ol-pt-1 { padding-top: var(--ol-space-1) !important; }
.ol-pt-2 { padding-top: var(--ol-space-2) !important; }
.ol-pt-3 { padding-top: var(--ol-space-3) !important; }
.ol-pt-4 { padding-top: var(--ol-space-4) !important; }
.ol-pb-1 { padding-bottom: var(--ol-space-1) !important; }
.ol-pb-2 { padding-bottom: var(--ol-space-2) !important; }
.ol-pb-3 { padding-bottom: var(--ol-space-3) !important; }
.ol-pb-4 { padding-bottom: var(--ol-space-4) !important; }

/*
  按鈕原子類（不影響現有 .btn）
*/
.ol-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--ol-radius-md);
  border: 1px solid transparent;
  font-family: var(--ol-font-family-base);
  line-height: var(--ol-line-height);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ol-btn--primary {
  background: var(--ol-color-primary);
  color: var(--ol-color-white);
  border-color: var(--ol-color-primary);
}
.ol-btn--primary:hover {
  filter: brightness(0.96);
}
.ol-btn--outline {
  background: transparent;
  color: var(--ol-color-primary);
  border-color: var(--ol-color-primary);
}
.ol-btn--outline:hover {
  background: rgba(0,0,0,0.03);
}

/*
  卡片原子類（安全、可選）
*/
.ol-card {
  background: var(--ol-color-white);
  border-radius: var(--ol-radius-md);
  box-shadow: var(--ol-shadow-sm);
}
.ol-card--hover:hover {
  box-shadow: var(--ol-shadow-md);
}

/*
  模態框輔助類（不覆蓋 Bootstrap 原生樣式）
*/
.ol-modal-title { font-weight: 700; }
.ol-modal-body-scroll { max-height: 65vh; overflow: auto; }

/*
  表格輔助
*/
.ol-table-nowrap th,
.ol-table-nowrap td {
  white-space: nowrap;
}