:root{
  --so-navy:#0A1628;
  --so-blue-deep:#0D47A1;
  --so-blue:#1565C0;
  --so-blue-bright:#2196F3;
  --so-cyan:#00B4FF;
  --so-bg:#EEF2F9;
  --so-surface:#fff;
  --so-border:#C8D6EA;
  --so-text:#0F1C2E;
  --so-muted:#5A6D85;
  --so-accent:#FF6B35;
  --so-sidebar-w:260px;
  --so-gutter:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overscroll-behavior-y:none}
body{
  margin:0;font-family:'Sarabun','Exo 2',sans-serif;
  background:var(--so-bg);color:var(--so-text);
  -webkit-tap-highlight-color:transparent;
}

/* Badge mockup — ซ่อนเมื่อใช้งานจริง */
.so-mock-badge{display:none!important}

/* Shell — desktop sidebar */
.so-shell{display:flex;height:100vh;overflow:hidden}
.so-sidebar{
  display:none;width:var(--so-sidebar-w);flex-shrink:0;
  background:linear-gradient(180deg,var(--so-navy) 0%,#0f2744 100%);
  color:#fff;flex-direction:column;padding:20px 14px;
  border-right:1px solid rgba(255,255,255,.06);
}
.so-sidebar-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px;padding:0 6px}
.so-sidebar-logo{width:48px;height:48px;border-radius:12px;padding:6px;background:#fff;flex-shrink:0}
.so-sidebar-logo svg{width:100%;height:100%}
.so-sidebar-title{font-family:'Exo 2',sans-serif;font-weight:800;font-size:15px;letter-spacing:.5px}
.so-sidebar-sub{font-size:11px;opacity:.65;margin-top:2px}
.so-sidebar-nav{flex:1;display:flex;flex-direction:column;gap:4px;min-height:0;overflow-y:auto}
.so-nav-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;
  border:none;border-radius:10px;background:transparent;color:rgba(255,255,255,.75);
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:left;
  transition:background .15s,color .15s;
}
.so-nav-item i{width:18px;text-align:center;opacity:.85}
.so-nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.so-nav-item.active{background:rgba(33,150,243,.25);color:#fff;border-left:3px solid var(--so-cyan);padding-left:11px}
.so-sidebar-foot{border-top:1px solid rgba(255,255,255,.1);padding-top:14px}
.so-sidebar-user{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:0 6px}
.so-sidebar-avatar{
  width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--so-blue-bright),var(--so-blue-deep));
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;border:2px solid var(--so-cyan);
  overflow:hidden;flex-shrink:0;
}
.so-sidebar-avatar--btn{cursor:pointer;padding:0;font-family:inherit;color:inherit}
.so-sidebar-avatar--btn:hover{filter:brightness(1.08)}
.so-sidebar-avatar.so-avatar--photo,.so-topbar-avatar.so-avatar--photo{padding:0;background:#E3F2FD}
.so-sidebar-avatar img,.so-topbar-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.so-sidebar-uname{font-size:13px;font-weight:700}
.so-sidebar-urole{font-size:11px;opacity:.65}
.so-sidebar-logout{
  width:100%;padding:10px;border:1px solid rgba(255,255,255,.15);border-radius:10px;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);font-family:inherit;font-size:12px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
}
.so-sidebar-logout:hover{background:rgba(255,255,255,.12)}

.so-main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.app{
  flex:1;display:flex;flex-direction:column;overflow:hidden;
  max-width:100%;margin:0 auto;width:100%;
}
.screen{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0}
.screen.active{display:flex}

/* ── Page transition 3D (Hub) ── */
#so-app.so-page-transition{
  position:relative;perspective:1200px;transform-style:preserve-3d;overflow:hidden;
}
#so-app.so-page-transition > .screen{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex!important;flex-direction:column;min-height:0;
  backface-visibility:hidden;will-change:transform,opacity,filter;
}
#so-app.so-page-transition > .screen:not(.active):not(.so-screen-leave):not(.so-screen-enter){
  visibility:hidden;pointer-events:none;opacity:0;
}
.so-page-trans-overlay{
  position:absolute;inset:0;z-index:30;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(0,188,255,.08),transparent 35%,transparent 65%,rgba(0,188,255,.06));
}
.so-page-trans-overlay--on{
  opacity:1;animation:soPageScanFlash .48s ease-out forwards;
}
.so-page-trans-overlay::after{
  content:'';position:absolute;left:0;right:0;height:2px;top:-4px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.95),transparent);
  box-shadow:0 0 18px rgba(0,188,255,.75);
  opacity:0;
}
.so-page-trans-overlay--on::after{animation:soPageScanLine .48s ease-out forwards}

/* Check-in — เข้าหน้า (depth forward) */
#so-app.so-trans-checkin-in > .screen.so-screen-leave{
  animation:soPageLeaveBack .48s cubic-bezier(.45,.05,.55,.95) forwards;z-index:1;
}
#so-app.so-trans-checkin-in > .screen.so-screen-enter{
  animation:soPageEnterCheckin .52s cubic-bezier(.2,.85,.25,1) forwards;z-index:2;
}
#so-app.so-trans-checkin-in > #s-checkin.so-screen-enter .so-topbar{
  animation:soCiChildDrop .42s cubic-bezier(.2,.9,.25,1) .14s both;
}
#so-app.so-trans-checkin-in > #s-checkin.so-screen-enter .so-hub-scroll{
  animation:soCiChildRise .46s cubic-bezier(.2,.85,.25,1) .2s both;
}

/* Check-in — กลับ Home */
#so-app.so-trans-checkin-out > .screen.so-screen-leave{
  animation:soPageLeaveCheckin .48s cubic-bezier(.45,.05,.55,.95) forwards;z-index:2;
}
#so-app.so-trans-checkin-out > .screen.so-screen-enter{
  animation:soPageEnterBack .5s cubic-bezier(.2,.85,.25,1) forwards;z-index:1;
}

