:root {
  --main-green: #367e7f;
}

/* atom/pagination, atom/period_pager — DS 1 「前へ ・ N ／ M ・ 次へ」36px.
   li.prev / li.next / .disabled / .page-link / .page-place are selectors in features and test (F8). */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border-radius: 0;
  color: var(--color-text-muted);
  font-size: var(--text-label);

  .page-item {
    .page-link {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
      height: 36px;
      margin: 0;
      padding: 0 var(--space-3);
      border: 1px solid var(--color-action);
      border-radius: var(--radius-control);
      background-color: var(--color-surface-card);
      color: var(--color-action);
      font-size: var(--text-label);
      font-weight: var(--font-weight-strong);
      line-height: 1;
      text-decoration: none;
    }
    .page-link:hover {
      background-color: var(--color-action-tint);
      color: var(--color-action);
      opacity: 1;
    }
    .page-link:focus {
      box-shadow: none;
    }
    .page-link:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
    .page-link::before,
    .page-link::after {
      width: var(--icon-sm);
      height: var(--icon-sm);
      background-color: currentColor;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: contain;
      mask-size: contain;
    }
  }
  .page-item.prev .page-link {
    padding-left: var(--space-2);
  }
  .page-item.prev .page-link::before {
    content: "";
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 4L6 8l4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 4L6 8l4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .page-item.next .page-link {
    padding-right: var(--space-2);
  }
  .page-item.next .page-link::after {
    content: "";
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  /* 「N ／ M」 is muted; the period of a period pager is strong ink (DS 1) */
  .page-place {
    padding: 0 var(--space-1);
    font-variant-numeric: tabular-nums;
  }

  .page-item.disabled .page-link {
    border-color: var(--color-border);
    background-color: var(--color-surface-sunken);
    color: var(--color-text-muted);
    cursor: default;
  }
}
[data-testid="period-pager"] .pagination .page-place {
  color: var(--color-text);
  font-weight: var(--font-weight-strong);
}

/* atom/layout */
html {
  font-size: 72.5%;
}
body {
  background-color: var(--color-surface-page);
  box-sizing: border-box;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
}
h2 {
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  color: var(--color-text-muted);
  font-size: 1.8rem;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  word-break: break-word;
}
h2.h2_border_none {
  padding-bottom: 0;
  border-bottom: none;
}
h2.h2_large,
h2.h2_large_border {
  color: var(--color-text);
  font-size: 1.6rem;
}
h2.h2_large {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}
h2.h2_large_border {
  margin: 0 0 2rem;
  padding-bottom: 2rem;
}

h3 {
  margin: 0 0 2rem;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  font-weight: 600;
}
h3.h3_border {
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
h3.h3_large {
  margin: 0 0 1.5rem;
  color: var(--color-text);
  font-size: 1.4rem;
}

p {
  margin: 0 0 1rem;
}

.control-area {
  white-space: nowrap;
  display: flex;
  align-items: center;
  margin-right: 2rem;

  .control-area_section {
    display: flex;
    align-items: center;
    margin-right: 2rem;

    .control-area_section_article {
      display: flex;
      align-items: center;
      margin-right: 1rem;

      .control-area_section_article_date {
        margin: 0 .5rem;
      }

      .control-area_section_article_title {
        white-space: nowrap;
        margin-right: .5rem;
      }
    }
    .control-area_section_article:last-child {
      margin-right: 0;
    }
  }
  .control-area_section:last-child {
    margin-right: 0;
  }
  .control-area_section_stretch_wrap {
    flex-direction: column;
    flex-grow: 2;

    .control-area_section_article_stretch {
      width: 100%;
      margin-right: 0;
      margin-bottom: 1rem;

      .control-area_stretch {
        width: 100%;

        .control-area_section_stretch {
          flex-grow: 2;

          .control-area_section_article {
            width: 100%;

            .form-select,
            .form-text {
              width: 100%;
            }

            .multi-select {
              width: 100%;

              .select2-container {
                width: 100%!important;

                .select2-selection--multiple {
                  height: 34px;
                  min-height: 34px;
                  padding: 0;

                  .select2-selection__rendered {
                    display: flex;
                    align-items: center;
                    height: 100%;
                    padding: .5rem 1rem;
                    font-size: 1.2rem;

                    .select2-search__field {
                      margin-top: 0;
                    }

                    .select2-selection__choice {
                      margin: 0;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .control-area_section_article_date,
      .control-area_section_article_title {
        font-size: 1.2rem;
      }
    }
    .control-area_section_article_stretch:last-child {
      margin-bottom: 0;
    }
  }
}
.control-area:last-child {
  margin-right: 0;
}

.form-area {
  display: flex;
  align-items: center;

  label {
    width: 8%;
    margin-right: 1rem;
    text-align: right;
    color: #777;
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
  }
}
.form-area-area_multiple-lines {
  align-items: flex-start;
}

.heading-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;

  .title-area {
    width: 100%;
    margin-right: 2rem;

    h1 {
      display: flex;
      align-items: center;
      margin: 0;
      font-size: 1.8rem;
      font-weight: 600;
    }

    h2 {
      margin: 0;
      padding: 0;
      color: #333;
      font-size: 1.6rem;
      border-bottom: 0;
    }

    div {
      display: flex;
      align-items: center;
      margin-top: .5rem;

      .title-area_contents {
        display: flex;
        align-items: center;
        margin-right: 2rem;
        color: #777;

        span:last-child {
          padding-left: .5rem;
        }
      }
      .title-area_contents:last-child {
        margin-right: 0;
      }
    }
    .title-area_pagination {
      display: flex;
      align-items: center;
      margin-top: 0;

      h1 {
        margin-right: 2rem;
        font-size: 1.4rem;
      }

      div {
        margin-top: 0;
      }
    }
  }
}
.heading-area_card {
  margin-bottom: 0;
}
.heading-area_right_large {
  .title-area {
    width: inherit;
  }
  form {
    flex-grow: 2;
  }
}
.heading-area_secondary {
  margin-top: 4rem;
}
.row-area_card {
  .heading-area {
    margin-bottom: 0;

    h2 {
      color: #333;
      font-size: 1.8rem;
      border-bottom: 0;
    }
  }

  .heading-area_border {
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);

    h2 {
      margin: 0;
      padding: 0;
      color: #777;
      font-size: 1.2rem;
      font-weight: 600;
      word-break: break-word;
    }
  }
}

.icon-area {
  display: flex;
  align-items: center;
  width: 100%;

  span {
    margin-right: .5rem;
  }
  span:last-child {
    margin-right: 0;
  }
}

.img-txt-btn-area {
  display: flex;

  .img-txt-btn-area_img {
    display: flex;
    width: 150px;
    height: 85px;
    background-color: #EBEBEB;
    margin-right: 1rem;

    img {
      object-fit: cover;
    }
  }
  .img-txt-btn-area_txt {
    flex-grow: 2;

    .img-txt-btn-area_txt_article {
      margin-bottom: 1.5rem;
    }
    .img-txt-btn-area_txt_article:last-child {
      margin-bottom: 0;
    }
  }
  .img-txt-btn-area_btn {
    display: flex;
    flex-direction: column;
    margin-left: 2rem;

    > div {
      margin-bottom: 1rem;
    }
    > div:last-child {
      margin-bottom: 0;
    }
  }
}

.input-area {
  display: flex;
  align-items: center;

  span:nth-child(odd) {
    flex-grow: 1;
  }
  span:nth-child(even) {
    margin: 0 1rem;
  }
}

.main-side-area {
  display: flex;
  justify-content: space-between;

  .main-side-area_main {
    flex-grow: 2;
  }

  .main-side-area_side {
    width: 25%;
    margin-left: 2rem;
  }
}

.row-area {
  display: flex;
  align-items: center;

  span {
    margin-right: 1rem;
  }
  span:last-child {
    margin-right: 0;
  }
}
.row-area_xlarge {
  > div,
  > span {
    margin-right: 2rem;
  }
}
.row-area_xlarge {
  > div:last-child,
  > span:last-child {
    margin-right: 0;
  }
}
.row-area_small {
  > span {
    margin-right: .5rem;
  }
  > span:last-child {
    margin-right: 0;
  }
}
.row-area_card {
  display: flex;
}
.row-area_liquid {
  span {
    flex-grow: 2;
    margin: 0;
  }
  .row-area_liquid_connect {
    flex-grow: 0;
    margin: 0 1rem;
  }
  .row-area_liquid_noconnect {
    margin-right: 1rem;
  }
  .row-area_liquid_noconnect:last-child {
    margin-right: 0;
  }

  &.clear-date {
    padding-left: 2px;
    font-size: 120%;
    cursor: pointer;
  }
}
.row-area_ai-start {
  align-items: start;
}
.row-area_jc-space-between {
  justify-content: space-between;
}

.section-area {
  margin-bottom: 2rem;
}
.content {
  .section-area:last-child {
    margin-bottom: 0;
  }
}

.space-between-area {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .space-between-area_main-area {
    flex-grow: 1;

    > div {
      flex-grow: 1;
    }

    .control-area_section_article {
      width: 100%;
    }
  }
}

.thumbnail-area {
  img {
    max-height: 100px;
  }
}

.text-red {
  color: var(--color-holiday-sun);
}

.w-30 {
  width: 30%;
}
.w-70 {
  width: 70%;
}

/* atom/form — DS 1 入力: 44px, border 1px, radius 8. Search-bar controls (.form-small) are 40px. */
.form-select,
.form-text {
  input,
  select,
  textarea {
    width: 100%;
    min-height: var(--size-control-lg);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background-color: var(--color-surface-card);
    color: var(--color-text);
    font-size: var(--text-control);
  }
  textarea {
    padding: var(--space-2) var(--space-3);
  }
}

.form-group {
  label {
    font-size: var(--text-control);
    font-weight: var(--font-weight-strong);
  }

  input,select,textarea {
    font-size: var(--text-control);
  }
}

.form-group.submit {
  margin-top: 3rem;
  text-align: center;
}

/* Bootstrap's .form-control repainted (JS emits the class too — F14) */
.form-control {
  height: var(--size-control-lg);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background-color: var(--color-surface-card);
  color: var(--color-text);
  font-size: var(--text-control);
  line-height: 1.4;
  transition: none;
}
textarea.form-control {
  height: auto;
  min-height: calc(var(--size-control-lg) * 2);
  padding: var(--space-2) var(--space-3);
}
input[type="file"].form-control {
  padding: var(--space-2) var(--space-3);
}
.form-control:focus {
  border-color: var(--color-action);
  background-color: var(--color-surface-card);
  color: var(--color-text);
  box-shadow: none;
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--color-surface-sunken);
  color: var(--color-text-muted);
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-action);
}

/* 必須: a small outlined mark to the right of the label. One look for the three markups
   (.form-group.required label::after, th.required::after, span.badge.badge-danger). */
.form-group.required label::after,
th.required::after {
  content: '必須';
}
.form-group.required label::after,
th.required::after,
.badge.badge-danger {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 5px;
  border: 1px solid var(--color-status-rejected);
  border-radius: 4px;
  background-color: transparent;
  color: var(--color-status-rejected);
  font-size: 11px;
  font-weight: var(--font-weight-strong);
  line-height: 16px;
  vertical-align: middle;
}

.form-small {
  input,
  select {
    height: var(--size-control);
    min-height: var(--size-control);
    padding: 0 var(--space-3);
    font-size: var(--text-control);
  }
}

/* atom/card — DS 1 カード: surface-card, border 1px, radius 12 */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--color-surface-card);
  background-clip: border-box;
  padding: 2rem;
  border: 1px solid var(--color-border);
  border-bottom: none;

  h2 {
    margin: 0 0 var(--space-2);
    padding: 0;
    border-bottom: 0;
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: var(--font-weight-strong);
  }

  .card_section {
    .card_article:last-child,
    .card_section_article:last-child,
    .card_row:last-child {
      margin-bottom: 0;
    }

    .card_section_article_border:last-child {
      padding-bottom: 0;
      border-bottom: none;
    }
  }
  .card_section:last-child {
    margin-bottom: 0;
  }
}
.card:only-child {
  border-radius: var(--radius-container);
}

.card_article {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;

  .card_side:last-child {
    margin-right: 0;
  }
}

.card_section {
  margin-bottom: 2.5rem;

  .card:first-child {
    border-radius: var(--radius-container) var(--radius-container) 0 0;
  }
  .card:last-child {
    border-bottom: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-container) var(--radius-container);
  }
  .card:only-child {
    border-radius: var(--radius-container);
  }
}

.card_section_article {
  display: block;
  margin-bottom: 2rem;
}
.card_section_article_border {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}

.card_row {
  margin-bottom: 1rem;
}

.card_side {
  width: 100%;
  margin-right: 2rem;
  padding: 2rem;
  border: 1px solid var(--color-border);

  h3 {
    text-align: center;
  }
}

.row-area.row-area_card,
.row-area_card {
  align-items: stretch;

  .card {
    flex-grow: 2;
    width: 100%;
    margin-right: 2rem;
    border-bottom: 1px solid var(--color-border);
  }
  .card:last-child {
    margin-right: 0;
  }
}

/* application */
.turbolinks-progress-bar {
  height: 3px;
  background-color: green;
}

body {
  background-color: var(--color-surface-page);
}

header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--color-surface-card);
  width: 100%;
  z-index: 100;
  height: var(--size-header);
}

.main-nav {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-control);

  .navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    font-size: 20px;
    font-weight: var(--font-weight-strong);
    color: var(--color-text);
  }

  .brand-mark {
    display: block;
    width: 28px;
    height: 28px;
  }

  .text-secondary {
    color: var(--color-text-muted) !important;
  }

  a {
    color: var(--color-action);
    &:hover {
      color: var(--color-action-hover);
    }
  }

  .nav-link[aria-current="page"] {
    font-weight: var(--font-weight-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.container-fluid {
  padding-left: calc(var(--size-sidebar) + 24px);
  padding-right: 24px;
  margin-top: calc(var(--size-header) + 20px);
  .content {
    background-color: var(--color-surface-card);
    padding: 20px 20px;
    min-height: 250px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-container);
    margin-top: 24px;
  }
}

.container-center {
  margin-top: calc(var(--size-header) + 20px);
}

.login-form {
  width: 40%;
  border: 1px solid var(--main-green);
  margin: auto;
  border-radius: 5px;
  padding: 30px 30px;
  background-color: white;
  input[type="submit"] {
    color: var(--color-on-action);
    margin-bottom: 0;
    background-color: var(--color-action);

    &:hover {
      cursor: pointer;
      color: var(--color-on-action);
      background-color: var(--color-action-hover);
    }
  }
}

.reset-password-form {
  width: 40%;
  border: 1px solid var(--main-green);
  margin: auto;
  border-radius: 5px;
  padding: 30px 30px;
  background-color: white;
}

.roles {
  .role-form {
    width: 40%;
    margin: auto;
  }
}

#sidebar {
  position: fixed;
  padding: 0;
  padding-top: var(--size-header);
  height: 100vh;
  overflow-y: auto;
  z-index: 99;
  background-color: var(--color-surface-sidebar);
  border-right: 1px solid var(--color-border);
}

