/* ==========================================================================
   admin-detail.css
   Presentation layer for "detail" screens (paper detail, review detail, ...).
   Scoped to body.admin-area so the public site is untouched.
   ========================================================================== */

body.admin-area {
  --pv-radius: 3px;
  --pv-gap: 20px;
  --pv-label: 200px;
}

/* --- page header ---------------------------------------------------------- */

.pv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: var(--pv-gap);
  padding: 18px 20px;
  border: 1px solid var(--admin-line);
  border-left: 4px solid var(--admin-mint);
  border-radius: var(--pv-radius);
  background: #fff;
  box-shadow: 0 7px 22px rgba(31, 45, 61, .04);
}

.pv-head__main {
  min-width: 0;
  flex: 1 1 320px;
}

.pv-head__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--admin-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pv-head__title {
  margin: 0;
  color: #253242;
  font-family: var(--font-heading, "Anuphan", "IBM Plex Sans Thai", sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  word-break: break-word;
}

.pv-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.pv-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* --- card ----------------------------------------------------------------- */

.pv-card {
  margin-bottom: var(--pv-gap);
  border: 1px solid var(--admin-line);
  border-radius: var(--pv-radius);
  background: #fff;
  box-shadow: 0 7px 22px rgba(31, 45, 61, .04);
  overflow: hidden;
}

.pv-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--admin-line);
  background: #fbfcfe;
}

.pv-card__title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #344357;
  font-family: var(--font-heading, "Anuphan", "IBM Plex Sans Thai", sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.pv-card__title i {
  color: var(--admin-mint);
  font-size: 17px;
}

.pv-card__body {
  padding: 6px 20px 18px;
}

.pv-card__body--flush {
  padding: 0;
}

.pv-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--admin-line);
  background: #fbfcfe;
}

.pv-card__foot--split {
  justify-content: space-between;
}

.pv-card--accent-cyan .pv-card__head { border-left: 4px solid var(--admin-cyan); }
.pv-card--accent-mint .pv-card__head { border-left: 4px solid var(--admin-mint); }
.pv-card--accent-yellow .pv-card__head { border-left: 4px solid var(--admin-yellow); }
.pv-card--accent-orange .pv-card__head { border-left: 4px solid var(--admin-orange); }

/* --- definition rows ------------------------------------------------------ */

.pv-rows {
  margin: 0;
}

.pv-row {
  display: grid;
  grid-template-columns: var(--pv-label) minmax(0, 1fr);
  gap: 6px 24px;
  padding: 14px 0;
  border-bottom: 1px solid #eef1f6;
}

.pv-row:last-child {
  border-bottom: 0;
}

.pv-row__label {
  margin: 0;
  padding-top: 2px;
  color: #63718a;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

.pv-row__label small {
  display: block;
  margin-top: 2px;
  color: var(--admin-muted);
  font-size: 11.5px;
  font-weight: 500;
}

.pv-row__value {
  min-width: 0;
  color: #263447;
  font-size: 14.5px;
  line-height: 1.65;
  word-break: break-word;
}

.pv-row__value > :last-child {
  margin-bottom: 0;
}

.pv-row--stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.pv-row--highlight .pv-row__value {
  color: #97294a;
  font-weight: 600;
}

.pv-empty {
  color: #a3adbb;
  font-style: normal;
}

/* rich text coming out of the editor */
.pv-rich {
  font-size: 14.5px;
  line-height: 1.75;
}

.pv-rich p:last-child {
  margin-bottom: 0;
}

.pv-rich img {
  max-width: 100%;
  height: auto;
}

/* --- chips ---------------------------------------------------------------- */

.pv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid #dfe6ef;
  border-radius: 999px;
  background: #f5f8fb;
  color: #4d5c70;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
}

