/* public/static/styles.css */

/* 기본 스타일 */
.input-field {
  @apply w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}
.select-field {
  @apply border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white;
}
.label-field {
  @apply block text-sm font-medium text-gray-700 mb-1;
}
.btn-primary {
  @apply bg-blue-700 hover:bg-blue-800 text-white font-semibold px-4 py-2 rounded-lg transition text-sm;
}
.btn-secondary {
  @apply bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold px-4 py-2 rounded-lg transition text-sm;
}
.btn-danger {
  @apply bg-red-600 hover:bg-red-700 text-white font-semibold px-4 py-2 rounded-lg transition text-sm;
}
.btn-success {
  @apply bg-green-600 hover:bg-green-700 text-white font-semibold px-4 py-2 rounded-lg transition text-sm;
}
.btn-warning {
  @apply bg-yellow-500 hover:bg-yellow-600 text-white font-semibold px-4 py-2 rounded-lg transition text-sm;
}

/* 네비게이션 탭 */
.nav-tab {
  @apply px-4 py-2 text-sm font-medium text-blue-200 hover:text-white hover:bg-blue-700 transition whitespace-nowrap;
}
.nav-tab.active {
  @apply text-white bg-blue-700 border-b-2 border-yellow-400;
}

/* 관리자 탭 */
.admin-tab {
  @apply px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300 transition whitespace-nowrap;
}
.admin-tab.active {
  @apply text-blue-700 border-b-2 border-blue-700;
}

/* 상태 배지 */
.status-badge {
  @apply text-xs px-2 py-0.5 rounded-full font-medium;
}
.status-drafting { @apply bg-gray-100 text-gray-600; }
.status-collecting { @apply bg-yellow-100 text-yellow-700; }
.status-committee { @apply bg-purple-100 text-purple-700; }
.status-plenary { @apply bg-blue-100 text-blue-700; }
.status-passed { @apply bg-green-100 text-green-700; }
.status-promulgated { @apply bg-emerald-100 text-emerald-700; }
.status-vetoed { @apply bg-red-100 text-red-700; }
.status-rejected { @apply bg-gray-100 text-gray-500; }

/* 역할 배지 */
.role-admin { background: #1e3a8a; color: white; }
.role-speaker { background: #7c3aed; color: white; }
.role-president_student { background: #dc2626; color: white; }
.role-floor_leader { background: #b45309; color: white; }
.role-committee_member { background: #0369a1; color: white; }
.role-minister { background: #065f46; color: white; }
.role-member { background: #374151; color: white; }

/* 카드 스타일 */
.card {
  @apply bg-white rounded-xl shadow hover:shadow-md transition cursor-pointer p-4 border border-gray-100;
}

/* 법안 타임라인 */
.timeline-step {
  @apply flex flex-col items-center gap-1 min-w-max;
}
.timeline-dot {
  @apply w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold;
}
.timeline-dot.done { @apply bg-green-500 text-white; }
.timeline-dot.active { @apply bg-blue-600 text-white ring-4 ring-blue-200; }
.timeline-dot.pending { @apply bg-gray-200 text-gray-500; }

/* 투표 버튼 */
.vote-btn {
  @apply flex-1 py-4 rounded-xl font-bold text-lg transition border-2;
}
.vote-yes { @apply bg-green-50 border-green-400 text-green-700 hover:bg-green-100; }
.vote-no { @apply bg-red-50 border-red-400 text-red-700 hover:bg-red-100; }
.vote-abstain { @apply bg-gray-50 border-gray-400 text-gray-700 hover:bg-gray-100; }
.vote-yes.selected { @apply bg-green-500 border-green-600 text-white; }
.vote-no.selected { @apply bg-red-500 border-red-600 text-white; }
.vote-abstain.selected { @apply bg-gray-500 border-gray-600 text-white; }

/* 정치성향테스트 */
.likert-btn {
  @apply w-10 h-10 rounded-full border-2 flex items-center justify-center text-sm font-bold transition cursor-pointer;
}
.likert-btn:hover { @apply bg-blue-100 border-blue-400; }
.likert-btn.selected { @apply bg-blue-600 border-blue-700 text-white; }

/* 점수 순위 */
.rank-1 { @apply text-yellow-500; }
.rank-2 { @apply text-gray-400; }
.rank-3 { @apply text-yellow-700; }

/* 토스트 애니메이션 */
#toast.show {
  animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* 계엄 배너 */
#martial-law-banner:not(.hidden) {
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* 반응형 */
@media (max-width: 640px) {
  .nav-tab { @apply px-3 py-2 text-xs; }
  #app { @apply px-3; }
}