/* =============================================
   2025 Refresh Theme (banner colors)
   - Brand: Pink (#f6a5c0) & Mint (#a1e3d8)
   - Bootstrap 5 variable overrides
   - Light/Dark themes via [data-theme]
   ============================================= */

:root {
  /* Brand palette */
  --brand-primary: #f6a5c0; /* pink */
  --brand-primary-strong: #f48fb1;
  --brand-accent: #a1e3d8;  /* mint */
  --brand-ink: #2f2a2e;     /* text strong */
  --brand-ink-2: #52525b;   /* text medium */

  /* Surfaces */
  --surface-1: #ffffff;
  --surface-2: #f7f8fb;
  --surface-3: #fdf7fa;     /* subtle pink tone */

  /* Shadows / radii */
  --elev-1: 0 1px 3px rgba(0,0,0,.08);
  --elev-2: 0 8px 24px rgba(0,0,0,.12);
  --radius: 12px;
  --radius-lg: 16px;

  /* Bootstrap overrides */
  --bs-primary: var(--brand-primary);
  --bs-secondary: #8b93a6;
  --bs-body-bg: var(--surface-2);
  --bs-body-color: var(--brand-ink);
  --bs-link-color: var(--brand-primary-strong);
  --bs-border-radius: var(--radius);
  --bs-border-radius-lg: var(--radius-lg);
}

/* Dark theme */
[data-theme="dark"] {
  --brand-ink: #e7e7ea;
  --brand-ink-2: #b9bbc6;
  --surface-1: #16181d;
  --surface-2: #0f1115;
  --surface-3: #181b22;
  --elev-1: 0 1px 3px rgba(0,0,0,.6);
  --elev-2: 0 10px 30px rgba(0,0,0,.7);
  --bs-primary: #f6a5c0;
  --bs-secondary: #9aa2b2;
  --bs-body-bg: var(--surface-2);
  --bs-body-color: var(--brand-ink);
  --bs-link-color: #f6a5c0;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue",
    "Noto Sans JP", "Roboto", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  color: var(--brand-ink);
  line-height: 1.6;
  background: radial-gradient(1200px 600px at 10% -10%, #fff8fb 0%, transparent 60%),
              radial-gradient(1000px 500px at 110% 10%, #f2fffb 0%, transparent 55%),
              var(--bs-body-bg);
}

.app-body { min-height: 100dvh; }

/* Header sticky + shrink */
.app-header {
  position: sticky; top: 0; z-index: 1060;
  transition: padding .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
  padding-top: calc(env(safe-area-inset-top) + .5rem);
}
.app-header.is-shrink { padding-top: calc(env(safe-area-inset-top) + .25rem) !important; padding-bottom: .25rem !important; box-shadow: var(--elev-2); }
.app-header nav { flex-wrap: nowrap; overflow-x: auto; gap: .5rem; }
.app-header nav a, .app-header nav button { white-space: nowrap; writing-mode: horizontal-tb; }
.app-header .btn-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.app-header .brand-logo { height: 28px; }
.app-header.is-shrink .brand-logo { height: 24px; }

/* Glass header */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.5));
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--elev-1);
  backdrop-filter: saturate(140%) blur(10px);
}
[data-theme="dark"] .glass {
  background: linear-gradient(180deg, rgba(24,26,31,.66), rgba(24,26,31,.5));
  border-color: rgba(255,255,255,.08);
}

.brand-logo { height: 32px; width: auto; border-radius: 8px; }
.brand-title { letter-spacing: .2px; }

/* Soft buttons */
.btn-soft {
  --bg: var(--surface-1);
  background: var(--bg);
  border: 1px solid rgba(0,0,0,.06);
  color: var(--brand-ink-2);
  box-shadow: var(--elev-1);
}
.btn-soft:hover { border-color: rgba(0,0,0,.12); color: var(--brand-ink); }
.btn-icon { border: 1px solid rgba(0,0,0,.06); background: var(--surface-1); box-shadow: var(--elev-1); }
.btn-icon:hover { border-color: rgba(0,0,0,.12); }

/* Primary hover glow */
.btn-primary { box-shadow: 0 0 0 0 rgba(246,165,192, .5); transition: box-shadow .18s ease; }
.btn-primary:hover { box-shadow: 0 8px 24px rgba(246,165,192,.25); }
.btn-outline-secondary:hover { background: var(--surface-1); }

