/* ==========================================
   全域基礎樣式 (Global Base Styles)
   ========================================== */

/* 滾動條樣式 (Scrollbar Styles) */
div,
ul {
  scrollbar-width: thin;
  scrollbar-color: var(--main-color) var(--text-color);
}
div::-webkit-scrollbar,
ul::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
div::-webkit-scrollbar-track,
ul::-webkit-scrollbar-track {
  background: var(--main-color);
}
div::-webkit-scrollbar-thumb,
ul::-webkit-scrollbar-thumb {
  background-color: var(--text-color);
  border-radius: 6px;
  border: 1px solid var(--text-color);
}

/* ==========================================
   登入頁面專用樣式 (Login Page Styles)
   ========================================== */

#login-page .ant-form-item-control {
  line-height: 0;
}
#login-page .ant-select-selection {
  border-radius: 0;
}
#login-page .has-error .ant-form-explain,
.has-error .ant-form-split {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

/* ==========================================
   主系統界面樣式 (Main System Styles)
   ========================================== */

/* 基礎文字和顏色 (Basic Text & Colors) */
#system h1,
#system h2,
#system h3,
#system h4,
#system h5,
#system h6 {
  color: var(--text-color);
}
#system ::placeholder {
  color: var(--text-color);
  opacity: 0.5;
}
#system .ant-select-selection__placeholder,
#system .ant-select-search__field__placeholder {
  color: var(--text-color);
  opacity: 0.5;
}
#system a {
  color: var(--text-color);
}

/* 佈局組件 (Layout Components) */
#system,
#system .ant-layout {
  background-color: var(--main-color);
}
#system .ant-layout-sider {
  background-color: transparent;
}

/* 導航選單 (Navigation Menu) */
#system .ant-menu {
  background-color: transparent;
  /* padding: 0 5px; */
}
#system .ant-menu.ant-menu-sub {
  background-color: var(--main-color);
}
#system .ant-menu-item,
#system .ant-menu-submenu,
#system .ant-menu-submenu-title {
  color: var(--text-color) !important;
  margin-bottom: 8px;
}
#system .ant-menu-item .anticon + span {
  color: var(--text-color) !important;
}
#system .ant-menu-item:hover,
#system .ant-menu-submenu:hover,
#system .ant-menu-submenu-open,
#system .ant-menu-item.ant-menu-item-selected {
  background-color: var(--secondary-color) !important;
}
#system .ant-menu-item:active,
#system .ant-menu-submenu:active {
  /* outline: none; */
}
#system .ant-menu .ant-menu-item-selected .anticon,
#system .ant-menu-item > a,
#system .ant-menu-submenu > a,
#system .ant-breadcrumb-separator {
  color: var(--text-color) !important;
}
#system .ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow::before,
#system .ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow::after {
  background-color: var(--text-color);
}
#system .ant-menu-submenu-arrow {
  color: var(--text-color);
}

/* 表單控制項 (Form Controls) */
/* Switch 開關 */
#system .ant-switch {
  background-color: var(--text-color-disable);
}

#system .ant-switch-checked {
  /* background-color: var(--text-color); */
  background-color: green;
}
#system .ant-switch[aria-checked="false"]::after {
  background-color: var(--text-color-disable);
}
#system .ant-switch-inner {
  color: var(--text-color);
}

/* 互動組件 (Interactive Components) */
/* Drawer 側邊抽屜 */
#system .ant-drawer-header,
#system .ant-drawer-content {
  background-color: var(--main-color);
  color: var(--text-color);
}
#system .ant-drawer-title,
#system .ant-drawer-close {
  color: var(--text-color);
}

/* Dropdown 下拉選單 */
#system .ant-dropdown-menu {
  background-color: var(--main-color);
}
#system .ant-dropdown-menu-item:hover {
  background-color: var(--main-color);
}
#system .ant-dropdown-menu-item,
#system .ant-dropdown-menu-submenu-title {
  color: var(--text-color);
}

/* Select 下拉選擇器 */
#system .ant-select-dropdown {
  background-color: var(--main-color);
}
#system .ant-select-dropdown-menu-item {
  color: var(--text-color);
}
#system .ant-select-dropdown-menu-item-selected,
#system
  .ant-select-dropdown-menu-item:hover:not(
    .ant-select-dropdown-menu-item-disabled
  ),
