/* ============================================
   彩票店营业额管理 - iOS 风格美化（移动端优先）
   浅色模式 · 苹果蓝 · 大圆角 · 毛玻璃 · 苹方
   ============================================ */

/* ---- 全局基础 ---- */
html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC',
    'SF Pro Text', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
  background-color: #F2F2F7;
  color: #1C1C1E;
  letter-spacing: -0.01em;
}

/* ---- iOS 样式覆盖 Tailwind ---- */

/* 全局卡片 — 大圆角 + 柔和阴影 + 留白 */
.bg-white {
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04) !important;
}

/* 主区域背景覆盖 */
.bg-gray-50 {
  background-color: #F2F2F7 !important;
}

/* 顶部导航栏 — 苹果蓝低饱和 */
.bg-primary {
  background-color: #5E8FBF !important;
}
.bg-primary-light {
  background-color: #7BA8D4 !important;
}
.text-primary {
  color: #5E8FBF !important;
}
.border-primary {
  border-color: #5E8FBF !important;
}
.from-primary {
  --tw-gradient-from: #5E8FBF !important;
}
.to-primary-light {
  --tw-gradient-to: #7BA8D4 !important;
}

/* 聚焦环颜色 */
.focus\:ring-primary-light:focus {
  --tw-ring-color: #7BA8D440 !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:border-primary-light:focus {
  border-color: #7BA8D4 !important;
}

/* 统计卡片渐变背景覆盖 */
.bg-gradient-to-r {
  border-radius: 16px !important;
}

/* ---- 底部导航栏 — 毛玻璃磨砂 ---- */
header.sticky {
  background-color: rgba(94, 143, 191, 0.92) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

nav.fixed {
  background-color: rgba(249, 249, 252, 0.82) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid rgba(60, 60, 67, 0.12) !important;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.03) !important;
}

/* 底部 Tab 按钮 — iOS 风格 */
.tab-btn {
  transition: color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
              border-color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  padding: 12px 0 14px 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.tab-btn.border-transparent {
  border-bottom-width: 2px !important;
}

/* 主内容区域留白 */
main#appMain {
  padding-top: 20px !important;
  padding-bottom: 96px !important;
}
@media (max-width: 375px) {
  main#appMain {
    padding-top: 16px !important;
    padding-bottom: 88px !important;
  }
}

/* ---- 输入框轻量化 ---- */
input[type='text'],
input[type='number'],
input[type='date'],
input[type='password'],
input[type='email'],
select,
textarea {
  font-size: 16px;
  background-color: #F5F5FA !important;
  border-color: #E5E5EA !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'SF Pro Text', sans-serif;
  letter-spacing: 0.01em;
  color: #1C1C1E;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  outline: none !important;
}
input::placeholder {
  color: #8E8E93;
  font-size: 15px;
}

/* 金额输入框 — 额外右侧留白 + 数字等宽 */
.amount-input {
  font-variant-numeric: tabular-nums;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #1C1C1E;
}
.amount-input::-webkit-inner-spin-button,
.amount-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.amount-input {
  -moz-appearance: textfield;
}

/* 利润预览行 — 独立一行，不再与输入框重叠 */
.profit-preview-row {
  min-height: 18px;
}
.profit-preview-value {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 375px) {
  .amount-input {
    font-size: 16px !important;
  }
}

/* ---- 按钮轻量化 ---- */
button:not(.tab-btn):not(.stats-period-btn) {
  font-weight: 500;
  letter-spacing: 0.02em;
}
.bg-primary.text-white.font-semibold {
  border-radius: 12px !important;
  padding: 14px 0 !important;
  box-shadow: 0 2px 8px rgba(94, 143, 191, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}
.bg-primary.text-white.font-semibold:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(94, 143, 191, 0.2);
}
.bg-primary.text-white.font-semibold:hover {
  background-color: #4F7DAB !important;
}

/* ---- 统计周期 Tab（日/月/年）---- */
.stats-period-btn {
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.stats-period-btn.bg-primary {
  box-shadow: 0 2px 8px rgba(94, 143, 191, 0.2);
}

/* 周期选择器下拉框 */
.period-selector-row select {
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 14px;
  background-color: #F5F5FA !important;
  border-color: #E5E5EA !important;
}

/* ---- 卡片悬浮效果 ---- */
.card-hover {
  transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.card-hover:active {
  transform: scale(0.97);
}

/* ---- 统计卡片数字 ---- */
.stat-number {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---- 利润结果高亮动画 ---- */
@keyframes highlightPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.highlight-pulse {
  animation: highlightPulse 0.4s ease-in-out 2;
}

/* ---- 密码弹窗 — iOS 弹窗风格 ---- */
.modal-overlay {
  background-color: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-overlay .bg-white {
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
#authPasswordInput {
  font-size: 18px !important;
  letter-spacing: 0.15em;
  border-radius: 10px !important;
  padding: 14px !important;
}
#authSubmitBtn {
  border-radius: 12px !important;
  padding: 14px 0 !important;
  font-size: 16px;
  font-weight: 600;
}

/* 口令弹窗弹入动画 */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.88); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}
.animate-bounce-in {
  animation: bounceIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 口令错误抖动 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%  { transform: translateX(-7px); }
  30%  { transform: translateX(7px); }
  45%  { transform: translateX(-5px); }
  60%  { transform: translateX(5px); }
  75%  { transform: translateX(-3px); }
  90%  { transform: translateX(3px); }
}
.shake-animation {
  animation: shake 0.5s ease-in-out;
}

/* ---- Toast 提示消息 — iOS 风格 ---- */
.toast {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 22px;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  letter-spacing: 0.02em;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}
.toast-success { background-color: #34C759; }
.toast-error   { background-color: #FF3B30; }
.toast-warning { background-color: #FF9500; }

/* ---- 加载骨架屏 ---- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #E5E5EA 25%, #F2F2F7 50%, #E5E5EA 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 10px;
}

/* ---- Loading 遮罩（启动时） ---- */
#appLoadingOverlay {
  background-color: #F2F2F7 !important;
}
#appLoadingOverlay .animate-spin {
  border-top-color: #7BA8D4 !important;
  border-left-color: #7BA8D4 !important;
  border-right-color: #7BA8D4 !important;
  border-bottom-color: transparent !important;
}

/* ---- 安全区适配 ---- */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

/* ---- 通用文本 ---- */
.text-gray-500 { color: #8E8E93 !important; }
.text-gray-400 { color: #AEAEB2 !important; }
.text-gray-600 { color: #636366 !important; }
.text-gray-700 { color: #48484A !important; }
.text-gray-800 { color: #3A3A3C !important; }

/* 大写/小写利润标签颜色 */
.text-green-600 { color: #34C759 !important; }
.text-green-500 { color: #30D158 !important; }
.text-success  { color: #34C759 !important; }
.text-red-500   { color: #FF3B30 !important; }
.text-red-600   { color: #FF3B30 !important; }

/* ---- 提示/警告文字 ---- */
#updateHint {
  font-size: 14px;
  color: #FF9500;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---- 滚动条美化 ---- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #C7C7CC;
  border-radius: 2px;
}

/* ---- 小屏设备微调 ---- */
@media (max-width: 375px) {
  body { font-size: 15px; }
  .tab-btn { font-size: 14px; }
  input[type='text'],
  input[type='number'],
  input[type='date'],
  input[type='password'],
  select,
  textarea {
    padding: 10px 14px !important;
  }
}