/**
 * OilStation × Gentelella v4 — selected design.
 * Reference: ColorlibHQ/gentelella, MIT License (2026), https://github.com/ColorlibHQ/gentelella
 * Uses the published v4 palette, spacing and shell patterns; custom implementation.
 * Loaded LAST to replace previous light-sidebar styles, without touching business logic.
 */
:root{
  --gt-sidebar:#1a2332;
  --gt-sidebar-hover:rgba(255,255,255,.06);
  --gt-sidebar-active:rgba(26,187,156,.12);
  --gt-sidebar-muted:#a4b5c6;
  --gt-primary:#1abb9c;
  --gt-primary-dk:#169f85;
  --gt-canvas:#f5f7fb;
  --gt-surface:#fff;
  --gt-muted-surface:#f9fafb;
  --gt-border:#e6e7eb;
  --gt-border-light:#eff0f3;
  --gt-text:#1e2633;
  --gt-muted:#626d7d;
  --gt-radius:6px;
  --gt-radius-lg:8px;
  --gt-shadow:0 2px 4px rgba(30,38,51,.04);
  --gt-space-1:4px;--gt-space-2:8px;--gt-space-3:12px;
  --gt-space-4:16px;--gt-space-5:24px;--gt-space-6:32px;
}
body:has(#app.workspace-mode){background:var(--gt-canvas);color:var(--gt-text)}
#app.workspace-mode{
  --os-ink:var(--gt-text);
  --os-muted:var(--gt-muted);
  --os-border:var(--gt-border);
  --os-accent:var(--gt-primary-dk);
  --os-accent-soft:rgba(26,187,156,.10);
  --oil-canvas:var(--gt-canvas);
  --oil-paper:var(--gt-surface);
  --oil-ink:var(--gt-text);
  --oil-muted:var(--gt-muted);
  --oil-line:var(--gt-border);
  --oil-accent:var(--gt-primary-dk);
  --oil-accent-hover:#10816b;
  --oil-accent-wash:rgba(26,187,156,.11);
  color:var(--gt-text);
  background:var(--gt-canvas);
  font-family:"Noto Sans Thai","Inter","Segoe UI",Tahoma,system-ui,sans-serif;
  line-height:1.55;
}
#app.workspace-mode .ws-layout{
  grid-template-columns:252px minmax(0,1fr);
  background:var(--gt-canvas);
  transition:grid-template-columns .2s cubic-bezier(.2,0,0,1);
}
#app.workspace-mode .ws-layout[data-rail="collapsed"]{
  grid-template-columns:68px minmax(0,1fr);
}
#app.workspace-mode .ws-sidebar{
  width:252px;max-height:100vh;z-index:25;
  background:var(--gt-sidebar);color:#d8e0ea;
  border:0;border-inline-end:1px solid rgba(255,255,255,.06);
  box-shadow:none;border-radius:0;
  transition:width .2s cubic-bezier(.2,0,0,1);
}
#app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-sidebar{width:68px}
#app.workspace-mode .ws-side-head{
  min-height:64px;height:64px;padding:10px 15px;
  border-color:rgba(255,255,255,.08);gap:10px;
}
#app.workspace-mode .ws-logo{
  background:var(--gt-primary);color:#10352f;
  border-radius:6px;width:33px;height:33px;font-size:16px;
  flex:none;font-weight:800;
}
#app.workspace-mode .ws-side-head strong{
  color:#fff;font-size:15px;font-weight:700;letter-spacing:-.015em;
}
#app.workspace-mode .ws-side-head small{
  color:#91a6b8;font-size:10px;letter-spacing:.08em;
}
#app.workspace-mode .ws-brand-copy{display:grid;min-width:0;overflow:hidden}
#app.workspace-mode .ws-nav-list{padding:13px 10px 16px}
#app.workspace-mode .ws-nav-group{margin-bottom:11px}
#app.workspace-mode .ws-nav-heading{
  padding:12px 10px 5px;color:#9eb0c2;
  font-size:10.5px;letter-spacing:.045em;font-weight:750;
}
#app.workspace-mode .ws-nav{
  color:#c6d2df;min-height:42px;line-height:1.3;
  border-radius:5px;background:transparent;
  font-size:13px;font-weight:550;padding:9px 11px;
  margin:2px 0;gap:11px;box-shadow:none;
}
#app.workspace-mode .ws-nav svg{
  color:#a6bac9;width:17px;height:17px;stroke-width:1.9;
}
#app.workspace-mode .ws-nav:hover{
  background:var(--gt-sidebar-hover);color:#fff;
}
#app.workspace-mode .ws-nav:hover svg{color:#c9e3db}
#app.workspace-mode .ws-nav.active{
  background:var(--gt-sidebar-active);color:#fff;
  font-weight:720;
}
#app.workspace-mode .ws-nav.active svg{color:var(--gt-primary)}
#app.workspace-mode .ws-nav.active::after{
  content:"";width:6px;height:6px;flex:none;border-radius:50%;
  margin-inline-start:auto;background:var(--gt-primary);
}
#app.workspace-mode .ws-sidebar-bottom{
  border-color:rgba(255,255,255,.08);padding:12px 10px 20px;
}
#app.workspace-mode .ws-sidebar-caption{
  color:#9fb2c3;font-size:11px;
}
#app.workspace-mode .ws-signout{
  color:#c6d2df;border-radius:5px;min-height:42px;
}
#app.workspace-mode .ws-signout:hover{background:var(--gt-sidebar-hover);color:#fff}
#app.workspace-mode .ws-signout svg{color:#a6bac9}
#app.workspace-mode .ws-nav:focus-visible,
#app.workspace-mode .ws-signout:focus-visible{
  outline:2px solid var(--gt-primary);outline-offset:-2px;
}
#app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-side-head{
  padding:10px 17px;
}
#app.workspace-mode .ws-layout[data-rail="collapsed"] :is(.ws-brand-copy,.ws-nav-heading,.ws-sidebar-caption,.ws-nav span,.ws-signout span){display:none}
#app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-nav-list{padding:15px 7px}
#app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-nav-group{
  border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:9px;margin-bottom:9px;
}
#app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-nav,
#app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-signout{
  justify-content:center;gap:0;padding:10px 0;
  width:100%;min-height:44px;
}
#app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-nav.active::after{display:none}
#app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-sidebar-bottom{padding:12px 7px}
#app.workspace-mode .ws-main{
  padding:0 clamp(18px,2.3vw,38px) 55px;
  background:var(--gt-canvas);
}
#app.workspace-mode .ws-toolbar{
  display:flex;align-items:center;gap:14px;
  min-height:60px;
  margin:0 calc(-1 * clamp(18px,2.3vw,38px)) 28px;
  padding:0 clamp(18px,2.3vw,38px);
  background:var(--gt-surface);border-bottom:1px solid var(--gt-border);
}
#app.workspace-mode .ws-rail-toggle{
  display:grid;place-items:center;flex:none;
  width:36px;height:36px;background:transparent;
  border:1px solid transparent;border-radius:5px;
  color:var(--gt-muted);padding:6px;cursor:pointer;
}
#app.workspace-mode .ws-rail-toggle:hover{
  background:var(--gt-muted-surface);
  border-color:var(--gt-border);color:var(--gt-text);
}
#app.workspace-mode .ws-rail-toggle svg{height:18px;width:18px}
#app.workspace-mode .ws-toolbar-title{
  color:var(--gt-text);font-weight:700;font-size:14px;
}
#app.workspace-mode .ws-toolbar-title span{
  font-weight:450;color:var(--gt-muted);font-size:12px;
  margin-inline-start:11px;
}
#app.workspace-mode .ws-toolbar-context{
  margin-inline-start:auto;font-size:10px;
  letter-spacing:.08em;color:#7a8795;
}
#app.workspace-mode .ws-header{
  border:0;margin:0 0 22px;padding:0;
  align-items:center;gap:12px;
}
#app.workspace-mode .ws-overline{display:none}
#app.workspace-mode .ws-header h1{
  font-size:23px;font-weight:720;color:var(--gt-text);
  letter-spacing:-.015em;margin:0 0 3px;
}
#app.workspace-mode .ws-header-copy>p:last-child{
  color:var(--gt-muted);font-size:13px;
}
#app.workspace-mode .ws-current{
  border:1px solid var(--gt-border);border-radius:5px;
  background:#fff;color:#525f70;
  padding:6px 10px;font-weight:650;box-shadow:none;
}
#app.workspace-mode .ws-current::before{display:none}
#app.workspace-mode .ws-screen.panel{
  border:0;background:transparent;
  box-shadow:none;border-radius:0;
  padding:0;min-height:0;
}
#app.workspace-mode .ws-screen-head{
  padding:0;margin:0 0 18px;border:0;
}
#app.workspace-mode .ws-breadcrumb{
  font-size:12px;color:#667381;margin-bottom:6px;
}
#app.workspace-mode .ws-screen-head h2{
  color:var(--gt-text);font-size:20px;font-weight:720;
  margin:0 0 5px;
}
#app.workspace-mode .ws-screen-head p{
  color:var(--gt-muted);font-size:13px;
}
#app.workspace-mode .ws-overview-columns{gap:20px}
#app.workspace-mode .ws-overview-side,
#app.workspace-mode .os-create-station,
#app.workspace-mode .os-station-directory,
#app.workspace-mode .saas-simple-card,
#app.workspace-mode .billing-panel,
#app.workspace-mode .owner-plan-onboarding,
#app.workspace-mode .ws-widget>section{
  border:1px solid var(--gt-border);
  border-radius:var(--gt-radius-lg);
  background:var(--gt-surface);
  box-shadow:var(--gt-shadow);
}
#app.workspace-mode .ws-widget>section{padding:19px;min-width:0}
#app.workspace-mode .os-create-station,
#app.workspace-mode .os-station-directory{padding:21px}
#app.workspace-mode .ws-quick{
  min-height:94px;border:1px solid var(--gt-border);
  border-radius:var(--gt-radius-lg);box-shadow:var(--gt-shadow);
  background:var(--gt-surface);
}
#app.workspace-mode .ws-quick:hover{
  border-color:#7bc7b5;background:#f4fbf8;
}
#app.workspace-mode .ws-quick-arrow{color:var(--gt-primary-dk)}
#app.workspace-mode .ws-section-heading h3{font-size:15px;font-weight:720}
#app.workspace-mode .ws-section-heading span{color:var(--gt-muted)}
#app.workspace-mode :is(.module-item,.fuel-row,.os-station-card,.plate-review-card,.fuel-review-card){
  border:1px solid var(--gt-border);
  border-radius:var(--gt-radius-lg);
  background:#fff;box-shadow:var(--gt-shadow);
}
#app.workspace-mode .os-station-card{padding:16px}
#app.workspace-mode .os-station-card-name{color:var(--gt-text)}
#app.workspace-mode .os-station-card-meta{color:var(--gt-muted)}
#app.workspace-mode .os-onboarding-label{color:#087460;font-size:11px}
#app.workspace-mode .button{
  font-size:13.5px;font-weight:650;min-height:42px;
  border-radius:var(--gt-radius);box-shadow:none;
}
#app.workspace-mode .button.primary{
  background:var(--gt-primary);border-color:var(--gt-primary-dk);
  color:#102f2b;
}
#app.workspace-mode .button.primary:hover:not(:disabled){
  background:var(--gt-primary-dk);border-color:var(--gt-primary-dk);
  color:#092821;
}
#app.workspace-mode .button.secondary{
  background:var(--gt-surface);
  color:#415062;border:1px solid #cbd0d9;
}
#app.workspace-mode .button.secondary:hover:not(:disabled){
  background:var(--gt-muted-surface);
  border-color:#a7b1bd;color:var(--gt-text);
}
#app.workspace-mode :where(.field input,.field select,.field textarea,.invite-form input,.invite-form select){
  background:#fff;color:var(--gt-text);
  border:1px solid #cdd4df;border-radius:var(--gt-radius);
  min-height:42px;font-size:14px;
}
#app.workspace-mode :where(.field input,.field select,.field textarea,.invite-form input,.invite-form select):focus-visible{
  border-color:#269f89;outline:2px solid #5dc8b5;outline-offset:1px;
}
#app.workspace-mode :where(.hint,.os-section-copy,.attendance-explainer){
  color:#536376;background:#f6f8fb;
}
#app.workspace-mode .notice{
  border-radius:var(--gt-radius);background:#ebfaf5;color:#165c4e;
  border:1px solid #bee9d9;
}
#app.workspace-mode .notice[data-tone="error"]{
  background:#fff1f1;color:#ac3434;border-color:#f0c5c5;
}
#app.workspace-mode [data-tone="success"]{color:#13745a}
#app.workspace-mode [data-tone="warning"]{color:#805c19}
#app.workspace-mode [data-tone="error"]{color:#ae3333}
#app.workspace-mode .saas-plan-prices,
#app.workspace-mode .owner-plan-quote,
#app.workspace-mode :where(table td,[data-money]){font-variant-numeric:tabular-nums}
#app.workspace-mode :where(table th){
  background:var(--gt-muted-surface);
  color:#4c5c6e;border-color:var(--gt-border);
}
#app.workspace-mode :where(table td){border-color:var(--gt-border)}
#app.workspace-mode .owner-plan-card:has(input:checked){
  background:#eaf8f3;border-color:var(--gt-primary-dk);
}
#app.workspace-mode .owner-plan-description small{color:var(--gt-muted)}
#app.workspace-mode .saas-simple-card{padding:20px}
#app.workspace-mode .os-plan-pricing{border-color:var(--gt-border)}
#app.workspace-mode .scope-chip{
  background:#e8f6f1;border-color:#b5dfd1;color:#195847;
}
#app.workspace-mode .ws-signout,#app.workspace-mode .ws-nav{touch-action:manipulation}
#app.workspace-mode .ws-menu-backdrop:not([hidden]){background:#101928a8}
@media(max-width:900px){
 #app.workspace-mode .ws-overview-columns{grid-template-columns:1fr}
 #app.workspace-mode .os-station-layout{grid-template-columns:1fr}
 #app.workspace-mode .saas-simple-layout{grid-template-columns:1fr}
}
@media(max-width:850px){
 #app.workspace-mode .ws-layout,#app.workspace-mode .ws-layout[data-rail="collapsed"]{
  display:block;grid-template-columns:1fr;
 }
 #app.workspace-mode .ws-sidebar,
 #app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-sidebar{
  position:fixed;top:0;bottom:0;
  width:min(290px,86vw);max-height:none;
  transform:translateX(-110%);
  transition:transform .18s ease;
 }
 #app.workspace-mode .ws-sidebar.is-open,
 #app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-sidebar.is-open{
  transform:translateX(0);
 }
 #app.workspace-mode .ws-layout[data-rail="collapsed"] :is(.ws-brand-copy,.ws-nav-heading,.ws-sidebar-caption,.ws-nav span,.ws-signout span){display:revert}
 #app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-brand-copy{display:grid}
 #app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-nav-heading{display:block}
 #app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-nav-group{border:0;padding:0;margin-bottom:11px}
 #app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-nav,
 #app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-signout{
  display:flex;justify-content:flex-start;gap:11px;padding:9px 11px;
 }
 #app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-nav.active::after{display:block}
 #app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-nav-list{padding:13px 10px}
 #app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-sidebar-bottom{padding:12px 10px}
 #app.workspace-mode .ws-layout[data-rail="collapsed"] .ws-side-head{padding:10px 15px}
 #app.workspace-mode .ws-rail-toggle{display:none}
 #app.workspace-mode .ws-main{padding:0 18px 38px}
 #app.workspace-mode .ws-toolbar{margin:0 -18px 20px;padding:0 18px}
 #app.workspace-mode .ws-toolbar-title span{display:none}
 #app.workspace-mode .ws-toolbar-context{display:none}
 #app.workspace-mode .ws-header{align-items:center}
 #app.workspace-mode .ws-current{display:none}
}
@media(max-width:620px){
 #app.workspace-mode .ws-main{padding:0 12px max(30px,env(safe-area-inset-bottom))}
 #app.workspace-mode .ws-toolbar{margin:0 -12px 19px;padding:0 12px;min-height:55px}
 #app.workspace-mode .ws-header h1{font-size:20px}
 #app.workspace-mode .ws-screen-head h2{font-size:19px}
 #app.workspace-mode .os-create-station,
 #app.workspace-mode .os-station-directory,
 #app.workspace-mode .ws-widget>section{padding:15px}
 #app.workspace-mode .ws-quick-grid{grid-template-columns:1fr}
 #app.workspace-mode .ws-quick{min-height:76px}
 #app.workspace-mode :where(.field input,.field select,.field textarea,.invite-form input,.invite-form select){min-height:46px;font-size:16px}
 #app.workspace-mode .button{min-height:44px}
 #app.workspace-mode .saas-simple-layout,
 #app.workspace-mode .os-station-layout{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
 #app.workspace-mode .ws-layout,
 #app.workspace-mode .ws-sidebar{transition:none!important}
}
@media print{
 #app.workspace-mode .ws-toolbar{display:none}
 #app.workspace-mode .ws-layout{display:block}
}