/* Form focus */
.form-control:focus, .form-select:focus { border-color: var(--brand-primary-strong); box-shadow: 0 0 0 .25rem rgba(246,165,192,.25); }
/* Validation */
.is-invalid { animation: shake .25s linear 1; }
.invalid-feedback { display: none; }
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-feedback {
  display: block;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* Cards */
.card { border: none; border-radius: var(--radius-lg); box-shadow: var(--elev-1); background: var(--surface-1); }
.card:hover { box-shadow: var(--elev-2); transition: box-shadow .2s ease; }

/* Tables */
table { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0 .75rem; }

.receipt-thumb { width: 60px; height: 60px; object-fit: cover; display: block; margin: 0 auto; border-radius: 10px; }

th:nth-child(6),
td:nth-child(6) { width: 80px; }

table thead th { background: transparent; border-bottom: 2px solid #e6e8ef; color: var(--brand-ink-2); font-weight: 600; padding: .75rem; text-align: center; }

table tbody tr { background: var(--surface-1); box-shadow: var(--elev-1); border-radius: var(--radius); transition: transform .12s ease, box-shadow .15s ease; }
table tbody tr:hover { transform: translateY(-1px); box-shadow: var(--elev-2); }

table tbody td { padding: .75rem; vertical-align: middle; border: none; word-wrap: break-word; word-break: break-all; text-align: center; }

.table-responsive { overflow-x: auto; display: block; }

/* トレンドカード（モバイル） */
.trend-mobile-card {
  background-color: var(--surface-1);
  box-shadow: var(--elev-1);
}
.trend-mobile-meta {
  font-size: .85rem;
}
.trend-diff-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-weight: 600;
}
.trend-diff-badge i {
  font-size: .95rem;
}
.trend-mobile-card .text-wrap {
  word-break: break-word;
}
.trend-mobile-toggle {
  font-weight: 600;
}
.trend-mobile-toggle i {
  transition: transform .2s ease;
}
.trend-mobile-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Cards with accents */
.expense-card { border-left: 4px solid var(--brand-primary); background: var(--surface-1); box-shadow: var(--elev-1); border-radius: var(--radius); }
.expense-card:hover { box-shadow: var(--elev-2); }

/* Settled card tint */
.expense-card.bg-warning {
  background: var(--bs-warning-bg-subtle) !important;
  border-left-color: var(--bs-warning-border-subtle, #ffe69c);
  color: var(--bs-warning-text-emphasis, #664d03);
}
.expense-card.bg-warning .btn {
  color: inherit;
}
.expense-card.bg-warning .btn-outline-secondary,
.expense-card.bg-warning .btn-outline-warning {
  border-color: rgba(102, 77, 3, .35);
}
[data-theme="dark"] .expense-card.bg-warning {
  color: var(--brand-ink);
}

.receipt-card { border-left: 4px solid var(--brand-accent); background: var(--surface-1); box-shadow: var(--elev-1); border-radius: var(--radius); }
.receipt-card:hover { box-shadow: var(--elev-2); }

.settlement-card { border-left: 4px solid var(--brand-primary); background: var(--surface-1); box-shadow: var(--elev-1); border-radius: var(--radius); }
.settlement-card:hover { box-shadow: var(--elev-2); }

/* OCR overlay */
#ocr-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 1100; display: none; align-items: center; justify-content: center; flex-direction: column;
}
#ocr-overlay .spinner-border { width: 3rem; height: 3rem; border-color: var(--brand-primary); border-right-color: transparent; }
#ocr-overlay span { margin-top: 1rem; color: var(--brand-ink); }

/* Login card */
.login-card { border-left: 4px solid var(--brand-primary); background: var(--surface-1); box-shadow: var(--elev-1); border-radius: var(--radius); padding: 1.5rem; }

@media (max-width: 576px) {
  .receipt-thumb { width: 44px; height: 44px; }
}

/* Pagination */
.pagination .page-link { border: none; color: var(--brand-ink-2); background: var(--surface-1); box-shadow: var(--elev-1); margin: 0 .25rem; }
.pagination .page-item.active .page-link { background: var(--brand-primary); color: #fff; }

/* Settled row tint */
tr.table-warning { background: linear-gradient(0deg, rgba(246,165,192,.12), rgba(246,165,192,.12)) !important; }

/* Desktop filter bar */
.filter-bar { background: var(--surface-1); border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius); box-shadow: var(--elev-1); }
.filter-bar .form-control, .filter-bar .form-select { height: 40px; }
.chip { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .5rem; border-radius: 999px; background: var(--surface-3); color: var(--brand-ink-2); border: 1px solid rgba(0,0,0,.06); }
.chip .bi { font-size: .9rem; }

/* Fade swap for partial updates */
.fade-swap-enter { opacity: 0; }
.fade-swap-enter-active { opacity: 1; transition: opacity .18s ease; }
.fade-swap-exit { opacity: 1; }
.fade-swap-exit-active { opacity: 0; transition: opacity .18s ease; }