/* YUQI v124 — 後台手機版響應式重整
   目標：iPhone 375–430px 寬度下，帳務支出、CMS 與原生日期欄位不超出卡片、不互相覆蓋。
   只調整版面，不更動任何資料、帳務、庫存或預約邏輯。 */

/* 所有後台表單元素先遵守容器寬度，避免 iOS date/month 的 intrinsic width 撐破 grid。 */
#admin-sub-content,
#admin-sub-content *{min-width:0}
#admin-sub-content input,
#admin-sub-content select,
#admin-sub-content textarea,
#admin-sub-content button{max-width:100%;box-sizing:border-box}
#admin-sub-content input[type="date"],
#admin-sub-content input[type="month"]{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  display:block!important;
  overflow:hidden!important;
}

/* CMS 頂部操作鈕不得被 flex 壓成直排文字。 */
#admin-sub-content #cmsReloadBtn,
#siteCmsEditor .yuqi-card > .flex > button{
  flex:0 0 auto!important;
  white-space:nowrap!important;
  width:auto!important;
  min-width:max-content!important;
}

@media(max-width:640px){
  /* 後台卡片在手機上稍微收斂內距，留更多真正可輸入寬度。 */
  #admin-sub-content .yuqi-card{padding:16px!important}

  /* 進貨／零用金／固定開銷：手機改成單欄，避免日期、select、按鈕互擠。 */
  #v114ExpenseManager [class~="grid-cols-2"]{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #v114ExpenseManager [class*="grid-cols-[1fr_auto]"]{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #v114ExpenseManager [class*="grid-cols-[1fr_auto]"] > button{
    width:100%!important;
    justify-self:stretch!important;
  }

  /* 產品明細：產品名稱獨立一列；數量與單價在下一列。 */
  #v114ExpenseManager .v114-line{
    grid-template-columns:58px minmax(0,1fr) 42px!important;
    gap:8px!important;
    align-items:center!important;
  }
  #v114ExpenseManager .v114-line > :first-child{
    grid-column:1 / -1!important;
    width:100%!important;
  }
  #v114ExpenseManager .v114-line > :nth-child(3){
    grid-column:2 / -1!important;
  }
  #v114ExpenseManager .v114-line > button:last-child{
    width:42px!important;
    min-width:42px!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  /* 固定開銷每筆改成金額／付款日／按鈕垂直排列。 */
  #v114ExpenseManager .v114-fixed-row{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    align-items:stretch!important;
    padding:14px 0!important;
  }
  #v114ExpenseManager .v114-fixed-row > div,
  #v114ExpenseManager .v114-fixed-row > button{
    grid-column:1!important;
    width:100%!important;
  }

  /* 零用金摘要保留雙欄，但欄位文字允許自然換行。 */
  #v114ExpenseManager .v114-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #v114ExpenseManager .v114-summary > div{min-width:0!important}
  #v114ExpenseManager .v114-summary span,
  #v114ExpenseManager .v114-summary b{overflow-wrap:anywhere}

  /* 官網管理：標題＋操作鈕不互相壓縮。 */
  #admin-sub-content > .yuqi-card > .flex.justify-between,
  #siteCmsEditor .yuqi-card > .flex.justify-between{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:start!important;
    gap:12px!important;
  }
  #admin-sub-content #cmsReloadBtn{
    min-width:92px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  #siteCmsEditor .yuqi-card > .flex > button{
    min-width:72px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  /* 最新消息：三欄的上架／首頁顯示／排序改為兩欄，排序獨占下一列。 */
  #siteCmsEditor [class~="grid-cols-3"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #siteCmsEditor [class~="grid-cols-3"] > :last-child{
    grid-column:1 / -1!important;
  }

  /* 課程管理大量輸入欄在手機改單欄，避免欄位被擠成窄框。 */
  #siteCmsEditor [class~="grid-cols-2"]{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #siteCmsEditor .cms-check{width:100%!important}

  /* 後台使用時不顯示會蓋住輸入欄位的浮動「返回官網」按鈕。 */
  body:has(.admin-shell) .back-site-alt{display:none!important}
}

@media(max-width:390px){
  #admin-sub-content .yuqi-card{padding:14px!important}
  .v114-tabs{gap:6px!important}
  .v114-tab{padding:10px 4px!important;font-size:11px!important}
  #v114ExpenseManager .v114-summary{grid-template-columns:minmax(0,1fr)!important}
  #admin-sub-content > .yuqi-card > .flex.justify-between,
  #siteCmsEditor .yuqi-card > .flex.justify-between{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #admin-sub-content #cmsReloadBtn,
  #siteCmsEditor .yuqi-card > .flex > button{
    width:100%!important;
    min-width:0!important;
  }
}