/* JHCISWeb AppSheet-like Theme
   เน้น Card UI, แถบเมนูเรียบ, ปุ่มใหญ่, ใช้งานบนมือถือ/Tablet ง่าย */
:root{
  --as-primary:#0f766e;
  --as-primary-2:#14b8a6;
  --as-bg:#f6f8fb;
  --as-surface:#ffffff;
  --as-text:#172033;
  --as-muted:#64748b;
  --as-line:#e5e7eb;
  --as-blue:#2563eb;
  --as-green:#16a34a;
  --as-orange:#f59e0b;
  --as-red:#ef4444;
  --as-shadow:0 8px 24px rgba(15,23,42,.08);
  --as-radius:18px;
}
html{background:var(--as-bg)}
body{background:var(--as-bg)!important;color:var(--as-text)!important;font-family:"Segoe UI",Tahoma,Arial,sans-serif!important;}
.topbar{
  height:68px!important;background:var(--as-surface)!important;color:var(--as-text)!important;
  border-bottom:1px solid var(--as-line)!important;box-shadow:0 2px 12px rgba(15,23,42,.06)!important;
  position:sticky;top:0;z-index:50;
}
.logo{
  background:linear-gradient(135deg,var(--as-primary-2),var(--as-primary))!important;color:#fff!important;
  border-radius:14px!important;box-shadow:0 8px 20px rgba(20,184,166,.24)!important;
}
.top-user,.userpill{
  background:#ecfdf5!important;color:#065f46!important;border:1px solid #bbf7d0!important;
  border-radius:999px!important;padding:9px 14px!important;font-weight:800!important;
}
.mini,.muted{color:var(--as-muted)!important;opacity:1!important}
.main-menu,.work,.main{padding:18px!important;}
.hero,.menu-card,.toolbar,.patient-card,.tab-panel,.save-log,.card,.panel,.claim-head,.actionbar,.box{
  background:var(--as-surface)!important;border:1px solid var(--as-line)!important;border-radius:var(--as-radius)!important;
  box-shadow:var(--as-shadow)!important;
}
.hero{padding:20px!important}
.menu-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;gap:14px!important}
.menu-card{
  text-align:left!important;min-height:126px!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease!important;
}
.menu-card:hover{transform:translateY(-2px)!important;box-shadow:0 14px 34px rgba(15,23,42,.12)!important;border-color:#99f6e4!important}
.menu-card div{font-size:32px!important}.menu-card h3,.card h2,.panel-title,.claim-head h2{color:var(--as-primary)!important}
.service-layout,.layout{grid-template-columns:260px 1fr!important;gap:16px!important;background:var(--as-bg)!important}
.side-tabs,.side{
  background:transparent!important;border:0!important;padding:0!important;position:sticky!important;top:84px!important;align-self:start!important;
}
.side-tabs button,.navbtn{
  background:var(--as-surface)!important;color:#334155!important;border:1px solid var(--as-line)!important;
  border-radius:16px!important;margin-bottom:10px!important;padding:13px 14px!important;box-shadow:0 3px 12px rgba(15,23,42,.05)!important;
}
.side-tabs button.active,.side-tabs button:hover,.navbtn.active,.navbtn:hover{
  background:linear-gradient(135deg,#ecfdf5,#ccfbf1)!important;color:#065f46!important;border-color:#5eead4!important;
}
.btn,.btn2,button.btn{
  border-radius:14px!important;border:1px solid transparent!important;font-weight:800!important;box-shadow:none!important;
  transition:transform .12s ease,filter .12s ease!important;
}
.btn:hover,.btn2:hover{transform:translateY(-1px)!important;filter:brightness(.98)!important}
.btn.primary,.btn.blue,.btn2.blue{background:var(--as-blue)!important;color:#fff!important}
.btn.success,.btn.green,.btn2.primary{background:var(--as-green)!important;color:#fff!important}
.btn.warn,.btn.orange,.btn2.warn{background:var(--as-orange)!important;color:#111827!important}
.btn.red,.btn.danger,.btn2.danger{background:var(--as-red)!important;color:#fff!important}
.btn.soft,.btn.gray{background:#f1f5f9!important;color:#334155!important;border-color:#e2e8f0!important}
input,select,textarea,.row input,.row select,td input{
  border:1px solid #d1d5db!important;border-radius:14px!important;background:#fff!important;padding:10px 12px!important;
  outline:none!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--as-primary-2)!important;box-shadow:0 0 0 4px rgba(20,184,166,.16)!important;
}
label{color:#334155!important;font-weight:800!important}
.table-wrap,.scroll{border:1px solid var(--as-line)!important;border-radius:16px!important;background:#fff!important;box-shadow:none!important}
table{border-collapse:separate!important;border-spacing:0!important;background:#fff!important}
th{
  background:#f8fafc!important;color:#334155!important;border-bottom:1px solid var(--as-line)!important;
  border-left:0!important;border-right:0!important;border-top:0!important;
}
td{border-left:0!important;border-right:0!important;border-top:0!important;border-bottom:1px solid #eef2f7!important}
tr:hover td{background:#f8fafc!important}
.badge{border-radius:999px!important;padding:4px 9px!important}
.b-wait,.badge.orange{background:#fef3c7!important;color:#92400e!important}.b-do,.badge.blue{background:#dbeafe!important;color:#1d4ed8!important}.b-done,.badge.ok{background:#dcfce7!important;color:#166534!important}.b-cancel,.badge.red{background:#fee2e2!important;color:#991b1b!important}
.login-page{background:linear-gradient(135deg,#0f766e,#14b8a6)!important}.login-card{border-radius:24px!important;box-shadow:0 22px 70px rgba(15,23,42,.22)!important}.login-card button{background:var(--as-primary)!important;border-radius:14px!important}
.login-page{padding:24px 14px!important;align-items:flex-start!important}
.login-wrap{max-width:584px!important;margin:clamp(22px,8vh,92px) auto 0!important;display:grid!important;gap:12px!important;min-width:0!important}
.login-title{display:grid!important;gap:4px!important;text-align:center!important;min-width:0!important}
.login-title h1{font-size:clamp(34px,6vw,46px)!important;line-height:1.05!important;letter-spacing:0!important;white-space:normal!important;overflow-wrap:anywhere!important}
.login-title div{font-size:clamp(14px,2.4vw,17px)!important;line-height:1.35!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
.login-card{width:100%!important;min-width:0!important}
.avatar{background:#eff6ff!important;color:#2563eb!important;border-radius:22px!important}
.qbtn{background:#f8fafc!important;border:1px solid var(--as-line)!important;color:#334155!important}.qbtn:hover{background:#ecfdf5!important;border-color:#5eead4!important;color:#065f46!important}
.status,.action-status{border-radius:999px!important}
@media(max-width:1100px){
  .service-layout,.layout{grid-template-columns:1fr!important}.side-tabs,.side{position:static!important;display:flex!important;overflow:auto!important;gap:8px!important;padding-bottom:4px!important}.side-tabs button,.navbtn{min-width:160px!important;margin-bottom:0!important}.topbar{height:auto!important;min-height:64px!important;flex-wrap:wrap!important}.main-menu,.work,.main{padding:12px!important}
}
@media(max-width:640px){
  .menu-card{min-height:104px!important}.btn,.btn2{width:auto!important;min-height:42px!important}.actionbar,.toolbar,.row{gap:8px!important}.patient,.patient-card{display:block!important}.avatar{margin-bottom:10px!important}.grid4,.grid3,.grid2,.form-grid,.two-col{grid-template-columns:1fr!important}
}