/* ── Mini Calendar Widget ─────────────────────────
   Calendar grid, header, weekdays, badges, day view cards.
   ──────────────────────────────────────────────────── */

.mini-cal {
  padding: 12px 10px 14px;
  border-bottom: 1px solid var(--color-border-light);
  flex-shrink: 0;
  user-select: none;
}
.mini-cal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-bottom: 8px;
}
.mini-cal-title {
  flex: 1;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-1);
  text-align: center;
  letter-spacing: 0;
  border-radius: 10px;
  touch-action: manipulation;
}
.mini-cal-nav {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: var(--color-surface-secondary);
  color: var(--ink-1);
  cursor: pointer;
  border-radius: 10px;
  font-size: 16px;
  touch-action: manipulation;
}
.mini-cal-nav svg {
  width: 18px;
  height: 18px;
}
.mini-cal-nav:active { background: rgba(120,120,128,0.14); transform: scale(0.96); }
.mini-cal-chevron {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.85;
  transition: transform 0.2s, opacity 0.2s;
}
/* 日視図標題可点击態 — 移動端必須有視覚反馈 */
.mini-cal-title[style*="cursor: pointer"] {
  -webkit-tap-highlight-color: rgba(139, 111, 71, 0.12);
  cursor: pointer;
}
.mini-cal-title:hover .mini-cal-chevron,
.mini-cal-title:active .mini-cal-chevron { opacity: 1; }
.mini-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0;
}
.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  text-align: center;
}
.mini-cal-day {
  position: relative;
  width: 100%;
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  border-radius: 9px;
  cursor: pointer;
  border: none; background: none;
  touch-action: manipulation;
  transition: background 0.1s;
}
.mini-cal-day:active { background: rgba(120,120,128,0.12); transform: scale(0.96); }
.mini-cal-day.other { color: var(--color-text-tertiary); opacity: 0.3; }
.mini-cal-day.selected {
  background: rgba(139,111,71,0.1);
  font-weight: 700;
}
.mini-cal-day.today {
  background: var(--color-brand);
  color: var(--color-text-inverse);
  font-weight: 700;
}
.mini-cal-day.today.selected {
  box-shadow: 0 0 0 2px var(--color-brand), 0 0 0 4px rgba(139,111,71,0.2);
}
.mini-cal-day.has-event::after { display: none; }
.mini-cal-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  background: var(--color-gold);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 2px;
  pointer-events: none;
}
.mini-cal-day.today .mini-cal-badge {
  background: rgba(255,255,255,0.9);
  color: var(--color-brand);
}

/* ── Day View (replaces month grid) ──────────── */

/* .scroll-region applied in HTML — iOS Safari touch scroll safe */
.mini-cal-dayview {
  padding: 4px 0 0;
  max-height: 220px;
}
.dv-loading, .dv-empty {
  font-size: var(--font-size-base);
  color: var(--color-text-tertiary);
  padding: var(--space-4) 0;
  text-align: center;
}
.dv-empty {
  font-family: var(--font-family-serif);
  color: var(--color-gold-muted, var(--color-text-tertiary));
  letter-spacing: 1px;
}
/*
 * Day View Banquet Card — Luxury Hospitality Language
 *
 * Design rationale (Exaggerated Minimalism + Luxury/Premium Brand palette):
 *
 *   NO colored borders. Luxury accent lives in typography + space, not decoration.
 *   "奢而不张" — the content IS the luxury. The card is a concierge note, not a dashboard widget.
 *
 *   Cognitive model:
 *     Von Restorff: Serif isolates guest name from system UI
 *     Processing Fluency: Warm tint + generous space = "effortless premium"
 *     Fitts's Law: Generous touch target from padding
 *     Serial Position: Guest name top-left, natural F-pattern start
 */
.dv-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  min-height: 72px;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  border: none;
  box-shadow: 0 1px 4px rgba(61, 46, 30, 0.06),       /* Depth — subtle, warm-tinted */
              0 0 0 0.5px rgba(61, 46, 30, 0.06);      /* Fine edge — replaces border */
  transition: transform var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
}
.dv-card:active {
  transform: scale(0.97);
  box-shadow: 0 0 2px rgba(61, 46, 30, 0.04);
}
.dv-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.dv-guest {
  font-family: var(--font-family-serif);
  font-size: 19px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  letter-spacing: 0;
  line-height: var(--line-height-tight);
}
.dv-status {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  padding: 4px 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  letter-spacing: 0;
}
.dv-status-planned { background: transparent; color: var(--color-text-tertiary); border: 0.5px solid var(--color-border); }
.dv-status-confirmed { background: rgba(52,199,89,0.08); color: #2d8a4e; }
.dv-status-in_progress { background: rgba(212,168,67,0.1); color: var(--color-brand); }
.dv-status-completed { background: transparent; color: var(--color-text-tertiary); }
.dv-status-cancelled { background: rgba(142,142,147,0.08); color: var(--color-text-tertiary); text-decoration: line-through; }
.dv-card-cancelled { opacity: 0.5; }
.dv-card-cancelled .dv-guest { text-decoration: line-through; }
.dv-card-info {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  letter-spacing: 0;
}
.dv-card-creator {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: 4px;
  padding-top: 8px;
  border-top: 0.5px solid rgba(61, 46, 30, 0.06);      /* Hairline divider — Gestalt separation */
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.dv-creator-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.dv-creator-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-secondary);
  font-size: 10px;
  font-weight: 500;
}