/* =======================================================
  NAME:     work-composer.css
  VERSION:  v1.4.0
  UPDATED:  2025-10-08 22:35 Asia/Bangkok by L. Mira
  DESCRIPTION:
    WorkComposer styles (Desktop + Mobile preview aligned with modal.css).
    - A4 footer guard (38px) + reserve bottom only 38px (no extra 76px)
    - Keep top padding = 38px; do not affect modal/mobile behaviors
    - Add break-inside avoid for large blocks; overflow guards

  RECENT CHANGES (keep last 3)
  - v1.4.0 | 2025-10-08 22:35 | feat | A4 footer guard: add .a4-footer (38px) + content padding-bottom=38px
  - v1.3.8 | 2025-10-04 21:40 | fix  | Match A4 padding=38px; remove slide flex override; add min-height guards
  - v1.3.7 | 2025-10-02 21:40 | fix  | Align mobile preview header & slides with modal v1.2.0; remove forced width; center A4; neutralize anim
======================================================= */

/* ---------- A4 content padding: MUST match paginate constant ---------- */
/* A4_INNER_PADDING = 10mm ≈ 38px (ตาม core.js) */
/* หมายเหตุ: ค่าหรือ "38px" นี้ต้องตรงกับ paginate constant ในไฟล์ `wc-js/core.js` (เช่น A4_INNER_PADDING).
  ถ้ายังไม่ได้ตรวจ ให้ยืนยันค่าที่ไฟล์ `wc-js/core.js` ก่อนแก้แปลงหรือเปลี่ยนค่านี้. */
/* ล่าง = 38px (พื้นที่ footer เท่านั้น ตามสเปกใหม่) */
.a4-page { position: relative !important; overflow: hidden !important; }
.a4-page .a4-content{
  padding: 38px 38px 38px 38px;   /* top/right/bottom/left = 38px; bottom = reserve footer only */
  box-sizing: border-box;
}
/* Footer แสดงเลขหน้า: 1 ซม. (38px) ชิดล่าง */
.a4-footer{
  position: absolute; inset-inline: 0; bottom: 0;
  height: 38px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1.2; color: #6b7280; background: transparent;
  pointer-events: none; user-select: none;
}
.a4-footer.is-right{ justify-content: flex-end; padding-right: 38px; }

/* กันบล็อกใหญ่โดนหั่นกลางหน้า */
.a4-content :is(h1,h2,h3,h4,figure,img,.wc-item,.a4-block){
  break-inside: avoid; page-break-inside: avoid;
}

