/* JodNote v20.4 — Mobile Layout Refactor */
.jn-tasks-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}.jn-tasks-head h1{margin:0 0 6px}.jn-tasks-head p{margin:0}.jn-add-task-btn{white-space:nowrap}.jn-view-switch{display:inline-flex;align-items:center;gap:4px;padding:4px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;margin-bottom:14px}.jn-view-switch a{padding:8px 14px;border-radius:10px;color:var(--muted);font-weight:800;font-size:13px}.jn-view-switch a.active{background:var(--card);color:var(--primary);box-shadow:0 4px 16px rgba(15,23,42,.08)}
.jn-task-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}.jn-task-stats a{display:flex;flex-direction:column;gap:2px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--text)}.jn-task-stats strong{font-size:24px;line-height:1.1}.jn-task-stats span{font-size:12px;color:var(--muted);font-weight:700}.jn-task-stats a.warn strong{color:var(--danger,#ef4444)}
.jn-history-section{padding:0!important;overflow:hidden}.jn-history-section>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;cursor:pointer}.jn-history-section>summary::-webkit-details-marker{display:none}.jn-history-section>summary span:first-child{display:flex;flex-direction:column;gap:3px}.jn-history-section>summary strong{font-size:18px}.jn-history-section>summary small{color:var(--muted);font-size:12px}.jn-history-section[open] .jn-chevron{transform:rotate(180deg)}.jn-chevron{transition:.18s ease}.jn-history-body{padding:0 20px 20px}.jn-history-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.jn-history-top p{margin:0}
.jn-create-page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}.jn-create-page-head h1{margin:0 0 4px}.jn-create-page-head p{margin:0}.jn-task-create-card{max-width:920px;margin:0 auto}.jn-task-create-card>.jn-task-create{margin-top:0}
.jn-task-board-grid{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:16px;align-items:start}.jn-task-board-column{min-width:0;padding:16px}
@media(max-width:760px){
  .jn-tasks-head{align-items:center;margin-bottom:10px}.jn-tasks-head h1{font-size:30px}.jn-tasks-head p{display:none}.jn-add-task-btn{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;font-size:14px}
  .jn-view-switch{width:100%;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px}.jn-view-switch a{text-align:center;padding:9px 8px}
  .jn-task-stats{grid-template-columns:repeat(4,1fr);gap:6px}.jn-task-stats a{padding:10px 6px;text-align:center;align-items:center;border-radius:13px}.jn-task-stats strong{font-size:20px}.jn-task-stats span{font-size:10px;white-space:nowrap}
  .jn-mobile-filter{margin-top:10px!important}.jn-mobile-filter>summary{padding:13px 14px}.jn-mobile-filter .jn-section-body{padding:0 14px 14px}.jn-mobile-filter .row{display:grid;grid-template-columns:1fr 1fr}.jn-mobile-filter .row .btn{width:100%}
  .jn-responsive-task-table,.jn-responsive-history-table,.jn-responsive-activity-table{display:block;width:100%;border:0!important}.jn-responsive-task-table thead,.jn-responsive-history-table thead,.jn-responsive-activity-table thead{display:none}.jn-responsive-task-table tbody,.jn-responsive-history-table tbody,.jn-responsive-activity-table tbody{display:grid;gap:10px}.jn-responsive-task-table tr,.jn-responsive-history-table tr,.jn-responsive-activity-table tr{display:block;border:1px solid var(--line);border-radius:16px;background:var(--bg-soft);padding:14px;overflow:hidden}.jn-responsive-task-table td,.jn-responsive-history-table td,.jn-responsive-activity-table td{display:block!important;width:100%!important;border:0!important;padding:5px 0!important;white-space:normal!important;min-width:0}.jn-responsive-task-table td:first-child,.jn-responsive-history-table td:first-child{padding-top:0!important}.jn-responsive-task-table td:first-child strong,.jn-responsive-history-table td:first-child strong{font-size:16px}.jn-responsive-task-table td:nth-child(2)::before,.jn-responsive-task-table td:nth-child(3)::before,.jn-responsive-task-table td:nth-child(4)::before,.jn-responsive-history-table td:nth-child(2)::before,.jn-responsive-history-table td:nth-child(3)::before,.jn-responsive-history-table td:nth-child(4)::before,.jn-responsive-history-table td:nth-child(5)::before,.jn-responsive-activity-table td::before{display:inline-block;color:var(--muted);font-size:11px;font-weight:800;margin-right:6px}.jn-responsive-task-table td:nth-child(2)::before{content:'พื้นที่:'}.jn-responsive-task-table td:nth-child(3)::before{content:'ผู้รับผิดชอบ:'}.jn-responsive-task-table td:nth-child(4)::before{content:'กำหนด:'}.jn-responsive-history-table td:nth-child(2)::before{content:'พื้นที่:'}.jn-responsive-history-table td:nth-child(3)::before{content:'ผู้รับผิดชอบ:'}.jn-responsive-history-table td:nth-child(4)::before{content:'ผลลัพธ์:'}.jn-responsive-history-table td:nth-child(5)::before{content:'วันที่จบ:'}.jn-responsive-activity-table td:nth-child(1)::before{content:'เวลา:'}.jn-responsive-activity-table td:nth-child(2)::before{content:'งาน:'}.jn-responsive-activity-table td:nth-child(3)::before{content:'พื้นที่:'}.jn-responsive-activity-table td:nth-child(4)::before{content:'ผู้ดำเนินการ:'}.jn-responsive-activity-table td:nth-child(5)::before{content:'กิจกรรม:'}.jn-responsive-activity-table td:nth-child(6)::before{content:'รายละเอียด:'}
  .jn-responsive-task-table td:nth-child(5) form{margin:4px 0}.jn-responsive-task-table td:nth-child(5) select{width:100%}.jn-responsive-task-table td:last-child,.jn-responsive-history-table td:last-child{display:flex!important;align-items:center;gap:8px;flex-wrap:wrap;padding-top:10px!important}.jn-responsive-task-table td:last-child form,.jn-responsive-history-table td:last-child form{margin:0}.jn-responsive-task-table td:last-child .btn,.jn-responsive-history-table td:last-child .btn,.jn-responsive-task-table .jwa-quick-done{min-height:38px}
  .jn-history-section>summary{padding:15px}.jn-history-section>summary strong{font-size:16px}.jn-history-body{padding:0 14px 14px}.jn-history-top{align-items:flex-start}.jn-history-top p{font-size:12px}
  .jn-create-page-head{display:grid;grid-template-columns:auto 1fr;align-items:start}.jn-create-page-head h1{font-size:28px}.jn-create-page-head p{font-size:12px}.jn-task-create-card{padding:14px}.jn-task-create-card .jn-task-core>div+div{margin-top:10px}.jn-task-create-card .jn-section{margin-top:10px}.jn-task-create-card .jn-create-actions{bottom:calc(72px + env(safe-area-inset-bottom));margin-top:12px}.jn-task-create-card .jn-create-actions .btn{min-height:52px}
  .jn-task-board-grid{grid-template-columns:1fr;gap:10px;overflow:visible}.jn-task-board-column{min-width:0;width:100%}
  body:has(.jn-responsive-task-table) .card:has(>.jn-responsive-task-table){padding:14px}
}
@media(min-width:761px){.jn-responsive-task-table,.jn-responsive-history-table,.jn-responsive-activity-table{width:100%}.jn-history-section[open] .jn-history-body{display:block}}