#system
  .ant-select-dropdown-menu-item-active:not(
    .ant-select-dropdown-menu-item-disabled
  ) {
  background-color: var(--main-color);
}
#system .ant-divider {
  background: var(--text-color);
}
#system .ant-select-selector {
  background-color: var(--main-color);
  color: var(--text-color);
  border: 1px solid var(--text-color);
}

/* Modal 模態對話框 */
#system .ant-modal-content {
  background-color: var(--main-color);
  color: var(--text-color);
}
#system .ant-modal-header {
  background-color: var(--main-color);
  color: var(--text-color);
}
#system .ant-modal-footer {
}
#system .ant-modal-title,
#system .ant-modal-close-x,
#system .ant-typography,
#system .ant-select-arrow,
#system .ant-calendar-picker-icon,
#system .ant-time-picker-icon {
  color: var(--text-color);
}
#system .ant-typography.ant-typography-danger {
  color: #f5222d;
}

/* DatePicker/TimePicker 日期時間選擇器 */
#system .ant-calendar-range .ant-calendar-input,
#system .ant-calendar-range .ant-calendar-time-picker-input,
#system .ant-calendar-picker-clear,
#system .ant-calendar-input {
  background: var(--main-color);
  color: var(--text-color);
}
#system .ant-calendar-selected-day .ant-calendar-date,
#system .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month,
#system .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year,
#system
  .ant-calendar-decade-panel-selected-cell
  .ant-calendar-decade-panel-decade {
  background: transparent !important;
}
#system .ant-calendar-today .ant-calendar-date {
  background-color: #1890ff; /* 背景顏色 */
  color: #fff; /* 字體顏色 */
  font-weight: bold; /* 字體加粗 */
  border: none !important; /* 去除默認邊框 */
}
#system .ant-calendar-month-panel-cell-disabled .ant-calendar-month-panel-month,
#system
  .ant-calendar-month-panel-cell-disabled
  .ant-calendar-month-panel-month:hover {
  background: transparent;
}

/* Input 輸入框 */
#system .ant-input,
#system .ant-input-number,
#system .ant-input-number-group-addon {
  background-color: var(--main-color);
  color: var(--text-color);
  border: 1px solid var(--text-color);
}
#system .ant-select-selection,
#system .ant-time-picker-input {
  background-color: var(--main-color);
  color: var(--text-color);
}

/* Button 按鈕 */
#system .ant-btn {
  background-color: var(--main-color);
  color: var(--text-color);
  border-color: var(--text-color);
}
#system .ant-btn-primary {
  background-color: var(--text-color);
  color: var(--main-color);
}
#system .ant-btn[disabled] {
  color: var(--text-color-disable);
}
#system .ant-btn.ant-btn-danger {
  background-color: red;
  color: #fff;
}

/* Checkbox 複選框 */
#system .ant-checkbox-inner {
  background-color: transparent !important;
}
#system .ant-checkbox-inner::after {
  border-color: var(--text-color) !important;
  width: 8px;
  height: 12px;
}
#system .ant-checkbox-checked::after {
}
#system .ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: var(--text-color);
}
#system .ant-checkbox-disabled .ant-checkbox-inner {
  opacity: 0.3;
}

/* Radio 單選按鈕 */
#system .ant-radio-inner {
  background-color: transparent !important;
  border: 1px solid var(--text-color);
}
#system .ant-radio-inner::after {
  background-color: var(--text-color);
}
#system .ant-radio-button-wrapper {
  border: 1px solid var(--text-color);
}
#system .ant-radio-wrapper,
#system .ant-checkbox-wrapper {
  color: var(--text-color);
}
#system .ant-radio-button-wrapper {
  background-color: var(--main-color);
  color: var(--text-color);
}
#system .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
  background-color: var(--text-color);
  color: var(--main-color);
}
#system .ant-radio-group {
  border-color: var(--text-color);
}
#system .ant-checkbox {
  border: 1px solid var(--text-color);
}