#sidebar .list-group {
  width: var(--size-sidebar);
  padding: var(--space-2) 0;
}

#sidebar .list-group .list-group-item {
  display: flex;
  align-items: center;
  min-height: var(--size-control);
  padding: 0 var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--color-border-sidebar);
  border-radius: 0;
  color: var(--color-text);
  background-color: transparent;
  font-size: 15px;

  &:hover {
    background-color: var(--color-action-tint);
    text-decoration: none;
  }

  &[aria-current="page"] {
    background-color: var(--color-surface-card);
    box-shadow: inset 3px 0 0 var(--color-action);
    color: var(--color-action);
    font-weight: var(--font-weight-strong);
  }
}

#sidebar .sidebar-group {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-sidebar);

  .list-group-item {
    min-height: var(--size-nav-row);
    margin: 0 var(--space-2);
    padding: 0 var(--space-3);
    border-bottom: 0;
    border-radius: var(--radius-control);
  }
}

#sidebar .sidebar-group_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--size-control);
  padding: 0 var(--space-3) 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-label);
  font-weight: var(--font-weight-strong);
  letter-spacing: .04em;
  list-style: none;
  cursor: pointer;

  &::-webkit-details-marker {
    display: none;
  }

  &::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(-45deg);
  }
}

#sidebar .sidebar-group[open] > .sidebar-group_title::after {
  transform: rotate(45deg);
}

