/* WorkFlow LUNA V33.8.42 · standalone login presentation for both installed PWAs.
   Uses existing login form, PIN, slide-login, roles and auth, no new providers.
   Everything scoped to .luna-auth-shell so other pages and all legacy themes
   remain bit-identical.  The four cropped assets contain only HERO ARTWORK,
   never pre-rendered buttons or form elements. */
#app .luna-auth-shell{
  --luna-login-base:#081426;
  --luna-login-card:rgba(7,18,37,.94);
  --luna-login-ink:#fff1d5;
  --luna-login-sub:#d6c4b5;
  --luna-login-line:rgba(255,208,128,.67);
  --luna-login-field:#0c1b30;
  --luna-login-field-border:rgba(225,210,193,.42);
  --luna-login-shadow:rgba(8,12,28,.49);
  position:relative;
  isolation:isolate;
  width:100%;max-width:none;
  min-height:100dvh;
  margin:0;
  padding:calc(20px + env(safe-area-inset-top,0px)) 12px calc(36px + env(safe-area-inset-bottom,0px));
  color:var(--luna-login-ink)!important;
  background:radial-gradient(ellipse at 26% 12%,rgba(217,109,47,.23),transparent 40%),
    radial-gradient(ellipse at 85% 85%,rgba(206,151,70,.13),transparent 50%),
    linear-gradient(168deg,#061128,#1c1721 62%,#0a1228 100%);
}
#app .luna-auth-shell[data-login-mode="day"]{
  --luna-login-base:#f5e7ce;
  --luna-login-card:rgba(255,249,235,.94);
  --luna-login-ink:#572c1b;
  --luna-login-sub:#795b49;
  --luna-login-line:rgba(182,124,40,.62);
  --luna-login-field:#fffaf0;
  --luna-login-field-border:rgba(162,119,72,.53);
  --luna-login-shadow:rgba(111,64,31,.22);
  background:radial-gradient(ellipse at 15% 0%,rgba(255,250,217,.95),transparent 42%),
    radial-gradient(ellipse at 95% 85%,rgba(253,197,109,.36),transparent 49%),
    linear-gradient(166deg,#fff8dd,#f5e0bc 68%,#f7d8a4);
}
#app .luna-auth-shell::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.54;
  background-image:radial-gradient(circle at 13% 12%,#fff6c7 0 1px,transparent 2px),
   radial-gradient(circle at 82% 46%,#ffc86b 0 1px,transparent 2px),
   radial-gradient(circle at 42% 79%,#fbd9a0 0 1px,transparent 2px);
  background-size:157px 225px,220px 206px,301px 289px;
  animation:luna-login-points 6s ease-in-out infinite alternate;
}
@keyframes luna-login-points{from{opacity:.3}to{opacity:.7}}
#app .luna-auth-shell .luna-auth-layout{
  position:relative;display:grid;gap:0;
  width:min(100%,445px);max-width:445px;
  margin:0 auto;
  overflow:visible;
}
#app .luna-auth-shell .luna-auth-art{
  position:relative;z-index:1;
  width:100%;height:clamp(242px,74vw,337px);
  border-radius:32px 32px 19px 19px;
  overflow:hidden;
  background-color:#111c2b;
  background-image:url('./assets/login-art/employee-night.webp');
  background-size:cover;background-position:center 38%;background-repeat:no-repeat;
  border:1px solid var(--luna-login-line);
  box-shadow:0 15px 32px var(--luna-login-shadow),0 0 17px rgba(240,175,91,.2);
}
#app .luna-auth-shell[data-login-role="manager"][data-login-mode="night"] .luna-auth-art{background-image:url('./assets/login-art/manager-night.webp')}
#app .luna-auth-shell[data-login-role="manager"][data-login-mode="day"] .luna-auth-art{background-image:url('./assets/login-art/manager-day.webp')}
#app .luna-auth-shell[data-login-role="employee"][data-login-mode="night"] .luna-auth-art{background-image:url('./assets/login-art/employee-night.webp')}
#app .luna-auth-shell[data-login-role="employee"][data-login-mode="day"] .luna-auth-art{background-image:url('./assets/login-art/employee-day.webp')}
#app .luna-auth-shell .luna-auth-art::after{
  content:"";position:absolute;inset:auto 0 0;height:35%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(7,16,30,.15) 25%,var(--luna-login-card));
}
#app .luna-auth-shell .luna-auth-art-shine{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(112deg,transparent 10%,rgba(255,242,191,.13) 33%,transparent 53%);
  background-size:260% 100%;animation:luna-login-light-sweep 10s linear infinite;
}
@keyframes luna-login-light-sweep{0%{background-position:145% 0}100%{background-position:-145% 0}}
#app .luna-auth-shell .luna-auth-appearance{
  position:absolute;z-index:5;right:8px;top:10px;
  display:flex;gap:5px;align-items:center;
  padding:4px;border-radius:999px;
  background:rgba(10,16,27,.67);border:1px solid rgba(255,221,164,.72);
  box-shadow:0 3px 16px rgba(0,0,0,.22);
}
#app .luna-auth-shell .luna-auth-mode-btn{
  min-height:32px;padding:6px 9px;
  border-radius:100px;background:transparent;
  color:#fff3dc;font-size:12px;font-weight:800;
  border:1px solid transparent;
}
#app .luna-auth-shell .luna-auth-mode-btn[aria-pressed="true"]{
  background:linear-gradient(135deg,#ae1e31,#b84727 42%,#edb960)!important;
  color:#fff9e8!important;border-color:#ffd28a!important;
  box-shadow:inset 0 1px rgba(255,246,222,.27),0 0 10px rgba(245,169,65,.38)!important;
}
#app .luna-auth-shell .luna-auth-card.login-card.glass{
  position:relative;z-index:2;
  margin:-22px 4px 0;
  display:grid;gap:15px;
  padding:25px clamp(16px,5.7vw,26px) 21px;
  color:var(--luna-login-ink)!important;
  background:var(--luna-login-card)!important;
  background-image:none!important;
  border:1px solid var(--luna-login-line)!important;
  border-radius:31px!important;
  box-shadow:0 18px 36px var(--luna-login-shadow),0 0 0 1px rgba(236,189,105,.14),inset 0 1px rgba(255,248,213,.16)!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
