/* 邪魔しない反応: 押した感・ホバーの乗り・一覧行の順送り */

:root {
  --ses-motion: 140ms ease;
  --ses-press: 90ms ease;
}

.btn {
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease,
    transform var(--ses-press);
}

.btn:active:not(:disabled):not(.disabled) {
  transform: translateY(1px) scale(0.985);
}

/* 押した位置の部品の中央から広がるタップ。疑似要素1つで、動かすのは transform と opacity だけ */
.btn:not(:disabled):not(.disabled):not(.dropdown-toggle):not(.accordion-button),
button.sidebar-toggle-btn,
#sidebar .nav-link,
#sidebar .sidebar-collapsible-toggle {
  position: relative;
  overflow: clip;
}

.btn:not(:disabled):not(.disabled):not(.dropdown-toggle):not(.accordion-button)::after,
button.sidebar-toggle-btn::after,
#sidebar .nav-link::after,
#sidebar .sidebar-collapsible-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle, currentColor 10%, transparent 10.6%);
  transform: scale(11);
  opacity: 0;
  transition: transform 420ms ease-out, opacity 520ms ease-out;
}

.btn:active:not(:disabled):not(.disabled):not(.dropdown-toggle):not(.accordion-button)::after,
button.sidebar-toggle-btn:active::after,
#sidebar .nav-link:active::after,
#sidebar .sidebar-collapsible-toggle:active::after {
  transform: scale(0);
  opacity: 0.34;
  transition: none;
}

.home-alert-row--link:active {
  background: rgba(var(--accent-rgb), 0.1);
}

/* クリック座標の波紋。中は空けて枠だけ。要素は使い回し、動かすのは transform と opacity だけ */
.ses-cursor-tap {
  position: fixed;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4000;
  opacity: 0;
  background: radial-gradient(
    circle,
    transparent 0 66%,
    rgba(var(--accent-rgb), 0.5) 74%,
    rgba(var(--accent-rgb), 0.14) 81%,
    transparent 88%
  );
}

button.sidebar-toggle-btn {
  transition: background 120ms ease, box-shadow 120ms ease, transform var(--ses-press);
  transform-origin: center;
  /* 短い揺れ。最初は 3 秒後、そのあとは約 10 秒おき */
  animation: ses-logo-nudge 10s ease-in-out 3s infinite;
}

/* 乗っているあいだ・押しているあいだは止め、押した縮小を優先する */
button.sidebar-toggle-btn:hover,
button.sidebar-toggle-btn:focus-visible,
button.sidebar-toggle-btn:active {
  animation: none;
}

button.sidebar-toggle-btn:active {
  transform: scale(0.96);
}

@keyframes ses-logo-nudge {
  /* 揺れ自体は約 0.9 秒。周期を 10 秒にしても速さが変わらないよう割合を合わせている */
  0%,
  9.2%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  1.5% {
    transform: rotate(-8deg) scale(1.06);
  }
  3.5% {
    transform: rotate(7deg) scale(1.05);
  }
  5.5% {
    transform: rotate(-4deg) scale(1.02);
  }
  7.5% {
    transform: rotate(2deg) scale(1);
  }
}

#sidebar .nav-link,
#sidebar .sidebar-collapsible-toggle,
#sidebar .sidebar-dual-row,
#sidebar .sidebar-seg-btn.nav-link {
  transition:
    background-color var(--ses-motion),
    color var(--ses-motion),
    box-shadow var(--ses-motion),
    transform var(--ses-press);
}

#sidebar .nav-link:active:not(.active):not(.sidebar-link-current),
#sidebar .sidebar-collapsible-toggle:active {
  transform: translateY(0.5px);
}

.table.table-hover > tbody > tr > *,
.app-page .table.ses-list-table.table-hover > tbody > tr > * {
  transition: background-color var(--ses-motion);
}

/* 画面全体は動かさない。行のセルだけ左から収める（tr の transform は効かない）
   入りは easeOutCubic */
