@tailwind base;
@tailwind components;
@tailwind utilities;

@import "animations";

@layer components {
  input[type="date"].search-filter,
  input[type="time"].search-filter {
    @apply relative font-medium border rounded-[20px] min-w-20 pl-3 pr-5 py-1.5 lg:pr-2;
  }
  input[type="date"].search-filter::-webkit-calendar-picker-indicator,
  input[type="time"].search-filter::-webkit-calendar-picker-indicator {
    @apply absolute top-0 left-0 right-0 bottom-0 w-auto h-auto;

    background: transparent;
    z-index: 1;
  }
  input[type="date"].search-filter::after,
  input[type="time"].search-filter::after {
    @apply absolute right-1.5 top-[50%] transform translate-y-[-50%] w-4 h-4 bg-contain bg-no-repeat z-[2] cursor-pointer;

    content: "";
    background-image: url("/assets/x-3cbdd916.svg");
  }

  .gradient-radio {
    display: flex;
    align-items: center;
    column-gap: 4px;
    width: fit-content;
    line-height: 1;
    cursor: pointer;
  }
  .gradient-radio input[type="radio"] {
    appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid transparent;
    background: linear-gradient(white, white) padding-box, linear-gradient(65deg, #37B6E9 47%, #4B4CED 97%) border-box;
    border-radius: 9999px;
    cursor: pointer;
   }
   .gradient-radio input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 12px;
    height: 12px;
    margin: auto;
    border-radius: 9999px;
    background-image: linear-gradient(65deg, #37B6E9 47%, #4B4CED 97%);
  }

  .gradient-checkbox {
    display: flex;
    align-items: center;
    column-gap: 4px;
    width: fit-content;
    line-height: 1;
    cursor: pointer;
  }

  .gradient-checkbox input[type="checkbox"] {
    appearance: none;
    position: relative;
    width: 18px;
    height: 18px;
    border: 2px solid #1D1B20;
    border-radius: 2px;
    cursor: pointer;
  }
  /* 暗い背景のモーダル等で未選択枠線の視認性を高めたい場合に併用する修飾クラス */
  .gradient-checkbox--light input[type="checkbox"] {
    border-color: #D1D5DB;
  }
  .gradient-checkbox input[type="checkbox"]:checked {
    background-image: linear-gradient(65deg, #37B6E9 47%, #4B4CED 97%);
    border: none;
  }
  .gradient-checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 3px;
    width: 12px;
    height: 6px;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    transform: rotate(-45deg);
  }

  .slider-switch {
    position: relative;
    cursor: pointer;
  }
  .slider-switch input[type="checkbox"] {
    display: none;
  }
  .slider-switch input[type="checkbox"]:checked ~ .circle {
    background-color: white;
    transform: translateX(20px);
  }
  .slider-switch input[type="checkbox"]:checked ~ .base {
    background-color: #37B6E9;
    background-image: linear-gradient(65deg, #37B6E9 47%, #4B4CED 97%);
    border: none;
  }
  .slider-switch > .base {
    @apply w-[52px] h-8 rounded-full border-2 border-gray-300;
  }
  .slider-switch > .circle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: rgba(29, 27, 32, 0.5);
    transition: transform 0.3s;
  }

  .dialog {
    border-radius: 1rem;
    outline: none;
  }
  .dialog[open] {
    animation: scaleIn 0.3s ease-in-out;
  }
  .dialog.closing {
    animation: scaleOut 0.3s ease forwards;
  }
  .dialog::backdrop {
    @apply bg-black bg-opacity-70;
    animation: fadeIn 0.3s ease forwards;
  }
  .dialog.closing::backdrop {
    animation: fadeOut 0.3s ease-in-out;
  }

  .admin-sidebar-link-active {
    @apply gradient-background rounded-lg text-white;
  }

  .admin-sidebar-link-inactive {
    @apply text-gray-500 hover:gradient-background hover:rounded-lg hover:text-white hover:opacity-50;
  }

  .sidebar-link-active {
    @apply gradient-background;
  }

  .sidebar-link-inactive {
    @apply opacity-70 hover:gradient-background;
  }
}

@layer utilities {
  .gradient-text {
    background-image: linear-gradient(40deg, #37B6E9 -16%, #4B4CED 54%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
  }

  .gradient-background {
    background-color: #37B6E9;
    background-image: linear-gradient(65deg, #37B6E9 47%, #4B4CED 97%);
  }

  .gradient-background-dark {
    background-color: #1A1A1A;
    background-image: linear-gradient(65deg, #1A1A1A 27%, #002536 97%);
  }

  .animate-pulse-subtle {
    animation: pulse-subtle 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .marquee-track {
    width: max-content;
    animation: animate-marquee var(--marquee-duration, 10s) linear infinite;
    animation-play-state: var(--marquee-play, paused); /* 初期は停止 */
  }

  .permanent-marquee-track {
    width: max-content;
    animation: animate-permanent-marquee var(--marquee-duration, 10s) linear infinite;
  }

  .slide-in {
    animation: animate-slideX-in 0.2s ease-out forwards;
  }

  .slide-out {
    animation: animate-slideX-out 0.2s ease-out forwards;
  }

  .dots-animation::after {
    content: '.';
    animation: dots 1.5s steps(3, end) infinite;
  }
}

.field_with_errors {
  display: contents;
  /* bg-inherit の子（select）へ親の背景色を伝える（エラー時の背景白化対策） */
  background-color: inherit;
}

/* 詳細パネル表示中のマーカー一覧行のハイライト（ホバー色と同一） */
.marker-row--selected {
  background-color: #232A35;
}

/* サイネージ表示データの並べ替え中はカーソルを grabbing(握った手)で固定する。
   SortableJS は forceFallback により擬似ドラッグするため、ネイティブDnDの
   カーソル(点線の□)に戻らず CSS で上書きできる。 */
body.signage-sorting,
body.signage-sorting * {
  cursor: grabbing !important;
}

.leaflet-tooltip.marker-tooltip {
  background-color: rgb(26, 26, 26);
  border: none;
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(62, 146, 234, 0.9);
  white-space: nowrap;
  max-width: 240px;
  opacity: 1 !important;
}
.leaflet-tooltip.marker-tooltip.leaflet-tooltip-right::before {
  border-right-color: rgb(26, 26, 26);
}
/* 集約マーカー: ヘッダー（デバイス名・センサー種別名）＋計測項目 */
.marker-tooltip-content {
  display: flex;
  flex-direction: column;
}
.marker-tooltip-header {
  padding: 8px 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.marker-tooltip-device {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  /* 長いデバイス名は省略記号で切り詰める */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marker-tooltip-sensor {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.3;
}
/* 各計測項目行: アイコン → 項目名 → 値（単位含む）の横一列 */
.marker-tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  border-radius: 4px;
}
/* しきい値超過行は全体を赤背景（#F44336/70）で警告表示 */
.marker-tooltip-row--alert {
  background-color: rgba(244, 67, 54, 0.7);
}
/* しきい値超過行（赤背景）が連続する場合のみ、接続箇所の角丸を消して1つの赤ブロックとして繋げる */
/* 直後にも超過行が続く場合 → 下側の角丸を消す */
.marker-tooltip-row--alert:has(+ .marker-tooltip-row--alert) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* 直前も超過行の場合 → 上側の角丸を消す */
.marker-tooltip-row--alert + .marker-tooltip-row--alert {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* しきい値超過行（赤背景）はラベル文字も白にする（既定の灰色を上書き） */
.marker-tooltip-row--alert .marker-tooltip-label {
  color: #ffffff;
}
/* WBGT段階着色行は、行の文字色（段階の ink）をラベルにも継承させる（注意/警戒＝濃色、他＝白） */
.marker-tooltip-row--wbgt .marker-tooltip-label {
  color: inherit;
}
.marker-tooltip-label {
  flex: 1;
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.3;
}
.marker-tooltip-value {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}
.marker-tooltip-unit {
  font-size: 12px;
  font-weight: 400;
}

/*
 * 現場図マーカー（Leaflet DivIcon）
 * SVGアイコン（内部アニメは焼き込み済み）に、外部アニメーションを
 * CSSパッケージ（--ripple / --glow）として付与する。色は --marker-color で差し替え。
 * WBGT 5段階や新規マーカーも色を変えるだけで再利用できる。
 */
.site-marker {
  position: relative;
  width: 60px;
  height: 80px;
  overflow: visible; /* 波紋・グローがアイコン矩形の外へはみ出せるように */
}
.site-marker > img {
  display: block;
  width: 60px;
  height: 80px;
  /* leaflet.css がマーカー img 幅を上書きするため、縦横比維持で細くなる場合でも
     箱の中央に寄せて円の中心と波紋リング中心を一致させる */
  margin-inline: auto;
}
/* 波紋リング: SVG上部の丸（中心≒60x80換算で 30px, 29px）に整列し本体背面へ */
.site-marker--ripple::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 29px;
  width: 46px;
  height: 46px;
  border: 2px solid var(--marker-color, #F44336);
  border-radius: 50%;
  z-index: -1;
  transform: translate(-50%, -50%) scale(1);
  animation: marker-ripple 3s ease-out infinite;
  pointer-events: none;
}
/* グロー: アイコンのアルファ形状に沿ったドロップシャドウ発光 */
.site-marker--glow {
  filter: drop-shadow(0 0 12px var(--marker-color, #F44336));
}

/* WBGT警告スクロール: 継ぎ目なく横スクロール。文言中の <b> は段階別ハイライト色 */
@keyframes wbgt-blink { 50% { opacity: 0.25; } }
@keyframes wbgt-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.wbgt-alert-track { animation: wbgt-marquee 18s linear infinite; }
.wbgt-alert-msg { font-size: 13px; font-weight: 700; padding: 0 60px; }
.wbgt-alert-track b { color: var(--ab-hl, #fff); }
.wbgt-alert-warn { animation: wbgt-blink 1s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) {
  .wbgt-alert-track, .wbgt-alert-warn { animation: none; }
}

/* WBGTメーター（棒温度計）
 * 広幅（sm+）: ダークの角丸パネル＋棒温度計。
 * 狭幅: 同じダークパネルを正円にし、中央にうさぎアイコンのみを表示する（非表示にはしない）。
 * 段階色は JS が --wbgt-color を設定する（棒バーの塗りに反映）。 */
.wbgt-meter {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  background: #1a1a1a;
  border-radius: 50%;
  border-color: #2a3040;
}
/* summary が nil のとき hidden で非表示にする（未レイヤーの display 指定に hidden が負けるため上書き）。 */
.wbgt-meter.hidden {
  display: none;
}
/* 球（うさぎ）: rabbit SVG は円＋うさぎを含むため背景色は付けない。実寸 49x53 で表示。 */
.wbgt-bulb {
  width: 49px;
  height: 53px;
}
.wbgt-bulb > img {
  width: 49px;
  height: 53px;
}
@media (min-width: 640px) {
  .wbgt-meter {
    display: block;
    width: auto;
    height: auto;
    padding: 0.75rem;
    border-radius: 1rem;
  }
  /* 広幅: グラデ枠付き棒温度計。枠 SVG は幅 56px（viewBox 比で高さ ≈264px）。 */
  .wbgt-frame {
    display: block;
    width: 56px;
    height: auto;
  }
  /* 球は枠内の球位置へ重ねる。背景色なし。 */
  .wbgt-bulb {
    position: absolute;
    left: 50%;
    top: 90.0%;
    transform: translate(-50%, -50%);
  }
}

/* 目盛ラベルの各段階の枠。現在段階は半透明白で背景をハイライトする。 */
.wbgt-legend-row {
  padding: 3px 6px;
  border-radius: 6px;
  transition: background-color 0.2s;
}
.wbgt-legend-row--active {
  background: rgba(255, 255, 255, 0.09);
}

/* WBGT段階バッジ: 段階名の文字ピル。ツールチップは右に開くためマーカー左側に配置して重なりを回避 */
.site-marker-badge {
  position: absolute;
  right: calc(100% - 22px); /* 右端をマーカー丸の左上あたりに合わせ、左方向へ伸ばす */
  top: 0; /* マーカーの左上に配置 */
  z-index: 2;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1.5px solid #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}


@media print {
  .print-style {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .print-style-chart {
    overflow: visible !important;
    max-width: var(--plotly-print-max-width, 100%);
    width: 100%;
    margin: 0 auto;
  }
}

/* 接点入出力ポート状態パネル (shared/_contact_io_panel)
   コンテナ幅で 狭幅(ベース) / 広幅(≥720px) の 2 レイアウトを切り替える。
   @layer 内のカスタムクラスはコンテンツスキャンで tree-shake されるため、
   ERB で補間されるクラス名が消えないようレイヤー外に定義する。 */
:root {
  --cio-card-bg: #FFFFFF;
  --cio-line: #EBEBEB;
  --cio-active-bg: #EEF4FF; /* DS の --card-selected-bg-flat */
  --cio-brand-blue: #3E92EA;
  --cio-brand-blue-strong: #1159C1;
  --cio-ink-900: #191919;
  --cio-ink-800: #1C1C1C;
  --cio-ink-500: #9D9D9D;
  --cio-ink-400: #C4C4C4;
}

.contact-io-panel {
  container-type: inline-size;
}
.contact-io-panel__card {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 90px;
  padding: 9px;
  border-radius: 12px;
  background: var(--cio-card-bg);
  box-shadow: inset 0 0 0 1px var(--cio-line);
}
.contact-io-panel__card--error {
  background: #D1D5DB; /* 他の計測カードのエラー時 bg-gray-300 と同色 */
}
.contact-io-panel__badge {
  flex: none;
  width: 36px;
  height: 36px;
}
/* バッジ右の縦ヘアライン (広幅のみ表示) */
.contact-io-panel__rule {
  display: none;
}
.contact-io-panel__ports {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
/* 狭幅ではコネクタグループを 4×2 グリッドに溶かし (CN 名は各セルが持つ)、
   広幅では「縦書き CN ラベル + セルグリッド」の行にする */
.contact-io-panel__group {
  display: contents;
}
.contact-io-panel__cells {
  display: contents;
}
.contact-io-panel__group-label {
  display: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cio-ink-500);
}
.contact-io-panel__cell {
  height: 34px;
  min-width: 0;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--cio-card-bg);
  box-shadow: inset 0 0 0 1px var(--cio-line);
  transition: box-shadow 150ms;
}
.contact-io-panel__cell--on {
  background: var(--cio-active-bg);
  box-shadow: inset 0 0 0 1.5px var(--cio-brand-blue-strong);
  color: var(--cio-brand-blue-strong);
}
.contact-io-panel__cell--off {
  color: var(--cio-ink-900);
}
.contact-io-panel__cell--unused {
  background: var(--cio-line);
  box-shadow: none;
  color: var(--cio-ink-400);
}
/* 狭幅の上段: コネクタ名 (広幅では非表示) */
.contact-io-panel__cell-connector {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.contact-io-panel__cell-number {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.contact-io-panel__cell-label {
  display: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.contact-io-panel__cell-state {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
/* OFF はセル色 (ink-900) を番号だけに残し、CN 名・ドット・状態は ink-500 */
.contact-io-panel__cell--off .contact-io-panel__cell-connector,
.contact-io-panel__cell--off .contact-io-panel__cell-state {
  color: var(--cio-ink-500);
}
.contact-io-panel__cell--off .contact-io-panel__cell-number {
  color: var(--cio-ink-800);
}
.contact-io-panel__cell--unused .contact-io-panel__cell-number {
  color: var(--cio-ink-400);
}
.contact-io-panel__cell--unused .contact-io-panel__cell-state {
  color: var(--cio-ink-500);
  font-weight: 500;
}
.contact-io-panel__state-text {
  display: none;
}
.contact-io-panel__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
}
.contact-io-panel__cell--on .contact-io-panel__dot {
  background: var(--cio-brand-blue);
}
.contact-io-panel__cell--off .contact-io-panel__dot {
  background: var(--cio-ink-500);
}
.contact-io-panel__cell--unused .contact-io-panel__dot {
  background: var(--cio-ink-500);
}

/* 広幅 (≥720px): モックアップの WIDE。CN1 / CN3 を横並び、縦書き CN ラベル、
   ポート名 + 状態テキスト付きの 58px セル。720px 未満はすべて NARROW レイアウト */
@container (min-width: 720px) {
  .contact-io-panel__card {
    padding: 0 20px;
    gap: 16px;
  }
  .contact-io-panel__rule {
    display: block;
    flex: none;
    width: 1px;
    height: 46px;
    background: var(--cio-line);
  }
  .contact-io-panel__ports {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .contact-io-panel__group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .contact-io-panel__group-label {
    display: block;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }
  .contact-io-panel__cells {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 76px));
    gap: 6px;
  }
  .contact-io-panel__group:first-child .contact-io-panel__cells {
    grid-template-columns: repeat(2, minmax(0, 76px));
  }
  .contact-io-panel__cell {
    height: 58px;
    border-radius: 8px;
    padding: 9px 10px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
  }
  .contact-io-panel__cell-connector,
  .contact-io-panel__cell-number {
    display: none;
  }
  .contact-io-panel__cell-label {
    display: block;
  }
  .contact-io-panel__cell-state {
    gap: 5px;
  }
  .contact-io-panel__state-text {
    display: inline;
  }
  .contact-io-panel__dot {
    width: 7px;
    height: 7px;
  }
  /* モックアップ WIDE では IN の ON セルは白地のまま、状態テキストとドットのみ青 */
  .contact-io-panel--in .contact-io-panel__cell--on {
    background: var(--cio-card-bg);
    box-shadow: inset 0 0 0 1px var(--cio-line);
    color: var(--cio-ink-900);
  }
  .contact-io-panel--in .contact-io-panel__cell--on .contact-io-panel__cell-state {
    color: var(--cio-brand-blue-strong);
  }
}

/* 接点入力アコーディオン(details)の開閉アニメーション */
details::details-content {
  height: 0;
  overflow: clip;
  transition:
    height 300ms ease-out,
    content-visibility 300ms allow-discrete;
}

@supports (interpolate-size: allow-keywords) {
  /* height: 0 → auto のアニメーションを許可(details 配下のみ) */
  details {
    interpolate-size: allow-keywords;
  }
  details[open]::details-content {
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-io-panel__cell,
  details::details-content {
    transition: none;
  }
}