#app .luna-auth-shell .luna-auth-card.login-card::before{
  content:"✦";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  color:#ffe6aa;font-size:22px;text-shadow:0 0 11px #f9b94d;
  pointer-events:none;
}
#app .luna-auth-shell .luna-auth-card .login-logo,
#app .luna-auth-shell .luna-auth-card .luna-fantasy-login-art{display:none!important}
#app .luna-auth-shell .luna-auth-heading{display:grid;gap:4px;text-align:center}
#app .luna-auth-shell .luna-auth-heading .luna-auth-flourish{color:#dca75a;font-size:14px;letter-spacing:.4em}
#app .luna-auth-shell .luna-auth-heading h1{
  color:var(--luna-login-ink)!important;
  font-weight:850;font-size:clamp(24px,7.6vw,34px)!important;
  line-height:1.25;letter-spacing:.01em;text-shadow:0 0 16px rgba(242,175,89,.21);
}
#app .luna-auth-shell .luna-auth-heading .luna-auth-tagline{font-size:14px;color:var(--luna-login-ink)}
#app .luna-auth-shell .luna-auth-heading .caption,
#app .luna-auth-shell .login-card .caption{color:var(--luna-login-sub)!important}
#app .luna-auth-shell .login-card .field{color:var(--luna-login-ink)!important;font-size:13px}
#app .luna-auth-shell .login-card :is(input:not([type="checkbox"]),select,textarea){
  width:100%;min-height:49px;
  color:var(--luna-login-ink)!important;
  background:var(--luna-login-field)!important;
  background-image:none!important;
  border:1px solid var(--luna-login-field-border)!important;
  border-radius:15px!important;
  box-shadow:inset 0 1px 5px rgba(0,0,0,.07)!important;
  color-scheme:normal;
}
#app .luna-auth-shell .login-card :is(input,textarea)::placeholder{color:var(--luna-login-sub)!important;opacity:.8}
#app .luna-auth-shell .login-card :is(input,select,button):focus-visible{
  outline:2px solid #df9e42!important;outline-offset:2px!important;
}
#app .luna-auth-shell .login-card .role-switch .role-card,
#app .luna-auth-shell .login-card .role-switch .role-card:not(.selected){
  color:var(--luna-login-ink)!important;
  border:1px solid var(--luna-login-line)!important;
  background:var(--luna-login-field)!important;
  box-shadow:inset 0 1px rgba(255,246,211,.10)!important;
}
#app .luna-auth-shell .login-card .role-switch .role-card.selected{
  background:linear-gradient(145deg,#88172c,#c14f27 48%,#d9a350)!important;
  color:#fff6dc!important;
  border-color:#ffdf9b!important;
  box-shadow:0 0 13px rgba(218,141,44,.21)!important;
}
#app .luna-auth-shell .login-card .role-switch .role-card small{color:inherit!important;opacity:.85}
#app .luna-auth-shell .login-card .btn:not(.danger),
#app .luna-auth-shell .login-card .btn.secondary:not(.danger){
  border:1px solid #ffdc97!important;
  background:linear-gradient(125deg,#891323,#b9242f 55%,#a51a27)!important;
  color:#fff5df!important;
  text-shadow:0 1px rgba(41,0,0,.32);
  box-shadow:0 0 15px rgba(218,122,38,.17),inset 0 0 0 1px rgba(255,221,161,.13)!important;
  border-radius:16px!important;
  min-height:48px;
}
#app .luna-auth-shell .login-card .btn.secondary:not([type="submit"]):not(.danger){
  background:var(--luna-login-field)!important;
  color:var(--luna-login-ink)!important;
}
#app .luna-auth-shell .login-card .slide-login{
  color:var(--luna-login-ink)!important;
  background:var(--luna-login-field)!important;
  border-color:var(--luna-login-line)!important;
}
#app .luna-auth-shell .login-card .slide-handle{
  background:linear-gradient(135deg,#a11a2b,#efbd66)!important;
  box-shadow:0 0 11px rgba(236,160,56,.25)!important;
}
#app .luna-auth-shell .login-card .error{
  background:rgba(163,34,48,.18);color:var(--luna-login-ink);
  border:1px solid #bb495c;
}
#app .luna-auth-shell .login .panel.glass:not(.luna-auth-card){
  background:var(--luna-login-card)!important;
  color:var(--luna-login-ink)!important;
  border:1px solid var(--luna-login-line)!important;
  border-radius:20px;
  margin:12px 4px 0;
  box-shadow:0 10px 23px var(--luna-login-shadow)!important;
}
#app .luna-auth-shell .login .panel.glass:not(.luna-auth-card) .caption{
  color:var(--luna-login-sub)!important;
}
#app .luna-auth-shell .login .panel.glass:not(.luna-auth-card) .btn{
  background:linear-gradient(120deg,#8a1427,#c4472f)!important;
  border:1px solid var(--luna-login-line)!important;
  color:#fff4d5!important;
}
@media(max-width:360px){
 #app .luna-auth-shell{padding-left:7px;padding-right:7px}
 #app .luna-auth-shell .luna-auth-art{height:255px}
 #app .luna-auth-shell .luna-auth-card.login-card.glass{padding:23px 13px 18px}
 #app .luna-auth-shell .luna-auth-mode-btn{font-size:11px;padding:5px 6px;min-height:29px}
}
@media(min-width:700px){
 #app .luna-auth-shell{padding-top:34px}
 #app .luna-auth-shell .luna-auth-art{height:326px}
}
@media(prefers-reduced-motion:reduce){
 #app .luna-auth-shell::before,#app .luna-auth-shell .luna-auth-art-shine{animation:none!important}
}