/* The menu toggle exists only on a narrow screen. From 768px the sidebar is always shown. */
.nav-toggle,
.nav-toggle-label {
  display: none;
}

@media (max-width: 767px) {
  :root {
    --size-header: 52px;
  }

  .main-nav {
    padding: 0 12px 0 16px;
    font-size: var(--text-label);

    .navbar-brand {
      gap: 8px;
      font-size: 18px;
    }

    .brand-mark {
      width: 26px;
      height: 26px;
    }

    .nav {
      gap: 12px;
    }

    .nav-link {
      display: flex;
      align-items: center;
      min-height: var(--size-control-lg);
      padding: 0;
    }

    .text-secondary {
      display: none;
    }
  }

  .shell {
    position: relative;
    flex-direction: column;
    padding-top: var(--size-header);
  }

  /* Hidden from sight but still focusable, so the keyboard can open the menu. */
  .nav-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  .nav-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--size-control-lg);
    margin: 0;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    background-color: var(--color-surface-sidebar);
    font-size: var(--text-control);
    font-weight: var(--font-weight-strong);
    cursor: pointer;

    &::after {
      content: "";
      width: 7px;
      height: 7px;
      margin-right: 4px;
      border-right: 1.8px solid currentColor;
      border-bottom: 1.8px solid currentColor;
      transform: rotate(-45deg);
    }
  }

  .nav-toggle:checked + .nav-toggle-label {
    border-bottom-color: var(--color-border-sidebar);

    &::after {
      transform: rotate(45deg);
    }
  }

  .nav-toggle:focus-visible + .nav-toggle-label {
    outline: var(--focus-ring);
    outline-offset: calc(-1 * var(--focus-ring-offset));
  }

  #sidebar {
    display: none;
    position: static;
    height: auto;
    padding-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-toggle:checked ~ #sidebar {
    display: block;
  }

  #sidebar .list-group {
    width: auto;
    padding-top: 0;
  }

  #sidebar .list-group .list-group-item {
    min-height: var(--size-control-lg);
  }

  #sidebar .sidebar-group_title {
    height: var(--size-control-lg);
  }

  #sidebar .sidebar-group:not([open]) {
    padding-bottom: 0;
  }

  .container-fluid {
    margin-top: var(--space-4);
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }
}

