@import "tailwindcss";

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(48, 1fr); /* 24から48へ */
  height: 48px;
  /* 背景の縦線も30分間隔（48本）に合わせる */
  background-image: linear-gradient(to right, #e5e7eb 1px, transparent 1px);
  background-size: calc(100% / 48) 100%;
}

.sleep-bar {
  background-color: #818cf8; /* 睡眠の帯の色 */
  border-radius: 9999px;
  margin: 4px 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-mark {
  font-size: 12px;
}

@layer components {
  .btn-large {
    @apply flex items-center justify-center p-6 bg-white border-2 border-gray-100 
           rounded-3xl shadow-sm text-lg font-bold active:bg-blue-50 active:scale-95 transition-all;
  }
  .card {
    @apply p-5 bg-white rounded-3xl shadow-sm border border-gray-100;
  }
}

.schedule-tag.medical { @apply bg-red-100 text-red-700 border-l-4 border-red-500; }     /* 通院 */
.schedule-tag.daycare { @apply bg-green-100 text-green-700 border-l-4 border-green-500; } /* デイサービス */
.schedule-tag.helper  { @apply bg-blue-100 text-blue-700 border-l-4 border-blue-500; }   /* ヘルパー */

.schedule-tag {
  @apply text-[10px] p-1 mb-1 rounded font-bold truncate;
}

.preset-buttons {
  @apply flex gap-2 mb-4;
}

.preset-buttons button {
  @apply px-4 py-2 bg-gray-100 rounded-full text-sm font-bold active:bg-blue-100 transition-colors;
}

.btn-submit {
  @apply w-full py-4 bg-blue-600 text-white font-bold rounded-2xl shadow-lg mt-6;
}

.vital-card {
  @apply p-4 bg-white rounded-2xl shadow-sm border border-gray-100;
}

/* 血圧が高いときのアラート色 */
.alert-high {
  @apply bg-red-50 border-red-200;
}

.alert-high .label {
  @apply text-red-600;
}

.alert-high .value {
  @apply text-red-700 font-bold;
}