/* Isolation against legacy fantasy/black-theme !important rules.
   These login-specific styles must win even if Mae Kru was selected before logout. */
body[data-fantasy-theme] #app .luna-auth-shell .luna-auth-card.login-card.glass,
body[data-app-theme="black"] #app .luna-auth-shell .luna-auth-card.login-card.glass{
  background:var(--luna-login-card)!important;
  background-color:var(--luna-login-card)!important;
  background-image:none!important;
  border-color:var(--luna-login-line)!important;
  color:var(--luna-login-ink)!important;
}
body[data-fantasy-theme] #app .luna-auth-shell .luna-auth-card :is(input:not([type="checkbox"]),select,textarea),
body[data-app-theme="black"] #app .luna-auth-shell .luna-auth-card :is(input:not([type="checkbox"]),select,textarea){
  background:var(--luna-login-field)!important;
  color:var(--luna-login-ink)!important;
  border:1px solid var(--luna-login-field-border)!important;
}
body[data-fantasy-theme] #app .luna-auth-shell .luna-auth-card .luna-auth-heading :is(h1,.luna-auth-tagline),
body[data-app-theme="black"] #app .luna-auth-shell .luna-auth-card .luna-auth-heading :is(h1,.luna-auth-tagline){
  color:var(--luna-login-ink)!important;
  text-shadow:none!important;
}
body[data-fantasy-theme] #app .luna-auth-shell .luna-auth-card .field,
body[data-app-theme="black"] #app .luna-auth-shell .luna-auth-card .field{
  color:var(--luna-login-ink)!important;
}
body[data-fantasy-theme] #app .luna-auth-shell .luna-auth-card .btn.secondary:not([type="submit"]):not(.danger),
body[data-app-theme="black"] #app .luna-auth-shell .luna-auth-card .btn.secondary:not([type="submit"]):not(.danger){
  background:var(--luna-login-field)!important;
  color:var(--luna-login-ink)!important;
  border-color:var(--luna-login-line)!important;
}
body[data-fantasy-theme] #app .luna-auth-shell .luna-auth-card .btn[type="submit"],
body[data-app-theme="black"] #app .luna-auth-shell .luna-auth-card .btn[type="submit"]{
  background:linear-gradient(125deg,#881324,#b8222f 55%,#a31827)!important;
  color:#fff5db!important;
  border-color:#ffda94!important;
}
body[data-fantasy-theme] #app .luna-auth-shell .luna-auth-card .role-switch .role-card:not(.selected),
body[data-app-theme="black"] #app .luna-auth-shell .luna-auth-card .role-switch .role-card:not(.selected){
  background:var(--luna-login-field)!important;
  color:var(--luna-login-ink)!important;
}
body[data-fantasy-theme] #app .luna-auth-shell .luna-auth-card .role-switch .role-card.selected,
body[data-app-theme="black"] #app .luna-auth-shell .luna-auth-card .role-switch .role-card.selected{
  background:linear-gradient(125deg,#941525,#bd4928 55%,#e6a84e)!important;
  color:#fff8e7!important;
}
body[data-fantasy-theme] #app .luna-auth-shell .login .panel.glass:not(.luna-auth-card),
body[data-app-theme="black"] #app .luna-auth-shell .login .panel.glass:not(.luna-auth-card){
  background:var(--luna-login-card)!important;
  background-image:none!important;
  color:var(--luna-login-ink)!important;
}