#sidebar .list-group .collapse .list-group-item {
 padding-left: 20px;
}

#sidebar .list-group .collapse > .collapse .list-group-item {
 padding-left: 30px;
}


.card-section {
  margin-bottom: 2rem;
}

/* DS 1 表: surface-card inside a 12px-radius border; th 13px/600 muted, left; rows 36px with a 1px bottom line.
   table.table / tbody tr / tr.yellow / td.text-center are selectors in features and test (F4, F8). */
.table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container);
  background-color: var(--color-surface-card);
  color: var(--color-text);
}

.table th,
.table td {
  padding: var(--space-2) var(--space-3);
  border-top: 0;
  border-bottom: 1px solid var(--color-border);
}

.table th,
.table thead th {
  vertical-align: middle;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-label);
  font-weight: var(--font-weight-strong);
}

.table tbody tr {
  height: var(--size-table-row);
}
.table > tbody > tr:last-child > td,
.table > tbody > tr:last-child > th {
  border-bottom: 0;
}
.table-sm th,
.table-sm td {
  padding: var(--space-1) var(--space-2);
}

.table td {
  vertical-align: middle;
  word-break: break-word;
}

.table td.action {
  white-space: nowrap;
  text-align: center;
}

.service-option-index {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  align-items: center;
  justify-content: space-between;
}

