/* Compact attendance confirmation signature layout.
 * The existing meeting page keeps ownership of participant data; this file
 * only changes presentation for the annotated #meeting-attendance section.
 */
.cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) {
  margin-top: 0.65rem !important;
  overflow: visible !important;
}

.cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2)::before {
  content: '簽署：';
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgb(55 65 81);
}

.dark .cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2)::before {
  color: rgb(209 213 219);
}

.cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2)::after {
  content: '確認日期：______年______月______日';
  display: block;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgb(75 85 99);
}

.dark .cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2)::after {
  color: rgb(209 213 219);
}

.cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) > div {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.8rem 1rem !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* Hide the old 姓名／簽署／日期 table heading. */
.cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) > div > div:first-child {
  display: none !important;
}

/* Each original participant row becomes one compact signature slot. */
.cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) > div > div:not(:first-child) {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.28rem !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

/* Name sits below the signing line. */
.cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) > div > div:not(:first-child) > div:first-child {
  order: 2;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: rgb(31 41 55);
}

.dark .cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) > div > div:not(:first-child) > div:first-child {
  color: rgb(229 231 235);
}

/* Signature line becomes the first element in each slot. */
.cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) > div > div:not(:first-child) > div:nth-child(2) {
  order: 1;
  width: 100%;
  min-height: 1.55rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) > div > div:not(:first-child) > div:nth-child(2) > span {
  width: 100% !important;
  max-width: 8.5rem !important;
  height: 1.45rem;
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: rgb(107 114 128) !important;
}

/* Per-person date cells are replaced by one shared confirmation date. */
.cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) > div > div:not(:first-child) > div:nth-child(3) {
  display: none !important;
}

@media (max-width: 900px) {
  .cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) > div {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
}

@media print {
  .cmanage-meeting-detail #meeting-attendance {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) {
    margin-top: 1.5mm !important;
    overflow: visible !important;
  }

  .cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2)::before,
  .cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2)::after {
    color: #111827 !important;
    font-size: 9.5px !important;
  }

  .cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2)::before {
    margin-bottom: 1.5mm !important;
  }

  .cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2)::after {
    margin-top: 2.5mm !important;
  }

  .cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) > div {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2.5mm 4mm !important;
  }

  .cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) > div > div:not(:first-child) > div:first-child {
    font-size: 9.5px !important;
    color: #111827 !important;
  }

  .cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) > div > div:not(:first-child) > div:nth-child(2) {
    min-height: 7mm !important;
  }

  .cmanage-meeting-detail #meeting-attendance > div:nth-of-type(2) > div > div:not(:first-child) > div:nth-child(2) > span {
    max-width: 32mm !important;
    height: 6mm !important;
    border-bottom-color: #4b5563 !important;
  }
}