/* ================================================================
   04-mobile-ios-fixes.css
   หมวด: ไอคอน LINE และการปรับมือถือ/iOS
   หมายเหตุ: ไฟล์ถูกโหลดตามลำดับใน index.html เพื่อคงลำดับ CSS เดิม
   ================================================================ */
/* LINE icon refinement: keep the brand mark crisp and contained, never as a background */
#billsLineHero .bills-line-orb{
  width:64px!important;height:64px!important;flex:0 0 64px!important;
  border-radius:22px!important;display:grid!important;place-items:center!important;
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(255,255,255,.96)!important;
  box-shadow:0 10px 24px rgba(6,199,85,.14),inset 0 1px 0 rgba(255,255,255,.98)!important;
  animation:lineLogoBob 5.2s ease-in-out infinite!important;
  overflow:hidden!important;isolation:isolate;
}
#billsLineHero .bills-line-orb img{display:none!important}
#billsLineHero .bills-line-orb .line-brand-mark{display:inline-flex!important;width:42px!important;height:32px!important;background:#06c755!important;color:#fff!important;font-size:13px!important;letter-spacing:-.7px!important;border-radius:11px!important}
#billsLineHero .bills-line-orb .line-brand-mark:after{background:#06c755!important}
#billsLineHero:before{width:190px!important;height:190px!important;right:5%!important;top:-145px!important;background:radial-gradient(circle,rgba(74,222,128,.16),transparent 72%)!important}
@keyframes lineLogoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){#billsLineHero .bills-line-orb{animation:none!important}}

/* ส่วนที่ 3: ปรับการใช้งานบน iPhone / มือถือ */
/* iOS/iPhone stability and layout pass — layered overrides, no app logic changes */
:root{--ios-safe-bottom:env(safe-area-inset-bottom,0px);--ios-safe-top:env(safe-area-inset-top,0px)}
html{min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(12px + var(--ios-safe-top));scroll-padding-bottom:calc(120px + var(--ios-safe-bottom))}
body{min-height:100%;min-height:100dvh;overscroll-behavior-y:contain;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font-family:inherit;touch-action:manipulation}
button{cursor:pointer;-webkit-appearance:none;appearance:none}
img,svg,canvas,video{max-width:100%}
.app,.main,.section,.panel,.layout,.stats,.top,.top-actions,.formgrid,.goal-grid{min-width:0}
.main{overflow-wrap:anywhere}
/* Avoid Safari input zoom and keep touch targets comfortable. */
@media(max-width:900px){
 input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important;max-width:100%}
 button,.btn,.nav{touch-action:manipulation}
 .main{width:100%;max-width:780px;box-sizing:border-box;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-top:max(12px,env(safe-area-inset-top));padding-bottom:calc(122px + var(--ios-safe-bottom))!important}
 .top{min-width:0;overflow:hidden}
 .top-actions{min-width:0}
 .top-actions>*{min-width:0;max-width:100%;box-sizing:border-box}
 .top-actions #month{min-width:0;max-width:100%}
 .mobile-nav{box-sizing:border-box;position:fixed!important;left:max(9px,env(safe-area-inset-left))!important;right:max(9px,env(safe-area-inset-right))!important;bottom:calc(7px + var(--ios-safe-bottom))!important;width:auto!important;max-width:600px;margin:0 auto;z-index:1000!important;isolation:isolate;transform:translateZ(0);padding:6px 7px!important;min-height:66px!important;gap:4px!important}
 .mobile-nav button{display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:52px!important;max-width:none;padding:5px 2px!important;line-height:1.15;overflow-wrap:anywhere}
 .mobile-nav button span{display:block;flex-shrink:0;margin:0 0 2px!important;line-height:1.2}
 .mobile-nav button:not(.active){background:transparent}
 .mobile-more{bottom:calc(82px + var(--ios-safe-bottom))!important;max-height:min(55dvh,440px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:1001!important}
 .mobile-more button{min-height:44px;overflow-wrap:anywhere}
 .panel,.stat,.goal-card,.budget-row{min-width:0}
 .panel-head{gap:10px;flex-wrap:wrap}
 .panel-head>*,.budget-row-head>*{min-width:0;max-width:100%}
 .actions,.goal-actions{flex-wrap:wrap}
 .actions>*{min-width:0;max-width:100%}
 .formgrid{grid-template-columns:minmax(0,1fr)!important}
 .field,.field.full{min-width:0;grid-column:auto}
 .field input,.field select,.field textarea{width:100%;box-sizing:border-box;min-height:46px}
 /* Mobile transactions: readable stacked cards, no horizontal scrolling */
 .transactions{width:100%;max-width:100%;overflow:visible;overscroll-behavior-x:auto;-webkit-overflow-scrolling:auto}
 .transactions table{display:block;width:100%;max-width:100%;min-width:0!important;border-collapse:separate;border-spacing:0}
 .transactions thead{display:none}
 .transactions tbody{display:grid;gap:9px;width:100%;min-width:0}
 .transactions tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"date amount" "detail detail" "category action";gap:8px 12px;width:100%;min-width:0;box-sizing:border-box;padding:12px;border:1px solid rgba(222,213,244,.85);border-radius:16px;background:rgba(255,255,255,.72);box-shadow:0 5px 16px rgba(75,56,125,.045)}
 .transactions td{display:block;min-width:0;padding:0;border:0;background:transparent;font-size:12px;overflow-wrap:anywhere;word-break:normal}
 .transactions td::before{content:attr(data-label);display:block;margin-bottom:3px;color:var(--muted);font-size:10px;font-weight:650;line-height:1.3}
 .transactions td[data-label="วันที่"]{grid-area:date;align-self:start}
 .transactions td[data-label="รายละเอียด"]{grid-area:detail;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
 .transactions td[data-label="หมวดหมู่"]{grid-area:category;align-self:center}
 .transactions td[data-label="จำนวนเงิน"]{grid-area:amount;text-align:right;align-self:start;font-size:13px;font-weight:800;overflow-wrap:anywhere}
 .transactions td[data-label="จัดการ"]{grid-area:action;text-align:right;align-self:center}
 .transactions td[data-label="รายละเอียด"] strong{font-size:13px;line-height:1.45;overflow-wrap:anywhere}
 .transactions td .eyebrow{display:inline-block;max-width:100%;overflow-wrap:anywhere;line-height:1.5}
 .transactions td .btn{min-height:32px}
 .calendar-grid{width:100%;min-width:0}
 .calendar-weekday{min-width:0;overflow:hidden}
 .calendar-day{min-width:0;overflow-wrap:anywhere;word-break:normal}
 .calendar-event{max-width:100%;overflow:hidden;text-overflow:ellipsis}
 #authGate{position:fixed!important;inset:0!important;min-height:100dvh;box-sizing:border-box;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;align-items:center!important;justify-content:center!important;padding:calc(16px + var(--ios-safe-top)) max(14px,env(safe-area-inset-right)) calc(16px + var(--ios-safe-bottom)) max(14px,env(safe-area-inset-left))!important}
 #authGate>div{width:100%;max-width:420px;box-sizing:border-box;margin:auto}
 body.auth-required{overflow:hidden}
 body.auth-required .mobile-nav,body.auth-required .mobile-more{display:none!important}
 .toast{bottom:calc(88px + var(--ios-safe-bottom));max-width:calc(100vw - 28px);width:max-content;box-sizing:border-box;text-align:center}
 .home-line-card,.bills-line-hero{min-width:0;overflow:hidden}
 .home-line-card img,.home-line-card svg{max-width:100%}
}
/* Small phones: prevent cramped columns and clipped controls. */
@media(max-width:390px){
 .main{padding-left:max(9px,env(safe-area-inset-left));padding-right:max(9px,env(safe-area-inset-right))}
 .top-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
 .top-actions .btn{overflow-wrap:anywhere;white-space:normal}
 .mobile-nav{left:max(6px,env(safe-area-inset-left))!important;right:max(6px,env(safe-area-inset-right))!important;gap:2px!important;padding-left:4px!important;padding-right:4px!important}
 .mobile-nav button{font-size:9px!important;letter-spacing:-.1px}
 .mobile-nav button span{font-size:19px!important}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .stat{min-width:0}
 .money{overflow-wrap:anywhere}
 .bills-line-hero{grid-template-columns:42px minmax(0,1fr)!important;gap:9px!important;padding:13px!important}
 .bills-line-actions{grid-template-columns:minmax(0,1fr)!important}
 .bills-line-note{grid-column:1/-1!important}
 .calendar-grid{gap:2px!important}
 .calendar-day{min-height:52px!important;padding:3px 2px!important}
 .calendar-event{font-size:7px!important}
}
/* Landscape phones and short viewports */
@media(max-width:900px) and (orientation:landscape) and (max-height:500px){
 #authGate{align-items:flex-start!important}
 #authGate>div{margin:0 auto}
 .auth-mascot-img{width:82px!important;margin-bottom:4px}
 .mobile-nav{min-height:56px!important;bottom:calc(4px + var(--ios-safe-bottom))!important}
 .mobile-nav button{min-height:44px!important}
 .main{padding-bottom:calc(90px + var(--ios-safe-bottom))!important}
}

/* Login visual refresh: circular mascot + user-provided branded backdrop */
#authGate.auth-gate-custom{
 background-image:linear-gradient(135deg,#eaffef,#e4fff4 48%,#dff5ff)!important;
 background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;
 overflow:hidden!important;
}
/* ชั้นวิดีโอพื้นหลังของหน้า Login: ยังไม่ตั้ง source จนกว่าจะมีไฟล์ MP4 จริง */
#authGate .login-background-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;background:transparent}
#authGate .login-background-tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(135deg,rgba(234,255,239,.78),rgba(224,255,246,.68) 48%,rgba(220,244,255,.74));backdrop-filter:blur(1.5px)}
#authGate .login-card{z-index:3;position:relative}
#authGate .login-floating-decor{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;color:rgba(27,160,87,.32);font-weight:800}
#authGate .login-floating-decor span{position:absolute;bottom:-12%;font-size:clamp(24px,4vw,54px);animation:loginCoinFloat 14s linear infinite;filter:drop-shadow(0 4px 10px rgba(24,130,75,.10))}
#authGate .login-floating-decor span:nth-child(1){left:8%;animation-delay:-2s}
#authGate .login-floating-decor span:nth-child(2){left:27%;font-size:30px;animation-delay:-8s}
#authGate .login-floating-decor span:nth-child(3){left:73%;animation-delay:-5s}
#authGate .login-floating-decor span:nth-child(4){left:88%;font-size:36px;animation-delay:-11s}
#authGate .login-floating-decor span:nth-child(5){left:52%;animation-delay:-13s}
@keyframes loginCoinFloat{0%{transform:translateY(0) rotate(0deg);opacity:0}12%{opacity:.8}85%{opacity:.65}100%{transform:translateY(-120vh) rotate(280deg);opacity:0}}
@media(prefers-reduced-motion:reduce){#authGate .login-floating-decor span{animation:none!important;display:none!important}}
#authGate.auth-gate-custom>div{
 background:rgba(255,255,255,.82)!important;
 -webkit-backdrop-filter:blur(24px) saturate(1.22)!important;backdrop-filter:blur(24px) saturate(1.22)!important;
 border:1px solid rgba(255,255,255,.92)!important;
 box-shadow:0 24px 80px rgba(29,105,63,.15),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.auth-mascot-img{
 display:block!important;width:clamp(112px,31vw,164px)!important;height:clamp(112px,31vw,164px)!important;
 object-fit:cover!important;object-position:center!important;border-radius:50%!important;
 border:4px solid rgba(255,255,255,.98)!important;outline:1px solid rgba(71,174,99,.22)!important;
 box-shadow:0 10px 28px rgba(37,139,73,.2)!important;margin:0 auto 14px!important;
 background:#e8f8dc!important;overflow:hidden!important;
}
@media(max-width:480px){
 #authGate.auth-gate-custom{padding:calc(12px + var(--ios-safe-top)) max(12px,env(safe-area-inset-right)) calc(12px + var(--ios-safe-bottom)) max(12px,env(safe-area-inset-left))!important}
 #authGate.auth-gate-custom>div{padding:clamp(18px,5vw,26px)!important;border-radius:28px!important}
 .auth-mascot-img{width:clamp(104px,29vw,132px)!important;height:clamp(104px,29vw,132px)!important;margin-bottom:10px!important}
 #authGate h2{font-size:clamp(20px,5.2vw,25px);line-height:1.35}
}
@supports not (height:100dvh){body{min-height:100vh}#authGate{min-height:100vh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}