.service-option-header {
  display: flex;
  flex-wrap: wrap;
  margin: 0.5rem;
  border-bottom: 1px solid #dee2e6;
}

/* atom/breadcrumb — DS 1 パンくず: 13px muted, 「›」, no band */
.breadcrumb {
  margin: 0 0 var(--space-2);
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-label);

  a {
    color: var(--color-action);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.breadcrumb-item + .breadcrumb-item {
  padding-left: var(--space-2);
}
.breadcrumb-item + .breadcrumb-item::before {
  padding-right: var(--space-2);
  color: var(--color-text-muted);
  content: "›";
}

.flex {
  display: flex;
  .form-group{
    width: 50%;
  }
}

/* 申請中の行（勤怠一覧・アルバイト勤怠）。tr.yellow は features の selector（F8） */
.yellow {
  background-color: var(--color-row-pending);
}

/* 曜日の色（AttendanceDate / PartTimeAttendanceDate#day_of_week_color が出す。F14） */
.text-red {
  color: var(--color-holiday-sun);
}
.text-blue {
  color: var(--color-holiday-sat);
}

.button-area {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;

  > span {
    margin-right: 1rem;
  }
  > span:last-child {
    margin-right: 0;
  }
}
.button-area_liquid {
  > span {
    width: 100%;
    margin-top: 1rem;
  }

  a {
    justify-content: center;
  }
}
.button-area_start {
  justify-content: flex-start;
}

.button-display-inline {
  display:flex;
  justify-content: center;
}
.button-margin {
  margin-left: 2px;
}
.button-text {
  font-size: 12px;
}
.button-align {
  text-align: center;
}
.button-text-margin {
  margin: 5px 0 5px 0;
}

.button {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  height: var(--size-control-lg);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-action);
  border-radius: var(--radius-control);
  background-color: var(--color-action);
  color: var(--color-on-action);
  font-size: var(--text-control);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

.card_article {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;

  .card_side:last-child {
    margin-right: 0;
  }
}

.card_side {
  width: 100%;
  margin-right: 2rem;
  padding: 2rem;
  border: 1px solid var(--color-border);

  h4 {
    text-align: center;
  }
}

.attendance-table {
  th.break-time {
    max-width: 70px;
  }
  p {
    margin: 0;
  }
}
.time-select {
  display: flex;
}
.notification-title {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  max-height: 4rem;
  border: 2px solid #dcdcdc;
  border-radius: 4px;
  background-color: #dcdcdc;
  padding: 2px;
  color: #000;
}
.notification-body {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 5rem;
  max-height: 10rem;
  border: 2px solid #777;
  border-radius: 4px;
  background-color: #dcdcdc;
  padding: 2px;
  color: #000;
}

.lightsteelblue {
  background-color: #b0c4de
}

.text-centering {
  text-align: center;
}

/* 集計行 — 2C: 表の下に接続した帯、労働時間の列と同じ面。testid の span の中は文字だけ（F1） */
.row-monthly_summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-6);
  margin-top: 0;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 var(--radius-container) var(--radius-container);
  background-color: var(--color-surface-emphasis);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-strong);

  > span {
    margin: 0 !important;
  }
}
.table:has(+ .row-monthly_summary) {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* clients/index */
.document-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow-y: auto;
}