/* Art-login must not inherit the old fantasy animated diagonal card sheen.
   Reset every inherited pseudo-element property, not just its content. */
#app .luna-auth-shell .luna-auth-card.login-card.glass::before,
body[data-fantasy-theme] #app .luna-auth-shell .luna-auth-card.login-card.glass::before{
  content:'✦'!important;display:block!important;position:absolute!important;
  inset:auto!important;top:-13px!important;left:50%!important;
  right:auto!important;bottom:auto!important;
  width:auto!important;height:auto!important;
  transform:translateX(-50%)!important;
  background:none!important;background-image:none!important;
  animation:none!important;opacity:1!important;
  color:#d9a253!important;font-size:20px!important;
  pointer-events:none!important;z-index:4!important;
}
#app .luna-auth-shell .luna-auth-card.login-card.glass::after,
body[data-fantasy-theme] #app .luna-auth-shell .luna-auth-card.login-card.glass::after{
  content:none!important;display:none!important;
}
/* Keep captions dark on ivory day login even when Mae Kru/Dark Glass is still
   selected in the underlying app; avoid unreadable cream-on-cream labels. */
body #app .luna-auth-shell[data-login-mode="day"] .luna-auth-card.login-card.glass :is(.caption,.luna-auth-heading .caption),
body[data-fantasy-theme] #app .luna-auth-shell[data-login-mode="day"] .luna-auth-card.login-card.glass :is(.caption,.luna-auth-heading .caption){
  color:#6f4c3b!important;
  text-shadow:none!important;
}
body #app .luna-auth-shell[data-login-mode="day"] .luna-auth-card.login-card.glass input::placeholder,
body[data-fantasy-theme] #app .luna-auth-shell[data-login-mode="day"] .luna-auth-card.login-card.glass input::placeholder{color:#836453!important;opacity:.78}
body #app .luna-auth-shell[data-login-mode="night"] .luna-auth-card.login-card.glass .caption,
body[data-fantasy-theme] #app .luna-auth-shell[data-login-mode="night"] .luna-auth-card.login-card.glass .caption{color:#e0ccb7!important}


