/* 
 * Apple Design Override for Arco Design Components
 * This file forcefully overrides Arco default styles to match Apple UI guidelines.
 */

:root, body[arco-theme] {
  --color-text-1: #000000 !important;
  --color-text-2: #000000 !important;
  --color-text-3: #000000 !important;
  --color-text-4: #000000 !important;
}

/* ================== Global Resets ================== */
.arco-typography {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
}

/* ================== Buttons ================== */
.arco-btn {
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  box-shadow: none !important;
  border: none !important;
}

.arco-btn:active {
  transform: scale(0.96) !important;
}

/* Primary Button */
.arco-btn-primary {
  background: #0071e3 !important;
  color: #fff !important;
}
.arco-btn-primary:hover {
  background: #0077ed !important;
}

/* Secondary / Outline Button */
.arco-btn-secondary,
.arco-btn-outline {
  background: rgba(118, 118, 128, 0.12) !important;
  color: var(--apple-text-1, #1d1d1f) !important;
  border: none !important;
}
.arco-btn-secondary:hover,
.arco-btn-outline:hover {
  background: rgba(118, 118, 128, 0.18) !important;
}

/* Danger Button */
.arco-btn-status-danger {
  background: rgba(255, 59, 48, 0.1) !important;
  color: #ff3b30 !important;
}
.arco-btn-status-danger:hover {
  background: rgba(255, 59, 48, 0.15) !important;
}

/* ================== Inputs & Selects ================== */
.arco-input-wrapper,
.arco-select-view,
.arco-textarea-wrapper {
  background-color: rgba(118, 118, 128, 0.12) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.arco-input-wrapper:hover,
.arco-select-view:hover,
.arco-textarea-wrapper:hover {
  background-color: rgba(118, 118, 128, 0.18) !important;
}

.arco-input-wrapper-focus,
.arco-select-view-focus,
.arco-textarea-wrapper-focus,
.arco-input-wrapper:focus-within {
  background-color: #ffffff !important;
  border-color: #0071e3 !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2) !important;
}

/* ================== Tags ================== */
.arco-tag {
  border-radius: 12px !important;
  padding: 2px 8px !important;
  border: none !important;
  font-weight: 500 !important;
}
.arco-tag-arcoblue { background: rgba(0, 113, 227, 0.1) !important; color: #0071e3 !important; }
.arco-tag-green { background: rgba(52, 199, 89, 0.1) !important; color: #34c759 !important; }
.arco-tag-red { background: rgba(255, 59, 48, 0.1) !important; color: #ff3b30 !important; }
.arco-tag-gray { background: rgba(118, 118, 128, 0.12) !important; color: #000000 !important; }

/* ================== Table ================== */
.arco-table-container {
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.arco-table-header {
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.arco-table-th {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: var(--apple-text-3) !important;
  font-weight: 600 !important;
  border-right: none !important;
}

.arco-table-td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-right: none !important;
}

.arco-table-tr:hover .arco-table-td {
  background: rgba(0, 0, 0, 0.02) !important;
}

/* Remove default table borders */
.arco-table-border .arco-table-container,
.arco-table-border .arco-table-th,
.arco-table-border .arco-table-td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}

/* Remove table shadow & scrollbar artifacts */
.arco-table-container::before,
.arco-table-container::after {
  display: none !important;
  box-shadow: none !important;
}
.arco-table-body {
  overflow-x: visible !important;
}

/* ================== Modals & Drawers ================== */
.arco-modal {
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden;
}
.arco-modal-header {
  border-bottom: none !important;
  padding: 24px 24px 12px !important;
}
.arco-modal-title {
  font-weight: 600 !important;
  font-size: 18px !important;
}

.arco-drawer {
  border-radius: 0 !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1) !important;
  background-color: rgba(245, 245, 247, 0.9) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.05) !important;
}
.arco-drawer-header {
  border-bottom: none !important;
  background: transparent !important;
  padding: 20px 24px 10px !important;
}
.arco-drawer-title {
  font-weight: 600 !important;
  font-size: 17px !important;
  text-align: center !important;
  width: 100% !important;
  color: var(--apple-text-1) !important;
}
.arco-drawer-footer {
  border-top: none !important;
  background: transparent !important;
  padding: 16px 24px 24px !important;
}

/* Modal/Drawer Backdrop */
.arco-modal-mask,
.arco-drawer-mask {
  background-color: rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(2px) !important;
}

/* ================== Message / Toast ================== */
.arco-message {
  border-radius: 24px !important;
  padding: 12px 24px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* ================== Menu / Dropdown ================== */
.arco-dropdown-menu {
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
  padding: 6px !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
}
.arco-dropdown-menu-item {
  border-radius: 6px !important;
  margin: 2px 0 !important;
}
.arco-dropdown-menu-item:hover {
  background-color: #0071e3 !important;
  color: #fff !important;
}

/* ============================================================
   Arco 质感增强（设计精修 · 不改动组件逻辑）
   ============================================================ */

/* 键盘可达性：交互元素聚焦环 */
.arco-btn:focus-visible,
.arco-input-wrapper:focus-visible,
.arco-select-view:focus-visible,
.arco-textarea-wrapper:focus-visible {
  box-shadow: var(--apple-ring) !important;
}

/* 主按钮：更精致的悬停 / 按压与投影 */
.arco-btn-primary {
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.28) !important;
  transition: background 0.2s var(--apple-ease), transform 0.12s var(--apple-ease), box-shadow 0.2s var(--apple-ease) !important;
}
.arco-btn-primary:hover {
  background: var(--apple-accent-hover) !important;
  box-shadow: 0 6px 20px rgba(0, 113, 227, 0.36) !important;
}
.arco-btn-primary:active {
  background: var(--apple-accent-press) !important;
  transform: scale(0.97) !important;
}

/* 次要 / 描边按钮：更克制的高亮 */
.arco-btn-secondary:hover,
.arco-btn-outline:hover {
  background: rgba(118, 118, 128, 0.18) !important;
}

/* 输入框聚焦：更清晰的聚焦环 */
.arco-input-wrapper-focus,
.arco-select-view-focus,
.arco-input-wrapper:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.22) !important;
}

/* 表格行：更优雅的悬浮（轻微背景） */
.arco-table-tr:hover .arco-table-td {
  background: rgba(0, 113, 227, 0.035) !important;
}

/* 模态：玻璃边缘高光，提升质感 */
.arco-modal {
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}