/* ─────────────────────────────────────────────────────────────
   tools/salary-certificate — หนังสือรับรองเงินเดือน
   ───────────────────────────────────────────────────────────── */

/* Widen the site container for this tool */
body.tool-salary-certificate .container {
  max-width: 1120px;
}

/* Back link */
.back-link {
  display: inline-block;
  max-width: 1080px;
  width: 100%;
  margin: 20px auto 0;
  padding: 0 16px;
  font-size: 13px;
  color: #6b7280;
  text-decoration: none;
}
.back-link:hover { color: #111827; text-decoration: underline; }

/* ═══ SEO Hero ═══ */
.sc-hero {
  max-width: 1080px;
  margin: 16px auto 16px;
  padding: 24px 20px 4px;
  text-align: center;
}
.sc-hero-tag {
  display: inline-block;
  padding: 4px 12px;
  background: #fef3c7;
  color: #78350f;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}
.sc-hero-title {
  margin: 0 0 12px;
  font-size: clamp(21px, 3.4vw, 28px);
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.sc-hero-title-sub {
  display: block;
  font-size: clamp(13px, 2vw, 16px);
  font-weight: 500;
  color: #6b7280;
  margin-top: 4px;
  letter-spacing: 0;
}
.sc-hero-desc {
  margin: 0 auto;
  max-width: 760px;
  color: #4b5563;
  font-size: 13.5px;
  line-height: 1.7;
}
.sc-hero-desc strong { color: #111827; font-weight: 600; }

.sc-page {
  max-width: 1080px;
  margin: 8px auto 60px;
  padding: 0 16px;
}

/* ═══ Toolbar ═══ */
.sc-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.sc-spacer { flex: 1; }

.sc-lang-toggle {
  display: inline-flex;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  padding: 2px;
  background: #f3f4f6;
  gap: 2px;
}
.sc-lang-toggle button {
  padding: 6px 14px;
  font-size: 13px;
  background: transparent;
  border: none;
  color: #4b5563;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  transition: all .15s;
}
.sc-lang-toggle button:hover { color: #111827; }
.sc-lang-toggle button.active {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  font-weight: 500;
}

.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.sc-btn:hover { border-color: #9ca3af; background: #f9fafb; }
.sc-btn.primary {
  background: #111827;
  color: #fff;
  border-color: #111827;
}
.sc-btn.primary:hover { background: #000; }

/* ═══ Letter (A4) ═══ */
.sc-doc {
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 20mm 22mm;
  color: #111827;
  /* TH Sarabun New (Windows/Thai standard) → Sarabun (Google fallback) */
  font-family: 'TH Sarabun New', 'TH SarabunPSK', 'Sarabun', 'Noto Sans Thai', system-ui, sans-serif;
  font-size: 14pt;
  line-height: 1.5;
  min-height: 1123px;   /* A4 = 297mm ≈ 1123px @ 96dpi */
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06);

  /* flex column → footer goes to bottom of A4 */
  display: flex;
  flex-direction: column;
}
/* บังคับ footer ให้อยู่ล่างสุด: ให้ signature ดึงพื้นที่ที่เหลือ */
.sc-doc > .sc-sig { margin-bottom: auto; }

/* ═══ Yellow highlighted editable fields ═══ */
.sc-hl {
  background: #fef08a;
  border: 1px solid transparent;
  padding: 2px 8px;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border-radius: 3px;
  transition: all .12s;
  min-width: 40px;
}
.sc-hl:hover { background: #fde047; }
.sc-hl:focus {
  outline: none;
  background: #fde047;
  border-color: #eab308;
}

/* ═══ Header ═══ */
.sc-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: start;
  margin-bottom: 40px;
}

.sc-logo-slot {
  cursor: pointer;
  min-height: 70px;
  max-width: 260px;
  display: flex;
  align-items: center;
}
.sc-logo-slot img {
  max-height: 80px;
  max-width: 260px;
  display: none;
  background: #fef08a;
  padding: 6px 12px;
  border-radius: 4px;
}
.sc-logo-slot.has-logo img { display: block; }
.sc-logo-slot.has-logo .sc-logo-placeholder { display: none; }

.sc-logo-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border: 2px dashed #d1d5db;
  border-radius: 6px;
  color: #9ca3af;
  font-size: 13px;
  transition: all .15s;
}
.sc-logo-slot:hover .sc-logo-placeholder {
  border-color: #9ca3af;
  color: #4b5563;
}

.sc-docno {
  text-align: right;
  font-size: 12pt;
  min-width: 200px;
}
.sc-docno-in {
  text-align: right;
  font-weight: 600;
  min-width: 160px;
  font-size: 12pt;
}

/* ═══ Title ═══ */
.sc-title {
  font-size: 20pt;
  font-weight: 700;
  text-align: center;
  margin: 0 0 26px;
  letter-spacing: 0.02em;
  color: #111827;
}

/* ═══ Body ═══ */
.sc-body { margin-bottom: 24px; }

.sc-intro {
  margin: 0 0 24px;
  text-indent: 40px;
  text-align: left;      /* ← ไม่ใช้ justify กันช่องว่างถูกยืด ทำให้ช่องบริษัทไม่ชิดซ้าย */
  line-height: 2.1;
}
/* auto-sized by JS · ตัวหนังสือชิดซ้ายเสมอ */
.sc-intro .sc-emp-name { min-width: 80px; max-width: 100%; text-align: left; }
.sc-intro .sc-company-intro { min-width: 100px; max-width: 100%; text-align: left; }

/* Details grid */
.sc-details {
  margin: 24px 0 24px 60px;
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  column-gap: 16px;
  row-gap: 10px;
  align-items: baseline;
}
.sc-row {
  display: contents;
}
.sc-row-lbl {
  font-weight: 500;
  color: #111827;
  min-width: 100px;
}
.sc-row-colon { color: #6b7280; }
.sc-row input.sc-hl { min-width: 180px; }

.sc-salary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.sc-salary-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sc-salary-num {
  text-align: left;
  min-width: 40px;     /* auto-sized by JS ตามความยาวตัวเลข */
}
.sc-salary-unit {
  min-width: 32px;     /* auto-sized by JS */
  text-align: left;
}
.sc-salary-text {
  min-width: 60px;
  max-width: 100%;
}

.sc-note {
  margin: 24px 0;
  text-indent: 40px;
  text-align: justify;
  line-height: 2;
}
.sc-days {
  min-width: 28px;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}

.sc-issue {
  margin: 24px 0 0 60px;
}
.sc-issue .sc-hl { min-width: 200px; text-align: center; }

/* ═══ Signature ═══ */
.sc-sig {
  text-align: right;
  margin: 20px 60px 40px 0;
  padding-top: 20px;
}
.sc-sig-name {
  display: inline-block;
  min-width: 200px;
  text-align: center;
  margin-bottom: 4px;
}
.sc-sig-title {
  color: #4b5563;
  font-size: 12pt;
}
.sc-sig-title input {
  min-width: 100px;
  text-align: center;
  font-size: 12pt;
}

/* ═══ Footer (pushed to bottom via margin-top: auto) ═══ */
.sc-footer {
  border-top: 1px solid #e5e7eb;
  padding-top: 14px;
  margin-top: auto;   /* ← push to bottom of flex parent */
  font-size: 12pt;
  color: #4b5563;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sc-footer .sc-hl {
  display: block;
  min-width: auto;
  width: 100%;
  font-size: 12pt;
  padding: 2px 6px;
}
.sc-footer .sc-company { font-weight: 600; color: #111827; font-size: 13pt; }
.sc-footer .sc-address,
.sc-footer .sc-contact { font-size: 11.5pt; }

/* ═══ SEO area (accordion) ═══ */
.sc-seo {
  margin-top: 40px;
  padding: 8px 24px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #374151;
  font-size: 14px;
  line-height: 1.7;
}
.sc-seo-head {
  margin: 16px 0 6px;
  font-size: 17px;
  color: #111827;
  font-weight: 600;
}

.sc-acc { border-bottom: 1px solid #f0f1f3; }
.sc-acc:last-child { border-bottom: none; }
.sc-acc summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 34px 15px 2px;
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: #1f2937;
  transition: color .15s;
}
.sc-acc summary:hover { color: #111827; }
.sc-acc summary::-webkit-details-marker { display: none; }
.sc-acc summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: #9ca3af;
  transition: transform .2s, color .2s;
  line-height: 1;
}
.sc-acc[open] summary { color: #111827; font-weight: 600; }
.sc-acc[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  color: #d97706;
}
.sc-acc-body {
  padding: 0 2px 18px;
  font-size: 14px;
  color: #4b5563;
  animation: sc-acc-in .18s ease;
}
@keyframes sc-acc-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sc-acc-body p { margin: 0 0 10px; }
.sc-acc-body p:last-child { margin: 0; }
.sc-acc-body strong { color: #111827; font-weight: 600; }
.sc-acc-body ol, .sc-acc-body ul { padding-left: 22px; margin: 4px 0; }
.sc-acc-body li { margin: 5px 0; }
.sc-acc-body a { color: #1d4ed8; text-decoration: none; }
.sc-acc-body a:hover { text-decoration: underline; }
.sc-related li { margin: 7px 0; }

/* ═══ EN language adjustments ═══ */
body.sc-lang-en .sc-intro,
body.sc-lang-en .sc-note,
body.sc-lang-en .sc-issue { text-indent: 0; }

/* ═══ Responsive ═══ */
@media (max-width: 700px) {
  .sc-doc { padding: 30px 24px; font-size: 14px; }
  .sc-head { grid-template-columns: 1fr; }
  .sc-docno { text-align: left; }
  .sc-details { margin-left: 0; grid-template-columns: 1fr; }
  .sc-row-lbl { min-width: auto; }
  .sc-row-colon { display: none; }
  .sc-sig { margin-right: 0; text-align: left; }
  .sc-issue { margin-left: 0; }
}

/* ═══ PRINT ═══ */
@media print {
  @page { size: A4 portrait; margin: 15mm 18mm; }
  html, body { background: #fff !important; height: auto; margin: 0; padding: 0; }
  /* reset site container padding/margin ที่ดันเนื้อหาลง */
  main.container, .container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .sc-page { max-width: none; margin: 0; padding: 0; }
  .sc-toolbar, .sc-seo, .no-print { display: none !important; }

  /* remove global site chrome */
  header:not(.sc-head), footer:not(.sc-footer), .site-header, .site-footer, nav { display: none !important; }

  .sc-doc {
    border: none;
    box-shadow: none;
    padding: 0;
    font-size: 12pt;
    line-height: 1.45;
    /* 1 หน้า A4 — printable = 297 - (15×2) = 267mm · เผื่อ safety ให้ footer ไม่ตก */
    min-height: 248mm;
    display: flex;
    flex-direction: column;
  }
  .sc-doc > .sc-sig { margin-bottom: auto; }
  /* footer ไม่ให้ชิดขอบเกินไป + กันถูกตัด */
  .sc-footer { padding-bottom: 4mm; }
  html, body { height: auto; }

  /* remove yellow highlight on print - looks like plain text */
  .sc-hl {
    background: transparent !important;
    border-color: transparent !important;
    padding: 0 2px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .sc-hl:focus { background: transparent !important; }

  /* logo: keep yellow bg optional */
  .sc-logo-slot img {
    background: transparent !important;
    padding: 0;
  }
  .sc-logo-slot:not(.has-logo) { display: none; }

  /* scale headings/footer smaller for print */
  .sc-title { font-size: 17pt; margin-bottom: 22px; }
  .sc-docno, .sc-docno-in { font-size: 11pt; }
  .sc-sig-title, .sc-sig-title input { font-size: 11pt; }
  .sc-footer, .sc-footer .sc-hl { font-size: 11pt; }
  .sc-footer .sc-company { font-size: 12pt; }
  .sc-footer .sc-address, .sc-footer .sc-contact { font-size: 10.5pt; }

  /* details margin */
  .sc-details { margin-left: 40px; }
  .sc-issue { margin-left: 40px; }
  .sc-sig { margin-right: 40px; }
}