/* finance/finance.css
   目的：只做 Tailwind 与 common.css 的轻量桥接；不重复定义卡片体系（card/panel/card-shadow）。
*/
body{ background: transparent; }

/* Optional helpers if some elements rely on utility classes */
.text-primary{ color: var(--primary) !important; }
.bg-primary{ background: var(--primary) !important; }
.border-primary{ border-color: rgba(37,99,235,.25) !important; }


/* ===== Fix Tailwind CDN incompatibilities =====
   原 finance/index.html 的 <style> 里用了 @apply（需要构建工具），CDN 模式不会生效。
   这里补齐同名 class 的“可直接运行”的 CSS。
*/
.page-btn{
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid rgba(15,23,42,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.90);
  cursor:pointer;
}
.page-btn:hover{ background: rgba(15,23,42,.03); }
.page-btn.active{
  background: var(--primary);
  border-color: rgba(37,99,235,.45);
  color:#fff;
  font-weight: 900;
}
.page-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* finance 页面里常见的 Tailwind 按钮组合：统一到 common.css 的按钮手感 */
button.bg-primary,
a.bg-primary{
  border-radius: var(--radius-sm) !important;
  border: 1px solid rgba(79,140,255,.45) !important;
  background: linear-gradient(180deg, var(--primary), var(--primary2)) !important;
  color: #fff !important;
  font-weight: 900 !important;
}
button.bg-primary:hover,
a.bg-primary:hover{ filter: brightness(1.02); }

button.border,
a.border{
  border-radius: var(--radius-sm) !important;
  border-color: rgba(15,23,42,.18) !important;
}

/* finance 卡片容器（bg-white + shadow/rounded）统一成 common 的 card */
.bg-white.rounded-xl,
.bg-white.rounded-2xl,
.bg-white.rounded-lg{
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow2) !important;
}

/* 页面底色：让 common.css 的背景生效（覆盖 bg-gray-50 之类） */
.bg-gray-50{ background: transparent !important; }


/* ===== v15: finance align with home ===== */
.finance-filters{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 14px auto 10px;
  width: min(1180px, calc(100vw - 24px));
}
.finance-filters .store{ flex:1; min-width: 260px; }
.finance-filters .actions{ display:flex; align-items:center; gap:8px; }

#shopPicker{ width: 100%; }

/* Make legacy inputs match common.css */
#startDate, #endDate, input[type="text"].flatpickr-input{
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  padding: 0 12px;
  background: #fff;
}

/* Buttons in finance page: map legacy classes to common buttons */
.finance button, .finance .btn-like{ font-weight: 800; }

/* Tighten sections */
#dataTableSection{ width: min(1180px, calc(100vw - 24px)); margin: 0 auto 24px; }


/* ===== v15: Tailwind-lite (remove CDN, keep layout readable) ===== */
.bg-white{ background:#fff; }
.bg-gray-50{ background:#f8fafc; }
.bg-gray-100{ background:#f1f5f9; }
.text-gray-600{ color:#475569; }
.text-gray-700{ color:#334155; }
.text-gray-800{ color:#1f2937; }
.border{ border:1px solid rgba(15,23,42,.12); }
.border-gray-200{ border-color:#e5e7eb; }
.rounded-lg{ border-radius: 12px; }
.rounded-xl{ border-radius: 16px; }
.p-2{ padding: 8px; }
.p-3{ padding: 12px; }
.p-4{ padding: 16px; }
.px-3{ padding-left: 12px; padding-right: 12px; }
.py-2{ padding-top: 8px; padding-bottom: 8px; }
.py-2\.5{ padding-top: 10px; padding-bottom: 10px; } /* class py-2.5 */
.mb-2{ margin-bottom: 8px; }
.mb-4{ margin-bottom: 16px; }
.mb-6{ margin-bottom: 24px; }
.mt-2{ margin-top: 8px; }
.mt-4{ margin-top: 16px; }
.gap-2{ gap: 8px; }
.gap-3{ gap: 12px; }
.gap-4{ gap: 16px; }
.gap-6{ gap: 24px; }
.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.justify-end{ justify-content:flex-end; }
.w-full{ width:100%; }
.grid{ display:grid; }
.grid-cols-1{ grid-template-columns: 1fr; }
.col-span-2{ grid-column: span 2 / span 2; }
.divide-y > * + *{ border-top: 1px solid #e5e7eb; }
.text-sm{ font-size: 14px; }
.text-xs{ font-size: 12px; }
.font-semibold{ font-weight: 700; }
.font-bold{ font-weight: 800; }

/* responsive (lg=1024px) */
@media (min-width: 1024px){
  .lg\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lg\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lg\:col-span-2{ grid-column: span 2 / span 2; }
}