@import "tailwindcss";
@import "./pagy-tailwind.css";

@custom-variant dark (&:where(.dark, .dark *));

:root {
  --cal-border:          rgb(229 231 235);
  --cal-sunday-bg:       rgb(254 242 242);
  --cal-saturday-bg:     rgb(239 246 255);
  --cal-today-bg:        rgb(236 253 245);
  --cal-othermonth-bg:   rgb(249 250 251);
  --cal-othermonth-text: rgb(156 163 175);
}

/* .dark クラスが html 要素に付いたとき、変数の値を差し替える */
.dark {
  --cal-border:         rgb(55 65 81);
  --cal-sunday-bg:      rgb(69 26 26);
  --cal-saturday-bg:    rgb(23 37 84);
  --cal-today-bg:       rgb(20 61 43);
  --cal-othermonth-bg:  rgb(31 41 55);
  --cal-othermonth-text: rgb(107 114 128);
}

.simple-calendar,
.simple-calendar table {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

.simple-calendar thead { display: table-header-group !important; }

.simple-calendar thead tr,
.simple-calendar tbody tr { display: table-row !important; }

.simple-calendar thead th,
.simple-calendar tbody td {
  display: table-cell !important;
  width: 14.28%;
}

.simple-calendar tbody td {
  border: 1px solid var(--cal-border);
  vertical-align: top;
  /* テーマ切り替え時の色変化をなめらかに */
  min-height: 80px;
  transition: background-color 0.2s ease;
}

.simple-calendar .wday-0 { background-color: var(--cal-sunday-bg); }
.simple-calendar .wday-6 { background-color: var(--cal-saturday-bg); }
.simple-calendar .today  { background-color: var(--cal-today-bg); }

.simple-calendar .prev-month,
.simple-calendar .next-month {
  background-color: var(--cal-othermonth-bg);
  opacity: 0.6;
}

.simple-calendar .prev-month span:first-child,
.simple-calendar .next-month span:first-child {
  color: var(--cal-othermonth-text);
}

@media (max-width: 639px) {
  .simple-calendar tbody td { min-height: 56px; }
}

@media (min-width: 640px) {
  .simple-calendar tbody td { min-height: 100px; }
}

@media (min-width: 1024px) {
  .simple-calendar tbody td { min-height: 120px; }
}

/* 定型文一覧のクリップボードにコピーするボタン用 */
.clipboard-success {
  @apply bg-green-50 text-green-700 border-green-200;
}
.dark .clipboard-success {
  @apply bg-green-900/30 text-green-400 border-green-800;
}

.clipboard-error {
  @apply bg-red-50 text-red-700 border-red-200;
}
.dark .clipboard-error {
  @apply bg-red-900/30 text-red-400 border-red-800;
}

/* 画面遷移時のプログレスバーのカスタマイズ */
.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(to right, #10b981, #34d399);
}


/* フレーム読込中 */
turbo-frame[busy] {
  opacity: 0.45;
  cursor: wait;
  pointer-events: none;
  transition: opacity 0.15s ease;
}


/* ── ダイアログ本体のスライドアニメーション ── */
dialog[open] {
  animation: dialog-slide-in 0.2s ease-out both;
}

@keyframes dialog-slide-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

dialog[open]::backdrop {
  animation: backdrop-fade-in 0.2s ease-out both;
}

@keyframes backdrop-fade-in {
  from { opacity: 0; }
}


input,
select,
textarea {
  font-size: 16px;
}

input[type="datetime-local"] {
  display: block;
  width: 100%;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-meridiem-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

input::-webkit-inner-spin-button {
  height: auto;
}