/* V33.8.45: no boxed character art on the login screens of Manager/Work Schedule.
   Decorative artwork is full-width/behind the form, while the mode switch remains
   in the normal flow at the top for a reliable iPhone touch target. */
#app .luna-auth-shell .luna-auth-layout{isolation:isolate;padding-top:52px!important;}
#app .luna-auth-shell .luna-auth-art{
  position:absolute!important;z-index:-1!important;inset:0 -12px auto!important;
  width:calc(100% + 24px)!important;
  height:clamp(355px,108vw,495px)!important;
  border:0!important;border-radius:0!important;
  box-shadow:none!important;
  background-color:transparent!important;
  background-size:cover;background-position:center top;
  overflow:visible!important;
  -webkit-mask-image:linear-gradient(to bottom,black 0%,black 61%,transparent 99%);
  mask-image:linear-gradient(to bottom,black 0%,black 61%,transparent 99%);
  pointer-events:none;
}
#app .luna-auth-shell .luna-auth-art::after{
  background:linear-gradient(to bottom,transparent 38%,var(--luna-login-base) 99%)!important;
  opacity:.52;
}
#app .luna-auth-shell .luna-auth-art-shine{display:none!important;}
#app .luna-auth-shell .luna-auth-appearance{
  position:absolute!important;z-index:20!important;top:0!important;right:22px!important;
  left:auto!important;display:flex!important;gap:5px!important;
  min-height:40px!important;opacity:1!important;visibility:visible!important;
  pointer-events:auto!important;
  padding:4px!important;
  border:1px solid rgba(255,211,131,.90)!important;
  background:rgba(39,10,23,.90)!important;
  box-shadow:0 5px 15px rgba(20,4,9,.28)!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
#app .luna-auth-shell .luna-auth-mode-btn{
  display:inline-flex!important;align-items:center;justify-content:center;
  min-height:34px!important;padding:6px 9px!important;
  font-size:12px!important;color:#fff0d0!important;white-space:nowrap;
  -webkit-mask-image:none!important;mask-image:none!important;
}
#app .luna-auth-shell .luna-auth-card.login-card.glass{
  margin:clamp(158px,46vw,210px) 4px 0!important;
  background:var(--luna-login-card)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
@media(max-width:360px){
 #app .luna-auth-shell .luna-auth-layout{padding-top:49px!important;}
 #app .luna-auth-shell .luna-auth-art{height:365px!important;}
 #app .luna-auth-shell .luna-auth-card.login-card.glass{margin-top:145px!important;}
}