/* Steps 步驟條 */
#system .ant-steps-item-process .ant-steps-item-icon,
#system .ant-steps-item-wait .ant-steps-item-icon,
#system .ant-steps-item-finish .ant-steps-item-icon {
  background-color: transparent;
}
#system .ant-steps-item {
  padding: 10px;
}
#system
  .ant-steps-item-finish
  > .ant-steps-item-container
  > .ant-steps-item-content
  > .ant-steps-item-title::after {
  background-color: var(--text-color-disable);
}
#system .ant-steps-item-icon,
#system .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon,
#system .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon,
#system .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon,
#system
  .ant-steps-item-wait
  > .ant-steps-item-container
  > .ant-steps-item-content
  > .ant-steps-item-title,
#system
  .ant-steps-item-process
  > .ant-steps-item-container
  > .ant-steps-item-content
  > .ant-steps-item-title,
#system
  .ant-steps-item-finish
  > .ant-steps-item-container
  > .ant-steps-item-content
  > .ant-steps-item-title {
  color: var(--text-color);
  background-color: transparent;
}
#system .ant-steps-item-active .ant-steps-item-icon {
  position: relative;
  transform: scale(1.15);
}
#system .ant-steps-item-active .ant-steps-item-icon::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 100%;
  border: 1px solid var(--text-color);
  opacity: 0.5;
}
#system .ant-steps-item-active .ant-steps-item-icon::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 100%;
  border: 1px solid var(--text-color);
  animation: zoom 2.5s infinite;
}

/* Popover 彈出框 */
#system .ant-slider-mark-text,
#system .ant-popover-message,
#system .ant-popover-title,
#system .ant-popover-inner-content {
  padding: 5px 10px;
  color: var(--text-color);
}
#system .ant-popover-inner {
  background-color: var(--main-color);
}
#system .ant-popover-placement-left > .ant-popover-content > .ant-popover-arrow,
#system
  .ant-popover-placement-leftTop
  > .ant-popover-content
  > .ant-popover-arrow,
#system
  .ant-popover-placement-leftBottom
  > .ant-popover-content
  > .ant-popover-arrow {
  border-top-color: var(--main-color);
  border-right-color: var(--main-color);
}
#system
  .ant-popover-placement-bottomLeft
  > .ant-popover-content
  > .ant-popover-arrow {
  border-top-color: var(--main-color);
  border-left-color: var(--main-color);
}
#system
  .ant-popover-placement-right
  > .ant-popover-content
  > .ant-popover-arrow {
  border-bottom-color: var(--main-color);
  border-left-color: var(--main-color);
}
#system
  .ant-popover-placement-bottom
  > .ant-popover-content
  > .ant-popover-arrow {
  border-top-color: var(--main-color);
  border-left-color: var(--main-color);
}
#system
  .ant-popover-placement-right
  > .ant-popover-content
  > .ant-popover-arrow,
#system
  .ant-popover-placement-rightTop
  > .ant-popover-content
  > .ant-popover-arrow,
#system
  .ant-popover-placement-rightBottom
  > .ant-popover-content
  > .ant-popover-arrow {
  border-bottom-color: var(--main-color);
  border-left-color: var(--main-color);
}

/* 資料展示組件 (Data Display Components) */
/* Tree 樹狀結構 */
#system .ant-tree,
#system .ant-tree li .ant-tree-node-content-wrapper {
  color: var(--text-color);
  width: 100%;
  max-width: calc(100% - 15px);
}
#system .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background-color: var(--text-color);
  color: var(--main-color);
}
#system
  .ant-tree.ant-tree-directory
  > li.ant-tree-treenode-selected
  > span.ant-tree-node-content-wrapper::before,
#system
  .ant-tree.ant-tree-directory
  .ant-tree-child-tree
  > li.ant-tree-treenode-selected
  > span.ant-tree-node-content-wrapper::before {
  background: none;
}
#system .ant-tree span.ant-tree-title {
  display: inline-block;
  max-width: calc(100% - 24px);
  width: 100%;
}
#system .folder.ant-tree span.ant-tree-title {
  display: inline-block;
  max-width: 100%;
  width: 100%;
}

/* ==========================================
   特殊樣式區塊 (Special Style Blocks)
   ========================================== */