/* v20.4.1 — hard stop horizontal scrolling on mobile task lists */
@media(max-width:760px){
  .table-wrap:has(> .jn-responsive-task-table),
  .table-wrap:has(> .jn-responsive-history-table),
  .table-wrap:has(> .jn-responsive-activity-table){
    width:100%!important;
    max-width:100%!important;
    overflow-x:visible!important;
    overflow-y:visible!important;
  }
  .jn-responsive-task-table,
  .jn-responsive-history-table,
  .jn-responsive-activity-table{
    min-width:0!important;
    max-width:100%!important;
    width:100%!important;
    table-layout:fixed!important;
    overflow:visible!important;
  }
  .jn-responsive-task-table tbody,
  .jn-responsive-history-table tbody,
  .jn-responsive-activity-table tbody,
  .jn-responsive-task-table tr,
  .jn-responsive-history-table tr,
  .jn-responsive-activity-table tr{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .jn-responsive-task-table td,
  .jn-responsive-history-table td,
  .jn-responsive-activity-table td{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  .jn-responsive-task-table td form,
  .jn-responsive-task-table td select,
  .jn-responsive-task-table td input,
  .jn-responsive-task-table td .btn{
    max-width:100%!important;
  }
  /* Keep each task visually compact instead of exposing table-like columns. */
  .jn-responsive-task-table tr{padding:12px 13px!important}
  .jn-responsive-task-table td:nth-child(2),
  .jn-responsive-task-table td:nth-child(3),
  .jn-responsive-task-table td:nth-child(4){font-size:13px}
}

/* v20.4.2 — Global mobile viewport containment.
   Prevent any legacy table/form/card from making the whole PWA wider than the device. */
@media (max-width:760px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    overscroll-behavior-x:none;
  }
  .app-shell,
  .app-content,
  .app-container,
  .container,
  main,
  .content,
  .content-wrap{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  .app-content,
  .app-container,
  .container{
    overflow-x:hidden!important;
  }
  .container > *,
  .grid,
  .grid > *,
  .card,
  details,
  form,
  fieldset,
  .row,
  .between,
  .actions{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* Base style.css used to force every mobile table to 680px. Override it globally. */
  .table{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    table-layout:fixed!important;
  }
  .table th,
  .table td{
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  .table td form,
  .table td input,
  .table td select,
  .table td textarea,
  .table td .btn{
    min-width:0!important;
    max-width:100%!important;
  }
  .table-wrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
  }

  /* Media and long strings must stay inside their cards. */
  img,video,audio,canvas,svg,iframe{
    max-width:100%!important;
  }
  pre,.codebox,code{
    max-width:100%!important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  input,select,textarea,button{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  /* Keep fixed mobile controls inside viewport too. */
  .jn-mobile-bottom-nav,
  .jn-mobile-quick-add,
  .jn-voice-fab,
  .jn-ai-command-modal,
  .jwa-modal{
    max-width:100vw!important;
  }
}