/* Settlement history: calm, information-led management workspace. */
#admin #periods-pane { background: linear-gradient(180deg, #fff 0%, #fcfdff 100%); }

#admin .period-directory-tools {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
  padding: 11px 13px;
  border: 1px solid #e4eaf2;
  border-radius: 13px;
  background: #f8fafc;
}

#admin .period-directory-tools label { width: min(100%, 360px); }
#admin .period-directory-tools input { min-height: 40px; margin-top: 5px; background: #fff; }

#admin .period-list { gap: 9px; margin-top: 15px; }

#admin .period-row {
  position: relative;
  min-height: 82px;
  padding: 16px 17px 16px 20px;
  border: 1px solid #e1e7ef;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(22, 42, 76, .025);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#admin .period-row::before {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #213a5b;
}

#admin .period-row:hover {
  transform: translateY(-1px);
  border-color: #cbd7e5;
  box-shadow: 0 10px 22px rgba(22, 42, 76, .07);
}

#admin .period-row-info { gap: 8px; }
#admin .period-row-info b { color: #1e314e; font-size: 14px; letter-spacing: -.02em; }

#admin .period-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: #7b899c;
  font-size: 11px;
}

#admin .period-row-meta span { color: inherit; font-size: inherit; }
#admin .period-row-meta .period-row-count {
  padding: 4px 7px;
  border-radius: 6px;
  background: #edf2f7;
  color: #38506d;
  font-weight: 800;
}

#admin .period-row-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 95px;
  justify-content: center;
  padding: 9px 11px;
  border-color: #d7e0eb;
  background: #f8fafc;
  color: #314965;
}

#admin .period-row-action span { font-size: 14px; line-height: 1; }
#admin .period-row-action:hover { border-color: #9dacbd; background: #f0f4f8; color: #1f3855; }

#admin .period-pagination {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #edf1f5;
  font-size: 12px;
}

#admin .period-editor {
  margin-top: 20px;
  border-color: #d8e1eb;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(23, 42, 73, .045);
}

#admin .period-editor-heading { padding-bottom: 15px; border-bottom: 1px solid #edf1f5; }
#admin .period-editor-heading b { color: #1f344f; font-size: 16px; }
#admin .period-editor-heading span { color: #7b899a; }

#admin .period-editor-kicker {
  display: block;
  margin-bottom: 5px;
  color: #5376a5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

#admin .period-editor-heading .period-close {
  white-space: nowrap;
  min-height: 38px;
  padding: 8px 12px;
}

#admin .period-preview {
  border-color: #e0e6ee;
  border-radius: 12px;
  background: #fbfcfe;
}

#admin .period-preview-table-wrap { border-color: #e1e7ef; border-radius: 10px; }
#admin .period-preview-table th { background: #f2f5f8; color: #516278; }
#admin .period-preview-table .period-preview-pay { color: #274362; }

#admin .period-replace { border-color: #e1e7ef; border-radius: 12px; background: #fbfcfe; }

@media (max-width: 650px) {
  #admin .period-directory-tools { justify-content: stretch; padding: 10px; }
  #admin .period-directory-tools label { width: 100%; }
  #admin .period-row { align-items: stretch; gap: 13px; padding: 15px 15px 15px 19px; }
  #admin .period-row-action { width: 100%; min-height: 40px; }
  #admin .period-row-meta { gap: 6px; }
  #admin .period-editor { padding: 15px; }
}