.pv-chip--mint { border-color: #bfe8da; background: #edfaf5; color: #1f7f64; }
.pv-chip--cyan { border-color: #c2e4ec; background: #eef9fc; color: #1b6c7e; }
.pv-chip--yellow { border-color: #f3e0a6; background: #fdf7e4; color: #8a6a05; }
.pv-chip--orange { border-color: #f8d3b6; background: #fef3ea; color: #a3521a; }
.pv-chip--muted { border-color: #e0e5ec; background: #f4f6f9; color: #6d7c8f; }

/* --- people --------------------------------------------------------------- */

.pv-people {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.pv-person {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--admin-line);
  border-radius: var(--pv-radius);
  background: #fbfcfe;
}

.pv-person__avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e6eef7;
  color: #5a6b80;
  font-size: 13px;
  font-weight: 700;
}

.pv-person--lead .pv-person__avatar {
  background: var(--admin-mint);
  color: #fff;
}

.pv-person__body {
  min-width: 0;
  flex: 1;
}

.pv-person__role {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--admin-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pv-person__name {
  color: #263447;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  word-break: break-word;
}

.pv-person__affil {
  margin-top: 2px;
  color: #6b7a8d;
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
}

.pv-person__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

/* --- files ---------------------------------------------------------------- */

.pv-files {
  display: grid;
  gap: 10px;
}

.pv-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid var(--admin-line);
  border-radius: var(--pv-radius);
  background: #fbfcfe;
}

.pv-file__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pv-radius);
  background: #edf7f3;
  color: var(--admin-mint);
  font-size: 17px;
}

.pv-file__body {
  min-width: 0;
  flex: 1 1 190px;
}

.pv-file__name {
  color: #344357;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  word-break: break-all;
}

.pv-file__hint {
  margin-top: 2px;
  color: var(--admin-muted);
  font-size: 12.5px;
}

/* --- notes ---------------------------------------------------------------- */

.pv-note {
  padding: 13px 16px;
  border: 1px solid var(--admin-line);
  border-left: 4px solid var(--admin-cyan);
  border-radius: var(--pv-radius);
  background: #f7fbfd;
  color: #35485e;
  font-size: 14px;
  line-height: 1.7;
}

.pv-note > :last-child {
  margin-bottom: 0;
}

.pv-note--danger {
  border-left-color: var(--admin-orange);
  background: #fef5ef;
  color: #8c421a;
}

.pv-note--warning {
  border-left-color: var(--admin-yellow);
  background: #fdf9ec;
  color: #7a6208;
}

.pv-note--mint {
  border-left-color: var(--admin-mint);
  background: #f1faf7;
  color: #1f6f59;
}

.pv-note__title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  font-size: 13.5px;
  font-weight: 700;
}

/* --- action row ------------------------------------------------------------ */

.pv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-top: 14px;
}

.pv-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 575.98px) {
  .pv-actions { flex-direction: column; align-items: stretch; }
  .pv-actions .btn { justify-content: center; width: 100%; }
}

/* --- form blocks ---------------------------------------------------------- */

.pv-field {
  display: grid;
  grid-template-columns: var(--pv-label) minmax(0, 1fr);
  gap: 8px 24px;
  padding: 14px 0;
  border-bottom: 1px solid #eef1f6;
}

.pv-field:last-child {
  border-bottom: 0;
}

.pv-field--stack {
  grid-template-columns: minmax(0, 1fr);
}