/* Table 表格包裝器 */
#system .table-wrap .ant-pagination {
  position: absolute;
  right: 0;
  margin-top: 25px;
}
#system .ant-table,
#system .ant-table-header,
#system .ant-table-footer,
#system .ant-table-footer::before,
#system .ant-table-thead > tr > th,
#system .ant-table-tbody > tr > td,
#system .ant-table-placeholder {
  background: var(--main-color);
  color: var(--text-color);
  border: 1px solid var(--text-color);
}
#system .ant-empty-normal {
  background: var(--main-color);
  color: var(--text-color);
}
#system
  .ant-table-fixed-header
  > .ant-table-content
  > .ant-table-scroll
  > .ant-table-body {
  background: var(--text-color);
}

/* Table 相關樣式 */
#system .react-resizable {
  position: relative;
  background-clip: padding-box;
}
/* 已註解的 Resizable Handle 樣式 */
/* #system .react-resizable-handle {
  position: absolute;
  width: 10px;
  height: 100%;
  bottom: 0;
  right: -5px;
  cursor: col-resize;
  z-index: 1;
} */
#system
  .ant-table-thead
  > tr
  > th
  .ant-table-column-sorter
  .ant-table-column-sorter-inner {
  color: var(--text-color);
}
#system .ant-pagination {
  color: var(--text-color);
}
#system .ant-pagination-item,
#system .ant-pagination-item-active,
#system .ant-pagination-prev .ant-pagination-item-link,
#system .ant-pagination-next .ant-pagination-item-link {
  background: transparent;
  color: var(--text-color);
  border: 1px solid var(--text-color);
}

/* Tabs 頁籤組件 */
#system .ant-tabs-bar {
  border-bottom: none;
}
#system .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container {
  height: auto;
}
#system .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab,
#system .ant-tabs-nav .ant-tabs-tab {
  height: auto;
  line-height: 38px;
  padding: 0px 10px;
  margin-right: 10px;
  background: transparent;
  color: var(--text-color) !important;
  border: 1px solid var(--text-color);
}
#system .ant-tabs-nav-wrap {
  border-bottom: 1px solid var(--text-color);
}
#system .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active,
#system .ant-tabs-nav .ant-tabs-tab-active {
  background: var(--text-color);
}
#system .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--main-color) !important;
}
#system .ant-tabs-nav-scroll {
  padding: 10px 0px 10px 10px;
}
#system .ant-tabs {
  color: var(--text-color);
}
#system .ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane,
#system .ant-tabs .ant-tabs-bottom-content > .ant-tabs-tabpane {
  padding: 10px;
}
#system .ant-form-item-label > label {
  color: var(--text-color);
}
#system .ant-tabs-ink-bar {
  display: none !important;
}
#system .ant-table-row-expand-icon {
  background: transparent;
  color: var(--text-color) !important;
}
#system .ant-table-row-level-1 {
  background-color: rgba(0, 0, 0, 0.15);
}

/* Collapse 摺疊面板 */
#system .ant-collapse {
  background-color: transparent;
}
#system .ant-collapse > .ant-collapse-item {
  border-color: var(--text-color) !important;
}
#system .ant-collapse > .ant-collapse-item > .ant-collapse-header {
  border: 1px solid var(--text-color);
  color: var(--main-color);
  background-color: var(--text-color);
}
#system .ant-collapse-content {
  background-color: transparent;
  border-color: var(--text-color) !important;
  color: var(--text-color);
}
#system .block .ant-collapse-content {
  border-top: 1px solid var(--text-color);
  overflow: visible;
}

/* Calendar 日曆組件 */
#system .ant-calendar,
#system .ant-calendar-year-panel,
#system .ant-calendar-month-panel,
#system .ant-calendar-decade-panel,
#system
  .ant-calendar-range.ant-calendar-time
  .ant-calendar-time-picker-combobox,
