/**************************************************************************
* Document Structure
**************************************************************************/

html, body {height: 100%; margin: 0; padding: 0; touch-action: manipulation;}
html {font-size: 62.5%; height: 100%;}
body {color: var(--epos-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; font-weight: 400; height: 100%; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

a, a:link, a:visited {color: var(--epos-text-secondary); text-decoration: none;}
a:focus, a:hover, a:active {color: var(--epos-text); text-decoration: none;}

h1 {font-size: 2.4rem; margin: 0;}
h2 {font-size: 2.2rem; margin: 0;}
h3 {font-size: 2.0rem; margin: 0;}


/**************************************************************************
* General Classes
**************************************************************************/

.clear-fix:after {clear: both; content: "."; display: block; height: 0; overflow: hidden; visibility: hidden;}
.hidden {display: none !important;}


/**************************************************************************
* Layout Styles
**************************************************************************/

.l_login {background-color: var(--epos-bg);}



/**************************************************************************
* UI Styles
**************************************************************************/

.ui-nav-panel-open {color: var(--epos-text-muted); cursor: pointer; font-size: 3rem; left: 0; padding: 20px; position: absolute; top: 0; z-index: 1000; transition: color 0.15s;}
.ui-nav-panel-open:focus,
.ui-nav-panel-open:hover,
.ui-nav-panel-open:active {color: var(--epos-text);}

#ui-nav-panel {background-color: var(--epos-panel); bottom: 0; left: -240px; position: fixed; top: 0; width: 240px; z-index: 2000; box-shadow: 4px 0 16px rgba(0,0,0,0.4); transition: left 300ms ease-in-out;}
#ui-nav-panel .footer {bottom: 0; left: 0; position: absolute; right: 0;}
#ui-nav-panel .footer .tool {color: var(--epos-text-secondary); display: block; position: relative; transition: background 0.15s;}
#ui-nav-panel .footer .tool:focus,
#ui-nav-panel .footer .tool:hover,
#ui-nav-panel .footer .tool:active {background-color: var(--epos-surface-hover); text-decoration: none; color: var(--epos-text);}
#ui-nav-panel .footer .tool i {left: 12px; position: absolute; top: 12px;}
#ui-nav-panel .footer .tool .title {display: block; font-size: 1.4rem; line-height: 20px; padding: 10px 10px 10px 42px;}

#ui-nav-panel-open-overlay {background-color: rgba(0, 0, 0, 0.5); bottom: 0; display: none; left: 0; opacity: 0; right: 0; position: fixed; top: 0; z-index: 1500;}

body.np-open #ui-nav-panel {left: 0;}
body.np-open #ui-nav-panel-open-overlay {display: block; opacity: 1;}


/**************************************************************************
* Page: Login
**************************************************************************/

.p_login .login-wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px;}
.p_login .login-wrap .logo {display: block; margin: 0 auto 30px; max-width: 200px;}

.p_login .login-wrap .input-wrap {margin-bottom: 8px; position: relative;}
.p_login .login-wrap .pin-display {
  border: 1px solid var(--epos-border-light); color: #fff; display: flex;
  align-items: center; font-size: 22px; height: 46px; margin: 0; padding: 0 10px 0 46px;
  width: 100%; box-sizing: border-box; border-radius: 8px;
  background: transparent; letter-spacing: 6px;
}
.p_login .login-wrap .pin-display::after {
  content: ''; display: inline-block; width: 2px; height: 22px;
  background: var(--epos-accent); margin-left: 2px;
  animation: pinCursorBlink 1s step-end infinite;
}
@keyframes pinCursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.p_login .login-wrap .pin-display .mdi {position: absolute; left: 0; top: 0; width: 46px; height: 46px; line-height: 46px; text-align: center; color: var(--epos-text-secondary); letter-spacing: normal;}
.p_login .login-wrap .pin-display .pin-text {letter-spacing: 6px;}
.p_login .login-wrap input.submit {
  background-color: var(--epos-accent); border: 0; color: #fff; cursor: pointer;
  display: block; font-size: 16px; font-weight: 600; padding: 12px 0;
  text-transform: uppercase; width: 100%; -webkit-appearance: none;
  border-radius: 8px; transition: background 0.15s, transform 0.1s; letter-spacing: 0.5px;
}
.p_login .login-wrap input.submit:focus,
.p_login .login-wrap input.submit:hover,
.p_login .login-wrap input.submit:active {background-color: var(--epos-accent-hover);}
.p_login .login-wrap input.submit:active {transform: scale(0.98);}

.p_login .login-wrap .forgot {margin-top: 20px; text-align: center;}
.p_login .login-wrap .forgot a,
.p_login .login-wrap .forgot a:link,
.p_login .login-wrap .forgot a:visited {color: var(--epos-text-muted); font-size: 14px;}
.p_login .login-wrap .forgot a:focus,
.p_login .login-wrap .forgot a:hover,
.p_login .login-wrap .forgot a:active {color: var(--epos-text); text-decoration: underline;}

.printer-label {
  color: var(--epos-text-muted); font-weight: 400; font-size: 10px;
  width: 60%; margin-left: 20%; padding: 4px;
}


/* Login page inherits .ui-keypad from ui.css */



/* Open register */
.p_login .form-title {font-size: 2rem; padding: 0 0 10px; text-align: center; text-transform: uppercase; color: #fff; white-space: nowrap; font-weight: 500; letter-spacing: 1px;}
.p_login .form-subtitle {font-size: 1.3rem; padding: 0 0 10px; margin-bottom: 15px; text-align: center; text-transform: uppercase; color: var(--epos-text-secondary);}


/* Login register (quick) */
.p_login .hack-app-wrap {bottom: 0; left: 0; overflow: hidden; position: fixed; right: 0; top: 0;}

.fp-leaderboard-login {margin-top: 15px; padding: 10px 14px; background: #575656; border-radius: 8px;}
.fp-leaderboard-login.hidden {display: none;}
.fp-leaderboard-login .fp-leaderboard-inline {font-size: 10px; color: #c1e4d9; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px;}
.fp-leaderboard-login .fp-lb-sep {color: rgba(255,255,255,0.25); margin: 0 4px;}

@media (max-width: 600px) {
  .l_login {background-color: var(--epos-bg);}
}

/* ── Vibe quick-control tray (login screen, right edge; the tab rides
      out attached to the panel) ─────────────────────────────────────── */
.vibe-tray { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; align-items: center; }
.vibe-tray .vt-handle { width: 34px; height: 76px; border: 0; border-radius: 12px 0 0 12px; background: rgba(30,45,42,0.85); color: rgba(255,255,255,0.75); font-size: 20px; cursor: pointer; }
.vibe-tray .vt-panel { width: 0; overflow: hidden; opacity: 0; transition: width 0.25s ease, opacity 0.25s ease; background: rgba(30,45,42,0.96); border-radius: 0 0 0 14px; color: #fff; align-self: stretch; }
.vibe-tray.open .vt-panel { width: 250px; opacity: 1; padding: 16px; }
.vibe-tray.open .vt-handle { background: rgba(30,45,42,0.96); }
.vibe-tray .vt-panel { max-height: 84vh; overflow-y: auto; }
.vibe-tray .vt-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 10px 0 4px; }
.vibe-tray .vt-label:first-child { margin-top: 0; }
.vibe-tray .vt-now { font-size: 13px; font-weight: 600; line-height: 1.3; min-height: 17px; margin-bottom: 10px; }
.vibe-tray .vt-btn { width: 100%; height: 38px; border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; background: none; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.vibe-tray .vt-btn:active { background: rgba(255,255,255,0.12); }
.vibe-tray .vt-btn:disabled { opacity: 0.35; cursor: default; }
.vibe-tray .vt-btnrow { display: flex; gap: 8px; }
.vibe-tray .vt-blackout { border-color: rgba(192,57,43,0.7); color: #e8a49c; }
.vibe-tray .vt-blackout:active { background: rgba(192,57,43,0.25); }
.vibe-tray .vt-btnrow .vt-btn { flex: 1; width: auto; }
.vibe-tray .vt-vol { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; }
.vibe-tray .vt-vol .mdi { font-size: 16px; color: rgba(255,255,255,0.6); }
.vibe-tray .vt-vol input { flex: 1; }
.vibe-tray .vt-volnum { font-size: 11px; color: rgba(255,255,255,0.6); width: 34px; text-align: right; }
.vibe-tray .vt-scheds { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.vibe-tray .vt-sched { height: 34px; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; background: none; color: rgba(255,255,255,0.9); font-size: 12.5px; cursor: pointer; text-align: left; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vibe-tray .vt-sched:active { background: rgba(255,255,255,0.12); }
.vibe-tray .vt-sched:disabled { opacity: 0.35; cursor: default; }
.vibe-tray .vt-sched.flash { opacity: 1; border-color: rgba(255,255,255,0.7); animation: vtSchedFlash 0.9s ease-in-out infinite; }
@keyframes vtSchedFlash { 0%, 100% { background: rgba(255,255,255,0.06); } 50% { background: rgba(255,255,255,0.32); } }