.document-modal-dialog {
  margin: 2rem auto;
}

/* clients/document_defaults_fields */
.document-defaults-heading {
  margin-top: 40px;
}

.pd-company-form {
  padding-left: 20px;
  margin-top: 0.5rem;
  span {
    font-size: 1.2rem;
  }
}

/* Clients document defaults fields */
.document-defaults-fields-form {
  padding-left: 20px;
  margin-top: 0.5rem;
  span {
    font-size: 1.2rem;
  }
}

.document-defaults-tabs {
  display: flex;
  gap: 0;
  margin-top: 1.5rem;
  border-bottom: 1px solid #dee2e6;
}

.document-defaults-tab-btn {
  padding: 0.6rem 2rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: #555;
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0.4rem 0.4rem 0 0;
  cursor: pointer;
  margin-bottom: -2px;
}

.document-defaults-tab-btn:hover {
  background-color: #f0f8f8;
}

.document-defaults-tab-btn.is-active {
  background-color: #fff;
  border-color: #dee2e6;
  border-bottom-color: #fff;
}

/* Clients document buttons */
.document-button-area {
  display: inline-grid;
  grid-template-columns: 67px 67px;
  vertical-align: middle;
}

/* settings: account */
.account-card {
  max-width: 640px;
  padding: 20px var(--space-5) var(--space-2);
  background-color: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container);
}

.account-card_title {
  margin: 0 0 var(--space-1);
  padding: 0;
  border: 0;
  color: var(--color-text-muted);
  font-size: var(--text-control);
  font-weight: var(--font-weight-strong);
  letter-spacing: .04em;
}

.account-card_user {
  margin: 0 0 var(--space-3);
  font-size: var(--text-heading);
  font-weight: var(--font-weight-strong);
}

.account-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-list_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}

.account-list_description {
  color: var(--color-text-muted);
  font-size: var(--text-control);
}

.account-list_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--size-control);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-action);
  border-radius: var(--radius-control);
  background-color: var(--color-surface-card);
  color: var(--color-action);
  font-size: var(--text-control);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;

  &:hover {
    background-color: var(--color-action-tint);
    color: var(--color-action);
    text-decoration: none;
  }
}

.account-list_button-logout {
  border-color: var(--color-border);
  color: var(--color-text);

  &:hover {
    background-color: var(--color-surface-sunken);
    color: var(--color-text);
  }
}

/* atom/button — DS 1 ボタン 主 / 副 / 危険 × 標準 40 / 行内 30.
   Bootstrap's class names stay (views and JS emit them — F8, F14); only the look is redefined.
   Submit buttons carry `form-control btn-primary` without `.btn`, hence the extra selector.
   The 44px hit area of the 30px row button is S19 (I-3). */
.btn,
.form-control.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: var(--size-control);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--text-control);
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
  text-decoration: none;
  transition: none;
}
.btn-block {
  display: flex;
}
.btn-sm,
.btn-small {
  min-height: var(--size-control-sm);
  padding: 0 10px;
  border-radius: var(--radius-control);
  font-size: var(--text-label);
}
.btn:focus,
.btn.focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn-danger:focus,
.btn-dark:focus,
.btn-outline-secondary:focus,
.form-control.btn-primary:focus {
  box-shadow: none;
  outline: 0;
}
.btn:focus-visible,
.form-control.btn-primary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-dark:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus {
  box-shadow: none;
}

/* 主 */
.btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.form-control.btn-primary {
  border-color: var(--color-action);
  background-color: var(--color-action);
  color: var(--color-on-action);
}
.btn-primary:hover,
.form-control.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  border-color: var(--color-action-hover);
  background-color: var(--color-action-hover);
  color: var(--color-on-action);
}

/* 副 */
.btn-secondary,
.btn-secondary:focus,
.btn-dark,
.btn-dark:focus,
.btn-outline-secondary,
.btn-outline-secondary:focus {
  border-color: var(--color-action);
  background-color: var(--color-surface-card);
  color: var(--color-action);
}
.btn-secondary:hover,
.btn-dark:hover,
.btn-outline-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
  border-color: var(--color-action);
  background-color: var(--color-action-tint);
  color: var(--color-action);
}

/* 危険 */
.btn-danger,
.btn-danger:focus {
  border-color: var(--color-status-rejected);
  background-color: var(--color-surface-card);
  color: var(--color-status-rejected);
}
.btn-danger:hover,
.btn-danger:not(:disabled):not(.disabled):active {
  border-color: var(--color-status-rejected);
  background-color: var(--color-status-rejected-bg);
  color: var(--color-status-rejected);
}

