/* ==============================================
   Sc VeRA – 使用料ページ専用CSS (usage.css)
   ============================================== */

/* ---- 追加ボタン ---- */
.usage-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.4);
  border-radius: 6px;
  color: #d8b4fe;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.usage-add-btn:hover {
  background: rgba(168,85,247,0.25);
  border-color: #a855f7;
  color: #e9d5ff;
}

/* ---- 空メッセージ ---- */
.usage-empty {
  text-align: center;
  padding: 48px;
  color: var(--gray-400);
  font-size: 0.9rem;
}

/* ---- セッションカード ---- */
.session-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}
.session-card:hover {
  border-color: var(--gray-500);
}

.sc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.sc-date {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sc-date-num {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 900;
  font-style: normal;
  color: var(--white);
  letter-spacing: 0.05em;
}

.sc-location-tag {
  display: inline-block;
  padding: 2px 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--gray-600);
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gray-300);
  letter-spacing: 0.06em;
}

.sc-note-tag {
  font-size: 0.72rem;
  color: var(--gray-400);
}

.sc-fee-area {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sc-facility-fee {
  font-family: var(--font-en);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-300);
}

.sc-no-fee {
  font-size: 0.72rem;
  color: var(--gray-500);
}

.sc-collect {
  font-family: var(--font-en);
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--white);
}

.sc-diff {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  font-family: var(--font-en);
  font-size: 0.68rem;
  font-weight: 700;
}
.sc-diff.plus  { background: rgba(52,211,153,0.12); color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
.sc-diff.minus { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
.sc-diff.zero  { background: rgba(255,255,255,0.06); color: var(--gray-400); border: 1px solid var(--gray-600); }

.sc-edit-btn {
  background: transparent;
  border: 1px solid rgba(168,85,247,0.3);
  color: rgba(168,85,247,0.7);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 0.68rem;
  cursor: pointer;
  transition: all 0.18s;
}
.sc-edit-btn:hover {
  background: rgba(168,85,247,0.12);
  border-color: #a855f7;
  color: #d8b4fe;
}

/* ---- 参加者チップ ---- */
.sc-participants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sc-no-part {
  font-size: 0.78rem;
  color: var(--gray-500);
}

.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--gray-700);
  border-radius: 100px;
  font-size: 0.72rem;
}

.sc-chip-name {
  font-weight: 700;
  color: var(--white);
}

.sc-chip-type {
  color: var(--gray-400);
  font-size: 0.64rem;
}

.sc-chip-amt {
  font-family: var(--font-en);
  font-weight: 900;
  color: #a78bfa;
  font-size: 0.72rem;
}

/* ---- 差額カード状態 ---- */
.fee-summary-card.diff-plus  { border-left: 3px solid #34d399; }
.fee-summary-card.diff-minus { border-left: 3px solid #f87171; }
.fee-summary-card.diff-zero  { border-left: 3px solid var(--gray-600); }
.fee-summary-card.diff-plus  .fee-summary-value { color: #34d399; }
.fee-summary-card.diff-minus .fee-summary-value { color: #f87171; }

/* =============================================
   モーダル
   ============================================= */
.usage-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.usage-modal-box {
  background: #141414;
  border: 1px solid var(--gray-700);
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 24px 24px;
  position: relative;
}

.usage-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--gray-400);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.18s;
}
.usage-modal-close:hover { color: var(--white); }

.usage-modal-title {
  font-family: var(--font-en);
  font-size: 0.88rem;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.usage-modal-title i { color: #a855f7; }

/* ---- フォーム ---- */
.usage-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

@media (max-width: 480px) {
  .usage-form-grid { grid-template-columns: 1fr; }
}

.usage-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.usage-label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  text-transform: uppercase;
}
.usage-label .req { color: #f87171; margin-left: 3px; }

.usage-input {
  background: var(--gray-800);
  border: 1px solid var(--gray-600);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--white);
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color 0.18s;
  width: 100%;
}
.usage-input:focus {
  outline: none;
  border-color: #a855f7;
}
.usage-input option { background: var(--gray-800); }

.usage-hint {
  font-size: 0.62rem;
  color: var(--gray-500);
}

/* ---- 料金タイプ凡例 ---- */
.usage-type-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
}

.utl-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--gray-300);
  white-space: nowrap;
}
.utl-item i { font-size: 0.75rem; color: var(--gray-400); }
.utl-item em { font-style: normal; font-weight: 700; color: #a78bfa; margin-left: 2px; }
.utl-family i { color: #60a5fa; }
.utl-child  i { color: #4ade80; }
.utl-child-only i { color: #fbbf24; }
.utl-guest  i { color: #f472b6; }

/* ---- メンバーグリッド ---- */
.usage-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
  max-height: 340px;
  overflow-y: auto;
}

@media (max-width: 480px) {
  .usage-member-grid { grid-template-columns: 1fr; }
}

/* ---- メンバーカード（モーダル内） ---- */
.mc-card {
  background: var(--gray-800);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
  padding: 12px;
  transition: border-color 0.18s;
}
.mc-card.participating {
  border-color: rgba(168,85,247,0.5);
  background: rgba(168,85,247,0.06);
}

.mc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.mc-initial {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--white);
  flex-shrink: 0;
}

.mc-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--white);
  flex: 1;
}

.mc-status {
  font-size: 0.62rem;
  color: #a78bfa;
  font-weight: 700;
  white-space: nowrap;
}

.mc-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mc-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--gray-600);
  border-radius: 100px;
  color: var(--gray-400);
  font-size: 0.64rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.mc-type-btn:hover {
  border-color: var(--gray-400);
  color: var(--white);
}
.mc-type-btn.active {
  background: rgba(168,85,247,0.2);
  border-color: #a855f7;
  color: #e9d5ff;
}
.mc-type-btn.guest.active {
  background: rgba(244,114,182,0.15);
  border-color: #f472b6;
  color: #fbcfe8;
}