/* รูปทั้งหมด: สีเทาอ่อน */
.wc-text-muted { color: #888; }

/* ---------- Design tokens ---------- */
:root{
  /* layout */
  --wc-maxw:980px; --wc-gap:12px; --wc-radius:12px; --wc-radius-sm:10px;
  --wc-brd:var(--ksp-border,#e5e7eb); --wc-shadow-xs:var(--ksp-shadow-xs,0 1px 2px rgba(0,0,0,.05));
  --wc-muted:#6b7280; --wc-card-bg:#fff;

  /* footer & safe-area for mobile modal */
  --wc-footer-h:64px;
  --wc-safe-b:env(safe-area-inset-bottom,0px);

  /* buttons */
  --btn-radius:12px; --btn-h:44px; --btn-font:15px;
  --btn-shadow:0 4px 12px rgba(17,24,39,.10); --btn-shadow-hover:0 8px 20px rgba(17,24,39,.12);
  --btn-press:scale(.985);
  --indigo-600:#2563eb; --indigo-700:#1d4ed8;
  --emerald-600:#16a34a; --emerald-700:#15803d;
  --rose-600:#e11d48;    --rose-700:#be123c;
  --slate-700:#334155;   --slate-800:#1f2937;

  /* fields */
  --wc-field-bg:#fff;
  --wc-field-brd:var(--wc-brd, #e5e7eb);
  --wc-field-radius:8px;
  --wc-field-h:44px;
  --wc-field-px:12px;
  --wc-field-py:10px;
  --wc-field-text:#111827;
  --wc-field-muted:#6b7280;
  --wc-field-focus:#2563eb;
}

/* ---------- Buttons / base ---------- */
.ksp-btn-info{background:#e0edff!important;color:#2563eb!important;border:1px solid #b6d4fe!important}
.ksp-btn-info:hover{background:#d0e6ff!important;border-color:#93c5fd!important}
.ksp-btn-info:active{background:#b6d4fe!important}
.ksp-btn-info:focus-visible{outline:3px solid #93c5fd!important;outline-offset:2px!important}

.ksp-btn{-webkit-tap-highlight-color:transparent;height:var(--btn-h);padding:0 16px;border-radius:var(--btn-radius);border:1px solid transparent;font-size:var(--btn-font);font-weight:600;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;background:#111827;color:#fff;box-shadow:var(--btn-shadow);transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s,transform .06s}
.ksp-btn:hover{box-shadow:var(--btn-shadow-hover)}.ksp-btn:active{transform:var(--btn-press)}
.ksp-btn:disabled,.ksp-btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.ksp-btn-primary{background:var(--indigo-600)}.ksp-btn-primary:hover{background:var(--indigo-700)}
.ksp-btn-primary:focus-visible{outline:3px solid color-mix(in oklab,var(--indigo-600) 35%,white);outline-offset:2px}
.ksp-btn-success{background:var(--emerald-600)}.ksp-btn-success:hover{background:var(--emerald-700)}
.ksp-btn-success:focus-visible{outline:3px solid color-mix(in oklab,var(--emerald-600) 35%,white);outline-offset:2px}
.ksp-btn-danger{background:var(--rose-600)}.ksp-btn-danger:hover{background:var(--rose-700)}
.ksp-btn-danger:focus-visible{outline:3px solid color-mix(in oklab,var(--rose-600) 35%,white);outline-offset:2px}
.ksp-btn-outline{background:#fff;color:var(--slate-800);border-color:color-mix(in oklab,var(--slate-700) 16%,#e5e7eb)}
.ksp-btn-outline:hover{background:#f8fafc;border-color:color-mix(in oklab,var(--slate-700) 28%,#e5e7eb)}
.ksp-btn-outline:active{background:#f1f5f9}.ksp-btn-outline:focus-visible{outline:3px solid color-mix(in oklab,var(--indigo-600) 24%,white)}
.ksp-btn-light{background:#6b7280;color:#fff;border-color:#4b5563}.ksp-btn-light:hover{background:#4b5563;border-color:#374151}
.ksp-btn-light:active{background:#374151}.ksp-btn-light:focus-visible{outline:3px solid color-mix(in oklab,#6b7280 35%,white)}
.ksp-btn-sm{height:36px;font-size:14px;padding:0 12px}.ksp-btn-lg{height:52px;font-size:16px;padding:0 20px}.ksp-btn svg{width:18px;height:18px}

/* ---------- Page / layout ---------- */
.wc-container{max-width:var(--wc-maxw);margin-inline:auto;padding:16px}
.wc-card{background:var(--wc-card-bg);border:1px solid var(--wc-brd);border-radius:var(--wc-radius);padding:16px;box-shadow:var(--wc-shadow-xs)}
.wc-row{display:flex;gap:var(--wc-gap);flex-wrap:wrap;align-items:center}
.wc-col{flex:1 1 280px;min-width:220px}
.wc-grid{display:grid;gap:var(--wc-gap)} .wc-grid-2{grid-template-columns:1fr}
@media (min-width:768px){.wc-grid-2{grid-template-columns:1fr 1fr}}
.wc-title{font-weight:700;font-size:1.1rem}
.wc-muted{color:var(--wc-muted);font-size:.9rem}
.wc-hidden{display:none!important}

.ksp-prose{line-height:1.6}
.ksp-prose h1,.ksp-prose h2,.ksp-prose h3{margin-top:1.5em;margin-bottom:.5em}
.ksp-prose p{margin-bottom:1em}

#wc-items{margin-top:8px}
.wc-item{border:1px dashed var(--wc-brd);border-radius:var(--wc-radius-sm);padding:12px;background:var(--ksp-panel,#fff)}
.wc-item header{display:flex;justify-content:space-between;align-items:center;gap:var(--wc-gap);margin-bottom:8px}
.wc-item-title{font-weight:600}
.wc-actions{display:flex;gap:8px;flex-wrap:wrap}
.wc-item figure{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.wc-image-container{position:relative;display:inline-block}
.wc-item img{max-width:160px;height:auto;border-radius:8px;border:1px solid var(--wc-brd);object-fit:cover;display:block}
.wc-image-remove{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border:0;border-radius:50%;background:#dc2626;color:#fff;font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.15);transition:all .2s;z-index:10}
.wc-image-remove:hover{background:#b91c1c;transform:scale(1.1);box-shadow:0 4px 8px rgba(0,0,0,.2)}
.wc-image-remove:active{transform:scale(.95)}
.wc-item-text .ksp-textarea{width:100%;min-height:88px}

.wc-footer-actions{background:#fff;padding:16px 0;border-top:1px solid var(--ksp-border,#e5e7eb);margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
#btn-add-item{min-width:160px}

/* ---------- App previews ---------- */
#wc-report-preview{min-height:160px;border:1px solid var(--wc-brd);border-radius:8px;padding:12px;overflow:auto;background:#fff}
#poster-panel{overflow:hidden}
#wc-poster-canvas{width:100%;max-width:100%;border:1px solid var(--wc-brd);border-radius:8px;display:block;background:#fff}
.pv-zoom{position:relative;overflow:hidden}
.zoom-inner{transform-origin:0 0;will-change:transform}
.poster-card{display:flex;flex-direction:column;gap:8px}
.poster-card__img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.10)}
.poster-card__caption{display:none}

/* ---------- Slide effects ---------- */
.pv-slide-m{transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1);opacity:1;transform:none;will-change:opacity,transform}
.pv-slide-m.slide-out-left{opacity:0;transform:translateX(-40px)}
.pv-slide-m.slide-out-right{opacity:0;transform:translateX(40px)}
.pv-slide-m.slide-in-left{opacity:1;transform:translateX(-40px);animation:slideInLeft .4s forwards}
.pv-slide-m.slide-in-right{opacity:1;transform:translateX(40px);animation:slideInRight .4s forwards}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.pv-swipe{transition:height .4s cubic-bezier(.4,0,.2,1);will-change:height}

/* ---------- Desktop A4 baseline ---------- */
@media (min-width:1024px){
  .a4-page{
    width:794px!important;height:1123px!important;max-width:none!important;max-height:none!important;
    margin:auto!important;box-sizing:border-box!important;background:#fff!important;display:block!important;position:relative!important
  }
}

/* ---------- Mobile A4 Preview (align to modal.css) ---------- */
@media (max-width:1023px){
  /* อย่า override header ของ modal.css */
  .ksp-modal--mobile-preview .ksp-modal__header{
    position: sticky; top: 0;
  }

  /* track แนวนอน (ให้ JS translateX) */
  .ksp-modal--mobile-preview .pv-track{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    will-change: transform;
    min-height: 0; /* guard overflow */
  }
  .ksp-modal--mobile-preview .pv-swipe{ min-height: 0; }

  /* ให้ A4 เรียบและไม่ทับเงาในโหมดพรีวิว */
  .ksp-modal--mobile-preview .a4-page{
    margin: 0 auto;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ปิดแอนิเมชันในโหมดพรีวิว (กันซ้อนเอฟเฟกต์) */
  .ksp-modal--mobile-preview .wc-anim,
  .ksp-modal--mobile-preview .wc-anim *{
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Mobile form width ---------- */
@media (max-width:767px){
  .main-card,.main-form,.ksp-card,.ksp-form{
    width:100vw!important;max-width:100vw!important;margin:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;padding-left:0!important;padding-right:0!important
  }
  body{background:#fff!important}
  input,textarea,select,.form-control,.ksp-input,.ksp-textarea,.ksp-select{
    width:100%!important;max-width:100vw!important;box-sizing:border-box!important;margin-left:0!important;margin-right:0!important;padding-left:12px!important;padding-right:12px!important;min-width:0!important
  }
}

/* ---------- Poster fallback size ---------- */
@media (max-width:1023px){
  /* โปสเตอร์ (ภาพแรกที่เป็น dataURL) เท่านั้น */
  .ksp-modal--mobile-preview .poster-card__img[src^="data:image/png"]{
    width:350px!important; max-width:350px!important; min-width:350px!important;
    height:auto!important; display:block!important; margin:0 auto!important;
    box-shadow:0 4px 24px rgba(0,0,0,.13)!important; border-radius:10px!important; background:#fff!important;
  }

  /* แคนวาสโปสเตอร์ */
  .ksp-modal--mobile-preview #wc-poster-canvas,
  #wc-poster-canvas{
    width:350px!important; max-width:350px!important; min-width:350px!important;
    height:auto!important; display:block!important; margin:0 auto!important;
    box-shadow:0 4px 24px rgba(0,0,0,.13)!important; border-radius:10px!important; background:#fff!important;
  }
}

/* ===== HOTFIX — Field theme (scoped to WorkComposer) ===== */
:where(#work-composer, .wc-container, .ksp-form) :is(
  input:not([type=checkbox]):not([type=radio]):not([type=file]),
  textarea,
  select,
  .form-control
){
  -webkit-appearance:none; appearance:none;
  width:100%;
  min-height:var(--wc-field-h);
  padding:var(--wc-field-py) var(--wc-field-px);
  border:1px solid var(--wc-field-brd);
  border-radius:var(--wc-field-radius);
  background:var(--wc-field-bg);
  color:var(--wc-field-text);
  box-sizing:border-box;
  line-height:1.4;
}
:where(#work-composer, .wc-container, .ksp-form) ::placeholder{
  color: color-mix(in oklab, var(--wc-field-muted) 80%, white);
}
:where(#work-composer, .wc-container, .ksp-form)
:is(input, textarea, select, .form-control):focus{
  outline:3px solid color-mix(in oklab, var(--wc-field-focus) 30%, white);
  outline-offset:2px;
  border-color:color-mix(in oklab, var(--wc-field-focus) 45%, white);
}

/* Responsive header layout
   - Mobile (<=600px): stack three rows (Logout, WorkComposer, email), all left-aligned
   - Desktop (>600px): single-line header using grid: version left, user/email centered, logout right
*/
.wc-header{display:block}
.wc-header-top{display:block;padding:6px 0}
.wc-header-bottom{display:flex;justify-content:space-between;align-items:center;padding:6px 0}

/* Default (mobile-first): stack items vertically, left aligned */
.wc-top-inline{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.wc-top-inline .wc-title, .wc-top-inline #wc-app-version{font-size:1.02rem;font-weight:700;color:var(--wc-muted)}

/* Mobile: each element occupies its own row and is left aligned */
#wc-logout-area{order:1}
#wc-version-area{order:2}
#wc-userbox{order:3}

#wc-logout-area > *{height: calc(var(--btn-h) * 0.82) !important; font-size: calc(var(--btn-font) * 0.95) !important; padding: 0 10px !important}

@media (min-width:601px){
  /* Desktop: use 3-column grid so we can place left/center/right easily */
  .wc-header-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}

  /* Place version (WorkComposer) on the left column, left-aligned */
  #wc-version-area{grid-column:1;justify-self:start}

  /* Place user/email centered in the middle column */
  #wc-userbox{grid-column:2;justify-self:center}

  /* Place logout on the right column, right-aligned */
  #wc-logout-area{grid-column:3;justify-self:end}

  /* Restore horizontal bottom row behavior if used elsewhere */
  .wc-header-bottom{display:flex;justify-content:space-between;align-items:center}
  #wc-logout-area > *{margin-left:12px}
}
:where(#work-composer, .wc-container, .ksp-form)
:is(input, textarea, select, .form-control):disabled{
  background:#f8fafc; color:#9ca3af; cursor:not-allowed;
}
:where(#work-composer, .wc-container, .ksp-form) select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M2 2l4 4 4-4' stroke='%236b7280' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px 8px;padding-right:36px;
}
:where(#work-composer, .wc-container, .ksp-form) textarea{
  min-height:100px;
  resize:vertical;
  margin-top:8px;
}
@media (max-width:767px){
  :where(#work-composer, .wc-container, .ksp-form) :is(input, textarea, select, .form-control){width:100%!important}
}

/* ===== Feature flags (optional toggles) ===== */
@media (max-width:1023px){
  .wc-anim:not(.ksp-modal--mobile-preview) .pv-slide-m{
    position:absolute;inset:0;opacity:0;pointer-events:none;z-index:1;transform:translateX(40px);
    transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);display:block!important
  }
  .wc-anim:not(.ksp-modal--mobile-preview) .pv-slide-m.is-active{
    opacity:1;pointer-events:auto;z-index:2;transform:translateX(0)
  }
}
.wc-wysiwyg .a4-content{transform:none!important;transform-origin:unset!important}
.wc-zoom-safe .pv-swipe{touch-action:pan-x;overscroll-behavior:contain}
.wc-zoom-safe pinch-zoom-element{touch-action:none}
.wc-lift-15vh .ksp-modal__body{padding-top:15vh!important}