/* V1.19 Owner + Role */
.role-hidden{display:none!important}
.project-owner-tabs{display:flex;gap:7px;background:#eef2f6;padding:5px;border-radius:12px;margin-bottom:13px}
.project-owner-tabs button{border:0;background:transparent;padding:10px 13px;border-radius:9px;font:inherit}
.project-owner-tabs button.active{background:#fff;box-shadow:0 2px 8px #0001;font-weight:800}
.project-owner-panel{display:none}.project-owner-panel.active{display:block}
.owner-project-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.owner-project-head h3{margin:0}.owner-project-head p{margin:4px 0 0;color:#7f8b9b}
.staff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.staff-card{background:#fff;border:1px solid #e3e9f0;border-radius:14px;padding:13px;display:grid;grid-template-columns:48px 1fr auto;gap:9px;align-items:center}.staff-avatar{width:48px;height:48px;border-radius:13px;background:#102943;color:#fff;display:grid;place-items:center}.staff-card small{display:block;color:#8490a2}.staff-card button{border:1px solid #dfe5ed;background:#fff;border-radius:8px;padding:7px}
.staff-editor,.owner-product-editor{background:#fff;border:1px solid #e3e9f0;border-radius:15px;padding:15px;margin-top:12px}.staff-editor.hidden{display:none}.staff-editor-head{display:flex;justify-content:space-between}.staff-editor-head button{border:0;background:#fff;font-size:22px}
.staff-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.staff-form-grid label{display:grid;gap:6px;font-size:12px;color:#657185}.staff-form-grid input,.staff-form-grid select{height:40px;border:1px solid #dfe5ed;border-radius:9px;padding:0 9px}
.staff-permissions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.staff-permissions label{display:flex;gap:7px;align-items:center;background:#f8fafc;border:1px solid #e8edf3;border-radius:9px;padding:9px}.staff-editor-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:13px}
.owner-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.owner-product-grid article{background:#fff;border:1px solid #e3e9f0;border-radius:14px;padding:12px}.owner-prod-img{height:100px;border-radius:11px;background:#f8fafc;display:grid;place-items:center;font-size:44px;overflow:hidden}.owner-prod-img img{width:100%;height:100%;object-fit:cover}.owner-product-grid small,.owner-product-grid strong{display:block}.owner-product-grid small{color:#8390a2}.owner-product-grid strong{color:var(--activity-accent)}.owner-product-grid button{width:100%;margin-top:9px;border:1px solid #dfe5ed;background:#fff;border-radius:8px;padding:7px}
.cashier-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:13px}.cashier-settings-grid label{display:flex;justify-content:space-between;background:#fff;border:1px solid #e3e9f0;border-radius:12px;padding:12px}
@media(max-width:700px){.staff-grid,.owner-product-grid,.staff-permissions,.staff-form-grid,.cashier-settings-grid{grid-template-columns:1fr}}

/* V1.20 Friendly employee accounts */
.project-code-card{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(115deg,#102943,#16395d);color:#fff;border-radius:14px;padding:14px;margin-bottom:13px}
.project-code-card small,.project-code-card span{display:block;color:#c2cfdd}.project-code-card b{display:block;font-size:25px;letter-spacing:.12em;margin:5px 0;color:#ffb36d}
.employee-login-toggle{margin-top:10px}.employee-login-toggle button{width:100%;border:1px solid #dfe5ed;background:#fff;border-radius:9px;padding:10px;font:inherit}
.employee-login-card{margin-top:10px;background:#fff;border:1px solid #e3e9f0;border-radius:14px;padding:14px}.employee-login-card.hidden{display:none!important}.employee-login-head{display:flex;justify-content:space-between;margin-bottom:10px}.employee-login-head small{display:block;color:#8390a2;margin-top:3px}.employee-login-head button{border:0;background:#fff;font-size:20px}
.employee-login-card label{display:grid;gap:5px;margin:8px 0;font-size:12px;color:#657185}.employee-login-card input{height:41px;border:1px solid #dfe5ed;border-radius:9px;padding:0 9px}.employee-login-card .btn{width:100%;margin-top:8px}.login-msg{min-height:18px;margin-top:7px;font-size:12px;color:#b91c1c}

.printer-settings-card{display:grid;grid-template-columns:1fr 160px auto;gap:10px;align-items:center;background:#fff;border:1px solid #e3e9f0;border-radius:12px;padding:12px;margin:12px 0}.printer-settings-card small{display:block;color:#8390a2;margin-top:3px}.printer-settings-card select{height:40px;border:1px solid #dfe5ed;border-radius:9px;padding:0 8px}
@media(max-width:650px){.printer-settings-card{grid-template-columns:1fr}}

/* V1.24 Employee Login */
.login-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#edf2f7;padding:5px;border-radius:12px;margin:0 auto 14px;max-width:520px}
.login-mode-switch button{border:0;background:transparent;border-radius:9px;padding:11px 12px;font:inherit;font-weight:700;color:#64748b;cursor:pointer}
.login-mode-switch button.active{background:#fff;color:#0f2743;box-shadow:0 2px 10px #00000010}
.employee-login-section{max-width:520px;margin:0 auto}.employee-login-section.hidden,#ownerLoginSection.hidden{display:none!important}
.employee-login-shell{background:#fff;border:1px solid #e3e9f0;border-radius:18px;padding:22px;box-shadow:0 14px 38px #10243b10}
.employee-login-brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}.employee-login-icon{width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,#0f2743,#173b61);color:#fff;display:grid;place-items:center;font-size:26px}.employee-login-brand h2{margin:0}.employee-login-brand p{margin:5px 0 0;color:#7d899a}
.employee-login-shell label{display:grid;gap:6px;margin:12px 0}.employee-login-shell label span{font-size:12px;color:#64748b}.employee-login-shell input{height:46px;border:1px solid #dce4ed;border-radius:10px;padding:0 12px;font:inherit}.employee-login-primary{width:100%;height:48px;border:0;border-radius:11px;background:#ff7616;color:#fff;font:inherit;font-weight:800;cursor:pointer;margin-top:8px}.employee-login-msg{min-height:20px;margin-top:10px;color:#b91c1c;font-size:12px}.employee-login-help{margin-top:12px;background:#f8fafc;border:1px solid #e7edf3;border-radius:10px;padding:10px;color:#718096;font-size:11px;line-height:1.6}

/* V1.25 login gateway fix */
.login-gateway{width:min(560px,calc(100vw - 32px));margin:auto}
#ownerLoginSection.hidden,#employeeLoginSection.hidden{display:none!important}
#ownerLoginSection:not(.hidden),#employeeLoginSection:not(.hidden){display:block!important}
#loginView .login-mode-switch{margin-bottom:16px}
#loginView .auth-card,#loginView .employee-login-shell{width:100%;max-width:none;box-sizing:border-box}

/* V1.27 — EMPLOYEE FULLSCREEN WORKSPACE */
body.employee-focus-mode{
  background:#f3f6fa;
}
body.employee-focus-mode #appView{
  display:block!important;
  min-height:100vh;
  background:#f3f6fa;
}
body.employee-focus-mode .sidebar{
  display:none!important;
}
body.employee-focus-mode .topbar{
  display:none!important;
}
body.employee-focus-mode .main{
  margin-right:0!important;
  width:100%!important;
  max-width:none!important;
  padding:18px 24px 28px!important;
}
body.employee-focus-mode .page{
  max-width:none!important;
  width:100%!important;
}
body.employee-focus-mode #page-dashboard{
  display:none!important;
}
body.employee-focus-mode .smart-command,
body.employee-focus-mode .activity-hero,
body.employee-focus-mode .activity-stats{
  display:none!important;
}
body.employee-focus-mode .activity-special-page{
  padding:0!important;
}
body.employee-focus-mode .op-head{
  margin:0 0 14px!important;
}
.employee-top-tabs{
  position:sticky;
  top:0;
  z-index:2000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  min-height:66px;
  padding:10px 18px;
  background:#0b2038;
  border-bottom:1px solid #173854;
  box-shadow:0 5px 20px #0b1b2d24;
}
.employee-tabs-list{
  display:flex;
  gap:7px;
  align-items:center;
  overflow-x:auto;
  scrollbar-width:none;
}
.employee-tabs-list::-webkit-scrollbar{display:none}
.employee-tabs-list button{
  flex:0 0 auto;
  border:1px solid #ffffff20;
  background:#ffffff0b;
  color:#cbd8e6;
  border-radius:10px;
  padding:11px 16px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.employee-tabs-list button.active{
  background:var(--activity-accent,#ff7616);
  border-color:var(--activity-accent,#ff7616);
  color:white;
  box-shadow:0 6px 16px color-mix(in srgb,var(--activity-accent,#ff7616),transparent 75%);
}
.employee-session-actions{
  display:flex;
  gap:7px;
  align-items:center;
  flex:0 0 auto;
}
.employee-session-actions button{
  border-radius:9px;
  padding:10px 13px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.employee-switch-btn{
  background:#fff;
  color:#102943;
  border:0;
}
.employee-logout-btn{
  background:transparent;
  color:#fff;
  border:1px solid #ffffff38;
}
body.employee-focus-mode .op-pos-layout{
  grid-template-columns:minmax(0,1.8fr) minmax(370px,.75fr);
  min-height:calc(100vh - 112px);
}
body.employee-focus-mode .op-pos-catalog,
body.employee-focus-mode .op-cart-panel{
  min-height:calc(100vh - 130px);
}
body.employee-focus-mode .op-products{
  grid-template-columns:repeat(4,minmax(160px,1fr));
}
body.employee-focus-mode .op-product-card{
  min-height:118px;
}
body.employee-focus-mode .op-cart-items{
  max-height:calc(100vh - 520px);
}
@media(max-width:1100px){
  body.employee-focus-mode .op-pos-layout{grid-template-columns:1fr}
  body.employee-focus-mode .op-products{grid-template-columns:repeat(3,1fr)}
  .employee-top-tabs{align-items:flex-start;flex-direction:column}
}
@media(max-width:700px){
  body.employee-focus-mode .main{padding:10px!important}
  body.employee-focus-mode .op-products{grid-template-columns:repeat(2,1fr)}
  .employee-session-actions{width:100%}
  .employee-session-actions button{flex:1}
}

/* V1.28 — FIXED VIEWPORT POS: document never scrolls */
html:has(body.employee-focus-mode),body.employee-focus-mode{width:100%;height:100%;overflow:hidden!important}
body.employee-focus-mode #appView{height:100vh!important;min-height:0!important;overflow:hidden!important;display:grid!important;grid-template-rows:60px minmax(0,1fr)}
body.employee-focus-mode .employee-top-tabs{position:relative!important;top:auto!important;height:60px;min-height:60px;box-sizing:border-box;overflow:hidden;padding:7px 14px}
body.employee-focus-mode .main{height:100%!important;min-height:0!important;overflow:hidden!important;padding:10px 16px!important;box-sizing:border-box}
body.employee-focus-mode .page.active{height:100%!important;min-height:0!important;overflow:hidden!important}
body.employee-focus-mode .activity-special-page{height:100%!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column}
body.employee-focus-mode .op-head{flex:0 0 auto;margin:0 0 6px!important}
body.employee-focus-mode .op-head p{display:none!important}
body.employee-focus-mode .op-head h2{margin:0!important;font-size:22px!important}
body.employee-focus-mode .op-pos-layout{flex:1 1 auto!important;height:auto!important;min-height:0!important;overflow:hidden!important;display:grid!important;grid-template-columns:minmax(0,1fr) clamp(330px,29vw,440px)!important;gap:10px!important;align-items:stretch!important}
body.employee-focus-mode .op-pos-catalog,body.employee-focus-mode .op-cart-panel{height:100%!important;min-height:0!important;max-height:none!important;overflow:hidden!important;box-sizing:border-box}
body.employee-focus-mode .op-pos-catalog{display:flex!important;flex-direction:column!important}
body.employee-focus-mode .op-pos-toolbar,body.employee-focus-mode .op-pos-categories{flex:0 0 auto!important}
body.employee-focus-mode .op-products{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;padding-inline-end:4px;align-content:start;grid-template-columns:repeat(4,minmax(145px,1fr))!important}
body.employee-focus-mode .op-cart-panel{display:flex!important;flex-direction:column!important}
body.employee-focus-mode .op-cart-items{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior:contain}
body.employee-focus-mode .op-cart-summary,body.employee-focus-mode .op-cart-actions,body.employee-focus-mode .op-checkout,body.employee-focus-mode .op-order-note{flex:0 0 auto!important}
body.employee-focus-mode .op-product-card{min-height:96px!important;padding:9px!important}
body.employee-focus-mode .op-pos-toolbar,body.employee-focus-mode .op-pos-categories{margin-bottom:7px!important}
body.employee-focus-mode .op-order-note textarea{min-height:40px!important;max-height:52px!important}
body.employee-focus-mode .op-products::-webkit-scrollbar,body.employee-focus-mode .op-cart-items::-webkit-scrollbar{width:7px}
body.employee-focus-mode .op-products::-webkit-scrollbar-thumb,body.employee-focus-mode .op-cart-items::-webkit-scrollbar-thumb{background:#c8d2de;border-radius:10px}
@media(max-width:1350px){body.employee-focus-mode .op-products{grid-template-columns:repeat(3,minmax(135px,1fr))!important}body.employee-focus-mode .main{padding:8px 10px!important}}
@media(max-height:800px){body.employee-focus-mode #appView{grid-template-rows:54px minmax(0,1fr)}body.employee-focus-mode .employee-top-tabs{height:54px;min-height:54px;padding-block:5px}body.employee-focus-mode .op-head h2{font-size:19px!important}body.employee-focus-mode .op-product-card{min-height:82px!important}}
@media(max-width:850px){body.employee-focus-mode .op-pos-layout{grid-template-columns:minmax(0,1fr) minmax(285px,38vw)!important}body.employee-focus-mode .op-products{grid-template-columns:repeat(2,minmax(120px,1fr))!important}}

/* V1.29 — FIX active employee page + controlled smart commands */
body.employee-focus-mode .activity-special-page.hidden{display:none!important}
body.employee-focus-mode .activity-special-page:not(.hidden){
  display:flex!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  flex-direction:column!important;
}
body.employee-focus-mode #smartCommandBar{display:none!important}
body.employee-focus-mode.smart-commands-enabled #smartCommandBar{
  display:flex!important;
  position:fixed;
  left:18px;
  right:18px;
  top:70px;
  z-index:1800;
}
body.employee-focus-mode.smart-commands-enabled .main{
  padding-top:86px!important;
}
.platform-feature-box,.project-feature-box{
  background:#fff;
  border:1px solid #e3e9f0;
  border-radius:14px;
  padding:14px;
}
.platform-feature-row,.project-feature-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:10px 0;
}
.platform-feature-row small,.project-feature-row small{
  display:block;
  color:#7d899a;
  margin-top:4px;
}
.feature-switch{
  width:50px;height:28px;position:relative;display:inline-block;
}
.feature-switch input{display:none}
.feature-switch span{
  position:absolute;inset:0;border-radius:99px;background:#cbd5e1;cursor:pointer;transition:.2s;
}
.feature-switch span:after{
  content:"";position:absolute;width:22px;height:22px;top:3px;left:3px;border-radius:50%;background:white;transition:.2s;box-shadow:0 1px 4px #0002;
}
.feature-switch input:checked + span{background:#16a34a}
.feature-switch input:checked + span:after{transform:translateX(22px)}

/* V1.30 — POS LAYOUT HARD FIX
   Do not let flex sizing collapse the POS body. */
body.employee-focus-mode #appView{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  display:grid!important;
  grid-template-rows:60px minmax(0,1fr)!important;
  overflow:hidden!important;
}
body.employee-focus-mode #employeeTopTabs{
  grid-row:1!important;
  width:100%!important;
}
body.employee-focus-mode .main{
  grid-row:2!important;
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:10px 14px!important;
}
body.employee-focus-mode .main > .page{
  position:absolute!important;
  inset:10px 14px!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
}
body.employee-focus-mode .main > .page.hidden{
  display:none!important;
}
body.employee-focus-mode .main > .activity-special-page:not(.hidden){
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  gap:8px!important;
}
body.employee-focus-mode .main > .activity-special-page:not(.hidden) > .op-head{
  grid-row:1!important;
  min-height:42px!important;
  margin:0!important;
}
body.employee-focus-mode .main > .activity-special-page:not(.hidden) > .op-pos-layout{
  grid-row:2!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) clamp(340px,30vw,450px)!important;
  gap:10px!important;
  overflow:hidden!important;
}
body.employee-focus-mode .op-pos-catalog{
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr)!important;
  overflow:hidden!important;
}
body.employee-focus-mode .op-pos-toolbar{
  grid-row:1!important;
  min-width:0!important;
}
body.employee-focus-mode .op-category-row{
  grid-row:2!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  white-space:nowrap!important;
}
body.employee-focus-mode .op-products{
  grid-row:3!important;
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(145px,1fr))!important;
  grid-auto-rows:max-content!important;
  align-content:start!important;
}
body.employee-focus-mode .op-cart-panel{
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  display:grid!important;
  grid-template-rows:auto minmax(80px,1fr) auto auto auto auto!important;
  overflow:hidden!important;
}
body.employee-focus-mode .op-cart-title{grid-row:1!important}
body.employee-focus-mode .op-cart-items{
  grid-row:2!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
}
body.employee-focus-mode .op-note{grid-row:3!important;margin:6px 0!important;min-height:42px!important;max-height:50px!important}
body.employee-focus-mode .op-totals{grid-row:4!important;padding:6px 0!important;gap:4px!important}
body.employee-focus-mode .op-pay-methods{grid-row:5!important;margin:5px 0!important}
body.employee-focus-mode .op-payment-extra,
body.employee-focus-mode .op-cart-actions{grid-row:auto!important}
body.employee-focus-mode .op-payment-extra{margin:5px 0!important}
body.employee-focus-mode .op-cart-actions{margin-top:3px!important}
body.employee-focus-mode .op-empty{min-height:100%!important}
@media(max-width:1250px){
  body.employee-focus-mode .op-products{
    grid-template-columns:repeat(3,minmax(135px,1fr))!important;
  }
}
@media(max-width:900px){
  body.employee-focus-mode .main > .activity-special-page:not(.hidden) > .op-pos-layout{
    grid-template-columns:minmax(0,1fr) 330px!important;
  }
  body.employee-focus-mode .op-products{
    grid-template-columns:repeat(2,minmax(130px,1fr))!important;
  }
}

/* V1.31 — ROOT GRID FIX
   Root cause of the narrow cashier:
   original .app still had grid-template-columns:276px minmax(0,1fr).
   In employee mode the sidebar is hidden, but that column remained reserved.
   Collapse the app to ONE column explicitly. */
body.employee-focus-mode #appView{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:60px minmax(0,1fr)!important;
}
body.employee-focus-mode #employeeTopTabs{
  grid-column:1 / -1!important;
  grid-row:1!important;
}
body.employee-focus-mode .main{
  grid-column:1 / -1!important;
  grid-row:2!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  justify-self:stretch!important;
  align-self:stretch!important;
}
body.employee-focus-mode .sidebar{
  display:none!important;
  width:0!important;
  min-width:0!important;
}

/* V1.32 cart supports open-table workflow */
body.employee-focus-mode .op-cart-panel{
  display:flex!important;
  flex-direction:column!important;
}
body.employee-focus-mode .op-cart-title,
body.employee-focus-mode .op-note,
body.employee-focus-mode .op-totals,
body.employee-focus-mode .op-pay-methods,
body.employee-focus-mode .op-payment-extra,
body.employee-focus-mode .op-table-workflow,
body.employee-focus-mode .op-cart-actions{
  flex:0 0 auto!important;
}
body.employee-focus-mode .op-cart-items{
  flex:1 1 auto!important;
  min-height:70px!important;
  overflow-y:auto!important;
}
body.employee-focus-mode .op-totals{font-size:11px!important}
body.employee-focus-mode .op-pay-methods button{padding:7px!important}
body.employee-focus-mode .op-payment-extra input{height:34px!important}
body.employee-focus-mode .op-cart-actions .op-btn,
body.employee-focus-mode .op-table-workflow .op-btn{padding:8px 9px!important}