/* 無効 — kept visible (Capybara's default visibility check) */
.btn.disabled,
.btn:disabled,
.btn[disabled],
.btn-primary.disabled,
.btn-primary:disabled,
.btn-secondary.disabled,
.btn-secondary:disabled,
.btn-danger.disabled,
.btn-danger:disabled,
.btn-dark.disabled,
.btn-dark:disabled,
.form-control.btn-primary:disabled {
  opacity: 1;
  border-color: var(--color-border);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-muted);
  cursor: default;
}

/* layouts/application flash, atom/_form_error — DS 1 通知の帯.
   Text only inside [data-testid=notice|alert] (F7); the mark is ::before. .alert-success / .alert-danger
   are selectors in features (F8). No `display` here: emails/_form toggles an inline display:none. */
.alert {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--text-body);
  font-weight: var(--font-weight-strong);
  line-height: var(--leading-body);
}
.alert::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--space-2);
  vertical-align: 1px;
  background-color: currentColor;
}
.alert-success {
  border-color: var(--color-status-approved);
  background-color: var(--color-status-approved-bg);
  color: var(--color-status-approved);
}
.alert-success::before {
  border-radius: 50%;
}
.alert-danger {
  border-color: var(--color-status-rejected);
  background-color: var(--color-status-rejected-bg);
  color: var(--color-status-rejected);
}
.alert-danger::before {
  border-radius: 1px;
  transform: rotate(45deg);
}
dl.alert {
  font-size: var(--text-control);
  font-weight: var(--font-weight-normal);

  &::before {
    content: none;
  }
  dt {
    font-weight: var(--font-weight-strong);
  }
  dd {
    margin: var(--space-1) 0 0;
  }
}

/* 状態チップ — DS 1: 26px の pill、13px/600、形は ::before（申請中 = 輪、承認済 = 丸、差戻 = 菱形）。
   ApplicationStatusHelper#application_status_badge が出す。語は申請中 / 承認済 / 差戻のまま（F23）。 */
.badge.badge-pending,
.badge.badge-approved,
.badge.badge-rejected {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--size-chip);
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--text-label);
  font-weight: var(--font-weight-strong);
  line-height: 1;
  white-space: nowrap;

  &::before {
    content: "";
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    flex: none;
  }
}
.badge.badge-pending {
  background-color: var(--color-status-pending-bg);
  color: var(--color-status-pending);

  &::before {
    border: 2px solid currentColor;
    border-radius: 50%;
  }
}
.badge.badge-approved {
  background-color: var(--color-status-approved-bg);
  color: var(--color-status-approved);

  &::before {
    border-radius: 50%;
    background-color: currentColor;
  }
}
.badge.badge-rejected {
  background-color: var(--color-status-rejected-bg);
  color: var(--color-status-rejected);

  &::before {
    border-radius: 1px;
    background-color: currentColor;
    transform: rotate(45deg);
  }
}

/* 勤怠・有給の 4 画面の列 — 2C: 列グループの境に左 1px、集計の起点列（労働時間）は surface-emphasis、
   数値の列は右寄せ、休日の行は surface-sunken（申請中の行の色が勝つ）。祝日名は日付の下に 12px muted。 */
.table .col-group {
  border-left: 1px solid var(--color-border);
}
.table .col-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table td.col-number {
  white-space: nowrap;
}
.table .col-emphasis {
  background-color: var(--color-surface-emphasis);
  font-weight: var(--font-weight-strong);
}
.table th.col-emphasis {
  color: var(--color-text);
}
.table tr.row-holiday {
  background-color: var(--color-surface-sunken);
}
.table tr.yellow {
  background-color: var(--color-row-pending);
}
.national-holiday-name {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-normal);
}

/* 一覧共通型 — DS 1 / 2E: 見出しの行、検索バーの帯、空状態、390 の横スクロール */

/* 見出しと操作: .flex.justify-content-between を .heading-area と同じ並びに（h1 24px/600、右に 期間送り → ボタン群）。
   期間送り（nav[data-testid=period-pager]）は margin-left: auto で右の群へ寄せる（S12 の仮置きを直す）。 */
.flex.justify-content-between {
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);

  > h1 {
    margin: 0;
    font-size: var(--text-title);
    font-weight: var(--font-weight-strong);
    line-height: 1.3;
  }
  > [data-testid="period-pager"] {
    margin-left: auto;
  }
  > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);

    > .btn {
      margin: 0 !important;
    }
  }
}
.heading-area .title-area h1 {
  font-size: var(--text-title);
}

