/* Base / Edge shared application system. Module layouts keep their own hooks. */
:root{--ops-page:#f6f5f0;--ops-surface:#fffefa;--ops-text:#183e35;--ops-muted:#66776f;--ops-green:#176c59;--ops-green-soft:#e8f3ed;--ops-border:#dce5de;--ops-radius:16px;--ops-nav-height:72px;--ops-font:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans Thai","Microsoft YaHei",sans-serif}
html.ops-shell-document{min-width:0;width:100%}
body.ops-shell-enabled{margin:0;min-width:0;background:var(--ops-page);background-image:none;color:var(--ops-text);font-family:var(--ops-font);-webkit-font-smoothing:antialiased;--bg:var(--ops-page);--page:var(--ops-page);--ink:#183e35;--text:#183e35;--muted:#66776f;--line:#dce5de;--primary:#176c59;--accent:#176c59}
body.ops-shell-enabled *,body.ops-shell-enabled *::before,body.ops-shell-enabled *::after{box-sizing:border-box}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(button,input,select,textarea){font-family:var(--ops-font);letter-spacing:normal}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(input,select,textarea){color:var(--ops-text);background-color:#fff;border-color:#d0ded4;border-radius:10px;max-width:100%;min-width:0}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(input,select,textarea):focus-visible{outline:3px solid #176c5933;outline-offset:1px;border-color:var(--ops-green)}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(button,a):focus-visible{outline:3px solid #178461;outline-offset:3px}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(button,a,input,select){-webkit-tap-highlight-color:transparent}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(h1,h2,h3){font-family:var(--ops-font);color:var(--ops-text);letter-spacing:-.02em;overflow-wrap:anywhere}
body.ops-shell-enabled h1{font-size:clamp(25px,3vw,36px);line-height:1.25;font-weight:720}
body.ops-shell-enabled h2{font-size:clamp(19px,2vw,24px);line-height:1.4}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.primary-button,.issue-primary,.keeper-primary-button,button.primary,.btn-primary){background:var(--ops-green);border-color:var(--ops-green);color:white;border-radius:11px;box-shadow:0 3px 8px #174f3610;font-weight:650}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.secondary-button,.issue-secondary,.keeper-small-button,.back-button,.btn-secondary){border:1px solid var(--ops-border);background:#fffefa;color:var(--ops-text);border-radius:11px;box-shadow:none}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.issue-panel,.keeper-panel,.payroll-login-card,.payroll-card,.panel,.card,.settings-card,.summary-card,.metric-card,.accounting-record,.issue-card,.room-card){background:var(--ops-surface);border-color:var(--ops-border);border-radius:var(--ops-radius);box-shadow:0 3px 16px #193e3505}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.sheet-card,.issue-action-card,.modal-card,.modal-content,.dialog-card){background:var(--ops-surface);border:1px solid var(--ops-border);border-radius:20px;box-shadow:0 24px 80px #193e352b}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.issue-tabs,.payroll-tabs,.tabs,.segmented){gap:6px}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.issue-tab,.payroll-tab,.tab-button,.tabs>button,.segmented>button){border-radius:10px;box-shadow:none}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.issue-tab.active,.payroll-tab.active,.tab-button.active,.tabs>button.active,.segmented>button.active){background:var(--ops-green);border-color:var(--ops-green);color:#fff}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.app-shell,.issue-shell,.accounting-shell,.keeper-shell,.payroll-shell){width:min(100%,1280px);max-width:1280px;margin-inline:auto;padding-top:26px}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.topbar,.issue-top,.accounting-top,.keeper-top,.payroll-top){position:relative;top:auto;background:transparent;box-shadow:none;border:0;padding-top:0;padding-bottom:20px;min-height:0;gap:16px;z-index:auto}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.topbar,.issue-top,.accounting-top,.keeper-top,.payroll-top) h1{margin:4px 0}
body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.eyebrow){color:var(--ops-muted);font-size:11px;letter-spacing:.06em}
.ops-shell-header{position:relative;z-index:14;background:#fffefaeb;border-bottom:1px solid var(--ops-border);padding-top:env(safe-area-inset-top)}
.ops-shell-header-inner{width:min(100%,1280px);min-height:74px;margin:auto;display:flex;align-items:center;gap:30px;padding:12px 28px}
.ops-shell-brand{display:flex;align-items:center;gap:10px;color:var(--ops-text);text-decoration:none;flex-shrink:0;font:750 12px/1.3 var(--ops-font);letter-spacing:.11em}
.ops-shell-brand small{display:block;font:550 9px/1.8 var(--ops-font);letter-spacing:.19em;color:var(--ops-muted)}
.ops-shell-mark{display:grid;place-items:center;width:38px;height:40px;color:white;background:var(--ops-green);border-radius:12px 12px 12px 3px;font-size:15px;letter-spacing:-.04em}
.ops-shell-desktop-nav{display:flex;align-items:center;gap:6px;margin:auto}
.ops-shell-desktop-nav :is(a,button){display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:10px 16px;border:0;border-radius:10px;background:transparent;color:var(--ops-muted);text-decoration:none;font:600 13px/1.4 var(--ops-font);cursor:pointer}
.ops-shell-desktop-nav :is(a[aria-current],.is-active){background:var(--ops-green-soft);color:var(--ops-green)}
.ops-shell-header svg,.ops-shell-bottom svg,.ops-shell-menu svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ops-shell-share,.ops-shell-menu-head>button{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;border:1px solid var(--ops-border);border-radius:11px;background:#fffefa;color:var(--ops-text);cursor:pointer}
.ops-shell-crumb{width:min(100%,1280px);margin:auto;padding:0 28px 12px;display:flex;align-items:center;gap:12px;font:500 12px/1.6 var(--ops-font);color:var(--ops-muted)}
.ops-shell-crumb a{display:flex;align-items:center;gap:3px;text-decoration:none;color:var(--ops-muted);min-height:30px}
.ops-shell-crumb svg{width:15px;height:15px}
.ops-shell-crumb strong{font-weight:600;color:var(--ops-green);overflow-wrap:anywhere}
.ops-shell-crumb-divider{color:#b3bfb6}
.ops-shell-bottom{display:none}
.ops-shell-skip{position:fixed;left:16px;top:-100px;background:var(--ops-green);color:#fff;padding:12px 16px;border-radius:8px;z-index:2000}
.ops-shell-skip:focus{top:12px}
.ops-shell-menu{width:min(620px,calc(100% - 32px));max-height:calc(100dvh - 64px);padding:0;border:1px solid var(--ops-border);border-radius:24px;background:var(--ops-surface);color:var(--ops-text);box-shadow:0 28px 80px #143b3526;overflow:hidden}
.ops-shell-menu[open]{display:flex;flex-direction:column}
.ops-shell-menu::backdrop{background:#0d282652;backdrop-filter:blur(3px)}
.ops-shell-menu-head{display:flex;gap:16px;justify-content:space-between;padding:26px 26px 22px;border-bottom:1px solid var(--ops-border);flex-shrink:0}
.ops-shell-menu-head p{font:700 10px/1.6 var(--ops-font);letter-spacing:.15em;color:var(--ops-green);margin:0 0 5px}
.ops-shell-menu-head h2{font:720 24px/1.3 var(--ops-font);margin:0 0 7px}
.ops-shell-menu-head span{font:400 12px/1.6 var(--ops-font);color:var(--ops-muted)}
.ops-shell-menu-body{overflow:auto;overscroll-behavior:contain;padding:20px 26px 26px}
.ops-shell-menu-body>section{padding:0;margin:0 0 24px;border:0;background:transparent}
.ops-shell-menu h3{font:600 12px/1.5 var(--ops-font);color:var(--ops-muted);margin:0 0 10px}
.ops-shell-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ops-shell-menu-grid a{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:49px;padding:11px 13px;background:#f2f5ef;border:1px solid #e4ebe1;border-radius:11px;text-decoration:none;color:var(--ops-text);font:550 13px/1.5 var(--ops-font);overflow-wrap:anywhere}
.ops-shell-menu-grid a>span:last-child{color:#81958a}
.ops-shell-all-tools{display:block;text-align:center;padding:13px 20px;background:var(--ops-green);border-radius:11px;color:#fff;text-decoration:none;font:650 13px/1.6 var(--ops-font)}
.ops-shell-menu-open{overflow:hidden}
.ops-shell-toast{position:fixed;left:50%;bottom:26px;z-index:1500;transform:translate(-50%,15px);padding:12px 18px;border-radius:12px;background:#143d34;color:#fff;font:500 14px/1.5 var(--ops-font);max-width:calc(100vw - 32px);opacity:0;pointer-events:none;transition:.2s}
.ops-shell-toast.is-visible{opacity:1;transform:translate(-50%,0)}
body.ops-shell-enabled [data-ops-action-bar],body.ops-shell-enabled [data-ops-home-actions],body.ops-shell-enabled #bottomNav{display:none!important}
body[data-ops-module="utility"]>.app-shell,body[data-ops-module="aircon"]>.shell{padding-top:0;width:min(100%,1440px);margin-inline:auto}
body[data-ops-module="utility"] .sidebar,body[data-ops-module="aircon"] .side{background:#edf2ea;border-color:var(--ops-border)}
body[data-ops-module="utility"] .nav-item.active,body[data-ops-module="aircon"] .tab.active{background:var(--ops-green);color:#fff;border-color:var(--ops-green)}
body[data-ops-module="utility"] .brand-mark,body[data-ops-module="aircon"] .logo>span{background:var(--ops-green);color:#fff}
@media(max-width:800px){
  body.ops-shell-enabled{padding-bottom:calc(var(--ops-nav-height) + env(safe-area-inset-bottom) + 16px)}
  .ops-shell-header-inner{min-height:59px;padding:10px 18px;gap:12px;justify-content:space-between}
  .ops-shell-mark{width:31px;height:33px;border-radius:10px 10px 10px 3px;font-size:12px}
  .ops-shell-brand{font-size:10px;gap:8px}
  .ops-shell-brand small{font-size:8px}
  .ops-shell-desktop-nav{display:none}
  .ops-shell-share{width:36px;height:36px;border:0;background:#eef3ed}
  .ops-shell-crumb{padding:0 18px 10px;font-size:11px;gap:9px}
  .ops-shell-crumb a{min-height:30px}
  .ops-shell-bottom{position:fixed;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;inset:auto 0 0;z-index:18;min-height:calc(var(--ops-nav-height) + env(safe-area-inset-bottom));padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:#fffef9f5;border-top:1px solid var(--ops-border);box-shadow:0 -4px 20px #143b3506;backdrop-filter:blur(18px)}
  .ops-shell-bottom :is(a,button){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:56px;padding:7px 2px;border:0;border-radius:12px;color:#74847b;background:transparent;text-decoration:none;font:550 10px/1.3 var(--ops-font);cursor:pointer}
  .ops-shell-bottom svg{width:22px;height:22px}
  .ops-shell-bottom :is(a[aria-current],.is-active){color:var(--ops-green);background:var(--ops-green-soft)}
  .ops-shell-dialog-open .ops-shell-bottom,.ops-shell-keyboard .ops-shell-bottom{visibility:hidden;pointer-events:none}
  body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.app-shell,.issue-shell,.accounting-shell,.keeper-shell,.payroll-shell){width:100%;padding:18px 16px 20px;min-width:0}
  body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.topbar,.issue-top,.accounting-top,.keeper-top,.payroll-top){gap:12px;padding-bottom:16px;flex-wrap:wrap}
  body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.topbar,.issue-top,.accounting-top,.keeper-top,.payroll-top) h1{font-size:26px;line-height:1.3}
  body.ops-shell-enabled:not([data-ops-module="operations"]) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea){font-size:16px;min-height:44px}
  body.ops-shell-enabled:not([data-ops-module="operations"]) :where(button,.primary-button,.secondary-button,.issue-primary,.issue-secondary){min-height:44px}
  body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.issue-tabs,.payroll-tabs){position:relative;top:auto;max-width:100%;overflow:auto;scrollbar-width:none;padding-bottom:8px;margin-bottom:14px}
  body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.issue-tab,.payroll-tab){flex-shrink:0;white-space:normal;line-height:1.45;padding:10px 14px}
  body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.sheet,.issue-action-sheet){z-index:100;padding-bottom:env(safe-area-inset-bottom)}
  body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.sheet-card,.issue-action-card,.modal-card,.modal-content){max-width:100%;max-height:calc(100dvh - 30px);overflow:auto}
  .ops-shell-menu{width:100%;max-height:90dvh;max-width:none;margin:auto 0 0;border-radius:24px 24px 0 0;border-bottom:0}
  .ops-shell-menu-head{padding:23px 20px 18px}
  .ops-shell-menu-head h2{font-size:23px}
  .ops-shell-menu-body{padding:18px 20px calc(22px + env(safe-area-inset-bottom))}
  .ops-shell-toast{bottom:calc(88px + env(safe-area-inset-bottom))}
  body[data-ops-module="utility"]>.app-shell,body[data-ops-module="aircon"]>.shell{padding-top:0;padding-bottom:0}
  body[data-ops-module="utility"] .sidebar,body[data-ops-module="aircon"] .side{position:relative;bottom:auto;z-index:auto}
}
@media(max-width:370px){.ops-shell-header-inner,.ops-shell-crumb{padding-inline:14px}.ops-shell-menu-body{padding-inline:16px}.ops-shell-menu-head{padding-inline:16px}.ops-shell-menu-grid a{font-size:12px;padding-inline:10px}body.ops-shell-enabled:not([data-ops-module="operations"]) :where(.app-shell,.issue-shell,.accounting-shell,.keeper-shell,.payroll-shell){padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.ops-shell-enabled *, .ops-shell-enabled *::before,.ops-shell-enabled *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{.ops-shell-header,.ops-shell-bottom,.ops-shell-menu,.ops-shell-skip{display:none!important}body.ops-shell-enabled{background:#fff;padding:0}}