/* EVENT OS - Custom Styles */

:root {
  --eos-primary: #4f46e5;
  --eos-sidebar-bg: #111827;
  --eos-sidebar-hover: #1f2937;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.5rem;
  color: #cbd5e1;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all .15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.sidebar-link:hover { background: var(--eos-sidebar-hover); color: #fff; }
.sidebar-link.active { background: var(--eos-primary); color: #fff; }
.sidebar-link i { width: 1.1rem; text-align: center; font-size: 0.85rem; }

.sidebar-section-label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: #6b7280;
  padding: 0.9rem 0.9rem 0.3rem;
  font-weight: 700;
  text-transform: uppercase;
}

.phase-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}
.phase-step .dot {
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700;
  background: #e5e7eb; color: #9ca3af;
  border: 2px solid #e5e7eb;
  z-index: 1;
}
.phase-step.done .dot { background: #4f46e5; color: white; border-color: #4f46e5; }
.phase-step.current .dot { background: white; color: #4f46e5; border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79,70,229,.15); }
.phase-step .label { font-size: 0.62rem; margin-top: 0.35rem; color: #9ca3af; font-weight: 600; white-space: nowrap;}
.phase-step.current .label, .phase-step.done .label { color: #374151; }
.phase-step::before {
  content: '';
  position: absolute;
  top: 0.85rem; left: -50%; width: 100%; height: 2px;
  background: #e5e7eb; z-index: 0;
}
.phase-step:first-child::before { display: none; }
.phase-step.done::before { background: #4f46e5; }

.card {
  background: white;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
}

.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.68rem; font-weight: 700;
  padding: 0.15rem 0.55rem; border-radius: 999px;
}
.badge-todo { background: #f3f4f6; color: #6b7280; }
.badge-doing { background: #dbeafe; color: #1d4ed8; }
.badge-done { background: #dcfce7; color: #16a34a; }
.badge-blocked { background: #fee2e2; color: #dc2626; }
.badge-urgent { background: #fee2e2; color: #dc2626; }
.badge-high { background: #ffedd5; color: #ea580c; }
.badge-normal { background: #f3f4f6; color: #6b7280; }
.badge-low { background: #f3f4f6; color: #9ca3af; }
.badge-open { background: #fee2e2; color: #dc2626; }
.badge-resolved { background: #dcfce7; color: #16a34a; }
.badge-paid { background: #dcfce7; color: #16a34a; }
.badge-unpaid { background: #fef3c7; color: #b45309; }
.badge-overdue { background: #fee2e2; color: #dc2626; }
.badge-pending { background: #fef3c7; color: #b45309; }
.badge-active { background: #dbeafe; color: #1d4ed8; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.data-table th {
  text-align: left; padding: 0.6rem 0.9rem; background: #f9fafb;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: #6b7280; font-weight: 700; border-bottom: 1px solid #e5e7eb;
}
.data-table td { padding: 0.65rem 0.9rem; border-bottom: 1px solid #f3f4f6; color: #374151; }
.data-table tr:hover td { background: #fafafa; }

.module-toggle { display: flex; align-items: center; gap: 0.6rem; }
.toggle-switch {
  width: 2.4rem; height: 1.3rem; border-radius: 999px; background: #d1d5db;
  position: relative; cursor: pointer; transition: background .15s;
  flex-shrink: 0;
}
.toggle-switch.on { background: #4f46e5; }
.toggle-switch .knob {
  width: 1rem; height: 1rem; border-radius: 50%; background: white;
  position: absolute; top: 0.15rem; left: 0.15rem; transition: left .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.toggle-switch.on .knob { left: 1.25rem; }
.toggle-switch.disabled { opacity: 0.5; cursor: not-allowed; }

.stat-card { padding: 1rem 1.1rem; border-radius: 0.75rem; border: 1px solid #e5e7eb; background: white; }
.stat-mini { padding: 0.5rem 0.6rem; border-radius: 0.5rem; background: #f9fafb; text-align: center; }

/* Participant Portal */
.portal-shell { min-height: 100vh; background: #f8fafc; }
.portal-topbar { background: white; border-bottom: 1px solid #e5e7eb; }
.portal-tab { padding: 0.5rem 0.9rem; border-radius: 0.5rem; font-size: 0.85rem; font-weight: 600; color: #6b7280; cursor: pointer; }
.portal-tab:hover { background: #f3f4f6; }
.portal-tab.active { background: #eef2ff; color: #4338ca; }
.progress-ring-label { font-size: 1.6rem; font-weight: 800; color: #4f46e5; }
.doc-status-not_submitted { background: #f3f4f6; color: #6b7280; }
.doc-status-submitted { background: #dbeafe; color: #1d4ed8; }
.doc-status-review { background: #fef3c7; color: #b45309; }
.doc-status-approved { background: #dcfce7; color: #16a34a; }
.doc-status-revision_required { background: #fee2e2; color: #dc2626; }
.fade-in { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }

.empty-state { text-align: center; padding: 2.5rem 1rem; color: #9ca3af; }

/* ---------------------------------------------------------------------------
 * PRINT CONTROL (PHASE 2.5)
 * .print-only要素は通常のオンスクリーン表示では隠し、印刷ウィンドウ(別ウィンドウ)や
 * @media print時のみ表示する。.no-printは印刷時に隠す。
 * QR/Print Viewは window.open() で別ウィンドウに複製してprint()するため、
 * 別ウィンドウ側では常時 .no-print{display:none} をインラインで指定している(app.js側)。
 * ここではメインアプリ画面上での見た目を制御する。
 * ------------------------------------------------------------------------- */
.print-only { display: none; }

@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  body { background: white !important; }
}

/* ---------------------------------------------------------------------------
 * PUBLIC SITE / SHARED VIEW (ログイン不要・モバイル最優先)
 * ------------------------------------------------------------------------- */
.public-shell { min-height: 100vh; background: #ffffff; }
.public-header { background: white; border-bottom: 1px solid #e5e7eb; }
.public-nav-link {
  font-size: 0.78rem; font-weight: 600; color: #6b7280; padding: 0.4rem 0.7rem;
  border-radius: 0.5rem; white-space: nowrap;
}
.public-nav-link:hover, .public-nav-link.active { background: #eef2ff; color: #4338ca; }
.public-hero {
  padding: 2.5rem 1.25rem 2rem; text-align: center; color: white;
  background-size: cover; background-position: center;
}
.public-section { padding: 1.75rem 1.25rem; max-width: 860px; margin: 0 auto; }
.public-card {
  background: white; border: 1px solid #e5e7eb; border-radius: 0.9rem;
  overflow: hidden;
}
.sponsor-tier-title { --tier-color: #b45309; }
.sponsor-tier-platinum { --tier-color: #64748b; }
.sponsor-tier-gold { --tier-color: #ca8a04; }
.sponsor-tier-silver { --tier-color: #6b7280; }
.sponsor-tier-supporter { --tier-color: #9ca3af; }
.sponsor-logo-xl { width: 100%; max-width: 260px; height: auto; }
.sponsor-logo-lg { width: 100%; max-width: 190px; height: auto; }
.sponsor-logo-md { width: 100%; max-width: 130px; height: auto; }
.sponsor-logo-sm { width: 100%; max-width: 90px; height: auto; }