/* ---- 計算プレビュー ---- */
.usage-preview {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--gray-700);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
}

.usage-preview-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.usage-preview-title i { color: #a855f7; }

.usage-cp-grid { }

.cp-empty {
  font-size: 0.78rem;
  color: var(--gray-500);
  text-align: center;
  padding: 8px 0;
}

.cp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.78rem;
}
.cp-row.highlight {
  font-weight: 700;
  color: var(--white);
  padding-top: 8px;
}
.cp-row.plus  .cp-val { color: #34d399; }
.cp-row.minus .cp-val { color: #f87171; }
.cp-row.zero  .cp-val { color: var(--gray-400); }

.cp-lbl {
  color: var(--gray-400);
  flex: 1;
}
.cp-lbl em {
  font-style: normal;
  font-size: 0.64rem;
  color: #a78bfa;
  margin-left: 4px;
}
.cp-val {
  font-family: var(--font-en);
  font-weight: 700;
  color: var(--white);
  font-size: 0.82rem;
}
.cp-row.member-row .cp-lbl { color: var(--gray-300); }

.cp-divider {
  height: 1px;
  background: var(--gray-700);
  margin: 6px 0;
}

/* ---- 一時保存バナー ---- */
.usage-draft-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(251,191,36,0.07);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 8px;
  margin-bottom: 12px;
}

.usage-draft-restore {
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.35);
  color: #fbbf24;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s;
}
.usage-draft-restore:hover { background: rgba(251,191,36,0.22); }

.usage-draft-discard {
  background: transparent;
  border: 1px solid var(--gray-600);
  color: var(--gray-400);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 0.68rem;
  cursor: pointer;
  transition: all 0.18s;
}
.usage-draft-discard:hover { border-color: #f87171; color: #f87171; }

/* ---- エラー ---- */
.usage-modal-error {
  font-size: 0.76rem;
  color: #f87171;
  min-height: 1.2em;
  margin-bottom: 4px;
}

/* ---- モーダルフッター ---- */
.usage-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.usage-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(248,113,113,0.35);
  border-radius: 6px;
  color: #f87171;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.usage-delete-btn:hover {
  background: rgba(248,113,113,0.1);
  border-color: #f87171;
}

.usage-draft-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 6px;
  color: #fbbf24;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.usage-draft-btn:hover {
  background: rgba(251,191,36,0.1);
  border-color: #fbbf24;
}

/* ---- レスポンシブ ---- */
@media (max-width: 600px) {
  .sc-header { flex-direction: column; }
  .sc-fee-area { gap: 6px; }
  .usage-modal-footer { flex-direction: column; }
  .usage-modal-footer .btn { width: 100%; justify-content: center; }
}