.pv-field__label {
  padding-top: 9px;
  color: #63718a;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

.pv-field__label .pv-req {
  color: var(--admin-orange);
}

.pv-field__label small {
  display: block;
  margin-top: 2px;
  color: var(--admin-muted);
  font-size: 11.5px;
  font-weight: 500;
}

.pv-field__control {
  min-width: 0;
}

.pv-field__hint {
  margin-top: 6px;
  color: var(--admin-muted);
  font-size: 12.5px;
  line-height: 1.6;
}

body.admin-area .pv-field__control textarea.form-control {
  min-height: 118px;
}

/* --- choice cards --------------------------------------------------------- */

.pv-choices {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.pv-choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid #dce3ec;
  border-radius: var(--pv-radius);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.pv-choice:hover {
  border-color: #bcd7cd;
  background: #fbfefd;
}

.pv-choice input {
  margin: 3px 0 0;
  flex: 0 0 auto;
  accent-color: var(--admin-mint);
}

.pv-choice__text strong {
  display: block;
  color: #344357;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
}

.pv-choice__text small {
  display: block;
  margin-top: 3px;
  color: var(--admin-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.pv-choice:has(input:checked) {
  border-color: var(--admin-mint);
  background: #f2faf7;
  box-shadow: 0 0 0 3px rgba(70, 195, 159, .13);
}

.pv-choice--danger:has(input:checked) {
  border-color: var(--admin-orange);
  background: #fef5ef;
  box-shadow: 0 0 0 3px rgba(244, 125, 45, .13);
}

/* --- repeating slot list (reviewer pickers, etc.) ------------------------- */

.pv-slots {
  display: grid;
  gap: 10px;
}

.pv-slot {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.pv-slot__no {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef2f7;
  color: #5f6f84;
  font-size: 12.5px;
  font-weight: 700;
}

.pv-slot--optional .pv-slot__no {
  background: #f4f6f9;
  color: #9aa6b5;
}

/* bootstrap-select needs to fill the slot */
.pv-slot .bootstrap-select,
.pv-field__control .bootstrap-select {
  width: 100% !important;
}

body.admin-area .bootstrap-select > .btn {
  border: 1px solid #dce3ec;
  border-radius: var(--pv-radius);
  background: #fff;
  color: #263447;
  font-weight: 500;
  text-align: left;
}

/* --- misc ----------------------------------------------------------------- */

.pv-stack {
  display: grid;
  gap: 12px;
}

.pv-divider {
  height: 1px;
  margin: 4px 0;
  background: #eef1f6;
}

.pv-muted {
  color: var(--admin-muted);
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 767.98px) {
  body.admin-area {
    --pv-gap: 16px;
  }

  .pv-row,
  .pv-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .pv-field__label {
    padding-top: 0;
  }

  .pv-card__head,
  .pv-card__foot {
    padding: 13px 15px;
  }

  .pv-card__body {
    padding: 4px 15px 15px;
  }

  .pv-head {
    padding: 15px;
  }

  .pv-card__foot {
    justify-content: stretch;
  }

  .pv-card__foot .btn {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   Legacy review-history panels.
   These blocks still differ page by page, so they keep their markup and are
   tidied here instead: panel headings, round tables, attachments and the
   hard-coded <font color="#FF0004"> highlights.
   ========================================================================== */

body.admin-area .panel {
  overflow: hidden;
}

body.admin-area .panel-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fbfcfe;
}

body.admin-area .panel-heading:before {
  content: "\f473";           /* bi-list-check */
  color: var(--admin-mint);
  font-family: bootstrap-icons;
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
}

body.admin-area .panel-primary .panel-heading:before { content: "\f28b"; color: #6f82c8; }  /* clipboard-check */
body.admin-area .panel-danger .panel-heading:before  { content: "\f41f"; color: #e8853f; }  /* hourglass-split */
body.admin-area .panel-warning .panel-heading:before { content: "\f4b3"; color: #c79a10; }  /* paperclip */
body.admin-area .panel-success .panel-heading:before { content: "\f26a"; }                  /* check-circle-fill */

/* the bare date strip that sits above each round table */
body.admin-area .panel-body > .col-md-12 {
  width: 100%;
  max-width: 100%;
  padding: 0 0 12px;
  color: #5c6b80;
  font-size: 13.5px;
}

body.admin-area .panel-body > .col-md-12:empty {
  display: none;
  padding: 0;
}

/* round tables read as stacked entries rather than a data grid */
body.admin-area .panel-body .table-striped {
  margin-bottom: 0;
  border: 1px solid var(--admin-line);
  border-radius: var(--pv-radius);
}

body.admin-area .panel-body .table-striped > tbody > tr > td {
  padding: 16px 18px;
  border-color: #eef1f6;
  line-height: 1.7;
  vertical-align: top;
}

/* these tables hold prose blocks, not data rows - striping only adds noise */
body.admin-area .panel-body .table-striped {
  --bs-table-striped-bg: transparent;
  --bs-table-striped-color: inherit;
}

body.admin-area .panel-body .table-striped > tbody > tr > td,
body.admin-area .panel-body .table-striped > tbody > tr:first-child > td {
  background: #fff;
  box-shadow: none;
  color: inherit;
  font-weight: inherit;
}

body.admin-area .panel-body .table-striped > tbody > tr:last-child > td {
  border-bottom: 0;
}

body.admin-area .panel-body h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid #eef1f6;
  color: #344357;
  font-family: var(--font-heading, "Anuphan", "IBM Plex Sans Thai", sans-serif);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
}

body.admin-area .panel-body h4 u {
  text-decoration: none;
}

body.admin-area .panel-body h4:before {
  content: "";
  width: 4px;
  height: 15px;
  flex: 0 0 4px;
  border-radius: 2px;
  background: var(--admin-mint);
}

body.admin-area .panel-body strong {
  color: #45566c;
}

/* normalise the hard-coded red highlights to the palette */
body.admin-area .panel-body font[color],
body.admin-area .pv-card font[color] {
  color: #c2571b !important;
  font-weight: 700;
}

/* attachment links inside the round tables */
body.admin-area .panel-body .table .btn {
  margin-top: 6px;
  margin-right: 6px;
}

body.admin-area .panel-body .table .btn i,
body.admin-area .panel-body .table .btn .glyphicon {
  margin-right: 2px;
}

/* trailing <br /><br /> spacers left over from the old markup */
body.admin-area .panel-body > br,
body.admin-area .col-md-9 > br {
  display: none;
}

body.admin-area .panel-body .table td > br:last-child {
  display: none;
}

/* --- ปุ่มบันทึกร่าง ---------------------------------------------------------
   ใช้สีฟ้าเขียว (cyan) ให้ต่างจากปุ่มส่งจริงที่เป็นสีเหลืองอย่างชัดเจน
   ผู้ทรงคุณวุฒิจะได้ไม่กดสลับกัน เพราะปุ่มส่งจริงกดแล้วแก้ไม่ได้อีก
   -------------------------------------------------------------------------- */

body.admin-area .btn-draft {
  padding: 10px 22px;
  /* เฉดเข้มกว่า --admin-cyan เพื่อให้ตัวหนังสือขาวอ่านชัด
     (ขาวบน #52b9cf ได้ contrast แค่ 2.28 ซึ่งต่ำกว่ามาตรฐาน WCAG 4.5) */
  border: 1px solid #17788f;
  background: #17788f;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(23, 120, 143, .34);
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}

body.admin-area .btn-draft:hover,
body.admin-area .btn-draft:focus {
  border-color: #106175;
  background: #106175;
  color: #fff;
  box-shadow: 0 4px 14px rgba(23, 120, 143, .45);
}

body.admin-area .btn-draft:active {
  transform: translateY(1px);
}

body.admin-area .btn-draft:disabled {
  background: #6f9fac;
  border-color: #6f9fac;
  color: #fff;
  box-shadow: none;
  cursor: progress;
  opacity: 1;
}

body.admin-area .btn-draft i {
  font-size: 16px;
}

/* --- accordion ที่ยกมาจาก Bootstrap 3 ---------------------------------------
   markup เดิมพึ่งพา .panel-primary ที่มีพื้นสีน้ำเงินและตัวหนังสือขาว
   พอธีมใหม่เปลี่ยนหัว panel เป็นพื้นขาว ตัวหนังสือขาวจึงมองไม่เห็น
   ที่นี่กำหนดสีใหม่ให้อ่านออก และทำให้ดูเป็นปุ่มกดได้
   -------------------------------------------------------------------------- */

body.admin-area .panel-title {
  margin: 0;
  font-size: 16px;
}

body.admin-area .panel-title a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #344357;
  font-weight: 700;
  text-decoration: none;
}

body.admin-area .panel-title a:hover {
  color: var(--admin-mint);
}

/* ลูกศรบอกสถานะเปิด/ปิด */
body.admin-area .panel-title a:after {
  content: "\f282";               /* bi-chevron-down */
  margin-left: auto;
  color: #9aa6b5;
  font-family: bootstrap-icons;
  font-size: 13px;
  font-weight: normal;
  transition: transform .18s ease;
}

body.admin-area .panel-title a.collapsed:after {
  transform: rotate(-90deg);
}

/* หัว panel ของ accordion กดได้ทั้งแถบ */
body.admin-area .panel-heading[role="tab"] {
  cursor: pointer;
}

body.admin-area .panel-heading[role="tab"]:hover {
  background: #f5f8fb;
}