/* 検索バー: .content の先頭の form（.form-row を持つもの）を surface-sunken の帯に。ラベルは 13px muted（.search-label） */
.content > form:has(> .form-row) {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4) var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background-color: var(--color-surface-sunken);

  .form-row {
    align-items: center;
  }
  .form-row + .form-row {
    margin-top: var(--space-2);
  }
  .form-control:not(.btn-primary) {
    height: var(--size-control);
    background-color: var(--color-surface-card);
  }
  .form-control.btn-primary,
  .btn {
    min-height: var(--size-control);
    margin-bottom: var(--space-2);
  }
}
.search-label {
  padding: 0 var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-label);
  font-weight: var(--font-weight-strong);
  text-align: right;
}

/* 空状態の行（文言は現状のまま。カンディの絵は S29） */
.table .table-empty {
  padding: var(--space-5) var(--space-3);
  color: var(--color-text-muted);
  text-align: center;
}

/* 390: 表は横にスクロールさせ、1 文字ずつ折れないようにする */
@media (max-width: 767px) {
  .content {
    overflow-x: auto;
  }
  .content .table td {
    word-break: normal;
    white-space: nowrap;
  }
}

/* I-3 / I-4 — DS 3 4-3・4-4: 定義の無かったクラスに見た目を与える。クラス名は変えない（フック専用の 5 つを含む） */

/* 行内ボタン: 見た目は 30px のまま、押せる領域を上下 5px 延ばして 40px にする（表の中だけ）。
   DS 3 の 44px（上下 7px）だと、1 セルに .mt-2（5.8px）で積んだ .button-area の下の列が上の列の面を 1.2px 覆う。 */
.table .btn-sm,
.table .btn-small {
  position: relative;
}
.table .btn-sm::before,
.table .btn-small::before {
  content: "";
  position: absolute;
  inset: -5px -2px;
}

/* サマリーカードの値（ai_usage_dashboard の .card-text） */
.fs-3,
.fs-4 {
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.fs-3 {
  font-size: var(--text-display);
}
.fs-4 {
  font-size: var(--text-title);
}

/* 横並びの radio の label（pd_companies / staff_accounts の form） */
.form-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
  margin-bottom: 0;
  font-weight: var(--font-weight-normal);
  cursor: pointer;
}

/* 写真 */
.img-rounded {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container);
  object-fit: cover;
}

/* 表の既定の揃え（名前に反して中央寄せにしない）と、操作列の縦位置 */
tbody.ta_center {
  text-align: left;
}
td.va_middle {
  vertical-align: middle;
}

/* 行内ボタンの並び: margin ではなく gap で間隔を取る */
.button-area {
  gap: 6px;

  > span {
    margin-right: 0;
  }
}
.button-margin {
  margin-left: 6px;
}
.button-text {
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}
.document-button-area {
  display: inline-flex;
  gap: 6px;
  vertical-align: middle;
}

/* 通知時間設定の時刻 select */
.time-select {
  align-items: center;
  gap: var(--space-2);

  select {
    width: 100px;
  }
}

/* 口座追加フォーム（pd_companies/show） */
.bank-create {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* 書類既定値のタブ（button 要素のまま）とメール 3 画面のタブの中身 */
.document-defaults-tabs {
  border-bottom-color: var(--color-border);
}
.document-defaults-tab-btn {
  min-height: var(--size-control);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 0;
  margin-bottom: -1px;
  color: var(--color-action);
  font-size: var(--text-control);
  font-weight: var(--font-weight-normal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.document-defaults-tab-btn:hover {
  background-color: var(--color-action-tint);
}
.document-defaults-tab-btn.is-active {
  background-color: transparent;
  border: 0;
  box-shadow: inset 0 -2px 0 var(--color-action);
  font-weight: var(--font-weight-strong);
  text-decoration: none;
}
.email-tab-pane,
.mailing-list-tab-pane,
.template-tab-pane {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container);
  background-color: var(--color-surface-card);
}

/* contact_form: a table row that opens its record on click (row_link_controller.js). */
.table tr.row-link {
  cursor: pointer;
}

/* contact_form: an inquiry's status on the list, as a two-way segmented control.
   The current state takes its status colour; the other is a button. */
.status-segment {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  overflow: hidden;
  background-color: var(--color-surface-sunken);
}
.status-segment > * + * {
  border-left: 1px solid var(--color-border);
}
.status-segment_form {
  display: flex;
  margin: 0;
}
.status-segment_item {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-control-sm);
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-label);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}
button.status-segment_item {
  cursor: pointer;
}
button.status-segment_item:hover {
  background-color: var(--color-action-tint);
  color: var(--color-action);
}
button.status-segment_item:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: -2px;
}
.status-segment_item.is-unhandled {
  background-color: var(--color-status-pending-bg);
  color: var(--color-status-pending);
}
.status-segment_item.is-handled {
  background-color: var(--color-status-approved-bg);
  color: var(--color-status-approved);
}