/**
 * @file till_login.css
 * Staff and admin login of the till: the drawn panel on the left (login_art.css), a light form on the right.
 */

.tl-page {
    --tl-accent: var(--lp-akzent, #3b82f6);
    --tl-accent-dark: var(--lp-akzent-dunkel, #2563eb);
    --feld-hoehe: 52px;
    display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; min-height: 100dvh;
    flex: 1 1 auto; min-width: 0; background: #fff; color: #1e293b;
}
/* The till's page frame adds a top bar and paddings; the login page has its own brand. */
body:has(.tl-page) { padding-top: 0; }
body:has(.tl-page) > .site-header { display: none; }
body.admin-body main.admin-content-guest:has(.tl-page) { padding: 0; margin: 0; }
/* The admin sheet colours every link inside .admin-content, with !important and a long :not() chain;
   the id outweighs it. */
#till-login a.la-brand { color: #fff !important; }
#till-login a.tl-back { color: #64748b !important; }
#till-login .tl-foot a { color: var(--tl-accent) !important; }
.tl-main { display: grid; place-items: center; padding: 40px 32px; }
.tl-card { width: min(430px, 100%); animation: tl-up .7s cubic-bezier(.2, .7, .2, 1) both; }

.tl-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; color: #64748b; font-size: 14px; font-weight: 600; text-decoration: none; }
.tl-back i { transition: transform .2s; }
.tl-back:hover { color: #1e293b; }
.tl-back:hover i { transform: translateX(-3px); }
.tl-card h1 { margin: 0 0 8px; font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #0f172a; }
.tl-sub { margin: 0 0 22px; color: #64748b; font-size: 15px; line-height: 1.5; }

.tl-card .alert-error { margin-bottom: 16px; border-radius: 5px; border: 0; border-left: 4px solid #ef4444; background: #fef2f2; color: #991b1b; animation: tl-shake .4s; }
.tl-card .field { margin-bottom: 16px; }
.tl-card .field > label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 700; color: #334155; text-transform: none; letter-spacing: 0; }
.tl-card .input-icon { position: relative; }
.tl-card .input-icon-glyph { color: var(--tl-accent); }
.tl-card .input-icon input {
    width: 100%; height: var(--feld-hoehe, 52px); border: 1.5px solid #e2e8f0; border-radius: 14px; background: #fff;
    font-size: 16px; color: #1e293b; transition: border-color .15s, box-shadow .15s;
}
.tl-card .input-icon input:focus { outline: none; border-color: var(--tl-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tl-accent) 16%, transparent); }

#till-login .btn-block {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin-top: 8px;
    border: 0; border-radius: 999px; background: var(--tl-accent); color: #fff; font-size: 17px; font-weight: 700;
    box-shadow: 0 12px 24px -12px var(--tl-accent); transition: background-color .15s, transform .15s;
}
#till-login .btn-block::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 15px; transition: transform .2s; }
#till-login .btn-block:hover { background: var(--tl-accent-dark); }
#till-login .btn-block:hover::after { transform: translateX(4px); }

.tl-card .dial-pad { margin: 4px 0 8px; }
.tl-card .dial-pad-btn { border-radius: 14px; }
.tl-foot { margin: 20px 0 0; text-align: center; color: #64748b; font-size: 14px; }
.tl-foot a { color: var(--tl-accent); font-weight: 700; text-decoration: none; }
.tl-foot a:hover { text-decoration: underline; }

@keyframes tl-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes tl-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

@media (max-width: 760px) {
    .tl-page { display: block; }
    .tl-main { display: block; padding: 22px 16px 110px; }
    /* no transform here: it would pin the fixed button to the card instead of the screen */
    .tl-card { width: auto; max-width: 520px; margin: 0 auto; animation: none; }
    /* On a phone the button stays at the bottom on a white bar, like on the sites' login. */
    .tl-main::after {
        content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 29;
        height: calc(78px + env(safe-area-inset-bottom, 0px));
        background: #fff; border-top: 1px solid #e2e8f0; box-shadow: 0 -10px 24px -12px rgba(15, 23, 42, .22);
    }
    #till-login .btn-block {
        position: fixed; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        z-index: 30; width: auto; margin: 0;
    }
    .tl-back { margin-bottom: 16px; }
    .tl-card h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .tl-card, .tl-card .alert-error { animation: none; } }