/* ==========================================================================
   NekoTool - Shadcn Admin Design System Transformation
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Shadcn HSL Tokens with Neko Accent */
  --sh-bg: #FAF8F5;
  --sh-card: #FFFFFF;
  --sh-border: #E8E2D9;
  --sh-border-subtle: #F3EAE0;
  --sh-text-primary: #18181B;
  --sh-text-muted: #71717A;
  
  --sh-primary: #FF8A3D;
  --sh-primary-hover: #EA580C;
  --sh-primary-light: #FFF7ED;
  --sh-ring: rgba(255, 138, 61, 0.28);
  
  --sh-radius: 12px;
  --sh-radius-sm: 8px;
  --sh-radius-lg: 16px;
  --sh-shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.03), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
  --sh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

html, body, #root {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--sh-bg) !important;
  color: var(--sh-text-primary) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
}

/* 侧边栏全面蜕变为 Shadcn-Admin 纯白极简侧边栏 */
.app-sider, .ant-layout-sider {
  background: #FFFFFF !important;
  border-right: 1px solid var(--sh-border) !important;
  box-shadow: none !important;
  height: 100vh !important;
  overflow: hidden;
}

.brand {
  color: var(--sh-text-primary) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  border-bottom: 1px solid var(--sh-border) !important;
  padding: 16px 18px !important;
  background: #FFFFFF !important;
}

/* 菜单项重构 (扁平轻巧、微圆角药丸高亮、Shadcn 风格) */
.app-menu-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px !important;
}

.app-menu, .ant-menu {
  background: transparent !important;
  border-inline-end: none !important;
}

.app-menu .ant-menu-item, 
.ant-menu .ant-menu-item,
.ant-menu-submenu-title {
  height: 38px !important;
  line-height: 38px !important;
  border-radius: var(--sh-radius-sm) !important;
  margin: 3px 0 !important;
  padding-left: 12px !important;
  color: var(--sh-text-muted) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.app-menu .ant-menu-item:hover, 
.ant-menu .ant-menu-item:hover,
.ant-menu-submenu-title:hover {
  background: #F4F0EB !important;
  color: var(--sh-text-primary) !important;
}

.app-menu .ant-menu-item-selected,
.ant-menu .ant-menu-item-selected {
  background: var(--sh-primary-light) !important;
  color: var(--sh-primary-hover) !important;
  font-weight: 700 !important;
}

.app-menu .ant-menu-item-selected::after,
.ant-menu .ant-menu-item-selected::after {
  display: none !important;
}

.app-sider-footer {
  border-top: 1px solid var(--sh-border) !important;
  padding: 12px 16px !important;
  background: #FFFFFF !important;
}

/* 顶栏 Header (毛玻璃透光、极简细线、面包屑) */
.topbar, .mobile-topbar, .ant-layout-header {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--sh-border) !important;
  padding: 0 24px !important;
  height: 60px !important;
  line-height: 60px !important;
}

.topbar-title {
  color: var(--sh-text-primary) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.content-wrap, .mobile-content-wrap {
  margin: 20px !important;
  background: transparent !important;
  overflow: auto;
  min-height: 0;
}

/* 卡片 Card 重构 (Shadcn 风格白底、极细描边、散焦阴影、优雅圆角) */
.ant-card {
  background: var(--sh-card) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: var(--sh-radius) !important;
  box-shadow: var(--sh-shadow-card) !important;
  transition: all 0.2s ease !important;
  margin-bottom: 18px !important;
}

.ant-card:hover {
  border-color: #D6CEC3 !important;
}

.ant-card .ant-card-head {
  border-bottom: 1px solid var(--sh-border-subtle) !important;
  padding: 0 20px !important;
  min-height: 50px !important;
  background: transparent !important;
}

.ant-card .ant-card-head-title {
  color: var(--sh-text-primary) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.ant-card .ant-card-body {
  padding: 20px !important;
}

/* 按钮 Button 重构 (Shadcn 胶囊/微圆角、高饱和纯色主按钮) */
.ant-btn {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: var(--sh-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: var(--sh-shadow-sm) !important;
  transition: all 0.15s ease !important;
  border-color: var(--sh-border) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.ant-btn-primary {
  background: var(--sh-primary) !important;
  border-color: var(--sh-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(255, 138, 61, 0.28) !important;
}

.ant-btn-primary:hover, .ant-btn-primary:focus {
  background: var(--sh-primary-hover) !important;
  border-color: var(--sh-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(255, 138, 61, 0.35) !important;
}

.ant-btn-default {
  background: #FFFFFF !important;
  color: var(--sh-text-primary) !important;
}

.ant-btn-default:hover {
  background: #F4F0EB !important;
  border-color: #D6CEC3 !important;
  color: var(--sh-text-primary) !important;
}

/* 表格 Table (去粗暴竖线、淡灰微边、整洁现代排版) */
.ant-table-wrapper {
  border-radius: var(--sh-radius) !important;
  border: 1px solid var(--sh-border) !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  box-shadow: var(--sh-shadow-card) !important;
}

.ant-table {
  background: transparent !important;
  font-size: 13px !important;
}

.ant-table-thead > tr > th {
  background: #FAF8F5 !important;
  color: var(--sh-text-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid var(--sh-border) !important;
  padding: 12px 16px !important;
}

.ant-table-tbody > tr > td {
  border-bottom: 1px solid var(--sh-border-subtle) !important;
  padding: 13px 16px !important;
  color: var(--sh-text-primary) !important;
}

.ant-table-tbody > tr:hover > td {
  background: #FFFDF9 !important;
}

/* 输入框与选择器 Input / Select (带聚焦环 Focus Ring) */
.ant-input, .ant-select-selector, .ant-input-number, .ant-picker {
  height: 36px !important;
  border-radius: var(--sh-radius-sm) !important;
  border: 1px solid var(--sh-border) !important;
  background: #FFFFFF !important;
  color: var(--sh-text-primary) !important;
  font-size: 13.5px !important;
  box-shadow: var(--sh-shadow-sm) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ant-input:focus, .ant-input-focused,
.ant-select-focused .ant-select-selector,
.ant-picker-focused {
  border-color: var(--sh-primary) !important;
  box-shadow: 0 0 0 3px var(--sh-ring) !important;
}

/* 标签 Tag (全圆角微药丸胶囊) */
.ant-tag {
  border-radius: 9999px !important;
  padding: 2px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
}

.ant-tag-success {
  background: #ECFDF5 !important;
  color: #059669 !important;
  border-color: #A7F3D0 !important;
}

.ant-tag-error {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
  border-color: #FECACA !important;
}

.ant-tag-warning {
  background: #FFFBEB !important;
  color: #D97706 !important;
  border-color: #FDE68A !important;
}

.ant-tag-processing {
  background: #EFF6FF !important;
  color: #2563EB !important;
  border-color: #BFDBFE !important;
}

/* 模态弹窗 Modal */
.ant-modal-content {
  border-radius: var(--sh-radius) !important;
  border: 1px solid var(--sh-border) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.18) !important;
  padding: 24px !important;
}

.ant-modal-mask {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  background: rgba(15, 23, 42, 0.45) !important;
}

.ant-modal-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--sh-text-primary) !important;
}

.callback-mode-option.is-selected {
  border-color: var(--sh-primary) !important;
  background: var(--sh-primary-light) !important;
  box-shadow: 0 0 0 1px var(--sh-primary) !important;
}

.route-loading {
  min-height: 240px;
  display: grid;
  place-items: center;
}