@keyframes soPageLeaveBack{
  from{transform:translate3d(0,0,0) scale(1) rotateY(0deg);opacity:1;filter:blur(0)}
  to{transform:translate3d(-18%,0,-120px) scale(.9) rotateY(10deg);opacity:0;filter:blur(3px)}
}
@keyframes soPageEnterCheckin{
  from{transform:translate3d(32%,0,80px) scale(.92) rotateY(-14deg);opacity:0;filter:blur(2px)}
  to{transform:translate3d(0,0,0) scale(1) rotateY(0deg);opacity:1;filter:blur(0)}
}
@keyframes soPageLeaveCheckin{
  from{transform:translate3d(0,0,0) scale(1) rotateY(0deg);opacity:1;filter:blur(0)}
  to{transform:translate3d(28%,0,60px) scale(.93) rotateY(-12deg);opacity:0;filter:blur(2px)}
}
@keyframes soPageEnterBack{
  from{transform:translate3d(-22%,0,-100px) scale(.88) rotateY(12deg);opacity:0;filter:blur(3px)}
  to{transform:translate3d(0,0,0) scale(1) rotateY(0deg);opacity:1;filter:blur(0)}
}
@keyframes soPageScanFlash{
  0%{opacity:0}
  18%{opacity:1}
  100%{opacity:0}
}
@keyframes soPageScanLine{
  0%{top:-4px;opacity:0}
  15%{opacity:1}
  100%{top:100%;opacity:0}
}
@keyframes soCiChildDrop{
  from{transform:translateY(-14px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@keyframes soCiChildRise{
  from{transform:translateY(22px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  #so-app.so-page-transition > .screen{animation:none!important;transform:none!important;filter:none!important}
  .so-page-trans-overlay,.so-page-trans-overlay--on{display:none!important}
  #so-app.so-trans-checkin-in > #s-checkin.so-screen-enter .so-topbar,
  #so-app.so-trans-checkin-in > #s-checkin.so-screen-enter .so-hub-scroll{animation:none!important}
}

/* Login — โลโก้ + เอฟเฟกต์แสงสไลด์ประกาย */
.logo-shine-wrap{position:relative;overflow:hidden;border-radius:16px;background:#fff;isolation:isolate}
.logo-shine-wrap .logo-shine-inner{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;
}
.logo-shine-wrap .logo-shine-inner svg{max-width:100%;max-height:100%}
.logo-shine-wrap::after{
  content:'';position:absolute;top:-20%;left:-130%;width:55%;height:140%;
  background:linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.92) 50%,
    rgba(255,255,255,0) 62%,
    transparent 100%
  );
  transform:skewX(-22deg);pointer-events:none;z-index:2;
  animation:soLogoShineSlide 3.2s ease-in-out infinite;
}
.logo-shine-wrap::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
@keyframes soLogoShineSlide{
  0%,12%{left:-130%;opacity:0}
  18%{opacity:1}
  52%{left:130%;opacity:1}
  58%,100%{left:130%;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .logo-shine-wrap::after{animation:none;opacity:0}
}
.login-hero{
  background:linear-gradient(155deg,var(--so-navy) 0%,var(--so-blue-deep) 45%,var(--so-blue) 100%);
  padding:44px 28px 32px;text-align:center;flex-shrink:0;position:relative;overflow:hidden;
}
.login-hero::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--so-cyan),var(--so-accent),transparent);
}
.login-logo{
  width:124px;height:124px;margin:0 auto 16px;padding:14px;border-radius:22px;
  box-shadow:0 10px 36px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.12),0 0 24px rgba(0,180,255,.12);
  position:relative;z-index:1;
}
.login-logo.logo-shine-wrap::after{animation-duration:3.6s}
.login-logo.logo-shine-wrap .logo-shine-inner svg{transform:scale(1.04)}
.login-hero h1{color:#fff;font-family:'Exo 2',sans-serif;font-size:26px;font-weight:800;margin-bottom:6px;letter-spacing:1px;position:relative;z-index:1}
.login-hero p{color:rgba(255,255,255,.85);font-size:13px;line-height:1.55;position:relative;z-index:1}
.login-form{
  padding:24px 22px 32px;background:var(--so-surface);border-radius:24px 24px 0 0;
  margin-top:-10px;flex:1;box-shadow:0 -8px 32px rgba(10,22,40,.08);position:relative;z-index:2;
}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:700;color:var(--so-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.field input,.so-pw-wrap input{
  width:100%;padding:12px 14px;border:1.5px solid var(--so-border);border-radius:10px;
  font-size:15px;font-family:inherit;background:#F8FAFD;color:var(--so-text);
}
.field input:focus,.so-pw-wrap input:focus{outline:none;border-color:var(--so-blue-bright);box-shadow:0 0 0 3px rgba(33,150,243,.15)}
.so-pw-wrap{position:relative}
.so-pw-wrap input{padding-right:42px}
.so-pw-toggle{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:none;background:transparent;color:var(--so-muted);cursor:pointer;
  padding:8px;font-size:16px;z-index:2;line-height:1;min-width:36px;min-height:36px;
}
.so-pw-toggle:active{color:var(--so-blue-deep)}
.so-login-hint{font-size:11px;color:var(--so-muted);margin-bottom:14px;line-height:1.45;padding:8px 10px;background:#F0F6FF;border-radius:8px;border-left:3px solid var(--so-cyan)}
.btn-primary{
  width:100%;padding:14px;border:none;border-radius:10px;
  background:linear-gradient(135deg,var(--so-blue) 0%,var(--so-blue-deep) 100%);
  color:#fff;font-size:15px;font-weight:700;font-family:'Exo 2',sans-serif;
  cursor:pointer;letter-spacing:.4px;
  box-shadow:0 4px 16px rgba(13,71,161,.35);transition:transform .12s;
}
.btn-primary:active{transform:scale(.98)}

/* Hub layout */
.so-hub{background:var(--so-bg)}
.so-hub-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:24px}
.so-topbar{
  display:flex;align-items:center;gap:10px;padding:12px var(--so-gutter);flex-shrink:0;
  background:linear-gradient(135deg,var(--so-navy),var(--so-blue-deep));
  color:#fff;position:sticky;top:0;z-index:50;
}
.so-topbar--hub{
  flex-wrap:nowrap;padding:10px var(--so-gutter);gap:10px 12px;
}
.so-topbar--hub .so-topbar-clock{
  flex:1;min-width:0;max-width:38%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;text-align:center;overflow:hidden;
}
.so-topbar-divider{
  width:1px;height:34px;background:rgba(255,255,255,.22);flex-shrink:0;
}
.so-topbar--hub .so-topbar-user{flex:1 1 auto;min-width:0;max-width:44%}
.so-topbar-greet-line{
  font-family:'Exo 2',sans-serif;font-size:14px;font-weight:800;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.so-topbar-greet-line .so-topbar-name{display:inline;font-size:inherit;font-weight:inherit}
.so-topbar-clock-time{
  font-family:'Exo 2',sans-serif;
  font-size:clamp(8px,2.3vw,11px);font-weight:700;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;
  line-height:1.2;white-space:nowrap;max-width:100%;
}
.so-topbar-clock-date{
  font-size:clamp(8px,2.2vw,10px);opacity:.82;line-height:1.25;margin-top:0;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.so-topbar-meta{
  font-size:10px;opacity:.72;margin-top:2px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media(max-width:520px){
  .so-topbar--hub{padding:8px var(--so-gutter);gap:6px}
  .so-topbar--hub .so-topbar-clock{max-width:34%}
  .so-topbar-clock-time{font-size:9px;letter-spacing:0}
  .so-topbar-clock-date{font-size:8px;max-width:100%}
  .so-topbar-divider{height:28px}
  .so-topbar-greet-line{font-size:12px}
  .so-topbar--hub .so-topbar-user{max-width:none;flex:1 1 0}
  .so-topbar-actions{flex-shrink:0;gap:4px}
  .so-topbar-btn,.so-topbar-avatar{width:34px;height:34px;font-size:14px}
}
@media(max-width:380px){
  .so-topbar--hub .so-topbar-clock{max-width:30%}
  .so-topbar-clock-time{font-size:8px}
  .so-topbar-clock-date{font-size:7px}
  .so-topbar-greet-line{font-size:11px}
  .so-topbar-btn,.so-topbar-avatar{width:32px;height:32px}
}
@media(min-width:900px){
  .so-topbar--hub{padding:12px var(--so-gutter)}
  .so-topbar--hub .so-topbar-clock{max-width:none}
  .so-topbar-clock-time{font-size:11px}
  .so-topbar-clock-date{font-size:10px}
  .so-topbar-greet-line{font-size:15px}
  .so-topbar-divider{height:38px}
}
.so-topbar--sub{background:var(--so-surface);color:var(--so-text);border-bottom:1px solid var(--so-border)}
.so-topbar-menu,.so-topbar-back,.so-topbar-btn{
  width:38px;height:38px;border:none;border-radius:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.so-topbar-menu,.so-topbar-btn{background:rgba(255,255,255,.12);color:#fff}
.so-topbar--sub .so-topbar-btn{background:rgba(21,101,192,.1);color:var(--so-blue)}
.so-topbar--sub .so-topbar-btn:hover{background:rgba(21,101,192,.18)}
.so-topbar-back{background:rgba(21,101,192,.08);color:var(--so-blue)}
.so-topbar-center{flex:1;min-width:0}
.so-topbar-greet{font-size:11px;opacity:.75;text-transform:uppercase;letter-spacing:.8px}
.so-topbar-name{font-family:'Exo 2',sans-serif;font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-topbar-page{font-family:'Exo 2',sans-serif;font-size:16px;font-weight:700;color:var(--so-blue-deep)}
.so-topbar-actions{display:flex;align-items:center;gap:8px;position:relative}
.so-topbar-avatar{
  width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--so-cyan),var(--so-blue));
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;border:2px solid rgba(255,255,255,.4);
  overflow:hidden;flex-shrink:0;cursor:pointer;padding:0;font-family:inherit;color:inherit;
}
.so-topbar-avatar:hover{filter:brightness(1.08)}
.so-notif-dot{
  position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--so-accent);
  border-radius:50%;border:2px solid var(--so-navy);
}

/* เมนูมือถือ — slide down จากด้านบน */
.so-mobile-menu{
  position:fixed;inset:0;z-index:40;pointer-events:none;visibility:hidden;
}
.so-mobile-menu.open{pointer-events:auto;visibility:visible}
.so-mobile-menu-backdrop{
  position:absolute;top:var(--so-mobile-menu-offset,62px);left:0;right:0;bottom:0;
  background:rgba(10,22,40,.5);opacity:0;transition:opacity .28s ease;
}
.so-mobile-menu.open .so-mobile-menu-backdrop{opacity:1}
.so-mobile-menu-panel{
  position:absolute;top:var(--so-mobile-menu-offset,62px);left:0;right:0;max-height:min(calc(88vh - 62px),520px);overflow-y:auto;
  background:linear-gradient(180deg,var(--so-navy) 0%,#0f2744 100%);
  color:#fff;border-radius:0 0 22px 22px;
  box-shadow:0 16px 48px rgba(0,0,0,.35);
  transform:translateY(-105%);transition:transform .34s cubic-bezier(.4,0,.2,1);
  -webkit-overflow-scrolling:touch;
}
.so-mobile-menu.open .so-mobile-menu-panel{transform:translateY(0)}
.so-mobile-menu-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 16px 12px;border-bottom:1px solid rgba(255,255,255,.08);
}
.so-mobile-menu-brand{display:flex;align-items:center;gap:12px;min-width:0}
.so-mobile-menu-logo{width:44px;height:44px;border-radius:12px;padding:6px;background:#fff;flex-shrink:0}
.so-mobile-menu-logo svg{width:100%;height:100%}
.so-mobile-menu-title{font-family:'Exo 2',sans-serif;font-weight:800;font-size:16px;letter-spacing:.4px}
.so-mobile-menu-sub{font-size:11px;opacity:.65;margin-top:2px}
.so-mobile-menu-close{
  width:38px;height:38px;border:none;border-radius:10px;cursor:pointer;flex-shrink:0;
  background:rgba(255,255,255,.1);color:#fff;font-size:18px;
  display:flex;align-items:center;justify-content:center;
}
.so-mobile-menu-close:active{background:rgba(255,255,255,.18)}
.so-mobile-menu-nav{display:flex;flex-direction:column;gap:4px;padding:12px 12px 8px}
.so-mobile-nav-item{
  display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;
  border:none;border-radius:12px;background:transparent;color:rgba(255,255,255,.82);
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;text-align:left;
  transition:background .15s,color .15s;
}
.so-mobile-nav-item i{width:20px;text-align:center;font-size:16px;opacity:.9}
.so-mobile-nav-item:active,.so-mobile-nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.so-mobile-nav-item.active{
  background:rgba(33,150,243,.22);color:#fff;border-left:3px solid var(--so-cyan);padding-left:11px;
}
.so-mobile-menu-foot{
  border-top:1px solid rgba(255,255,255,.1);padding:14px 16px 18px;margin-top:4px;
}
.so-mobile-menu-user{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.so-mobile-menu-avatar{
  width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--so-blue-bright),var(--so-blue-deep));
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;
  border:2px solid var(--so-cyan);overflow:hidden;flex-shrink:0;
}
.so-mobile-menu-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.so-mobile-menu-uname{font-size:13px;font-weight:700}
.so-mobile-menu-urole{font-size:11px;opacity:.65}
.so-mobile-menu-logout{
  width:100%;padding:12px;border:1px solid rgba(255,255,255,.15);border-radius:12px;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.88);font-family:inherit;font-size:13px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
}
.so-mobile-menu-logout:active{background:rgba(255,255,255,.12)}
body.so-menu-open{overflow:hidden}
@media(min-width:900px){
  .so-mobile-menu{display:none!important}
}

/* KPI */
.so-kpi-strip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  padding:16px var(--so-gutter) 4px;
}
@media(min-width:600px){.so-kpi-strip{grid-template-columns:repeat(4,1fr)}}
.so-kpi-card{
  background:var(--so-surface);border:1px solid var(--so-border);border-radius:12px;
  padding:14px 12px;text-align:center;box-shadow:0 2px 10px rgba(13,71,161,.06);
}
.so-kpi-card--accent{border-color:var(--so-cyan);background:linear-gradient(135deg,#E3F2FD,#fff)}
.so-kpi-val{font-family:'Exo 2',sans-serif;font-size:26px;font-weight:800;color:var(--so-blue-deep);line-height:1}
.so-kpi-lbl{font-size:11px;color:var(--so-muted);margin-top:4px;font-weight:600}

.so-section{padding:12px var(--so-gutter) 8px}
.so-section-hdr{
  font-family:'Exo 2',sans-serif;font-size:12px;font-weight:800;color:var(--so-muted);
  text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.so-section-note{font-size:10px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--so-cyan);background:#E3F2FD;padding:2px 8px;border-radius:999px}
.so-section-note--swipe{display:inline-block}

/* Check-in hero — แบนเนอร์ 3:1 + เนื้อหาซ้าย (หน้า Home) */
.so-checkin-hero-block{
  border-radius:18px;padding:16px 14px 14px;color:#fff;
  box-shadow:0 12px 32px rgba(8,53,107,.35);
  overflow:hidden;position:relative;min-height:148px;
  background:linear-gradient(118deg,#08356B 0%,#0D47A1 42%,#1565C0 78%,#1E88E5 100%);
}
.so-checkin-hero-slides{
  position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.so-checkin-hero-bg{
  position:absolute;inset:0;
  background-image:var(--so-hero-banner, none);
  background-size:cover;background-position:72% center;background-repeat:no-repeat;
  opacity:0;transform:scale(1.025);
  transition:opacity 1.1s ease,transform 7s ease;
  will-change:opacity,transform;
}
.so-checkin-hero-bg.is-active{
  opacity:1;transform:scale(1);
}
.so-checkin-hero-bg--digital{
  /* จัดกราฟิกลายนิ้วมือไว้ฝั่งขวาและรักษาพื้นที่อ่านข้อความฝั่งซ้าย */
  background-position:right center;
}
.so-checkin-hero-bg::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(6,32,68,.55) 0%,rgba(8,45,92,.28) 48%,rgba(13,71,161,.08) 72%,transparent 100%);
}
.so-checkin-hero-content{
  position:relative;z-index:1;max-width:min(100%,420px);min-width:0;
}
@media(min-width:520px){.so-checkin-hero-content{max-width:58%}}
@media(max-width:380px){
  .so-checkin-hero-block{min-height:160px;padding:14px 12px 12px}
  .so-checkin-hero-bg{background-position:80% center}
  .so-checkin-hero-content{max-width:100%}
  .so-checkin-hero-bg::before{
    background:linear-gradient(180deg,rgba(6,32,68,.62) 0%,rgba(8,45,92,.38) 55%,rgba(13,71,161,.15) 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  /* ปิดเอฟเฟกต์สไลด์สำหรับผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว */
  .so-checkin-hero-bg{transition:none;transform:none}
}

/* Timeline — เส้นประ + จุดเรืองแสง */
.so-hero-timeline{position:relative;padding:4px 0 2px;margin-bottom:2px}
.so-hero-timeline::before{
  content:'';position:absolute;left:8px;top:14px;bottom:14px;
  border-left:1.5px dashed rgba(255,255,255,.34);
}
.so-hero-tl-item,.so-hero-tl-loc{
  display:flex;align-items:flex-start;gap:8px;position:relative;
}
.so-hero-tl-item{
  font-size:13.5px;font-weight:600;line-height:1.4;margin-bottom:5px;
  text-shadow:0 1px 8px rgba(6,32,68,.45);
}
.so-hero-tl-item--ok{font-size:12.5px;margin-top:3px;margin-bottom:0}
.so-hero-tl-item--muted{font-size:12.5px;font-weight:500;opacity:.78}
.so-hero-tl-text strong{font-weight:800;letter-spacing:.01em}
.so-hero-tl-marker{
  width:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  padding-top:1px;
}
.so-hero-tl-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;z-index:1;
  background:#4FC3F7;box-shadow:0 0 8px rgba(79,195,247,.75);
}
.so-hero-tl-dot--glow{
  width:10px;height:10px;background:#4FC3F7;
  box-shadow:0 0 14px rgba(79,195,247,.95),0 0 4px rgba(255,255,255,.6);
}
.so-hero-tl-dot--wait{background:rgba(255,255,255,.42);box-shadow:none}
.so-hero-tl-loc{
  font-size:10.5px;font-weight:500;line-height:1.45;
  opacity:.84;margin:-1px 0 8px;padding-right:4px;
}
.so-hero-tl-loc .so-hero-tl-marker i{font-size:9px;color:rgba(255,255,255,.75)}
.so-hero-tl-loc-text{display:block}

.so-checkin-hero-actions{
  display:flex;gap:7px;margin-top:12px;align-items:stretch;flex-wrap:wrap;
}
.so-btn-check{
  padding:10px 14px;border:none;border-radius:12px;font-family:inherit;font-size:12px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  transition:transform .12s,background .15s;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.so-btn-check:active{transform:scale(.97)}
.so-btn-check--out{background:#fff;color:var(--so-blue-deep);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.so-btn-check--ghost{background:var(--so-surface);color:var(--so-blue-deep);border:1px solid var(--so-border)}
.so-checkin-hero-block .so-btn-check--out{
  /* ปุ่มเช็คอินเป็นคำสั่งหลัก จึงแสดงเต็มแถวและไม่ให้ปุ่มรองบีบขนาด */
  flex:1 0 100%;width:100%;min-width:0;min-height:48px;padding:12px 16px;
  font-size:14px;border-radius:12px;font-weight:800;
}
.so-checkin-hero-block .so-btn-check--out i{font-size:16px;color:#0D47A1}
.so-checkin-hero-block .so-btn-check--ghost{
  /* ปุ่มรองแบ่งพื้นที่ในแถวถัดไปอย่างเท่ากัน */
  flex:1 1 88px;min-width:0;min-height:38px;padding:9px 8px;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.42);
  border-radius:11px;
}
.so-checkin-hero-block .so-btn-check--ghost i{font-size:11px;opacity:.92}
.so-checkin-hero-block .so-table-empty{color:rgba(255,255,255,.85);text-align:left;padding:8px 0!important}
.so-checkin-hero-block .so-ci-pill{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.25)}

/* ── Sci-fi Check-in Button ── */
.so-ci-scifi-btn{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .12s ease,box-shadow .2s ease,background .25s ease,color .25s ease;
}
.so-ci-scifi-content{
  position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.so-ci-scifi-glow{
  position:absolute;inset:-2px;border-radius:inherit;opacity:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 50%,rgba(0,229,255,.35),transparent 65%);
  transition:opacity .2s;
}
.so-ci-scifi-scan{
  position:absolute;left:8%;right:8%;height:2px;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.95),transparent);
  box-shadow:0 0 8px rgba(0,229,255,.8);
}
.so-checkin-hero-block .so-ci-scifi-btn.so-btn-check--out{
  box-shadow:0 4px 0 rgba(13,71,161,.28),0 8px 22px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.55);
}
.so-checkin-hero-block .so-ci-scifi-btn:active:not(:disabled){
  transform:scale(.95);
  box-shadow:inset 0 4px 10px rgba(13,71,161,.22),0 1px 0 rgba(255,255,255,.7);
}
.so-ci-scifi-btn.so-ci-scifi--processing{
  pointer-events:none;cursor:wait;
  animation:soCiNeonPulse 1.15s ease-in-out infinite;
  border-color:rgba(0,188,255,.65)!important;
  box-shadow:0 0 18px rgba(0,188,255,.55),0 0 36px rgba(0,188,255,.22),inset 0 0 14px rgba(0,188,255,.1)!important;
}
.so-ci-scifi-btn.so-ci-scifi--processing .so-ci-scifi-glow{opacity:1}
.so-ci-scifi-btn.so-ci-scifi--processing .so-ci-scifi-scan{
  opacity:1;animation:soCiLaserScan 1.05s ease-in-out infinite;
}
.so-ci-scifi-btn.so-ci-scifi--success{
  background:linear-gradient(135deg,#43A047,#2E7D32)!important;
  color:#fff!important;border-color:rgba(255,255,255,.35)!important;
  box-shadow:0 0 22px rgba(46,125,50,.65),0 4px 0 #1B5E20!important;
  animation:soCiSuccessPulse .55s ease;
}
.so-ci-scifi-btn.so-ci-scifi--success .so-ci-scifi-icon{color:#fff!important}
.so-ci-scifi-btn.so-ci-scifi--error{
  animation:soCiErrorShake .4s ease;
  box-shadow:0 0 14px rgba(229,57,53,.45)!important;
  border-color:rgba(229,57,53,.5)!important;
}
.so-ci-btns .so-ci-scifi-btn{width:100%}
.so-ci-btns .so-ci-scifi-btn:active:not(:disabled){transform:scale(.96)}
.so-ci-btns .so-ci-scifi-btn.so-ci-scifi--processing{
  box-shadow:0 0 16px rgba(0,188,255,.5),inset 0 0 12px rgba(0,188,255,.12)!important;
}
.so-ci-btns .so-ci-scifi-btn.so-ci-scifi--success{
  box-shadow:0 0 20px rgba(46,125,50,.55)!important;
}
@keyframes soCiLaserScan{
  0%{top:12%;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{top:86%;opacity:0}
}
@keyframes soCiNeonPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.1)}
}
@keyframes soCiSuccessPulse{
  0%{transform:scale(1)}
  35%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
@keyframes soCiErrorShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}
@media(prefers-reduced-motion:reduce){
  .so-ci-scifi-btn.so-ci-scifi--processing{animation:none}
  .so-ci-scifi-btn.so-ci-scifi--processing .so-ci-scifi-scan{animation:none;top:50%;opacity:.7}
  .so-ci-scifi-btn.so-ci-scifi--success{animation:none}
}

/* App tiles — มือถือ 2 คอลัม · คอม 3–4 คอลัม (ไม่กระทบมือถือพี่ซุป) */
.so-app-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.so-app-grid--single{grid-template-columns:1fr}
.so-app-tile.is-hub-hidden{display:none!important}
.so-apps-empty{
  display:none;margin:8px 0 4px;padding:14px 16px;border-radius:12px;
  background:#F8FAFC;border:1px dashed var(--so-border);color:var(--so-muted);
  font-size:13px;line-height:1.5;text-align:center;
}
.so-apps-empty.is-visible{display:block}
.so-app-tile{
  background:var(--so-surface);border:1px solid var(--so-border);border-radius:12px;
  padding:14px;text-align:left;cursor:pointer;position:relative;isolation:isolate;overflow:hidden;
  box-shadow:0 2px 10px rgba(13,71,161,.06);transition:transform .18s,box-shadow .22s,border-color .22s;
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  font-family:inherit;width:100%;
}
.so-app-tile[data-so-app-hub="1"][data-so-app]{
  border:1px solid color-mix(in srgb,var(--so-app-accent,#CBD5E1) 28%,#E2E8F0);
  border-left:4px solid var(--so-app-accent,#1565C0);
  /* Cyber Blue: โครงข่ายพื้นหลังจาง ๆ เพื่อให้ดูเหมือนแอปออนไลน์โดยไม่รบกวนข้อความ */
  background:
    radial-gradient(circle at 84% 20%,rgba(2,136,209,.2) 0 1px,transparent 2px),
    linear-gradient(115deg,transparent 55%,rgba(21,101,192,.045) 55.5%,transparent 56%),
    linear-gradient(135deg,#fff 0%,color-mix(in srgb,var(--so-app-accent,#E3F2FD) 6%,#fff) 100%);
  background-size:42px 42px,100% 100%,100% 100%;
  animation:soAppReveal .55s ease-out backwards,soAppCyberBreath 4.8s ease-in-out 1s infinite;
}
.so-app-grid .so-app-tile:nth-child(2){animation-delay:.08s,1.3s}
.so-app-grid .so-app-tile:nth-child(3){animation-delay:.16s,1.6s}
.so-app-grid .so-app-tile:nth-child(4){animation-delay:.24s,1.9s}
.so-app-grid .so-app-tile:nth-child(5){animation-delay:.32s,2.2s}
.so-app-grid .so-app-tile:nth-child(6){animation-delay:.4s,2.5s}
.so-app-grid .so-app-tile:nth-child(n+7){animation-delay:.48s,2.8s}
/* ลำแสงพลังงานวิ่งผ่านการ์ดเป็นช่วง ๆ และเหลื่อมเวลากัน */
.so-app-tile[data-so-app-hub="1"][data-so-app]::before{
  content:'';position:absolute;z-index:1;pointer-events:none;
  top:-70%;bottom:-70%;left:-45%;width:24%;
  transform:translateX(-240%) rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(79,195,247,.08),rgba(79,195,247,.34),rgba(255,255,255,.5),rgba(79,195,247,.12),transparent);
  filter:blur(.3px);
  animation:soAppEnergyScan 7.2s cubic-bezier(.3,.05,.2,1) infinite;
}
.so-app-grid .so-app-tile:nth-child(2)::before{animation-delay:1.1s}
.so-app-grid .so-app-tile:nth-child(3)::before{animation-delay:2.2s}
.so-app-grid .so-app-tile:nth-child(4)::before{animation-delay:3.3s}
.so-app-grid .so-app-tile:nth-child(5)::before{animation-delay:4.4s}
.so-app-grid .so-app-tile:nth-child(6)::before{animation-delay:5.5s}
.so-app-tile[data-so-app-hub="1"][data-so-app] > *{position:relative;z-index:2}
.so-app-tile[data-so-app-hub="1"][data-so-app]:hover:not(.so-app-tile--disabled){
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--so-app-accent,#1565C0) 52%,#fff);
  box-shadow:0 12px 26px color-mix(in srgb,var(--so-app-accent,#1565C0) 16%,transparent);
}
.so-app-tile[data-so-app="mt-tt"]{--so-app-accent:#0033A0}
.so-app-tile[data-so-app="cvs-nic"]{--so-app-accent:#0288D1}
.so-app-tile[data-so-app="cvs-gro"]{--so-app-accent:#C8102E}
.so-app-tile[data-so-app="scj"]{--so-app-accent:#0D9488}
.so-app-tile[data-so-app="kccvs"]{--so-app-accent:#6366F1}
.so-app-tile[data-so-app="kc"]{--so-app-accent:#F15A29}
.so-app-tile[data-so-app="prt"]{--so-app-accent:#1B4F9C}
.so-app-tile[data-so-app="oa-water"]{--so-app-accent:#1565C0}
/* PMI Admin ใช้น้ำเงินเข้มเพื่อแยกจากแอปปฏิบัติงานทั่วไป */
.so-app-tile[data-so-app="pmi-admin"]{--so-app-accent:#1E3A8A}
.so-app-tile[data-so-app="dsg"]{--so-app-accent:#1E4BA8}
.so-app-tile[data-so-app="report-mpi"]{--so-app-accent:#E85D5D}
.so-app-tile[data-so-app="nn"]{--so-app-accent:#2E7D32}
.so-app-tile[data-so-app="ls"]{--so-app-accent:#C62828}
.so-app-tile[data-so-app="ndg"]{--so-app-accent:#5C3317}
.so-app-tile[data-so-app-hub="1"][data-so-app]:active:not(.so-app-tile--disabled){
  transform:translateY(0) scale(.985);
  box-shadow:0 2px 14px color-mix(in srgb,var(--so-app-accent,#1565C0) 18%,transparent);
}
.so-app-online{
  position:absolute!important;top:10px;right:10px;z-index:3!important;
  display:inline-flex;align-items:center;gap:4px;padding:3px 6px;
  border:1px solid rgba(2,136,209,.16);border-radius:999px;
  background:rgba(239,248,255,.76);color:#0288D1;
  font-family:'Exo 2',sans-serif;font-size:7px;font-weight:800;letter-spacing:.08em;
  backdrop-filter:blur(4px);
}
.so-app-online i{
  width:5px;height:5px;border-radius:50%;background:#29B6F6;
  box-shadow:0 0 0 3px rgba(41,182,246,.1),0 0 8px rgba(41,182,246,.7);
  animation:soAppOnlinePulse 2s ease-in-out infinite;
}
.so-app-tile.is-connecting{
  pointer-events:none;border-color:#29B6F6!important;
  box-shadow:0 0 0 1px rgba(41,182,246,.22),0 10px 28px rgba(13,113,190,.22)!important;
}
.so-app-tile.is-connecting::before{animation-duration:1.05s!important}
.so-app-tile.is-connecting .so-app-online{color:#0D47A1;background:rgba(227,242,253,.94)}
.so-app-tile.is-connecting .so-app-online i{animation-duration:.55s}
.so-app-tile--disabled{
  cursor:not-allowed;opacity:.88;
  background:#F8FAFD;border-color:#D8E2F0!important;
  box-shadow:none;
}
.so-app-tile--disabled .so-app-tile-ic{opacity:.65;filter:grayscale(.35)}
.so-app-tile--disabled .so-app-tile-t,.so-app-tile--disabled .so-app-tile-d{color:#64748B}
.so-app-tile-badge{
  position:absolute;top:8px;right:8px;z-index:2;
  font-size:9px;font-weight:800;letter-spacing:.02em;
  padding:4px 8px;border-radius:999px;
  background:linear-gradient(135deg,#FFF3E0,#FFE0B2);
  color:#E65100;border:1px solid #FFB74D;
  box-shadow:0 2px 8px rgba(230,81,0,.15);
}
.so-app-tile--wide .so-app-tile-badge{top:10px;right:10px;font-size:10px;padding:5px 10px}
.so-app-tile--wide{
  flex-direction:row;align-items:center;gap:14px;padding:16px;
}
.so-app-tile--wide[data-so-app-hub="1"][data-so-app]{
  border:1px solid color-mix(in srgb,var(--so-app-accent,#CBD5E1) 32%,#E2E8F0)!important;
  border-left:4px solid var(--so-app-accent,#1565C0)!important;
}
.so-app-tile:active:not(.so-app-tile--disabled){transform:scale(.98)}
.so-app-tile--locked{opacity:.55}
.so-app-tile--more{border:1.5px dashed var(--so-border);background:#FAFBFE}
.so-app-tile--more .so-app-tile-ic{color:var(--so-blue-deep)}
/* โครงหัวการ์ด: ไอคอน + ชื่อ (รองรับแถบ KPI ด้านล่าง/ข้าง) */
.so-app-tile-main{
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  width:100%;min-width:0;position:relative;z-index:2;
}
.so-app-tile--wide .so-app-tile-main{
  flex-direction:row;align-items:center;gap:14px;flex:1 1 auto;
}
.so-app-tile-copy{min-width:0;flex:1 1 auto}
.so-app-tile-ic{
  width:44px;height:44px;border-radius:11px;
  background:linear-gradient(135deg,#E3F2FD,#BBDEFB);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--so-blue-deep);margin-bottom:8px;flex-shrink:0;
}
.so-app-tile-ic--logo{
  background:#fff;border:2px solid currentColor;padding:4px;
  box-shadow:0 1px 4px rgba(15,23,42,.06);
  overflow:hidden;
}
.so-app-tile[data-so-app-hub="1"] .so-app-tile-ic{
  animation:soAppLogoFloat 4.6s ease-in-out infinite;
}
.so-app-tile-ic--logo img{
  width:100%;height:100%;object-fit:contain;display:block;
}
.so-app-tile-ic--logo[data-so-app="mt-tt"] img{transform:scale(1.02)}
.so-app-tile-ic--logo[data-so-app="cvs-nic"]{padding:3px}
.so-app-tile-ic--logo[data-so-app="cvs-nic"] img{transform:scale(1.08)}
.so-app-tile-ic--logo[data-so-app="cvs-gro"]{padding:4px}
.so-app-tile-ic--logo[data-so-app="cvs-gro"] img{transform:scale(1.12)}
.so-app-tile-ic--logo[data-so-app="kc"]{padding:10px 6px}
.so-app-tile-ic--logo[data-so-app="kc"] img{transform:scale(1.02)}
.so-app-tile-ic--logo[data-so-app="prt"]{padding:4px;color:#1B4F9C}
.so-app-tile-ic--logo[data-so-app="prt"] img{transform:scale(1.06)}
.so-app-tile-ic--logo[data-so-app="oa-water"]{padding:5px}
.so-app-tile-ic--logo[data-so-app="oa-water"] img{transform:scale(1.12)}
.so-app-tile-ic--logo[data-so-app="pmi-admin"]{padding:4px}
.so-app-tile-ic--logo[data-so-app="nn"]{padding:3px}
.so-app-tile-ic--logo[data-so-app="nn"] img{transform:scale(1.08);object-fit:cover}
.so-app-tile-ic--logo[data-so-app="ls"]{padding:4px}
.so-app-tile-ic--logo[data-so-app="ls"] img{transform:scale(1.1)}
.so-app-tile-ic--logo[data-so-app="dsg"]{padding:4px}
.so-app-tile-ic--logo[data-so-app="dsg"] img{transform:scale(1.06)}
.so-app-tile-ic--logo[data-so-app="report-mpi"]{padding:8px 6px}
.so-app-tile-ic--logo[data-so-app="report-mpi"] img{transform:scale(1.14)}
.so-app-tile-ic--logo[data-so-app="ndg"]{padding:3px}
.so-app-tile-ic--logo[data-so-app="ndg"] img{transform:scale(1.12)}
.so-app-tile-ic--logo[data-so-app="npp"],
.so-app-tile-ic--logo[data-so-app="pna"]{padding:8px 4px}
.so-app-tile-ic--logo[data-so-app="uct"]{padding:4px}
.so-app-tile--wide .so-app-tile-ic--logo{width:56px;height:56px;border-radius:12px;padding:5px}
.so-app-tile--wide .so-app-tile-ic--logo[data-so-app="cvs-gro"] img{transform:scale(1.16)}
.so-app-tile--wide .so-app-tile-ic--logo[data-so-app="kc"]{padding:12px 6px}
.so-app-tile--wide .so-app-tile-ic--logo[data-so-app="kc"] img{transform:scale(1.05)}
.so-app-tile--wide .so-app-tile-ic--logo[data-so-app="prt"] img{transform:scale(1.1)}
.so-app-tile--wide .so-app-tile-ic--logo[data-so-app="oa-water"] img{transform:scale(1.16)}
.so-app-tile--wide .so-app-tile-ic--logo[data-so-app="ls"] img{transform:scale(1.14)}
.so-app-tile--wide .so-app-tile-ic--logo[data-so-app="dsg"] img{transform:scale(1.1)}
.so-app-tile--wide .so-app-tile-ic--logo[data-so-app="report-mpi"]{padding:10px 8px}
.so-app-tile--wide .so-app-tile-ic--logo[data-so-app="report-mpi"] img{transform:scale(1.18)}
.so-app-tile--wide .so-app-tile-ic--logo[data-so-app="ndg"] img{transform:scale(1.16)}
.so-app-tile--wide .so-app-tile-ic--logo[data-so-app="npp"],
.so-app-tile--wide .so-app-tile-ic--logo[data-so-app="pna"]{padding:10px 6px}
.so-app-tile--wide .so-app-tile-ic{margin-bottom:0}
.so-app-tile-t{font-size:13px;font-weight:700;color:var(--so-blue-deep);line-height:1.3}
.so-app-tile-d{font-size:10px;color:var(--so-muted);margin-top:3px}
.so-app-tile-arrow{margin-left:auto;color:var(--so-muted);font-size:14px}
.so-apps-intro{font-size:13px;color:var(--so-muted);margin-bottom:14px;line-height:1.5}

/* Mini KPI บนการ์ดแอป Job — สรุปวันนี้เรียงแนวตั้งกะทัดรัด */
.so-app-tile--sod{gap:10px}
.so-app-mini-kpi{
  display:flex;flex-direction:column;align-items:stretch;gap:3px;
  width:100%;margin-top:2px;position:relative;z-index:2;
}
.so-kpi-chip{
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
  gap:6px;min-width:0;padding:3px 7px;border-radius:7px;
  background:rgba(255,255,255,.78);border:1px solid rgba(148,163,184,.22);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  transition:opacity .2s,transform .2s;
}
.so-kpi-chip b{
  font-size:12px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--so-blue-deep);letter-spacing:-.02em;min-width:1.1em;text-align:right;
}
.so-kpi-chip i{
  font-style:normal;font-size:9px;font-weight:700;line-height:1.1;
  color:#64748B;letter-spacing:.01em;white-space:nowrap;
}
.so-kpi-chip--in{background:rgba(232,245,233,.72);border-color:rgba(46,125,50,.22)}
.so-kpi-chip--in b{color:#2E7D32}
.so-kpi-chip--leave{background:rgba(255,243,224,.78);border-color:rgba(239,108,0,.2)}
.so-kpi-chip--leave b{color:#EF6C00}
.so-kpi-chip--miss{background:rgba(255,235,238,.75);border-color:rgba(198,40,40,.18)}
.so-kpi-chip--miss b{color:#C62828}
.so-kpi-chip--it{background:rgba(237,233,254,.78);border-color:rgba(109,40,217,.2)}
.so-kpi-chip--it b{color:#6D28D9}
.so-app-mini-kpi.is-loading .so-kpi-chip b{opacity:.35}
.so-app-mini-kpi.is-loading .so-kpi-chip{
  animation:soKpiPulse 1.1s ease-in-out infinite;
}
@keyframes soKpiPulse{
  0%,100%{opacity:.7}
  50%{opacity:1}
}
.so-app-tile--wide.so-app-tile--sod{
  flex-wrap:wrap;align-items:center;
}
.so-app-tile--wide .so-app-mini-kpi{
  flex:0 0 auto;width:auto;min-width:96px;max-width:120px;margin-top:0;margin-left:auto;
}

@keyframes soAppReveal{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes soAppCyberBreath{
  0%,100%{box-shadow:0 2px 10px rgba(13,71,161,.06)}
  50%{box-shadow:0 5px 18px color-mix(in srgb,var(--so-app-accent,#1565C0) 10%,transparent)}
}
@keyframes soAppEnergyScan{
  0%,68%{transform:translateX(-240%) rotate(16deg);opacity:0}
  72%{opacity:.9}
  88%{opacity:.9}
  94%,100%{transform:translateX(720%) rotate(16deg);opacity:0}
}
@keyframes soAppOnlinePulse{
  0%,100%{opacity:.65;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.16)}
}
@keyframes soAppLogoFloat{
  0%,100%{translate:0 0;box-shadow:0 1px 4px rgba(15,23,42,.06)}
  50%{translate:0 -2px;box-shadow:0 5px 13px rgba(13,71,161,.14)}
}
@media(prefers-reduced-motion:reduce){
  /* เคารพการตั้งค่าลดการเคลื่อนไหวของอุปกรณ์ */
  .so-app-tile,.so-app-tile::before,.so-app-tile-ic,.so-app-online i{animation:none!important}
}

/* Table */
.so-table-wrap{background:var(--so-surface);border:1px solid var(--so-border);border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(13,71,161,.05)}
.so-table{width:100%;border-collapse:collapse;font-size:12px}
.so-table th{
  background:linear-gradient(135deg,var(--so-navy),var(--so-blue-deep));
  color:#fff;font-weight:700;padding:10px 8px;text-align:left;font-size:10px;text-transform:uppercase;
}
.so-table td{padding:10px 8px;border-bottom:1px solid #E8EEF6;vertical-align:top}
.so-table tr:last-child td{border-bottom:none}
.so-table tbody tr:nth-child(even){background:#F6F9FD}
.so-table .so-time{font-weight:700;color:var(--so-blue);font-family:'Exo 2',sans-serif;white-space:nowrap}
.so-table .so-loc{font-size:11px;color:#475569;font-weight:500}
.so-table-foot{padding:10px 12px;font-size:11px;color:var(--so-muted);background:#F0F4FA;border-top:1px solid var(--so-border)}

/* ประวัติเข้างาน — card list + chip filter (UI ใหม่) */
.so-hist-scroll{padding:16px var(--so-gutter) 24px}
.so-hist-admin-note{
  font-size:12px;color:#1565C0;background:#E3F2FD;border:1px solid #BBDEFB;border-radius:10px;
  padding:10px 12px;margin-bottom:12px;line-height:1.45;
}
.so-hist-admin-note i{margin-right:6px}
.so-att-panel-person{font-size:12px;color:var(--so-muted);margin-top:4px;font-weight:600}
.so-att-panel-person i{margin-right:4px;color:var(--so-blue)}
.so-team-date-note--admin{color:#1565C0;background:#E3F2FD;border:1px solid #BBDEFB}
.so-hub-pad{padding:16px var(--so-gutter)}
.so-hist-toolbar{margin-bottom:16px;display:flex;flex-direction:column;gap:12px}
.so-hist-employee-wrap{display:flex;flex-direction:column;gap:6px}
.so-hist-employee-lbl{font-size:12px;font-weight:600;color:var(--so-muted,#64748B);display:flex;align-items:center;gap:6px}
.so-hist-employee{width:100%;max-width:420px}
.so-hist-chips{
  display:flex;gap:8px;flex-wrap:wrap;padding:4px;
  background:var(--so-surface);border:1px solid var(--so-border);border-radius:14px;
  box-shadow:0 1px 4px rgba(13,71,161,.04);
}
.so-hist-chip{
  flex:1;min-width:0;padding:10px 12px;border:none;border-radius:10px;
  background:transparent;color:#64748B;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s,color .15s,box-shadow .15s;
}
.so-hist-chip:hover{background:#F1F5F9;color:var(--so-blue-deep)}
.so-hist-chip.active{
  background:linear-gradient(135deg,var(--so-blue),var(--so-blue-deep));
  color:#fff;box-shadow:0 4px 12px rgba(21,101,192,.25);
}
.so-hist-range-native{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;
}
.so-hist-export-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:10px 12px;background:#F8FAFC;border:1px solid var(--so-border);border-radius:12px;
}
.so-hist-export-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:10px;
  background:linear-gradient(135deg,#2E7D32,#1B5E20);color:#fff;font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 12px rgba(46,125,50,.25);transition:transform .12s,box-shadow .12s,opacity .12s;
}
.so-hist-export-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px rgba(46,125,50,.32)}
.so-hist-export-btn:disabled{opacity:.72;cursor:wait}
.so-hist-export-btn i{color:#C8E6C9}
.so-hist-export-note{font-size:11px;color:var(--so-muted,#64748B);line-height:1.45;flex:1;min-width:180px}
.so-att-list{display:flex;flex-direction:column;gap:12px}
.so-att-list--home{gap:12px}

/* สรุป 7 วัน (Home) — เลื่อนแนวนอน · scroll snap · fade ขอบ · ลากเมาส์ */
.so-att-scroll-wrap{
  position:relative;
  margin-inline:calc(-1 * var(--so-gutter));
  padding-block:12px;
  background:linear-gradient(180deg,#e6edf6 0%,#d8e3f0 100%);
  border-block:1px solid rgba(148,163,184,.28);
}
.so-att-scroll-wrap .so-att-list--home{
  flex-direction:row;flex-wrap:nowrap;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scroll-padding-inline:var(--so-gutter);
  padding-inline:var(--so-gutter);
  padding-bottom:4px;
  margin-inline:0;
  gap:14px;
  cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;
  /* อนุญาตเลื่อนลงหน้าได้ — ไม่ล็อคแนวตั้งเมื่อนิ้วอยู่บนการ์ด */
  touch-action:pan-x pan-y;
  overscroll-behavior-y:auto;
}
.so-att-scroll-wrap .so-att-list--home.is-dragging{
  cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;
  user-select:none;
}
/* ปัดลง = เลื่อนหน้า · ไม่ดึงการ์ดแนวนอน */
.so-att-scroll-wrap .so-att-list--home.is-touch-vertical{
  touch-action:pan-y;
  scroll-snap-type:none;
}
.so-att-scroll-wrap .so-att-list--home::-webkit-scrollbar{display:none;width:0;height:0}
.so-att-scroll-wrap .so-att-list--home > .so-att-panel{
  flex:0 0 auto;flex-shrink:0;
  width:min(88vw,380px);min-width:min(88vw,380px);
  scroll-snap-align:center;scroll-snap-stop:always;
}
.so-att-scroll-wrap .so-att-list--home > .so-att-empty{
  flex:1 0 100%;min-width:100%;scroll-snap-align:none;
}
.so-att-scroll-fade{
  position:absolute;top:0;bottom:0;width:36px;z-index:2;
  pointer-events:none;opacity:1;
  transition:opacity .22s ease;
}
.so-att-scroll-fade--left{
  left:0;
  background:linear-gradient(to right,rgba(230,237,246,.98) 0%,rgba(230,237,246,.55) 45%,transparent 100%);
}
.so-att-scroll-fade--right{
  right:0;
  background:linear-gradient(to left,rgba(216,227,240,.98) 0%,rgba(216,227,240,.55) 45%,transparent 100%);
}
.so-att-scroll-wrap.is-at-start .so-att-scroll-fade--left{opacity:0}
.so-att-scroll-wrap.is-at-end .so-att-scroll-fade--right{opacity:0}
.so-att-scroll-wrap.is-empty .so-att-scroll-fade{opacity:0}
@media(min-width:900px){
  .so-att-scroll-wrap .so-att-list--home > .so-att-panel{
    width:min(72vw,400px);min-width:min(72vw,400px);
  }
}

/* ── สรุป 7 วัน — Data Panel (หน้า Home) ── */
.so-att-panel{
  background:linear-gradient(148deg,#fff 0%,#f6f9fd 48%,#eef3fa 100%);
  border-radius:20px;padding:14px 14px 12px;
  box-shadow:0 10px 28px rgba(13,71,161,.09),0 2px 8px rgba(13,71,161,.05),
    inset 0 1px 0 rgba(255,255,255,.95);
  border:1px solid rgba(200,214,234,.65);
}
.so-att-panel-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;
}
.so-att-panel-date{min-width:0;flex:1}
.so-att-panel-wd{
  display:block;font-size:14px;font-weight:800;color:var(--so-blue-deep);line-height:1.25;
  font-family:'Exo 2',sans-serif;
}
.so-att-panel-dt{display:block;font-size:11px;color:#64748B;font-weight:600;margin-top:1px}
.so-att-panel-tags{display:flex;gap:8px;flex-shrink:0}
.so-att-datatag{
  min-width:68px;padding:7px 10px 6px;border-radius:12px;text-align:center;
  background:linear-gradient(180deg,#eef4fc,#e2ebf6);
  box-shadow:inset 0 2px 5px rgba(13,71,161,.07),0 1px 0 rgba(255,255,255,.8);
  border:1px solid rgba(191,219,254,.55);
}
.so-att-datatag--out{
  background:linear-gradient(180deg,#f2f5f9,#e8edf4);
  border-color:rgba(203,213,225,.7);
}
.so-att-datatag--empty{opacity:.5}
.so-att-datatag-lbl{
  display:flex;align-items:center;justify-content:center;gap:3px;
  font-size:9px;font-weight:700;color:#64748B;text-transform:uppercase;letter-spacing:.03em;
}
.so-att-datatag-lbl i{font-size:8px}
.so-att-datatag-val{
  display:block;margin-top:2px;font-size:17px;font-weight:800;line-height:1.1;
  font-family:'Exo 2',sans-serif;font-variant-numeric:tabular-nums;color:var(--so-blue);
}
.so-att-datatag--out .so-att-datatag-val{color:var(--so-blue-deep)}
.so-att-panel-mid{margin-bottom:0}
.so-att-panel-loc{
  display:flex;align-items:flex-start;gap:5px;margin-bottom:6px;min-width:0;
}
.so-att-panel-loc i{color:var(--so-blue);font-size:10px;flex-shrink:0;margin-top:2px}
.so-att-loc-lines{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.so-att-loc-store{
  font-size:11px;font-weight:700;color:#475569;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.so-att-loc-geo{
  font-size:9px;font-weight:500;color:#94A3B8;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.so-att-loc-geo--pending{font-style:italic;opacity:.85}
.so-att-tl-wrap{margin-top:2px}
.so-att-tl-scale{
  position:relative;height:13px;margin-bottom:3px;
}
.so-att-tl-lbl{
  position:absolute;top:0;transform:translateX(-50%);
  font-size:8px;font-weight:600;color:#94A3B8;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.so-att-tl-lbl--start{transform:none;left:0!important;text-align:left}
.so-att-tl-lbl--end{transform:translateX(-100%);text-align:right}
.so-att-tl-track{
  position:relative;height:30px;border-radius:10px;overflow:visible;
  background:linear-gradient(180deg,#e8edf4,#dfe6ef);
  box-shadow:inset 0 2px 6px rgba(13,71,161,.1);
  border:1px solid rgba(203,213,225,.6);
}
.so-att-tl-ticks{
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent,transparent calc(10% - 1px),rgba(100,116,139,.28) calc(10% - 1px),rgba(100,116,139,.28) 10%);
}
.so-att-tl-span{
  position:absolute;top:7px;bottom:7px;border-radius:5px;z-index:1;
  background:linear-gradient(90deg,rgba(67,160,71,.28),rgba(255,183,77,.32));
  border:1px solid rgba(255,255,255,.35);
}
.so-att-tl-marker{
  position:absolute;top:4px;bottom:4px;z-index:2;
  width:42px;margin-left:-21px;padding:0;border:0;
  display:flex;align-items:center;justify-content:center;
  gap:3px;font-family:inherit;font-size:8px;font-weight:800;letter-spacing:.03em;color:#fff;
  border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.so-att-tl-marker--in{
  background:linear-gradient(180deg,#43A047,#2E7D32);
  border:1px solid rgba(255,255,255,.3);
}
.so-att-tl-marker--out{
  background:linear-gradient(180deg,#FFB74D,#F57C00);
  border:1px solid rgba(255,255,255,.35);
  z-index:3;
}
/* จุด IN/OUT ที่มีรูปเป็นปุ่มดูหลักฐานบน timeline โดยตรง ไม่ปะปนกับปุ่มเช็คอิน */
.so-att-tl-marker--photo{
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 3px 9px rgba(13,71,161,.2),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s ease,filter .12s ease;
}
.so-att-tl-marker--photo i{font-size:7px;opacity:.95}
.so-att-tl-marker--photo:active{transform:scale(.92);filter:brightness(.96)}
.so-att-tl-marker--static{width:30px;margin-left:-15px}
.so-att-tl-photo-hint{
  display:flex;align-items:center;justify-content:flex-end;gap:4px;
  margin-top:6px;font-size:8px;font-weight:600;color:#94A3B8;
}
.so-att-tl-photo-hint i{font-size:8px;color:var(--so-blue)}
.so-att-panel-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.so-att-panel-photos{display:flex;align-items:center;gap:6px;flex-shrink:0}
.so-att-photo--panel{
  width:42px;height:42px;border-radius:10px;border:2px solid rgba(255,255,255,.9);
  box-shadow:0 3px 10px rgba(13,71,161,.12);
}
.so-att-photo--panel .so-att-photo-lbl{font-size:8px;padding:2px 0}
.so-att-panel-actions{display:flex;gap:8px;flex:1;justify-content:flex-end;min-width:0}
.so-att-pill{
  flex:1;max-width:88px;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:10px 8px;border:none;border-radius:999px;font-size:11px;font-weight:800;
  font-family:'Exo 2',sans-serif;letter-spacing:.04em;cursor:pointer;
  transition:transform .1s,box-shadow .1s;-webkit-tap-highlight-color:transparent;
}
.so-att-pill i{font-size:10px}
.so-att-pill--in{
  background:linear-gradient(180deg,#fff,#f0f4fa);color:var(--so-blue);
  box-shadow:0 4px 0 #b0bec5,0 6px 14px rgba(13,71,161,.1);
  border:1px solid rgba(200,214,234,.8);
}
.so-att-pill--out{
  background:linear-gradient(180deg,var(--so-blue-bright),var(--so-blue-deep));color:#fff;
  box-shadow:0 4px 0 #0a3470,0 6px 14px rgba(13,71,161,.22);
}
.so-att-pill:active:not(.so-att-pill--empty){transform:translateY(2px);box-shadow:0 1px 0 #b0bec5,0 2px 6px rgba(13,71,161,.08)}
.so-att-pill--out:active:not(.so-att-pill--empty){box-shadow:0 1px 0 #0a3470,0 2px 6px rgba(13,71,161,.15)}
.so-att-pill--empty{
  opacity:.45;cursor:default;pointer-events:none;
  box-shadow:inset 0 2px 4px rgba(13,71,161,.06);border:1px dashed var(--so-border);
  background:#f8fafc;color:#94a3b8;
}
@media(max-width:380px){
  .so-att-panel-tags{gap:6px}
  .so-att-datatag{min-width:60px;padding:6px 8px}
  .so-att-datatag-val{font-size:15px}
  .so-att-pill{max-width:76px;padding:9px 6px;font-size:10px}
  .so-att-photo--panel{width:38px;height:38px}
}

.so-att-list-foot{
  margin-top:10px;padding:0;font-size:12px;color:#64748B;text-align:center;
}
.so-att-list-foot-btn{
  width:100%;border:1px solid var(--so-border);background:var(--so-surface);border-radius:12px;
  padding:10px 12px;font-size:12px;color:#64748B;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 1px 4px rgba(13,71,161,.04);transition:background .15s;
}
.so-att-list-foot-btn:active{background:#F0F6FF}
.so-att-list-foot-btn strong{color:var(--so-blue-deep);font-weight:700}
.so-att-list-foot strong{color:var(--so-blue-deep);font-weight:700}
.so-hist-scroll .so-att-list-foot{
  margin-top:14px;padding:12px 14px;background:var(--so-surface);
  border:1px solid var(--so-border);border-radius:12px;
}
.so-att-empty{
  text-align:center;padding:32px 20px;color:#64748B;font-size:14px;line-height:1.6;
  background:var(--so-surface);border:1px dashed var(--so-border);border-radius:14px;
}
.so-att-empty i{display:block;font-size:28px;margin-bottom:10px;color:var(--so-blue);opacity:.7}
.so-att-card{
  background:var(--so-surface);border:1px solid var(--so-border);border-radius:16px;
  padding:16px;box-shadow:0 2px 12px rgba(13,71,161,.06);
  transition:box-shadow .2s,transform .2s;
}
.so-att-card:active{transform:scale(.995)}
.so-att-card-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;
}
.so-att-card-date{display:flex;flex-direction:column;gap:2px;min-width:0}
.so-att-card-weekday{font-size:15px;font-weight:700;color:var(--so-blue-deep);line-height:1.3}
.so-att-card-rest{font-size:12px;color:#64748B;font-weight:500}
.so-att-card-times{display:flex;gap:8px;flex-shrink:0}
.so-att-time-block{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:72px;padding:8px 10px;border-radius:12px;
  background:linear-gradient(180deg,#EFF6FF,#E0F2FE);border:1px solid #BFDBFE;
}
.so-att-time-block--out{background:linear-gradient(180deg,#F0F4FA,#E8EEF6);border-color:#CBD5E1}
.so-att-time-block--empty{opacity:.55}
.so-att-time-label{font-size:10px;font-weight:600;color:#64748B;text-transform:uppercase;letter-spacing:.02em}
.so-att-time-label i{font-size:9px;margin-right:2px}
.so-att-time-val{font-size:18px;font-weight:800;color:var(--so-blue);font-family:'Exo 2',sans-serif;line-height:1.1}
.so-att-time-block--out .so-att-time-val{color:var(--so-blue-deep)}
.so-att-card-loc{
  display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:600;color:#334155;
  margin-bottom:14px;padding:10px 12px;background:#F8FAFC;border-radius:10px;line-height:1.45;
}
.so-att-card-loc i{color:var(--so-blue);margin-top:2px;flex-shrink:0}
.so-att-card-photos{display:flex;flex-wrap:wrap;gap:10px}
.so-att-photo--card{width:56px;height:56px;border-radius:12px;border-color:#CBD5E1}
.so-att-photo--card .so-att-photo-lbl{font-size:9px;padding:2px 0}

.so-att-photos{white-space:nowrap;vertical-align:middle}
.so-att-photo{
  display:inline-block;position:relative;width:40px;height:40px;margin:2px;padding:0;border:2px solid var(--so-border);
  border-radius:8px;overflow:hidden;cursor:pointer;background:#fff;vertical-align:middle;
}
.so-att-photo img{width:100%;height:100%;object-fit:cover;display:block}
.so-att-photo-lbl{
  position:absolute;bottom:0;left:0;right:0;font-size:8px;font-weight:700;text-align:center;
  background:rgba(21,101,192,.85);color:#fff;line-height:1.4;
}
.so-att-photo-lbl--out{background:rgba(13,71,161,.9)}
.so-att-no-photo{color:var(--so-muted);font-size:12px}
.so-att-photo-modal{
  position:fixed;inset:0;z-index:10000;background:rgba(10,22,40,.75);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.so-att-photo-modal-inner{
  position:relative;background:#fff;border-radius:14px;padding:16px;max-width:420px;width:100%;
  box-shadow:0 20px 60px rgba(13,71,161,.35);
}
.so-att-photo-modal-inner img{max-width:100%;max-height:70vh;border-radius:10px;display:block;margin:0 auto}
.so-att-photo-modal-title{font-size:14px;font-weight:700;color:var(--so-blue-deep);margin-bottom:10px;text-align:center}
.so-att-photo-close{
  position:absolute;top:8px;right:8px;width:32px;height:32px;border:none;border-radius:50%;
  background:#F0F4FA;color:var(--so-blue-deep);cursor:pointer;font-size:16px;
}

.so-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}
.so-dot-in{background:var(--so-cyan);box-shadow:0 0 6px rgba(0,180,255,.5)}
.so-dot-out{background:var(--so-blue-deep)}
.so-dot-wait{background:var(--so-accent)}
.so-today-row{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:6px}
.so-today-row--ok{opacity:.92;font-size:12px}

/* Check-in panels */
.so-ci-panel{background:var(--so-surface);border:1px solid var(--so-border);border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 2px 10px rgba(13,71,161,.05)}
.so-ci-label{font-size:11px;font-weight:800;color:var(--so-blue);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.so-ci-inp,.so-select{width:100%;padding:11px;border:1.5px solid var(--so-border);border-radius:10px;font-size:14px;font-family:inherit;background:#F8FAFD;margin-bottom:8px;transition:border-color .15s,background .15s,box-shadow .15s}
.so-ci-inp:focus,.so-select:focus{outline:none;border-color:var(--so-blue);background:#fff;box-shadow:0 0 0 3px rgba(21,101,192,.12)}
.so-ci-inp--editable{background:#fff;border-color:#CBD5E1}
.so-admin-field-note{font-size:11px;color:var(--so-muted);margin:-4px 0 8px;line-height:1.45}
.so-ci-photo{margin-bottom:12px;padding:16px;background:#F0F6FF;border-radius:10px;border:1px dashed var(--so-blue-bright);text-align:center}
.so-ci-photo-preview-area{
  position:relative;min-height:140px;margin:8px 0 10px;border-radius:12px;
  background:#E8EEF5;border:1px solid rgba(21,101,192,.12);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.so-ci-photo-placeholder{font-size:48px;color:#90A4AE;opacity:.55;line-height:1}
.so-ci-photo-preview-wrap{width:100%;min-height:140px;display:flex;align-items:center;justify-content:center}
#ci-photo-preview,.so-ci-photo-preview-wrap img{
  max-height:220px!important;width:100%;object-fit:contain;background:#0a1628;display:block;
}
.so-ci-photo-note{font-size:11px;color:var(--so-muted);margin:0 0 10px;line-height:1.45}
.so-ci-photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.so-ci-photo-hint{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  margin-top:0;padding:10px 12px;background:var(--so-blue);color:#fff;
  border:none;border-radius:10px;font-size:12px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:transform .12s,background .15s;width:100%;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.so-ci-photo-hint:active{transform:scale(.97)}
.so-ci-photo-hint--change{background:var(--so-blue-deep)}
.so-ci-photo-hint--gallery{background:#fff;color:var(--so-blue-deep);border:1.5px solid var(--so-blue-bright)}
.so-ci-photo-hint--gallery.so-ci-photo-hint--change{background:#E3F2FD;border-color:var(--so-blue)}
.so-ci-photo-hint i{margin-right:0}
.so-cam-viewfinder{min-height:50vh;min-height:50dvh}
.so-cam-viewfinder video{image-rendering:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}
.so-ci-photo-lbl{font-size:12px;color:var(--so-blue);margin-bottom:8px;font-weight:700}
.so-ci-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.so-btn-in{background:linear-gradient(135deg,var(--so-blue-bright),var(--so-blue))!important}
.so-btn-out{background:linear-gradient(135deg,var(--so-navy),var(--so-blue-deep))!important}
.so-ci-gps{
  margin:10px 0;padding:10px 12px;background:#E3F2FD;border-radius:10px;
  font-size:12px;color:var(--so-blue-deep);line-height:1.5;border:1px solid #BBDEFB;
}
.so-ci-gps strong{font-family:'Exo 2',monospace;font-weight:700}
.so-ci-active{margin:10px 0;padding:12px;background:#E8F5E9;border-radius:10px;border:1px solid #A5D6A7;font-size:13px}
.so-ci-active-t{font-weight:700;color:#2E7D32;margin-bottom:4px}
.so-topbar-sub{font-size:11px;color:var(--so-muted);margin-top:2px}
.so-login-error{background:#FFEBEE;color:#C62828;border-radius:8px;padding:10px 14px;font-size:13px;margin-bottom:14px;text-align:center}
.so-login-remember{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.so-login-remember input{width:16px;height:16px;accent-color:var(--so-blue)}
.so-login-remember label{font-size:13px;color:var(--so-muted);cursor:pointer}
.so-auth-link-btn{
  display:block;width:100%;margin-top:12px;border:none;background:none;
  color:var(--so-blue);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:8px;
}
.so-auth-hint{font-size:13px;color:var(--so-muted);line-height:1.6;margin-bottom:16px}
.so-auth-hint code{background:#E3F2FD;padding:2px 6px;border-radius:4px;font-size:12px}
.so-auth-status{padding:12px;border-radius:10px;font-size:13px;margin-bottom:14px;line-height:1.5}
.so-auth-status--ok{background:#E8F5E9;color:#2E7D32}
.so-auth-status--err{background:#FFEBEE;color:#C62828}
.so-account-card{background:#F8FAFD;border:1px solid var(--so-border);border-radius:12px;padding:14px 16px}
.so-account-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--so-border);font-size:13px}
.so-account-row:last-child{border-bottom:none}
.so-account-row span{color:var(--so-muted)}
.so-account-name-field{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--so-border)}
.so-acc-save-name-btn{width:100%;margin:0 0 14px;font-size:14px;padding:10px}
.so-profile-photo-section{text-align:center;margin-bottom:20px;padding:16px;background:#F8FAFD;border:1px solid var(--so-border);border-radius:14px}
.so-profile-photo-wrap{width:96px;height:96px;margin:0 auto 12px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--so-blue),var(--so-blue-deep));display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;font-weight:700;border:3px solid #fff;box-shadow:0 4px 16px rgba(13,71,161,.2);position:relative}
.so-profile-photo-img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;z-index:2}
.so-profile-photo-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px;position:relative;z-index:1}
.so-profile-photo-actions{display:flex;flex-direction:column;align-items:center;gap:6px}
.so-profile-upload-btn{width:auto;padding:10px 18px;font-size:13px}
.so-profile-photo-hint{font-size:11px;color:var(--so-muted)}
.so-table-empty{text-align:center;color:var(--so-muted);padding:20px!important;font-size:13px}

/* Check-in — สถานะวันนี้ + timeline */
.so-ci-done-banner{padding:10px 12px;border-radius:10px;font-size:13px;font-weight:600;margin-bottom:10px;line-height:1.45}
.so-ci-done-banner--ok{background:#E8F5E9;color:#1B5E20;border:1px solid #A5D6A7}
.so-ci-done-banner--wait{background:#FFF8E1;color:#E65100;border:1px solid #FFE082}
.so-ci-done-banner--info{background:#E3F2FD;color:#0D47A1;border:1px solid #90CAF9}
.so-ci-pill-row{display:flex;flex-wrap:wrap;gap:8px}
.so-ci-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700}
.so-ci-pill--in{background:#E3F2FD;color:#1565C0}
.so-ci-pill--out{background:#E8EAF6;color:#283593}
.so-ci-pill--none{background:#F5F5F5;color:#757575}
.so-ci-today-log{margin-top:12px;padding-top:12px;border-top:1px dashed var(--so-border)}
.so-ci-today-log-hdr{font-size:11px;font-weight:800;color:var(--so-muted);text-transform:uppercase;margin-bottom:10px}
.so-ci-today-log-list{display:flex;flex-direction:column;gap:0}
.so-ci-log-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0}
.so-ci-log-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
.so-ci-log-item--in .so-ci-log-dot{background:#E3F2FD;color:#1565C0}
.so-ci-log-item--out .so-ci-log-dot{background:#E8EAF6;color:#283593}
.so-ci-log-body{flex:1;min-width:0}
.so-ci-log-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:2px}
.so-ci-log-action{font-size:13px;font-weight:700;color:var(--so-navy)}
.so-ci-log-time{font-size:12px;color:var(--so-muted);font-weight:600}
.so-ci-log-loc{font-size:11px;color:var(--so-muted);line-height:1.4}
.so-ci-log-auto{font-size:10px;font-weight:700;color:#E65100;background:#FFF3E0;padding:1px 6px;border-radius:4px;margin-left:4px}
.so-ci-log-photo{width:44px;height:44px;border-radius:8px;overflow:hidden;border:2px solid var(--so-border);padding:0;cursor:pointer;flex-shrink:0;background:#fff}
.so-ci-log-photo img{width:100%;height:100%;object-fit:cover}
.so-ci-log-line{width:2px;height:8px;background:var(--so-border);margin-left:15px}

/* Bottom nav */
.so-bottom-nav{
  display:none;flex-shrink:0;
  background:var(--so-surface);border-top:1px solid var(--so-border);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom,0));
  justify-content:space-around;box-shadow:0 -4px 20px rgba(13,71,161,.08);
}
.so-bnav{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  border:none;background:none;color:var(--so-muted);font-family:inherit;font-size:10px;
  font-weight:600;cursor:pointer;padding:6px 4px;border-radius:8px;
}
.so-bnav i{font-size:18px}
.so-bnav.active{color:var(--so-blue);background:rgba(21,101,192,.08)}

.toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--so-navy);color:#fff;padding:12px 20px;border-radius:10px;
  font-size:13px;z-index:9999;opacity:0;transition:.3s;max-width:90%;text-align:center;
  border-left:3px solid var(--so-cyan);pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Desktop — sidebar + เต็มความกว้างจอ */
@media(min-width:900px){
  .so-mock-badge{top:8px;border-radius:999px}
  .so-sidebar{display:none!important}
  .so-shell.so-logged-in:not(.so-on-login) .so-sidebar{display:flex!important}
  .so-shell.so-logged-in .so-topbar-menu{display:none}
  .so-bottom-nav{display:none!important}
  .so-shell.so-logged-in .so-bottom-nav{display:none!important}
  .so-main{background:var(--so-bg)}
  .so-shell.so-logged-in:not(.so-on-login) .app{
    max-width:none;width:100%;margin:0;border-radius:0;
    box-shadow:none;overflow:hidden;
    border:none;min-height:100vh;
  }
  .so-shell.so-on-login .so-main{
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;padding:24px 16px;
  }
  .so-shell.so-on-login .app{
    max-width:440px;width:100%;margin:0 auto;
    border-radius:16px;box-shadow:0 8px 40px rgba(13,71,161,.12);
    border:1px solid var(--so-border);overflow:hidden;
    min-height:0;flex:0 1 auto;
  }
  .so-kpi-strip{padding-top:20px}
  .so-hub-scroll{padding-bottom:32px}
  /* หน้าย่อย: ซ่อนปุ่มกลับเมื่อมี sidebar */
  .so-shell.so-logged-in:not(.so-on-login) .so-topbar--sub .so-topbar-back{display:none}
  /* แอปของฉัน — คอม 3 คอลัม (มือถือยัง 2) */
  .so-app-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .so-app-grid--single{grid-template-columns:repeat(3,1fr);gap:12px}
  /* การ์ด wide บนกริดหลายคอลัม — จัดแนวตั้งให้อ่านง่าย */
  .so-app-grid--single .so-app-tile--wide{
    flex-direction:column;align-items:flex-start;gap:10px;padding:14px;
  }
  .so-app-grid--single .so-app-tile--wide .so-app-tile-main{
    flex-direction:column;align-items:flex-start;gap:0;width:100%;
  }
  .so-app-grid--single .so-app-tile--wide .so-app-tile-ic{margin-bottom:8px}
  .so-app-grid--single .so-app-tile--wide .so-app-tile-arrow{display:none}
  .so-app-grid--single .so-app-tile--wide .so-app-mini-kpi{
    max-width:120px;width:auto;min-width:96px;margin-left:auto;align-self:center;
  }
  /* Desktop: KPI แนวตั้งด้านขวา ใช้พื้นที่ว่างการ์ด */
  .so-app-tile--sod:not(.so-app-tile--wide){
    flex-direction:row;align-items:center;gap:8px;
  }
  .so-app-tile--sod:not(.so-app-tile--wide) .so-app-tile-main{
    flex:1 1 auto;min-width:0;max-width:none;
  }
  .so-app-tile--sod:not(.so-app-tile--wide) .so-app-mini-kpi{
    flex:0 0 auto;width:auto;min-width:92px;max-width:118px;margin-top:0;
  }
}
@media(min-width:1200px){
  .so-app-grid{grid-template-columns:repeat(4,1fr)}
  .so-app-grid--single{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:899px){
  :root{--so-gutter:12px}
  .so-shell.so-logged-in .so-bottom-nav{display:flex}
  .so-sidebar{display:none!important}
  /* เนื้อหาเต็มจอ — สอดคล้อง Header / Bottom nav */
  .so-main{width:100%;min-width:0}
  .so-shell.so-logged-in .app{
    max-width:100%;width:100%;margin:0;
    border-radius:0;border:none;box-shadow:none;
  }
  .so-hub-scroll{width:100%;padding-bottom:calc(64px + env(safe-area-inset-bottom,0))}
  .so-section{padding-top:8px;padding-bottom:6px}
  .so-kpi-strip{padding-top:10px}
  .so-hub-pad{padding-top:10px;padding-bottom:12px}
  .so-apps-intro{margin-bottom:10px;font-size:12px}
  .so-app-grid{gap:8px}
  /* มือถือ: การ์ดกะทัดรัด — KPI เป็นกริด 2 คอลัม ลดความสูงการ์ด / เลื่อนน้อยลง */
  .so-app-tile,
  .so-app-tile--wide,
  .so-app-tile--sod,
  .so-app-tile--wide.so-app-tile--sod{
    flex-direction:column;align-items:stretch;gap:6px;padding:10px;
  }
  .so-app-tile--sod .so-app-tile-main,
  .so-app-tile--wide .so-app-tile-main{
    flex-direction:row;align-items:center;gap:8px;width:100%;
  }
  .so-app-tile--wide .so-app-tile-ic--logo,
  .so-app-tile[data-so-app-hub="1"] .so-app-tile-ic{
    width:40px;height:40px;border-radius:10px;margin-bottom:0;
  }
  .so-app-tile-t{font-size:12px}
  .so-app-tile-d{
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
    font-size:9px;margin-top:1px;
  }
  .so-app-tile-arrow{display:none}
  .so-app-online{top:6px;right:6px;padding:2px 6px;font-size:8px;gap:3px}
  .so-app-online span{display:none}
  .so-app-it-badge{top:-4px;right:-4px;min-width:18px;height:18px;font-size:10px}
  .so-app-mini-kpi,
  .so-app-tile--wide .so-app-mini-kpi,
  .so-app-tile--sod .so-app-mini-kpi{
    display:grid;grid-template-columns:1fr 1fr;gap:4px;
    width:100%;max-width:none;min-width:0;margin:0;align-self:stretch;
  }
  .so-kpi-chip{padding:3px 6px;border-radius:6px;gap:4px;justify-content:space-between}
  .so-kpi-chip b{font-size:11px;min-width:0}
  .so-kpi-chip i{font-size:8px}
}
@media(max-width:480px){
  :root{--so-gutter:10px}
  .so-app-grid{gap:6px}
  .so-app-tile,
  .so-app-tile--wide,
  .so-app-tile--sod{padding:8px;gap:5px}
  .so-app-tile-d{display:none}
  .so-kpi-chip{padding:2px 5px}
  .so-kpi-chip b{font-size:10px}
  .so-kpi-chip i{font-size:7px;letter-spacing:0}
}

/* ── Camera overlay (Staff Office theme) ── */
.so-cam-overlay{
  position:fixed;inset:0;z-index:10000;background:#0A1628;
  display:none;flex-direction:column;
}
.so-cam-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;flex-shrink:0;
  background:linear-gradient(180deg,rgba(10,22,40,.85),transparent);
}
.so-cam-btn-icon{
  background:rgba(255,255,255,.12);border:none;color:#fff;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.so-cam-count{color:#fff;font-size:13px;font-weight:600;font-family:'Exo 2',sans-serif}
.so-cam-viewfinder{position:relative;flex:1;overflow:hidden;background:#000}
.so-cam-viewfinder video{width:100%;height:100%;object-fit:cover;display:block}
.so-cam-gps{
  position:absolute;top:12px;left:12px;right:12px;z-index:5;
  background:rgba(13,71,161,.88);color:#fff;font-size:12px;
  padding:8px 12px;border-radius:10px;align-items:center;gap:6px;
  backdrop-filter:blur(6px);line-height:1.4;
}
.so-cam-grid{position:absolute;inset:0;pointer-events:none;opacity:.22}
.so-cam-grid-line{position:absolute;background:#fff}
.so-cam-grid-h1,.so-cam-grid-h2{left:0;right:0;height:1px}
.so-cam-grid-h1{top:33.3%}.so-cam-grid-h2{top:66.6%}
.so-cam-grid-v1,.so-cam-grid-v2{top:0;bottom:0;width:1px}
.so-cam-grid-v1{left:33.3%}.so-cam-grid-v2{left:66.6%}
.so-cam-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .1s}
.so-cam-badge{
  display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(46,125,50,.92);color:#fff;padding:10px 18px;border-radius:20px;
  font-size:14px;font-weight:600;gap:6px;align-items:center;
}
.so-cam-strip{
  height:72px;background:rgba(10,22,40,.92);display:flex;align-items:center;
  padding:0 12px;gap:8px;overflow-x:auto;flex-shrink:0;
}
.so-cam-strip-inner{display:flex;gap:6px;align-items:center}
.so-cam-strip-empty{color:rgba(255,255,255,.45);font-size:12px}
.so-cam-shutter{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px 32px;background:rgba(10,22,40,.95);flex-shrink:0;
}
.so-cam-preview{
  width:52px;height:52px;border-radius:10px;background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.25);overflow:hidden;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:18px;
}
.so-cam-shutter-btn{
  width:72px;height:72px;border-radius:50%;background:#fff;
  border:4px solid rgba(0,180,255,.6);cursor:pointer;
  box-shadow:0 4px 24px rgba(0,180,255,.35);transition:transform .1s;
}
.so-cam-shutter-btn:active{transform:scale(.94)}
.so-cam-done{
  background:linear-gradient(135deg,#1565C0,#0D47A1);color:#fff;border:none;
  border-radius:10px;padding:10px 16px;font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;min-width:88px;
}
.so-ci-success-icon{font-size:48px;margin-bottom:8px;color:#2E7D32}
.so-ci-gps{font-size:13px;padding:10px 12px;border-radius:10px;line-height:1.5;margin-bottom:10px}
@media(orientation:landscape){
  .so-cam-viewfinder{position:absolute!important;inset:0!important;flex:none!important}
  .so-cam-header{position:absolute;top:0;left:0;right:0;z-index:10;background:rgba(10,22,40,.4)!important;padding:8px 12px!important}
  .so-cam-strip{position:absolute;bottom:80px;left:0;right:0;z-index:10;background:rgba(10,22,40,.4)!important;height:auto!important;min-height:52px}
  .so-cam-shutter{position:absolute;bottom:0;left:0;right:0;z-index:10;background:rgba(10,22,40,.5)!important;padding:12px 24px 16px!important}
}

/* ── Admin / จัดการผู้ใช้ ── */
.so-admin-scroll{padding:var(--so-gutter);padding-bottom:32px}
.so-admin-banner{
  display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:14px;
  background:linear-gradient(135deg,#0D47A1,#1565C0);color:#fff;border-radius:12px;font-size:13px;
}
.so-admin-banner i{font-size:22px;opacity:.9}
.so-admin-banner strong{display:block;font-size:14px;margin-bottom:2px}
.so-admin-banner span{opacity:.85;font-size:12px}
.so-admin-toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.so-admin-add-btn{
  flex-shrink:0;border:none;border-radius:12px;padding:10px 16px;
  background:linear-gradient(135deg,#1565C0,#0D47A1);color:#fff;
  font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;box-shadow:0 4px 14px rgba(21,101,192,.25);
  white-space:nowrap;
}
.so-admin-add-btn:hover{filter:brightness(1.05)}
.so-admin-new-emp-box{
  margin-bottom:14px;padding:12px 14px;border-radius:12px;
  background:#F8FAFF;border:1px dashed #93C5FD;
}
.so-admin-new-emp-box .so-admin-section-title{margin-bottom:10px}
.so-admin-search-wrap{flex:1;min-width:180px;position:relative}
.so-admin-search-wrap i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--so-muted);font-size:13px}
.so-admin-search-wrap input{padding-left:36px}
.so-admin-filter{min-width:140px;max-width:180px}
.so-admin-summary{font-size:12px;color:var(--so-muted);margin-bottom:10px}
.so-admin-table-wrap{overflow-x:auto;border:1px solid var(--so-border);border-radius:12px;background:#fff}
.so-admin-table{font-size:12px}
.so-admin-table code{font-size:11px;background:#F0F4FA;padding:2px 6px;border-radius:4px}
.so-admin-role-badge{
  display:inline-block;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;
  background:#ECEFF1;color:#455A64;white-space:nowrap
}
.so-admin-role-badge--acct{background:#E8F5E9;color:#2E7D32}
.so-admin-role-badge--sysadmin{background:#FCE4EC;color:#C2185B}
.so-admin-role-badge--pm{background:#E3F2FD;color:#1565C0}
.so-admin-un code{font-weight:600;color:var(--so-blue-deep)}
.so-admin-pw code{color:#2E7D32}
.so-admin-pw-current{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;
  margin:0 0 8px;padding:8px 10px;border-radius:10px;
  background:#E8F5E9;border:1px solid #C8E6C9;font-size:13px
}
.so-admin-pw-current-lbl{font-size:11px;font-weight:700;color:#2E7D32;text-transform:uppercase;letter-spacing:.03em}
.so-admin-pw-current-val{
  font-family:ui-monospace,'Cascadia Code',Consolas,monospace;
  font-size:14px;font-weight:700;color:#1B5E20;letter-spacing:.04em
}
.so-admin-pw-copy{
  border:none;background:#fff;color:#2E7D32;width:28px;height:28px;border-radius:8px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.08)
}
.so-admin-pw-copy:hover{background:#F1F8E9}
.so-admin-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;background:#ECEFF1;color:#455A64}
.so-admin-badge--admin{background:#FFEBEE;color:#C62828}
.so-admin-badge--office{background:#E3F2FD;color:#1565C0}
.so-admin-badge--staff{background:#E8F5E9;color:#2E7D32}
.so-admin-st{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.so-admin-st--ok{background:#E8F5E9;color:#2E7D32}
.so-admin-st--off{background:#FFEBEE;color:#C62828}
.so-admin-st--wait{background:#FFF3E0;color:#E65100}
.so-admin-muted{font-size:11px;color:var(--so-muted);margin-top:2px}
.so-admin-actions{white-space:nowrap}
.so-admin-act{
  border:none;background:transparent;color:var(--so-blue);cursor:pointer;
  width:32px;height:32px;border-radius:8px;font-size:14px;
}
.so-admin-act:hover{background:#E3F2FD}
.so-admin-act--danger{color:#C62828}
.so-admin-act--danger:hover{background:#FFEBEE}
.so-admin-modal{
  position:fixed;inset:0;z-index:10002;background:rgba(10,22,40,.55);
  display:none;align-items:center;justify-content:center;padding:16px;
}
.so-admin-modal-card{
  background:#fff;border-radius:14px;width:100%;max-width:420px;
  box-shadow:0 20px 60px rgba(13,71,161,.25);overflow:hidden;
}
.so-admin-modal-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--so-border);
}
.so-admin-modal-hdr h3{margin:0;font-size:15px;color:var(--so-blue-deep)}
.so-admin-modal-close{background:#EEF2F9!important;color:var(--so-text)!important;width:36px;height:36px}
.so-admin-form{padding:16px 18px 18px}
.so-admin-field{margin-bottom:12px}
.so-admin-field label{display:block;font-size:12px;font-weight:600;color:var(--so-muted);margin-bottom:4px}
.so-admin-hint{font-weight:400;color:var(--so-muted)}
.so-admin-field--row{margin-top:4px}
.so-admin-check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.so-admin-form-status{padding:10px 12px;border-radius:8px;font-size:13px;margin-bottom:10px}
.so-admin-form-status--wait{background:#E3F2FD;color:#1565C0}
.so-admin-form-status--ok{background:#E8F5E9;color:#2E7D32}
.so-admin-form-status--err{background:#FFEBEE;color:#C62828}
.so-admin-form-btns{display:flex;gap:8px;flex-wrap:wrap}
.so-admin-form-btns .btn-primary{flex:1;min-width:120px}
.so-topbar-btn--spin i{animation:soSpin .75s linear infinite}
@keyframes soSpin{to{transform:rotate(360deg)}}
.so-mobile-nav-item--refresh{align-items:flex-start;text-align:left}
.so-mobile-nav-item--refresh small{display:block;font-size:10px;font-weight:400;color:var(--so-muted);margin-top:2px;line-height:1.35}
.so-mobile-nav-item--refresh i{color:var(--so-blue)}

/* Admin — กฎสิทธิ์ · แท็บ · โครงสร้างทีม · ตัวอย่าง visibility */
.so-admin-rules{
  background:#F8FAFD;border:1px solid var(--so-border);border-radius:12px;
  padding:12px 14px;margin-bottom:14px;font-size:12px;
}
.so-admin-rules-title{font-weight:700;color:var(--so-blue-deep);margin-bottom:8px;font-size:13px}
.so-admin-rules ul{margin:0;padding-left:18px;color:var(--so-text)}
.so-admin-rules li{margin-bottom:4px}
.so-admin-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.so-admin-tab{
  flex:1;min-width:120px;border:1px solid var(--so-border);background:#fff;
  border-radius:10px;padding:10px 12px;font-size:12px;font-weight:600;color:var(--so-muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
}
.so-admin-tab.active{background:var(--so-blue-deep);color:#fff;border-color:var(--so-blue-deep)}
.so-admin-team-badge{
  display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;
}
.so-admin-team-badge--on{background:#E3F2FD;color:#1565C0}
.so-admin-team-badge--off{background:#F5F5F5;color:#9E9E9E}
.so-admin-export-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;background:#E8F5E9;color:#2E7D32;font-size:11px;vertical-align:middle;
}
.so-admin-export-badge i{line-height:1}
.so-admin-job{font-size:11px;color:var(--so-muted);max-width:140px}
.so-admin-modal-card--wide{max-width:720px;max-height:92vh;display:flex;flex-direction:column}
.so-admin-form--scroll{overflow-y:auto;max-height:calc(92vh - 60px)}
.so-admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.so-admin-form-grid{grid-template-columns:1fr}}
.so-admin-section-title{
  font-size:12px;font-weight:700;color:var(--so-blue-deep);margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
.so-admin-checks{display:flex;flex-direction:column;gap:6px}
.so-admin-hub-note{font-size:12px;color:var(--so-muted);margin:0 0 8px;line-height:1.45}
.so-admin-hub-note--warn{margin-bottom:10px;color:#5D4037}
.so-admin-hub-note code{font-size:11px;background:#E3F2FD;padding:1px 6px;border-radius:4px}
.so-admin-hub-bindings{display:flex;flex-direction:column;gap:10px}
.so-admin-hub-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px;align-items:center;padding:10px 12px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:10px}
.so-admin-hub-row label.so-admin-hub-en{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin:0;cursor:pointer}
.so-admin-hub-row select:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:640px){.so-admin-hub-row{grid-template-columns:1fr}}
.so-admin-vis-preview{
  margin-top:14px;padding:12px;border:1px dashed var(--so-border);border-radius:10px;background:#FAFCFF;
}
.so-admin-vis-preview-h{font-size:12px;font-weight:700;color:var(--so-blue-deep);margin-bottom:8px}
.so-admin-vis-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;font-size:11px}
.so-admin-vis-tier{background:#E3F2FD;color:#1565C0;padding:3px 8px;border-radius:999px;font-weight:600}
.so-admin-vis-count strong{font-size:14px;color:var(--so-blue-deep)}
.so-admin-vis-direct{color:var(--so-muted)}
.so-admin-vis-list{margin:0;padding-left:18px;font-size:12px;max-height:160px;overflow-y:auto}
.so-admin-vis-list li{margin-bottom:3px}
.so-admin-tree-actions{margin-bottom:10px}
.so-admin-tree-root{border:1px solid var(--so-border);border-radius:12px;background:#fff;padding:10px;overflow-x:auto}
.so-admin-tree{font-size:12px;min-width:280px}
.so-admin-tree-node{margin-left:calc(var(--so-tree-depth,0) * 16px)}
.so-admin-tree-row{
  display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;margin-bottom:2px;
}
.so-admin-tree-row:hover{background:#F5F8FC}
.so-admin-tree-tier--md .so-admin-tree-info strong{color:#6A1B9A}
.so-admin-tree-tier--pm .so-admin-tree-info strong,.so-admin-tree-tier--pam .so-admin-tree-info strong{color:#1565C0}
.so-admin-tree-tier--recruitment .so-admin-tree-info strong{color:#00838F}
.so-admin-tree-tier--it .so-admin-tree-info strong{color:#4527A0}
.so-admin-tree-tier--training .so-admin-tree-info strong{color:#EF6C00}
.so-admin-tree-toggle,.so-admin-tree-edit{
  border:none;background:transparent;color:var(--so-blue);cursor:pointer;
  width:28px;height:28px;border-radius:6px;flex-shrink:0;
}
.so-admin-tree-toggle:hover,.so-admin-tree-edit:hover{background:#E3F2FD}
.so-admin-tree-spacer{width:28px;flex-shrink:0}
.so-admin-tree-info{flex:1;min-width:0}
.so-admin-tree-id{font-size:10px;margin-left:4px}
.so-admin-tree-kids{border-left:2px solid #E3F2FD;margin-left:14px;padding-left:4px}
.so-admin-team-note{font-size:12px;color:var(--so-muted);margin:0 0 8px;line-height:1.45}
.so-admin-md-team-note{font-size:13px;color:#1565C0;background:#E3F2FD;border:1px solid #BBDEFB;border-radius:10px;padding:12px 14px;line-height:1.5}
.so-admin-md-team-note i{margin-right:6px}
.so-admin-team-toolbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;align-items:center}
.so-admin-team-toolbar input[type=search]{flex:1;min-width:140px}
.so-admin-team-act{font-size:11px;padding:6px 10px}
.so-admin-team-list{
  max-height:220px;overflow-y:auto;border:1px solid var(--so-border);border-radius:10px;
  background:#fff;padding:6px;display:flex;flex-direction:column;gap:2px;
}
.so-admin-team-item{
  display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;
  border:1px solid transparent;font-size:12px;
}
.so-admin-team-item:hover{background:#F5F8FC;border-color:#E3F2FD}
.so-admin-team-item.is-checked{background:#E3F2FD;border-color:#BBDEFB}
.so-admin-team-item.is-other-mgr{opacity:.92}
.so-admin-team-item input{margin-top:2px;flex-shrink:0}
.so-admin-team-item-main{flex:1;min-width:0}
.so-admin-team-item-main strong{display:block;font-size:13px;color:var(--so-text)}
.so-admin-team-item-meta{font-size:11px;color:var(--so-muted);margin-top:2px}
.so-admin-team-item-warn{font-size:10px;color:#E65100;margin-top:2px}
.so-admin-team-summary{font-size:11px;color:var(--so-muted);margin-top:6px}

/* ทีมของฉัน · แจ้งเตือน · แดชบอร์ดคอลัมน์ */
.so-team-scroll{padding:var(--so-gutter);padding-bottom:32px}
.so-team-dash-title{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font-size:13px;font-weight:800;color:var(--so-blue-deep);font-family:'Exo 2',sans-serif;
}
.so-team-dash-title i{color:#2E7D32}
.so-team-toolbar{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;
}
.so-team-toolbar .so-team-date-bar{margin-bottom:0;flex:1 1 220px}
.so-team-toolbar .so-team-filter{margin-bottom:0;flex:1 1 160px;min-width:140px}
.so-team-summary{margin-bottom:14px}
.so-team-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:480px){.so-team-summary-grid{grid-template-columns:repeat(2,1fr)}}
.so-team-sum{background:#fff;border:1px solid var(--so-border);border-radius:12px;padding:10px;text-align:center}
.so-team-sum span{display:block;font-size:20px;font-weight:800;color:var(--so-blue-deep);font-family:'Exo 2',sans-serif}
.so-team-sum small{font-size:10px;color:var(--so-muted)}
.so-team-sum--in span{color:#1565C0}
.so-team-sum--out span{color:#2E7D32}
.so-team-sum--wait span{color:#E65100}
.so-team-sum--leave span{color:#6A1B9A}
.so-team-tabs{display:flex;gap:6px;margin-bottom:12px}
.so-team-tab{
  flex:1;border:1px solid var(--so-border);background:#fff;border-radius:10px;padding:10px;
  font-size:12px;font-weight:600;color:var(--so-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
}
.so-team-tab.active{background:var(--so-blue-deep);color:#fff;border-color:var(--so-blue-deep)}
.so-team-tab-badge{background:#E53935;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:999px;min-width:18px}
.so-team-date-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.so-team-date-lbl{
  font-size:11px;font-weight:700;color:var(--so-muted);white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
}
.so-team-date-lbl i{color:var(--so-blue)}
.so-team-date-inp{
  flex:1;min-width:0;max-width:180px;padding:8px 10px!important;font-size:13px;
}
.so-team-date-today{
  flex-shrink:0;border:1px solid var(--so-border);background:#fff;border-radius:8px;
  padding:8px 12px;font-size:11px;font-weight:700;color:var(--so-blue-deep);
  cursor:pointer;font-family:inherit;
}
.so-team-date-today:active{background:#F0F6FF}
.so-team-date-note{
  font-size:11px;font-weight:600;color:#1565C0;background:#E3F2FD;
  border:1px solid #BBDEFB;border-radius:8px;padding:6px 10px;margin-bottom:8px;
  display:flex;align-items:center;gap:6px;
}
.so-team-filter{min-width:0}
.so-team-board{
  display:flex;gap:10px;align-items:stretch;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:8px;scroll-snap-type:x proximity;
}
.so-team-col{
  flex:0 0 min(280px,78vw);
  min-width:220px;max-width:320px;
  background:#fff;
  border:2px solid #43A047;
  border-radius:14px;
  padding:8px;
  display:flex;flex-direction:column;gap:8px;
  scroll-snap-align:start;
  min-height:280px;
}
.so-team-col-head{
  background:#FFF59D;color:#5D4037;
  font-size:13px;font-weight:800;text-align:center;
  border-radius:8px;padding:8px 10px;
  font-family:'Exo 2',sans-serif;
}
.so-team-col-sum{
  background:#fff;border:1px solid var(--so-border);border-radius:12px;
  padding:10px 8px;text-align:center;
}
.so-team-col-n{
  display:block;font-size:28px;font-weight:800;line-height:1.1;
  color:var(--so-blue-deep);font-family:'Exo 2',sans-serif;
}
.so-team-col-sum small{font-size:11px;color:var(--so-muted);font-weight:600}
.so-team-col--office .so-team-col-n{color:#1565C0}
.so-team-col--wfh .so-team-col-n{color:#00838F}
.so-team-col--sick .so-team-col-n{color:#C62828}
.so-team-col--annual .so-team-col-n{color:#6A1B9A}
.so-team-col--personal .so-team-col-n{color:#EF6C00}
.so-team-col--other .so-team-col-n{color:#546E7A}
.so-team-col--wait .so-team-col-n{color:#E65100}
.so-team-col--wfh{border-color:#26A69A}
.so-team-col--sick{border-color:#EF5350}
.so-team-col--annual{border-color:#AB47BC}
.so-team-col--personal{border-color:#FFA726}
.so-team-col--wait{border-color:#FFB74D}
.so-team-col-list{
  display:flex;flex-direction:column;gap:6px;
  flex:1;min-height:120px;
  max-height:min(62vh,560px);overflow-y:auto;
  padding-right:2px;
}
.so-team-col-empty{
  font-size:11px;color:var(--so-muted);text-align:center;
  padding:18px 8px;border:1px dashed var(--so-border);border-radius:10px;
}
.so-team-board .so-team-card{padding:7px 8px}
.so-team-board .so-team-info{flex:1 1 auto;max-width:none;min-width:0}
.so-team-board .so-team-st{flex-shrink:0;align-self:flex-start;margin-top:2px}
.so-team-card--board{cursor:default}
.so-team-row--board{align-items:center;gap:8px;min-height:44px}
.so-team-avatar-btn{
  border:1.5px solid rgba(255,255,255,.95);padding:0;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.so-team-avatar-btn:hover,.so-team-avatar-btn:focus-visible{
  transform:scale(1.06);box-shadow:0 2px 10px rgba(13,71,161,.28);outline:none;
}
.so-team-info-btn{
  appearance:none;border:0;background:transparent;padding:0;margin:0;
  text-align:left;cursor:pointer;font:inherit;color:inherit;
  flex:1 1 auto;min-width:0;max-width:none;overflow:hidden;
}
.so-team-info-btn:hover strong{color:var(--so-blue-deep)}
.so-team-card-loc{
  font-size:9.5px;color:#607D8B;margin-top:2px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:4px;
}
.so-team-card-loc i{color:#E53935;font-size:9px;flex-shrink:0}
.so-team-member-modal-card{max-width:440px}
.so-team-member-modal-body{padding:4px 2px 8px}
.so-team-member-modal-hero{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
  padding:10px;border-radius:12px;background:#F5F9FF;border:1px solid #E3EEF9;
}
.so-team-member-modal-avatar{
  width:64px;height:64px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--so-cyan),var(--so-blue-deep));
  color:#fff;font-weight:800;font-size:24px;font-family:'Exo 2',sans-serif;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:2px solid #fff;box-shadow:0 2px 8px rgba(13,71,161,.15);
}
.so-team-member-modal-avatar--photo{background:#E3F2FD}
.so-team-member-modal-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.so-team-member-modal-who{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.so-team-member-modal-who strong{font-size:15px;color:var(--so-text);line-height:1.25}
.so-team-member-modal-pos{font-size:11px;color:var(--so-muted)}
.so-team-detail-grid{display:flex;flex-direction:column;gap:8px}
.so-team-detail-row{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:8px 10px;border-radius:10px;background:#fff;border:1px solid var(--so-border);
}
.so-team-detail-lbl{font-size:11px;font-weight:700;color:var(--so-muted);flex-shrink:0}
.so-team-detail-val{font-size:12px;font-weight:600;color:var(--so-text);text-align:right;line-height:1.35}
.so-team-detail-map{font-size:11px;font-weight:700;color:var(--so-blue);text-decoration:none;white-space:nowrap}
.so-team-detail-map:hover{text-decoration:underline}
.so-team-detail-photo{margin-top:4px}
.so-team-detail-photo-lbl{font-size:11px;font-weight:700;color:var(--so-muted);margin-bottom:6px}
.so-team-detail-photo-btn{
  display:block;width:100%;border:1px solid var(--so-border);border-radius:12px;
  padding:0;overflow:hidden;background:#F8FAFC;cursor:pointer;
}
.so-team-detail-photo-btn img{display:block;width:100%;max-height:220px;object-fit:cover}
/* ประวัติเช็คอินรายวันใน modal สมาชิกทีม */
.so-team-att-hist{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--so-border);
}
.so-team-att-hist-head{
  font-size:12px;font-weight:700;color:var(--so-text);margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
.so-team-att-hist-body{min-height:48px}
.so-team-att-hist-more{margin-top:10px;width:100%;justify-content:center}
.so-team-att-mini{display:flex;flex-direction:column;gap:6px}
.so-team-att-mini-row{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr) auto;
  gap:8px;align-items:center;font-size:11px;padding:8px 10px;
  background:#F8FAFC;border:1px solid var(--so-border);border-radius:10px;
}
.so-team-att-mini-date{font-weight:700;color:var(--so-text)}
.so-team-att-mini-in,.so-team-att-mini-out{color:var(--so-muted);font-weight:600}
.so-team-att-mini-wfh{
  font-size:10px;font-weight:800;color:#1565C0;background:#E3F2FD;
  padding:2px 6px;border-radius:999px;white-space:nowrap;
}
@media(min-width:1100px){
  .so-team-board{overflow-x:visible;flex-wrap:nowrap}
  .so-team-col{flex:1 1 0;min-width:0;max-width:none}
}

/* สถานะล่วงหน้า — ปฏิทินรายเดือนแบบกรอบวัน (แยกจากสถานะวันนี้) */
.so-adv-cal{background:#fff;border:1px solid var(--so-border);border-radius:14px;padding:14px 12px 12px}
.so-adv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.so-adv-year{font-size:12px;font-weight:600;color:#90A4AE;letter-spacing:.04em}
.so-adv-month{font-size:28px;font-weight:800;color:#111;line-height:1;font-family:'Exo 2',sans-serif;letter-spacing:.02em}
.so-adv-nav{display:flex;gap:14px;align-items:center}
.so-adv-nav-btn{
  border:0;background:transparent;padding:4px 0;cursor:pointer;font:inherit;
  font-size:12px;font-weight:700;color:#455A64;letter-spacing:.03em;
}
.so-adv-nav-btn:hover{color:var(--so-blue-deep)}
.so-adv-weekdays{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;margin-bottom:6px;
}
.so-adv-weekday{
  text-align:center;font-size:12px;font-weight:800;color:#111;
  padding:2px 0;font-family:'Exo 2',sans-serif;
}
.so-adv-grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;align-items:stretch;
}
.so-adv-day{
  min-height:108px;max-height:132px;
  padding:6px;
  border:1px solid #D7DEE8;
  border-radius:10px;
  background:#FAFBFD;
  overflow:hidden;
  display:flex;flex-direction:column;gap:4px;
  box-sizing:border-box;
}
.so-adv-day--has{background:#fff}
.so-adv-day-n{
  font-size:13px;font-weight:800;color:#111;line-height:1.1;
  font-family:'Exo 2',sans-serif;flex-shrink:0;
}
.so-adv-day--muted{background:#F3F5F8;border-color:#E2E8F0}
.so-adv-day--muted .so-adv-day-n{color:#B0BEC5;font-weight:600}
.so-adv-day-people{
  display:flex;flex-direction:column;gap:4px;
  min-height:0;flex:1;overflow:hidden;
}
.so-adv-chip{
  display:flex;align-items:center;gap:5px;width:100%;
  border:1px solid #E3EAF5;background:#F8FBFF;border-radius:999px;
  padding:2px 6px 2px 2px;cursor:pointer;text-align:left;font:inherit;
  transition:background .12s ease, border-color .12s ease;
  min-width:0;
}
.so-adv-chip:hover{background:#E3F2FD;border-color:#90CAF9}
.so-adv-chip-avatar{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--so-cyan),var(--so-blue-deep));
  color:#fff;font-size:9px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
}
.so-adv-chip-avatar--photo{background:#E3F2FD}
.so-adv-chip-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.so-adv-chip-name{
  font-size:9.5px;font-weight:700;color:var(--so-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.so-adv-more{
  align-self:flex-start;
  border:0;border-radius:999px;cursor:pointer;font:inherit;
  background:#1565C0;color:#fff;
  font-size:10px;font-weight:800;
  padding:3px 8px;line-height:1.2;
  margin-top:1px;
}
.so-adv-more:hover{background:#0D47A1}
.so-adv-day-more-list{display:flex;flex-direction:column;gap:8px}
.so-adv-day-more-item{
  display:flex;align-items:center;gap:10px;width:100%;
  border:1px solid var(--so-border);background:#fff;border-radius:12px;
  padding:8px 10px;cursor:pointer;text-align:left;font:inherit;
}
.so-adv-day-more-item:hover{background:#F5F9FF;border-color:#90CAF9}
.so-adv-day-more-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.so-adv-day-more-meta strong{font-size:13px;color:var(--so-text)}
.so-adv-day-more-meta small{font-size:11px;color:var(--so-muted)}
.so-adv-day-more-arrow{color:#90A4AE;font-size:12px;flex-shrink:0}
.so-adv-foot{margin-top:10px;font-size:11px;color:var(--so-muted);text-align:center}
@media(max-width:760px){
  .so-adv-month{font-size:22px}
  .so-adv-day{min-height:96px;max-height:120px;padding:5px}
  .so-adv-chip-name{font-size:9px}
  .so-team-tabs{flex-wrap:wrap}
  .so-team-tab{flex:1 1 30%;min-width:110px}
}

/* Work From Home */
.so-wfh-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.so-wfh-sum{background:#fff;border:1px solid var(--so-border);border-radius:12px;padding:10px;text-align:center}
.so-wfh-sum span{display:block;font-size:20px;font-weight:800;color:#00838F;font-family:'Exo 2',sans-serif}
.so-wfh-sum small{font-size:10px;color:var(--so-muted)}
.so-wfh-sum--ok span{color:#2E7D32}
.so-wfh-sum--no span{color:#C62828}
.so-wfh-goals{display:flex;flex-direction:column;gap:8px}
.so-wfh-goal-row{display:flex;gap:8px;align-items:flex-start}
.so-wfh-goal-no{
  flex-shrink:0;min-width:44px;margin-top:8px;
  font-size:11px;font-weight:800;color:#00838F;
}
.so-wfh-goal-inp{flex:1;min-width:0}
.so-wfh-add-goal{
  margin-top:8px;border:1px dashed #80CBC4;background:#E0F7FA;color:#00695C;
  border-radius:10px;padding:10px 12px;font:inherit;font-size:12px;font-weight:700;
  cursor:pointer;width:100%;
}
.so-wfh-add-goal:hover{background:#B2EBF2}
.so-wfh-history{display:flex;flex-direction:column;gap:8px}
.so-wfh-hist-card{
  border:1px solid var(--so-border);border-radius:12px;padding:10px 12px;background:#fff;
}
.so-wfh-hist-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.so-wfh-hist-meta{font-size:11px;color:var(--so-muted);margin-top:4px}
.so-wfh-hist-goals{margin:6px 0 0;padding-left:18px;font-size:12px;color:var(--so-text);line-height:1.45}
.so-wfh-st{font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px}
.so-wfh-st--wait{background:#FFF3E0;color:#E65100}
.so-wfh-st--ok{background:#E8F5E9;color:#2E7D32}
.so-wfh-st--no{background:#FFEBEE;color:#C62828}
.so-wfh-st--cancel{background:#ECEFF1;color:#546E7A}
@media(max-width:480px){.so-wfh-summary-grid{grid-template-columns:repeat(2,1fr)}}

.so-team-list{display:flex;flex-direction:column;gap:4px}
.so-team-card{background:#fff;border:1px solid var(--so-border);border-radius:10px;padding:6px 8px}
.so-team-card--self{border-color:#90CAF9;background:#F8FBFF}
.so-team-row{display:flex;align-items:center;gap:7px;min-height:40px}
.so-team-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--so-cyan),var(--so-blue-deep));
  color:#fff;font-weight:800;font-size:13px;font-family:'Exo 2',sans-serif;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,.95);
  box-shadow:0 1px 4px rgba(13,71,161,.12);
  overflow:hidden;
}
.so-team-avatar--photo{background:#E3F2FD}
.so-team-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.so-team-info{flex:0 1 auto;min-width:72px;max-width:34%;overflow:hidden}
.so-team-card-name{
  display:flex;align-items:baseline;gap:4px;min-width:0;line-height:1.2;
}
.so-team-card-name strong{
  font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.so-team-self,.so-team-pos{font-size:9px;color:var(--so-muted);white-space:nowrap;flex-shrink:0}
.so-team-pos{
  padding:0 4px;border-radius:4px;background:#EEF2F7;color:#78909C;
}
.so-team-card-meta{
  font-size:9.5px;color:var(--so-muted);margin-top:1px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.so-team-st{
  font-size:9px;font-weight:700;padding:3px 6px;border-radius:999px;
  white-space:nowrap;display:inline-flex;align-items:center;gap:3px;flex-shrink:0;
  margin-left:auto;
}
.so-team-st i{font-size:8px}
.so-team-st-txt{max-width:72px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:380px){.so-team-st-txt{display:none}}
.so-team-st--in{background:#E3F2FD;color:#1565C0}
.so-team-st--out{background:#E8F5E9;color:#2E7D32}
.so-team-st--wait{background:#FFF3E0;color:#E65100}
.so-team-st--leave{background:#F3E5F5;color:#6A1B9A}

/* การ์ดทีม — แถวเดียว: รูปย่อ + สถานที่ */
.so-team-extras{
  flex:1;min-width:0;display:flex;align-items:center;gap:5px;overflow:hidden;
}
.so-team-thumbs{display:flex;align-items:center;gap:3px;flex-shrink:0}
.so-team-thumb{
  position:relative;width:34px;height:34px;flex-shrink:0;
  border-radius:7px;overflow:hidden;border:1px solid #D8E2F0;
  padding:0;background:#F5F8FC;cursor:pointer;
}
.so-team-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.so-team-thumb-tag{
  position:absolute;top:2px;left:2px;font-size:6px;font-weight:800;
  padding:1px 3px;border-radius:2px;line-height:1.1;
  background:rgba(13,71,161,.9);color:#fff;
}
.so-team-loc-chip{
  flex:1;min-width:0;display:flex;align-items:center;gap:4px;
  padding:4px 6px;border-radius:7px;text-decoration:none;
  background:#F5F8FC;border:1px solid #E8EEF5;color:#607D8B;
}
.so-team-loc-chip:active{background:#EEF3FA}
.so-team-loc-pin{font-size:10px;color:#1565C0;flex-shrink:0}
.so-team-loc-txt{
  font-size:9px;line-height:1.2;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.so-team-leave-card{background:#fff;border:1px solid var(--so-border);border-radius:12px;padding:12px;margin-bottom:8px}
.so-team-leave-hdr{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.so-team-leave-person{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.so-team-leave-name{font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.so-team-leave-person--modal{margin-bottom:10px}
.so-team-leave-person--modal .so-team-avatar{width:40px;height:40px;font-size:15px}
.so-team-leave-type{font-size:12px;color:var(--so-blue-deep);font-weight:600;margin-bottom:4px}
.so-team-leave-comment{font-size:12px;background:#F5F8FC;padding:8px;border-radius:8px;margin-top:8px}
.so-team-leave-act{margin-top:10px;width:100%}
.so-team-leave-detail{font-size:13px;margin-bottom:12px;line-height:1.5}
.so-home-team-btn{
  width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;
  border:1px solid var(--so-border);border-radius:12px;background:linear-gradient(135deg,#fff,#F0F6FF);
  cursor:pointer;font-size:13px;font-weight:600;color:var(--so-blue-deep);
}
.so-home-team-btn i:first-child{font-size:18px}
.so-home-team-btn span{flex:1;text-align:left}
.so-notif-bell-wrap{position:relative}
.so-notif-badge{
  position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
  background:#E53935;color:#fff;font-size:9px;font-weight:800;border-radius:999px;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.so-notif-panel{
  position:fixed;top:56px;right:12px;z-index:10001;width:min(360px,calc(100vw - 24px));
  background:#fff;border:1px solid var(--so-border);border-radius:14px;
  box-shadow:0 16px 48px rgba(13,71,161,.18);max-height:min(70vh,calc(100vh - 72px));
  display:none;flex-direction:column;overflow:hidden;
}
.so-notif-panel.is-open{display:flex}
.so-notif-panel-hdr{
  display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  border-bottom:1px solid var(--so-border);font-size:13px;color:var(--so-blue-deep);flex-shrink:0;
}
.so-notif-mark-all{border:none;background:none;color:var(--so-blue);font-size:11px;font-weight:600;cursor:pointer}
.so-notif-list{
  overflow-y:auto;overflow-x:hidden;padding:8px;flex:1;min-height:0;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.so-notif-item{padding:10px 12px;border-radius:10px;margin-bottom:4px;font-size:12px;width:100%;border:none;background:transparent;text-align:left;cursor:pointer;font-family:inherit}
.so-notif-item--unread{background:#E3F2FD}
.so-notif-item:hover{background:#F0F6FF}
.so-notif-item-row{display:flex;align-items:flex-start;gap:10px}
.so-notif-ic{
  width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;
}
.so-notif-ic--in{background:#E8F5E9;color:#2E7D32}
.so-notif-ic--out{background:#FFF3E0;color:#E65100}
.so-notif-ic--leave{background:#FCE4EC;color:#C2185B}
.so-notif-ic--it{background:#ECFDF5;color:#047857}
.so-notif-ic--default{background:#E3F2FD;color:var(--so-blue)}
.so-notif-item-body{flex:1;min-width:0}
.so-notif-item-go{font-size:10px;color:#B0BEC5;margin-top:8px;flex-shrink:0}
.so-notif-item-title{font-weight:700;color:var(--so-text);margin-bottom:4px}
.so-notif-item-msg{color:var(--so-muted);line-height:1.45;margin-bottom:4px}
.so-notif-item-meta{font-size:10px;color:#90A4AE}
.so-team-card--flash{
  animation:soTeamFlash 1.2s ease-in-out 2;
  box-shadow:0 0 0 2px var(--so-cyan),0 8px 24px rgba(33,150,243,.2)!important;
}
@keyframes soTeamFlash{
  0%,100%{background:#fff}
  50%{background:#E3F2FD}
}

/* แดชบอร์ดการลา */
.so-leave-scroll{padding:var(--so-gutter)}
.so-leave-dash{
  background:linear-gradient(145deg,#fff,#F0F6FF);border:1px solid var(--so-border);
  border-radius:14px;padding:14px;margin-bottom:14px;
}
.so-leave-dash-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.so-leave-dash-title{font-size:14px;font-weight:700;color:var(--so-blue-deep)}
.so-leave-dash-sub{font-size:11px;color:var(--so-muted);margin-top:2px}
.so-leave-total-pill{
  background:var(--so-blue-deep);color:#fff;font-size:11px;font-weight:700;
  padding:6px 10px;border-radius:20px;white-space:nowrap;
}
.so-leave-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.so-leave-card{
  background:#fff;border:1px solid var(--so-border);border-radius:10px;padding:10px;
  box-shadow:0 2px 8px rgba(13,71,161,.06);
}
.so-leave-card--locked{opacity:.72}
.so-leave-card--loading{grid-column:1/-1;text-align:center;color:var(--so-muted);font-size:13px;padding:16px}
.so-leave-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.so-leave-card-name{font-size:12px;font-weight:700;color:var(--so-text)}
.so-leave-card-used{font-size:13px;font-weight:800;color:var(--so-blue);font-family:'Exo 2',sans-serif}
.so-leave-bar{height:5px;background:#E3ECF8;border-radius:3px;overflow:hidden;margin-bottom:6px}
.so-leave-bar-fill{height:100%;background:linear-gradient(90deg,var(--so-cyan),var(--so-blue));border-radius:3px}
.so-leave-card-foot{font-size:10px;color:var(--so-muted);line-height:1.35}
.so-leave-form-panel{margin-bottom:14px}
.so-leave-form-hint{font-size:13px;color:var(--so-muted);margin:0 0 14px;line-height:1.5}
.so-leave-lbl{text-transform:none!important;font-size:12px!important}
.so-leave-field{margin-bottom:12px}
.so-leave-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.so-leave-type-hint,.so-leave-quota-hint{font-size:11px;color:var(--so-muted);margin-top:6px;line-height:1.4}
.so-leave-quota-hint{color:var(--so-blue);font-weight:600}
.so-leave-days-est{font-size:12px;font-weight:700;color:var(--so-blue-deep);margin:-4px 0 10px}
.so-leave-note{resize:none;box-sizing:border-box;width:100%}
.so-leave-attach-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.so-leave-attach-btn{
  border:1px dashed var(--so-border);background:#F6F9FD;color:var(--so-blue-deep);
  padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;
}
.so-leave-attach-name{font-size:11px;color:var(--so-muted);flex:1;min-width:120px}
.so-leave-attach-preview{margin-top:8px}
.so-leave-attach-preview img{max-width:120px;max-height:90px;border-radius:8px;border:1px solid var(--so-border)}
.so-leave-pdf-tag{font-size:12px;color:var(--so-blue-deep);padding:8px;background:#E3F2FD;border-radius:8px;display:inline-block}
.so-leave-submit{background:linear-gradient(135deg,#C62828,#E53935)!important;width:100%}
.so-leave-status{margin-top:12px;padding:10px 14px;border-radius:10px;font-size:13px;text-align:center}
.so-leave-status--wait{background:#FFF3E0;color:#E65100}
.so-leave-status--ok{background:#E8F5E9;color:#2E7D32}
.so-leave-status--err{background:#FFEBEE;color:#C62828}
.so-leave-st{display:inline-block;font-size:10px;font-weight:700;padding:3px 8px;border-radius:10px}
.so-leave-st--ok{background:#E8F5E9;color:#2E7D32}
.so-leave-st--wait{background:#FFF8E1;color:#F57F17}
.so-leave-st--no{background:#FFEBEE;color:#C62828}
.so-leave-doc-btn{
  border:none;background:#EFF6FF;color:#1565C0;border-radius:8px;padding:6px 10px;cursor:pointer;font-size:13px;
  min-width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:background .2s ease,opacity .2s ease;
}
.so-leave-doc-btn--wide{width:100%;margin-top:8px;padding:10px 14px;font-weight:600;height:auto;min-width:0}
.so-leave-doc-btn-spin{display:none;align-items:center;gap:6px;font-size:13px}
.so-leave-doc-btn-spin .fa-clock{animation:soLeaveClockTick 1.2s ease-in-out infinite}
.so-leave-doc-btn.is-loading{background:#DBEAFE;color:#0D47A1;pointer-events:none}
.so-leave-doc-btn.is-loading .so-leave-doc-btn-label{display:none}
.so-leave-doc-btn.is-loading .so-leave-doc-btn-spin{display:inline-flex}
.so-leave-doc-img{max-width:100%;max-height:70vh;border-radius:8px;display:block;margin:0 auto;animation:soLeaveDocFadeIn .35s ease}
.so-team-leave-attach{margin-top:8px}
.so-leave-pdf-frame{width:100%;height:60vh;border:none;border-radius:8px;animation:soLeaveDocFadeIn .35s ease}
#so-leave-doc-body{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.so-leave-doc-load{text-align:center;padding:28px 16px 20px;width:100%}
.so-leave-doc-load-visual{
  position:relative;width:88px;height:88px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
}
.so-leave-doc-load-orbit{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--so-cyan);border-right-color:rgba(0,180,255,.25);
  animation:soLeaveDocOrbit 1.1s linear infinite;
}
.so-leave-doc-load-orbit--inner{
  inset:10px;border-top-color:var(--so-blue-deep);border-right-color:rgba(13,71,161,.2);
  animation:soLeaveDocOrbit 1.6s linear infinite reverse;
}
.so-leave-doc-load-clock{
  font-size:34px;color:var(--so-blue-deep);animation:soLeaveClockTick 1.2s ease-in-out infinite;
  filter:drop-shadow(0 2px 8px rgba(13,71,161,.15));
}
.so-leave-doc-load-title{font-size:15px;font-weight:700;color:var(--so-blue-deep);margin:0 0 6px}
.so-leave-doc-load-sub{font-size:12px;color:var(--so-muted);margin:0;line-height:1.5;max-width:260px;margin-inline:auto}
.so-leave-doc-error{text-align:center;padding:24px 12px;color:#C62828}
.so-leave-doc-error .fa-circle-exclamation{font-size:32px;margin-bottom:10px;opacity:.85}
.so-leave-doc-error p{font-size:14px;font-weight:600;margin:0 0 12px;color:#B71C1C}
@keyframes soLeaveDocOrbit{to{transform:rotate(360deg)}}
@keyframes soLeaveClockTick{
  0%,100%{transform:scale(1) rotate(0deg);opacity:1}
  50%{transform:scale(1.06) rotate(8deg);opacity:.88}
}
@keyframes soLeaveDocFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#so-leave-doc-modal .so-att-photo-modal-inner{max-width:520px}
.so-leave-pdf-link{display:block;text-align:center;margin-top:10px;font-size:13px;color:var(--so-blue);font-weight:600;text-decoration:none}
.so-leave-pdf-link:hover{text-decoration:underline}
@media(max-width:480px){.so-leave-row2{grid-template-columns:1fr}}

/* ── Payroll ── */
.so-payroll-scroll{padding-bottom:24px}
.so-payroll-toolbar{
  display:flex;align-items:center;gap:10px;padding:12px var(--so-gutter) 0;flex-wrap:wrap;
}
.so-payroll-month-lbl{font-size:13px;font-weight:700;color:var(--so-blue-deep);white-space:nowrap}
.so-payroll-month-sel{flex:1;min-width:160px;max-width:280px}
.so-payroll-tabs{
  display:flex;gap:8px;padding:10px var(--so-gutter) 0;flex-wrap:wrap;
}
.so-payroll-tab{
  border:1px solid var(--so-border);background:#fff;color:var(--so-muted);
  padding:8px 14px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;
}
.so-payroll-tab.active{background:linear-gradient(135deg,var(--so-blue),var(--so-blue-deep));color:#fff;border-color:transparent}
.so-payroll-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;
  padding:12px var(--so-gutter);
}
.so-payroll-card{
  background:#fff;border-radius:14px;border:1px solid var(--so-border);
  box-shadow:0 2px 10px rgba(13,71,161,.06);overflow:hidden;
}
.so-payroll-card--loading{grid-column:1/-1;text-align:center;padding:24px;color:var(--so-muted)}
.so-payroll-card-hdr{
  display:flex;align-items:center;gap:10px;padding:10px 14px;color:#fff;font-weight:700;
}
.so-payroll-card-num{
  width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-family:'Exo 2',sans-serif;
}
.so-payroll-card-title{font-size:14px}
.so-payroll-card--blue .so-payroll-card-hdr{background:linear-gradient(135deg,#1565C0,#42A5F5)}
.so-payroll-card--orange .so-payroll-card-hdr{background:linear-gradient(135deg,#EF6C00,#FFB74D)}
.so-payroll-card--teal .so-payroll-card-hdr{background:linear-gradient(135deg,#00838F,#4DD0E1)}
.so-payroll-card--green .so-payroll-card-hdr{background:linear-gradient(135deg,#2E7D32,#81C784)}
.so-payroll-card--red .so-payroll-card-hdr{background:linear-gradient(135deg,#C62828,#EF5350)}
.so-payroll-card--purple .so-payroll-card-hdr{background:linear-gradient(135deg,#6A1B9A,#BA68C8)}
.so-payroll-card--pink .so-payroll-card-hdr{background:linear-gradient(135deg,#AD1457,#F48FB1)}
.so-payroll-card--grey .so-payroll-card-hdr{background:linear-gradient(135deg,#546E7A,#90A4AE)}
.so-payroll-card-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px}
.so-payroll-card-k{font-size:11px;color:var(--so-muted);margin-bottom:4px}
.so-payroll-card-v{font-size:18px;font-weight:800;color:var(--so-text);font-family:'Exo 2',sans-serif}
.so-payroll-card-foot{
  padding:8px 14px 12px;font-size:10px;color:var(--so-muted);border-top:1px dashed var(--so-border);
  line-height:1.4;
}
.so-payroll-slip-empty,.so-payroll-slip-actions{padding:14px;text-align:center;color:var(--so-muted);font-size:13px}
.so-payroll-slip-btn{
  border:none;background:#E3F2FD;color:var(--so-blue-deep);padding:10px 16px;border-radius:10px;
  font-size:13px;font-weight:700;cursor:pointer;width:100%;
}
.so-payroll-slip-link{display:inline-block;margin-top:8px;font-size:12px;color:var(--so-blue)}
.so-payroll-slip-img{max-width:100%;border-radius:8px}
.so-payroll-slip-iframe{width:100%;height:65vh;border:none;border-radius:8px;background:#fff}
.so-payroll-slip-modal-inner{max-width:720px;width:94vw}
.so-payroll-admin-panel{margin:0 var(--so-gutter) 12px}
.so-payroll-admin-search{display:flex;gap:8px;margin-bottom:10px}
.so-payroll-admin-search .so-ci-inp{flex:1}
.so-payroll-admin-list-wrap{max-height:240px;overflow:auto}
.so-payroll-admin-form{margin:0 var(--so-gutter) 16px}
.so-payroll-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:12px 0}
.so-payroll-admin-block{
  border:1px solid var(--so-border);border-radius:10px;padding:10px;background:#FAFCFF;
}
.so-payroll-admin-block-h{font-size:12px;font-weight:800;color:var(--so-blue-deep);margin-bottom:8px}
.so-payroll-admin-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.so-payroll-admin-row2 label,.so-payroll-admin-full{display:block;font-size:11px;color:var(--so-muted);font-weight:600}
.so-payroll-admin-row2 input,.so-payroll-admin-full input{margin-top:4px;width:100%;box-sizing:border-box}
.so-payroll-admin-full{margin-top:8px}
.so-payroll-save-btn{width:100%;margin-top:4px}
.so-payroll-edit-btn{
  border:none;background:#E3F2FD;color:var(--so-blue-deep);padding:6px 10px;border-radius:8px;
  font-size:11px;font-weight:700;cursor:pointer;
}
.so-payroll-admin-sub{font-size:10px;color:var(--so-muted)}
.so-payroll-st{font-size:10px;font-weight:700;padding:3px 8px;border-radius:8px}
.so-payroll-st.ok{background:#E8F5E9;color:#2E7D32}
.so-payroll-st.muted{background:#ECEFF1;color:#607D8B}
@media(max-width:480px){
  .so-payroll-grid{grid-template-columns:1fr}
  .so-payroll-admin-row2{grid-template-columns:1fr}
}

/* Meeting room booking — calendar layout like Apps Script UI */
.so-rooms-page{padding:0 0 28px;background:#EEF2F7;min-height:100%}
.so-rooms-hero{
  background:linear-gradient(180deg,#10233F 0%,#163252 70%,#1A3A5C 100%);
  color:#fff;padding:22px var(--so-gutter) 48px
}
.so-rooms-hero-kicker{font-size:11px;letter-spacing:.14em;opacity:.7;font-weight:700}
.so-rooms-hero h1{margin:6px 0 8px;font-size:28px;font-weight:800;letter-spacing:-.02em}
.so-rooms-hero p{margin:0;opacity:.88;font-size:14px;font-weight:500}
.so-rooms-status{margin:0 var(--so-gutter) 12px;padding:10px 12px;border-radius:10px;background:#E3F2FD;color:var(--so-blue-deep);font-size:13px;font-weight:600}
.so-rooms-status.is-err{background:#FFEBEE;color:#C62828}
.so-rooms-overview{
  background:#fff;border:1px solid #E4E9F2;border-radius:18px;padding:18px;
  margin:-28px var(--so-gutter) 14px;box-shadow:0 16px 40px rgba(16,35,63,.12);position:relative
}
.so-rooms-sched-card,.so-rooms-form-card,.so-rooms-today-card{
  background:#fff;border:1px solid #E4E9F2;border-radius:16px;padding:16px;
  box-shadow:0 8px 24px rgba(16,35,63,.05)
}
.so-rooms-ov-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.so-rooms-ov-kicker{font-size:11px;letter-spacing:.1em;color:#90A4AE;font-weight:700}
.so-rooms-ov-top h2{margin:2px 0 4px;font-size:20px}
.so-rooms-ov-top p{margin:0;color:var(--so-muted);font-size:13px}
.so-rooms-ov-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.so-rooms-month-sel-wrap{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:700;color:#90A4AE}
.so-rooms-month-sel-wrap select{min-width:160px;font-weight:700;color:#334155}
.so-rooms-ov-stats{display:flex;gap:8px}
.so-rooms-ov-stats div{border:1px solid #E4E9F2;border-radius:10px;padding:8px 12px;font-size:12px;color:#64748B;text-align:center;min-width:88px}
.so-rooms-ov-stats b{display:block;font-size:18px;color:#0F172A;line-height:1.1}
.so-rooms-ov-controls{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 12px}
.so-rooms-seg,.so-rooms-month-nav{display:flex;gap:6px;align-items:center}
.so-rooms-seg button,.so-rooms-month-nav button,.so-rooms-mini{
  border:1px solid #D5DEEA;background:#fff;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer;color:#334155
}
.so-rooms-seg button.is-on{background:#2563EB;color:#fff;border-color:#2563EB}
.so-rooms-month-label{font-size:13px;font-weight:800;color:#0F172A;min-width:9em;text-align:center}
.so-rooms-cal-head,.so-rooms-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.so-rooms-cal-head{margin-bottom:6px}
.so-rooms-cal-head span{font-size:11px;color:#90A4AE;font-weight:700;text-align:center}
.so-rooms-cell{
  min-height:108px;border:1px solid #EDF1F7;background:#fff;border-radius:12px;padding:8px;
  text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;overflow:hidden
}
.so-rooms-cell.is-out{opacity:.42}
.so-rooms-cell.is-out .so-rooms-cell-d{color:#CBD5E1}
.so-rooms-cell.is-sel{border-color:#2563EB;box-shadow:0 0 0 1px #2563EB}
.so-rooms-cell-d{align-self:flex-end;font-size:12px;font-weight:700;color:#64748B}
.so-rooms-chip{display:block;border-radius:8px;padding:5px 7px;font-size:10px;font-weight:600;line-height:1.25;text-align:left}
.so-rooms-chip b{display:block;font-size:10px;font-weight:800}
.so-rooms-chip i{display:block;font-style:normal;opacity:.85;font-weight:600}
.so-rooms-chip--both{background:#EDE9FE;color:#5B21B6}
.so-rooms-chip--z1{background:#FCE7F3;color:#9D174D}
.so-rooms-chip--z2{background:#DBEAFE;color:#1E40AF}
.so-rooms-chip-more{font-size:10px;color:#64748B;font-weight:700}
.so-rooms-picked{margin-top:14px;padding-top:12px;border-top:1px solid #EEF2F7}
.so-rooms-picked-h{font-size:16px;font-weight:800}
.so-rooms-picked-n{font-size:12px;color:var(--so-muted);margin:2px 0 8px}
.so-rooms-picked-card{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid #EDE9FE;border-radius:12px;padding:10px 12px;margin-bottom:8px;border-left:5px solid #7C3AED}
.so-rooms-picked-card--z1{border-left-color:#DB2777;border-color:#FCE7F3}
.so-rooms-picked-card--z2{border-left-color:#2563EB;border-color:#DBEAFE}
.so-rooms-picked-card span{font-size:11px;font-weight:700;background:#EDE9FE;color:#5B21B6;border-radius:999px;padding:4px 8px;white-space:nowrap}
.so-rooms-list-row{width:100%;text-align:left;border:0;border-bottom:1px solid #EEF2F7;background:#fff;padding:10px 0;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.so-rooms-work{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.8fr);gap:14px;align-items:start;margin:0 var(--so-gutter)}
.so-rooms-side{min-width:0;display:flex;flex-direction:column;gap:14px}
.so-rooms-zone-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.so-rooms-ztab{border:0;border-radius:999px;padding:10px 14px;font-size:13px;font-weight:700;cursor:pointer;background:#E0F2FE;color:#075985}
.so-rooms-ztab.is-on{background:#DC2626;color:#fff}
.so-rooms-sched-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.so-rooms-sched-head h2{margin:0;font-size:16px}
.so-rooms-sched-note{margin:2px 0 0;font-size:12px;color:var(--so-muted)}
.so-rooms-sched-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.so-rooms-avail{font-size:12px;font-weight:700;color:#047857;background:#D1FAE5;border-radius:999px;padding:5px 8px}
.so-rooms-lunch{text-align:center;background:#F1F5F9;color:#64748B;border-radius:10px;padding:8px;font-size:12px;font-weight:700;margin:6px 0}
.so-rooms-slot-list{display:flex;flex-direction:column;gap:8px}
.so-rooms-slotline{
  width:100%;display:flex;justify-content:space-between;gap:10px;align-items:center;
  border:1px solid #BBF7D0;background:#F0FDF4;border-left:5px solid #16A34A;border-radius:12px;
  padding:10px 12px;text-align:left;cursor:pointer
}
.so-rooms-slotline b{display:block;font-size:13px;color:#14532D}
.so-rooms-slotline span{font-size:12px;color:#166534}
.so-rooms-slotline em{font-style:normal;font-size:11px;font-weight:800;color:#15803D;background:#DCFCE7;border-radius:999px;padding:4px 8px;white-space:nowrap}
.so-rooms-slotline.is-busy{border-color:#FECACA;background:#FEF2F2;border-left-color:#DC2626;cursor:not-allowed}
.so-rooms-slotline.is-busy b,.so-rooms-slotline.is-busy span{color:#991B1B}
.so-rooms-slotline.is-busy em{color:#B91C1C;background:#FEE2E2}
.so-rooms-form-card h2,.so-rooms-today-card h2{margin:0 0 8px;font-size:16px}
.so-rooms-req{margin:0 0 10px;font-size:12px;color:var(--so-muted)}
.so-rooms-form-card label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--so-muted);margin-bottom:8px}
.so-rooms-time-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.so-rooms-form-meta{margin:4px 0 8px;font-size:12px;color:var(--so-muted)}
.so-rooms-submit{width:100%}
.so-rooms-clear{width:100%;margin-top:8px;border:1px solid #D5DEEA;background:#F8FAFC;border-radius:10px;padding:10px;font-weight:700;cursor:pointer}
.so-rooms-today-item{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #EEF2F7}
.so-rooms-badge{font-size:11px;font-weight:800;color:#047857;background:#D1FAE5;border-radius:999px;padding:4px 8px}
.so-rooms-cancel{border:none;background:#FFEBEE;color:#C62828;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer}
.so-rooms-dash-sub{font-size:12px;color:var(--so-muted);margin-top:2px}
.so-rooms-empty{padding:16px;text-align:center;color:var(--so-muted);font-size:13px}
@media(max-width:980px){
  .so-rooms-work{grid-template-columns:1fr}
  .so-rooms-cal-grid{gap:4px}
  .so-rooms-cell{min-height:84px}
  .so-rooms-ov-right{align-items:stretch;width:100%}
}