/* OnePoint Puppertino platform layer — visual only; preserves existing application logic. */
:root{
  --pup-bg:#f5f5f7;--pup-surface:rgba(255,255,255,.92);--pup-surface-solid:#fff;--pup-sidebar:rgba(250,250,252,.9);
  --pup-text:#1d1d1f;--pup-secondary:#6e6e73;--pup-tertiary:#86868b;--pup-line:rgba(60,60,67,.14);--pup-line-strong:rgba(60,60,67,.22);
  --pup-blue:var(--op-accent,#0071e3);--pup-blue-hover:var(--op-accent-hover,#0077ed);--pup-blue-soft:var(--op-accent-soft,#e8f1fb);
  --pup-purple:#7c3aed;--pup-purple-soft:#f5f3ff;--pup-red:#d70015;--pup-green:#16803d;--pup-amber:#9a6700;
  --pup-radius:16px;--pup-radius-sm:11px;--pup-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 28px rgba(0,0,0,.045);
  --pup-shadow-float:0 22px 70px rgba(0,0,0,.16);--pup-control:38px;
}
html.opPuppertino{background:var(--pup-bg)}
html.opPuppertino body{background:radial-gradient(circle at 75% -10%,rgba(0,113,227,.055),transparent 30%),var(--pup-bg);color:var(--pup-text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Segoe UI",sans-serif;letter-spacing:-.006em}
html.opPuppertino .app{grid-template-columns:258px minmax(0,1fr)}
html.opPuppertino .side{background:var(--pup-sidebar);color:var(--pup-text);border-right:1px solid var(--pup-line);padding:18px 12px 14px;backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px)}
html.opPuppertino .brand.opPupBrand{position:relative;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:8px 10px 18px;color:var(--pup-text);font-size:18px;font-weight:700;letter-spacing:-.03em;text-align:left}
html.opPuppertino .opPupBrandMark{grid-row:1/3;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,var(--pup-blue),#58a6ff);color:#fff;font-size:17px;font-weight:800;box-shadow:0 5px 14px rgba(0,113,227,.2)}
html.opPuppertino .brand.opPupBrand small{margin:1px 0 0;color:var(--pup-secondary);font-size:10.5px;font-weight:500;line-height:1.2}
html.opPuppertino .opPupPortalTag{position:absolute;right:10px;top:9px;padding:3px 7px;border:1px solid var(--pup-line);border-radius:999px;background:rgba(255,255,255,.78);color:var(--pup-secondary);font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
html.opPuppertino .side .brand.opBusinessBrand{display:block;text-align:center;padding:4px 8px 18px}
html.opPuppertino .side .brand.opBusinessBrand .opPupBrandMark,html.opPuppertino .side .brand.opBusinessBrand .opPupPortalTag{display:none}
html.opPuppertino .side .brand.opBusinessBrand .opOnePointLabel{color:var(--pup-text)}
html.opPuppertino .side .brand.opBusinessBrand .opOnePointLabel small{color:var(--pup-secondary)}
html.opPuppertino .opPupNav{display:flex;flex-direction:column;gap:2px;overflow:auto;padding-bottom:10px}
html.opPuppertino .opNavSection{padding:16px 11px 5px;color:var(--pup-tertiary);font-size:10px;font-weight:700;letter-spacing:.075em;text-transform:uppercase;user-select:none}
html.opPuppertino .nav button.opPupNavItem{display:flex;align-items:center;gap:10px;min-height:38px;padding:8px 10px;border:1px solid transparent;border-radius:10px;color:#424245;background:transparent;font-size:13px;font-weight:520;letter-spacing:-.005em}
html.opPuppertino .nav button.opPupNavItem:hover{background:rgba(118,118,128,.08);color:var(--pup-text)}
html.opPuppertino .nav button.opPupNavItem.active,html.opPuppertino[data-op-theme] .nav button.opPupNavItem.active{background:var(--pup-blue-soft)!important;color:var(--op-accent-text,#064b8e)!important;border-color:transparent!important;font-weight:650}
html.opPuppertino .opPupNavIcon{width:17px;height:17px;display:grid;place-items:center;flex:none;color:var(--pup-secondary)}
html.opPuppertino .opPupNavIcon svg{width:17px;height:17px}
html.opPuppertino .nav button.active .opPupNavIcon{color:currentColor}
html.opPuppertino .sideBottom{padding:12px 4px 2px;gap:8px}
html.opPuppertino .plan{border:1px solid var(--pup-line);background:rgba(255,255,255,.68);border-radius:12px;padding:10px 11px;color:var(--pup-secondary);font-size:11px;box-shadow:none}
html.opPuppertino .plan b{color:var(--pup-text);font-size:11px;margin-bottom:4px}
html.opPuppertino .sideBottom>.btn{width:100%;justify-content:center}
html.opPuppertino .main{min-width:0;background:transparent}
html.opPuppertino .top{height:72px;padding:0 28px;background:rgba(245,245,247,.76);border-bottom:1px solid var(--pup-line);backdrop-filter:saturate(180%) blur(26px);-webkit-backdrop-filter:saturate(180%) blur(26px);z-index:15}
html.opPuppertino .opPupTitleBlock{display:grid;align-content:center}
html.opPuppertino .top h1{margin:1px 0 0;font-size:23px;font-weight:700;letter-spacing:-.035em;color:var(--pup-text)}
html.opPuppertino .eyebrow{font-size:9.5px;font-weight:700;letter-spacing:.11em;color:var(--pup-secondary)!important}
html.opPuppertino .opPupContext{margin-top:2px;color:var(--pup-tertiary);font-size:10.5px;line-height:1.2}
html.opPuppertino .who{font-size:12px;gap:8px}
html.opPuppertino .avatar{width:32px;height:32px;background:linear-gradient(145deg,#353538,#171719);font-size:11px}
html.opPuppertino .content.opPupContent{width:min(100%,1440px);padding:28px 30px 60px}
html.opPuppertino .card.opPupCard,html.opPuppertino .card{border:1px solid var(--pup-line);border-radius:var(--pup-radius);background:var(--pup-surface);box-shadow:var(--pup-shadow);padding:18px}
html.opPuppertino .content>.card{padding:20px}
html.opPuppertino .section{margin-top:18px}
html.opPuppertino .grid4{gap:12px}
html.opPuppertino .card.metric.opPupMetric,html.opPuppertino .card.metric{min-height:112px;padding:16px 17px;display:flex;flex-direction:column;justify-content:center}
html.opPuppertino .metric span{font-size:11px;font-weight:600;color:var(--pup-secondary)}
html.opPuppertino .metric b{margin:5px 0 0;font-size:26px;font-weight:720;letter-spacing:-.04em}
html.opPuppertino .head.opPupSectionHead,html.opPuppertino .head{align-items:flex-start;gap:14px;margin-bottom:14px}
html.opPuppertino .head h2{font-size:19px;font-weight:700;letter-spacing:-.025em}
html.opPuppertino .head h3{font-size:16px;font-weight:650}
html.opPuppertino .head .muted{margin-top:3px}
html.opPuppertino .muted{color:var(--pup-secondary);font-size:12px}
html.opPuppertino .btn{min-height:var(--pup-control);height:auto;padding:0 13px;border-radius:10px;font-size:12.5px;font-weight:620;box-shadow:none}
html.opPuppertino .btn.primary,html.opPuppertino button.primary{background:var(--pup-blue)!important;border-color:var(--pup-blue)!important;color:#fff!important}
html.opPuppertino .btn.primary:hover,html.opPuppertino button.primary:hover{background:var(--pup-blue-hover)!important;border-color:var(--pup-blue-hover)!important}
html.opPuppertino .btn.secondary{background:rgba(255,255,255,.82);border-color:var(--pup-line-strong);color:var(--pup-text)}
html.opPuppertino .btn.secondary:hover{background:#fff;border-color:rgba(60,60,67,.28)}
html.opPuppertino .btn.danger,html.opPuppertino .danger{background:#fff2f2;color:var(--pup-red);border-color:rgba(215,0,21,.16)}
html.opPuppertino .actions{gap:8px;margin-top:14px}
html.opPuppertino .actions.compact{gap:6px;margin-top:0}
html.opPuppertino .field label{margin-bottom:5px;color:#515154;font-size:11px;font-weight:650}
html.opPuppertino .field input,html.opPuppertino .field select,html.opPuppertino .field textarea{min-height:var(--pup-control);border:1px solid var(--pup-line-strong);border-radius:10px;padding:0 10px;background:rgba(255,255,255,.92);box-shadow:0 1px 1px rgba(0,0,0,.018);font-size:13px}
html.opPuppertino .field textarea{padding:9px 10px;min-height:90px}
html.opPuppertino .field input:focus,html.opPuppertino .field select:focus,html.opPuppertino .field textarea:focus{outline:none!important;border-color:var(--pup-blue)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--pup-blue) 14%,transparent)}
html.opPuppertino input.opFieldDate,html.opPuppertino input[type="date"]{width:150px!important;min-width:150px!important;max-width:150px!important}
html.opPuppertino input.opFieldTime,html.opPuppertino input[type="time"]{width:114px!important;min-width:114px!important;max-width:114px!important}
html.opPuppertino input.opFieldDateTime,html.opPuppertino input[type="datetime-local"]{width:188px!important;min-width:188px!important;max-width:188px!important}
html.opPuppertino input.opFieldNumber{width:122px;max-width:100%}
html.opPuppertino .filters,html.opPuppertino .filterGrid,html.opPuppertino .apCompactFilters,html.opPuppertino .opCompactPayrollFilters{display:flex!important;align-items:flex-end!important;gap:8px!important;flex-wrap:wrap!important;grid-template-columns:none!important}
html.opPuppertino .filters .field,html.opPuppertino .filterGrid .field,html.opPuppertino .apCompactFilters .field,html.opPuppertino .opCompactPayrollFilters .field{flex:0 0 auto!important;margin:0!important}
html.opPuppertino .filters select,html.opPuppertino .filterGrid select,html.opPuppertino .apCompactFilters select,html.opPuppertino .opCompactPayrollFilters select{width:auto!important;min-width:132px!important;max-width:210px!important}
html.opPuppertino .table.opPupTableWrap,html.opPuppertino .table{border:1px solid var(--pup-line);border-radius:13px;background:#fff;box-shadow:none;overflow:auto}
html.opPuppertino table{background:#fff}
html.opPuppertino th,html.opPuppertino td{padding:10px 12px;border-bottom-color:var(--pup-line);font-size:12px}
html.opPuppertino th{position:sticky;top:0;z-index:2;background:rgba(248,248,250,.96);backdrop-filter:blur(12px);color:var(--pup-secondary);font-size:10.5px;font-weight:700;letter-spacing:.015em}
html.opPuppertino tbody tr:hover td{background:#fbfbfd}
html.opPuppertino .list.opPupList,html.opPuppertino .list{border:1px solid var(--pup-line);border-radius:13px;overflow:hidden;background:#fff}
html.opPuppertino .list>.row,html.opPuppertino .row{border:0;border-bottom:1px solid var(--pup-line);border-radius:0;background:transparent;padding:12px 14px;gap:12px}
html.opPuppertino .list>.row:last-child{border-bottom:0}
html.opPuppertino .badge{padding:4px 7px;border-radius:999px;font-size:10px;font-weight:700;background:#f2f2f4;color:#515154}
html.opPuppertino .notice{padding:11px 12px;border-radius:11px;font-size:12px}
html.opPuppertino .storeTiles{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
html.opPuppertino .storeTile{border-color:var(--pup-line);border-radius:14px;padding:14px;box-shadow:none}
html.opPuppertino .selectionGrid{gap:9px}
html.opPuppertino .selectMenu>summary,html.opPuppertino .apSelectMenu summary{min-height:var(--pup-control);border-color:var(--pup-line-strong);border-radius:10px;background:#fff;font-size:12px;padding:0 10px}
html.opPuppertino .selectMenuPanel,html.opPuppertino .apSelectPanel{border-color:var(--pup-line);border-radius:12px;box-shadow:var(--pup-shadow-float);background:rgba(255,255,255,.98)}
html.opPuppertino .drawer{background:rgba(252,252,253,.98);border-left:1px solid var(--pup-line);box-shadow:-22px 0 60px rgba(0,0,0,.10)}
html.opPuppertino .drawer.modal{width:min(620px,92vw);border:1px solid var(--pup-line);border-radius:20px;box-shadow:var(--pup-shadow-float);padding:24px}
html.opPuppertino .drawer h2{font-size:21px;font-weight:720;letter-spacing:-.03em}
html.opPuppertino .back{background:rgba(0,0,0,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html.opPuppertino .toast{right:18px;bottom:18px;border-radius:12px;background:rgba(30,30,32,.92);backdrop-filter:blur(16px);font-size:12px;padding:10px 13px}
html.opPuppertino .login{max-width:440px;margin:72px auto;border:1px solid var(--pup-line);border-radius:22px;padding:28px;background:rgba(255,255,255,.9);box-shadow:0 24px 80px rgba(0,0,0,.08);backdrop-filter:blur(20px)}
html.opPuppertino .login h2{font-size:27px;font-weight:720;letter-spacing:-.04em}
html.opPuppertino .clock{border-color:var(--pup-line);border-radius:28px;box-shadow:0 28px 90px rgba(0,0,0,.09);padding:42px 46px}
html.opPuppertino .clock .time{font-size:62px;font-weight:720;letter-spacing:-.055em}
html.opPuppertino .clock input,html.opPuppertino .clock button.big{height:58px;border-radius:13px}
html.opPuppertino .apShared,html.opPuppertino .opSharedTile,html.opPuppertino .opSharedRow{background:var(--pup-purple-soft)!important;border-color:#d8ccff!important}
html.opPuppertino .apSharedBadge,html.opPuppertino .opSharedBadge{background:#ede9fe!important;color:#5b21b6!important;border:0!important}
html.opPuppertino .opPupNavToggle{display:none;width:36px;height:36px;border:1px solid var(--pup-line);border-radius:10px;background:rgba(255,255,255,.82);padding:8px;align-content:center;gap:4px}
html.opPuppertino .opPupNavToggle span{display:block;height:1.5px;background:#3a3a3c;border-radius:2px}
html.opPuppertino .radioGroup{gap:7px}
html.opPuppertino .radioGroup label{padding:11px;border-color:var(--pup-line);border-radius:11px;background:#fff}
html.opPuppertino .two{gap:14px}.opPuppertino .three{gap:12px}
html.opPuppertino .payrollTotals{margin-top:16px;padding-top:16px;border-top-color:var(--pup-line)}

@media(max-width:1120px){
  html.opPuppertino .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.opPuppertino .summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:920px){
  html.opPuppertino .app{display:block;min-height:100vh}
  html.opPuppertino .side{position:fixed;z-index:60;left:0;top:0;bottom:0;width:278px;height:100vh;transform:translateX(-102%);transition:transform .22s cubic-bezier(.2,.8,.2,1);box-shadow:24px 0 70px rgba(0,0,0,.12)}
  html.opPuppertino body.opNavOpen .side{transform:translateX(0)}
  html.opPuppertino body.opNavOpen:after{content:"";position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.22);backdrop-filter:blur(5px)}
  html.opPuppertino .top{padding:0 18px;gap:12px}
  html.opPuppertino .opPupNavToggle{display:grid;flex:none}
  html.opPuppertino .content.opPupContent{padding:22px 18px 48px}
}
@media(max-width:640px){
  html.opPuppertino .top{height:66px}
  html.opPuppertino .top h1{font-size:20px}
  html.opPuppertino .who>div:not(.avatar){display:none}
  html.opPuppertino .grid4,html.opPuppertino .summary,html.opPuppertino .two,html.opPuppertino .three,html.opPuppertino .selectionGrid{grid-template-columns:1fr}
  html.opPuppertino .head{flex-direction:column;align-items:stretch}
  html.opPuppertino .head>.actions,html.opPuppertino .head>button{align-self:flex-start}
  html.opPuppertino .card.opPupCard,html.opPuppertino .card{border-radius:14px;padding:15px}
  html.opPuppertino .content>.card{padding:16px}
  html.opPuppertino .drawer.modal{width:calc(100vw - 20px);padding:18px;border-radius:16px}
  html.opPuppertino .filters .field,html.opPuppertino .filterGrid .field,html.opPuppertino .apCompactFilters .field,html.opPuppertino .opCompactPayrollFilters .field{flex:1 1 140px!important}
  html.opPuppertino .filters select,html.opPuppertino .filterGrid select,html.opPuppertino .apCompactFilters select,html.opPuppertino .opCompactPayrollFilters select{max-width:100%!important;width:100%!important}
  html.opPuppertino input.opFieldDate,html.opPuppertino input[type="date"],html.opPuppertino input.opFieldTime,html.opPuppertino input[type="time"],html.opPuppertino input.opFieldDateTime,html.opPuppertino input[type="datetime-local"]{max-width:100%!important;min-width:0!important;width:100%!important}
  html.opPuppertino .clock{padding:28px 20px;border-radius:22px}
  html.opPuppertino .clock .time{font-size:48px}
}

/* Kiosk stays intentionally focused and distraction-free. */
html.opPuppertino body.opClockNoSide{background:radial-gradient(circle at 50% 0%,rgba(0,113,227,.07),transparent 34%),var(--pup-bg)}
html.opPuppertino body.opClockNoSide .content{max-width:940px;padding-top:24px}
html.opPuppertino body.opClockNoSide .opPupNavToggle{display:none!important}