#system.ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-inner {
  background-color: var(--main-color);
}
#system .ant-calendar .ant-calendar-ok-btn {
  background-color: var(--main-color);
}
#system .ant-calendar-range.ant-calendar-time .ant-calendar-time-picker-inner {
  padding-top: 34px;
}
#system .ant-calendar-date,
#system .ant-calendar-picker-container,
#system .ant-calendar-range-middle {
  color: var(--text-color);
}
#system .ant-calendar-input-wrap,
#system .ant-calendar-time-picker-select,
#system .ant-calendar-range-right .ant-calendar-time-picker-inner,
#system .ant-calendar-range .ant-calendar-body,
#system .ant-calendar-footer {
  border-color: var(--text-color) !important;
}
/* 已註解的日曆選中狀態樣式 */
/* #system li.ant-calendar-time-picker-select-option-selected,
#system .ant-calendar-range .ant-calendar-in-range-cell::before {
  background-color: rgba(0, 0, 0, 0.15);
} */
#system .ant-descriptions-bordered .ant-descriptions-view {
}
#system .ant-descriptions-bordered .ant-descriptions-item-label {
  background: transparent;
}
#system .ant-descriptions-item-label {
  color: var(--text-color);
}

/* Card 卡片組件 */
#system .ant-card {
  background: transparent;
  color: var(--text-color);
  border-color: var(--text-color);
}
#system .ant-card-head {
  color: var(--text-color);
  border-color: var(--text-color);
}
#system .ant-modal-confirm-body .ant-modal-confirm-title {
  color: var(--text-color);
}
#system .ant-modal-confirm-body .ant-modal-confirm-content {
  color: var(--text-color);
}
#system .ant-input-group-addon {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: var(--text-color);
}
#system .ant-picker {
  border: 1px solid var(--text-color);
}
#system .ant-input-affix-wrapper {
  border: 1px solid var(--text-color);
}

/* 回饋組件 (Feedback Components) */
/* Notification 通知提醒 */
#system .ant-notification-notice {
  background-color: rgba(255, 0, 0, 0.85);
  color: var(--text-color);
}
#system .ant-notification-notice-message {
  color: var(--text-color);
}

/* 卡片容器專用樣式 (Card Container Styles) */
#system .card-container .ant-tabs-nav-scroll,
#system .card-container .ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane,
#system .card-container .ant-tabs .ant-tabs-bottom-content > .ant-tabs-tabpane {
  padding: 0px;
}
#system .card-container > .ant-tabs-card > .ant-tabs-content {
  margin-top: -8px;
}
#system
  .card-container
  > .ant-tabs-card
  > .ant-tabs-content
  > .ant-tabs-tabpane {
  padding: 5px;
  background: #00000015;
}
#system
  .card-container
  .ant-tabs.ant-tabs-card
  .ant-tabs-card-bar
  .ant-tabs-tab-active {
  background: #00000015;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#system
  .ant-tree.ant-tree-directory
  > li
  span.ant-tree-node-content-wrapper:hover::before,
#system
  .ant-tree.ant-tree-directory
  .ant-tree-child-tree
  > li
  span.ant-tree-node-content-wrapper:hover::before {
  background: none;
}
#system .ant-pagination-item-active {
  background-color: var(--text-color);
}
#system .ant-pagination-item-active > a {
  color: var(--main-color);
}

/* Cascader 級聯選擇器 */
#system .ant-cascader-picker {
  background-color: var(--main-color);
  color: var(--text-color);
}
#system .ant-cascader-menu {
  background-color: var(--main-color);
  color: var(--text-color);
}
#system .ant-cascader-menu-item-active {
  background-color: gray;
  font-weight: bold;
}
#system .ant-cascader-menu-item:hover {
  background-color: gray;
  font-weight: bold;
}

/* TimePicker 時間選擇器擴展樣式 */
#system .ant-calendar-time-picker-select li {
  background-color: var(--main-color) !important; /* 修改背景顏色 */
}

#system .ant-calendar-time-picker-select-option-selected {
  color: aqua !important;
}

#system .ant-select-item.ant-select-item-option {
  color: var(--text-color);
  background-color: var(--main-color);
}

#system .ant-select-item.ant-select-item-option.ant-select-item-option-active {
  color: var(--main-color);
  background-color: var(--text-color);
}

#system .ant-tag.ant-tag-blue,
#system .ant-tag.ant-tag-green {
  background-color: var(--main-color);
  border-color: var(--text-color);
}

/* ==========================================
   動畫效果 (Animation Effects)
   ========================================== */

@keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  90% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}