@keyframes ses-row-in {
  0% {
    opacity: 0;
    transform: translate3d(-16px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* 出ていくはその場でフェードだけ（easeInCubic） */
@keyframes ses-row-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.ses-leave-ghost {
  pointer-events: none;
  animation: ses-row-out 420ms cubic-bezier(0.32, 0, 0.67, 0) both;
}

/* 差し替わるまで行を入りの位置で止めておく。見えてから巻き戻すチカチカを防ぐ */
#page-content.ses-page-pending .table tbody > tr > td,
#page-content.ses-page-pending .table tbody > tr > th,
#page-content.ses-page-pending .ops-check-doc-list > .ops-check-doc-row,
#page-content.ses-page-pending .home-alert-group-list > .home-alert-row {
  opacity: 0;
  transform: translate3d(-16px, 0, 0);
}

#page-content.ses-page-enter .table tbody > tr > td,
#page-content.ses-page-enter .table tbody > tr > th,
#page-content.ses-page-enter .ops-check-doc-list > .ops-check-doc-row,
#page-content.ses-page-enter .home-alert-group-list > .home-alert-row {
  animation: ses-row-in 1020ms cubic-bezier(0.33, 1, 0.68, 1) both;
  animation-delay: calc(var(--ses-hub-i, 0) * 70ms);
}

/* 一覧の tr は React が style を消すので、ずらしは CSS の順番で付ける */
#page-content.ses-page-enter .table tbody > tr:nth-child(1) > * { --ses-hub-i: 0; }
#page-content.ses-page-enter .table tbody > tr:nth-child(2) > * { --ses-hub-i: 1; }
#page-content.ses-page-enter .table tbody > tr:nth-child(3) > * { --ses-hub-i: 2; }
#page-content.ses-page-enter .table tbody > tr:nth-child(4) > * { --ses-hub-i: 3; }
#page-content.ses-page-enter .table tbody > tr:nth-child(5) > * { --ses-hub-i: 4; }
#page-content.ses-page-enter .table tbody > tr:nth-child(6) > * { --ses-hub-i: 5; }
#page-content.ses-page-enter .table tbody > tr:nth-child(7) > * { --ses-hub-i: 6; }
#page-content.ses-page-enter .table tbody > tr:nth-child(8) > * { --ses-hub-i: 7; }
#page-content.ses-page-enter .table tbody > tr:nth-child(9) > * { --ses-hub-i: 8; }
#page-content.ses-page-enter .table tbody > tr:nth-child(10) > * { --ses-hub-i: 9; }
#page-content.ses-page-enter .table tbody > tr:nth-child(11) > * { --ses-hub-i: 10; }
#page-content.ses-page-enter .table tbody > tr:nth-child(12) > * { --ses-hub-i: 11; }
#page-content.ses-page-enter .table tbody > tr:nth-child(13) > * { --ses-hub-i: 12; }
#page-content.ses-page-enter .table tbody > tr:nth-child(14) > * { --ses-hub-i: 13; }
#page-content.ses-page-enter .table tbody > tr:nth-child(15) > * { --ses-hub-i: 14; }
#page-content.ses-page-enter .table tbody > tr:nth-child(16) > * { --ses-hub-i: 15; }
#page-content.ses-page-enter .table tbody > tr:nth-child(17) > * { --ses-hub-i: 16; }
#page-content.ses-page-enter .table tbody > tr:nth-child(18) > * { --ses-hub-i: 17; }
#page-content.ses-page-enter .table tbody > tr:nth-child(19) > * { --ses-hub-i: 18; }
#page-content.ses-page-enter .table tbody > tr:nth-child(20) > * { --ses-hub-i: 19; }
#page-content.ses-page-enter .table tbody > tr:nth-child(21) > * { --ses-hub-i: 20; }
#page-content.ses-page-enter .table tbody > tr:nth-child(22) > * { --ses-hub-i: 21; }
#page-content.ses-page-enter .table tbody > tr:nth-child(23) > * { --ses-hub-i: 22; }
#page-content.ses-page-enter .table tbody > tr:nth-child(24) > * { --ses-hub-i: 23; }
#page-content.ses-page-enter .table tbody > tr:nth-child(25) > * { --ses-hub-i: 24; }

/* 対応が必要な書類カード：枠だけじんわり点滅（入りのスライドとは別レイヤ） */
@keyframes ses-hub-attention {
  0%,
  100% {
    border-color: rgba(180, 83, 9, 0.28);
    box-shadow: 0 0 0 0 rgba(180, 83, 9, 0);
  }
  50% {
    border-color: rgba(180, 83, 9, 0.72);
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.14);
  }
}

@keyframes ses-hub-attention-overdue {
  0%,
  100% {
    border-color: rgba(185, 28, 28, 0.3);
    box-shadow: 0 0 0 0 rgba(185, 28, 28, 0);
  }
  50% {
    border-color: rgba(185, 28, 28, 0.78);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.16);
  }
}

.app-page .ops-check-doc-row.is-attention {
  position: relative;
}

.app-page .ops-check-doc-row.is-attention::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  border: 1.5px solid rgba(180, 83, 9, 0.4);
  animation: ses-hub-attention 2.8s ease-in-out infinite;
}

.app-page .ops-check-doc-row.is-attention-overdue::after {
  border-color: rgba(185, 28, 28, 0.42);
  animation-name: ses-hub-attention-overdue;
}

@media (prefers-reduced-motion: reduce) {
  button.sidebar-toggle-btn {
    animation: none !important;
  }

  .btn,
  button.sidebar-toggle-btn,
  #sidebar .nav-link,
  #sidebar .sidebar-collapsible-toggle,
  #sidebar .sidebar-dual-row,
  #sidebar .sidebar-seg-btn.nav-link,
  .table.table-hover > tbody > tr > *,
  .app-page .table.ses-list-table.table-hover > tbody > tr > * {
    transition: none !important;
  }

  .btn:active:not(:disabled):not(.disabled),
  button.sidebar-toggle-btn:active,
  #sidebar .nav-link:active:not(.active):not(.sidebar-link-current),
  #sidebar .sidebar-collapsible-toggle:active {
    transform: none !important;
  }

  .btn:not(:disabled):not(.disabled):not(.dropdown-toggle):not(.accordion-button)::after,
  button.sidebar-toggle-btn::after,
  #sidebar .nav-link::after,
  #sidebar .sidebar-collapsible-toggle::after,
  .ses-cursor-tap {
    display: none;
  }

  #page-content.ses-page-enter .table tbody > tr > td,
  #page-content.ses-page-enter .table tbody > tr > th,
  #page-content.ses-page-enter .home-alert-group-list > .home-alert-row,
  #page-content.ses-page-enter .ops-check-doc-list > .ops-check-doc-row {
    animation: none !important;
  }

  #page-content.ses-page-pending .table tbody > tr > td,
  #page-content.ses-page-pending .table tbody > tr > th,
  #page-content.ses-page-pending .home-alert-group-list > .home-alert-row,
  #page-content.ses-page-pending .ops-check-doc-list > .ops-check-doc-row {
    opacity: 1 !important;
    transform: none !important;
  }

  .ses-leave-ghost {
    animation: none !important;
  }

  .app-page .ops-check-doc-row.is-attention::after {
    animation: none !important;
    border-color: rgba(180, 83, 9, 0.55);
    box-shadow: none;
  }

  .app-page .ops-check-doc-row.is-attention-overdue::after {
    border-color: rgba(185, 28, 28, 0.6);
  }
}