/* Extended color palette */
.text-purple { color: #7c3aed !important; }
.text-orange  { color: #ea580c !important; }
.text-pink    { color: #db2777 !important; }
.text-teal    { color: #0d9488 !important; }
.text-indigo  { color: #4338ca !important; }
.text-lime    { color: #65a30d !important; }
.text-rose    { color: #e11d48 !important; }
.text-slate   { color: #475569 !important; }

/* Override Bootstrap danger color to match app red #99090c everywhere */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-danger:                 #99090c;
    --bs-danger-rgb:             153, 9, 12;
    --bs-danger-bg-subtle:       #f5d0d1;
    --bs-danger-border-subtle:   #e8a0a2;
    --bs-danger-text-emphasis:   #3d0305;
    /* btn-danger specific variables */
    --bs-btn-bg:                 #99090c;
    --bs-btn-border-color:       #99090c;
    --bs-btn-hover-bg:           #7a0709;
    --bs-btn-hover-border-color: #7a0709;
    --bs-btn-active-bg:          #6b0608;
    --bs-btn-active-border-color:#6b0608;
}
.btn-danger {
    --bs-btn-bg:                 #99090c;
    --bs-btn-border-color:       #99090c;
    --bs-btn-hover-bg:           #7a0709;
    --bs-btn-hover-border-color: #7a0709;
    --bs-btn-active-bg:          #6b0608;
    --bs-btn-active-border-color:#6b0608;
    --bs-btn-color:              #fff;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-color:       #fff;
}

html, body {
    height: 100%; overflow: hidden;
    overscroll-behavior: none;
}
body { touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; }

/* Full-height app shell */
#app-shell {
    display: flex; flex-direction: column;
    height: 100dvh; /* respects mobile address/status bars */
    overflow: visible; /* allows logo to bleed outside navbar during long-press animation */
}
/* Navbar itself must not clip the growing logo */
.navbar { overflow: visible !important; }
#views-clip {
    flex: 1 1 0; min-height: 0;
    overflow: hidden; position: relative;
}
.view { display: none; height: 100%; }
/* Offline view: extra bottom padding so content clears Android nav bar */
#view-offline.active { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
.view.active {
    display: flex; flex-direction: column;
    height: 100%; overflow-y: auto; overflow-x: hidden;
}

/* Styled scrollbars matching theme */
.view.active::-webkit-scrollbar { width: 4px; }
.view.active::-webkit-scrollbar-track { background: transparent; }
.view.active::-webkit-scrollbar-thumb {
    background: var(--bs-border-color);
    border-radius: 2px;
}
.view.active { scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; }

.view.slide-from-right { animation: slideFromRight 0.22s cubic-bezier(0.25,0.46,0.45,0.94) both; }
.view.slide-from-left  { animation: slideFromLeft  0.22s cubic-bezier(0.25,0.46,0.45,0.94) both; }
@keyframes slideFromRight {
    from { opacity: 0.4; transform: translateX(40px); }
    to   { opacity: 1;   transform: translateX(0); }
}
@keyframes slideFromLeft {
    from { opacity: 0.4; transform: translateX(-40px); }
    to   { opacity: 1;   transform: translateX(0); }
}

/* Logo long-press: suppress native callout + context menu on all platforms */
#nav-logo {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;      /* prevents Android from intercepting the touch */
    cursor: pointer;
}
#nav-logo.logo-reversing {
    transition: transform 0.35s ease-out;
}

/* Pull-to-refresh handled by custom JS gesture on #view-home */

/* ── NAVBAR + MODAL LAYERING ─────────────────────────────────── */
:root { --navbar-h: 50px; }

nav.navbar {
    position: relative;
    /* No z-index elevation — backdrop (1040) naturally darkens navbar.
       Modal (1055) and backdrop render above the navbar as normal. */
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* Modal: full-screen as normal (above everything including navbar).
   padding-top pushes the dialog box below the darkened navbar area.
   padding-bottom leaves visible backdrop at the bottom for tap-to-dismiss. */
.modal {
    padding-top: calc(var(--navbar-h) + 8px) !important;
    padding-bottom: 40px !important;
}

/* Navbar interactive element sizing — consistent height across all view states */
#nav-back,
#nav-store-btn,
#navbar-right .btn {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
/* Settings button: perfectly square, icon centered */
#navbar-right .btn {
    width: 36px;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
}
/* Store select: fixed height, auto width */
#nav-store-btn {
    width: auto;
    padding: 0 0.55rem;
    font-size: 0.9rem;
}
/* Back button: icon only, no border padding */
#nav-back {
    /* Large tap target for store staff — wide invisible button, big icon */
    width: 52px;
    font-size: 2rem;
    line-height: 1;
    padding: 0;
    opacity: 0.92;
}

/* Login keypad */
.keypad-btn {
    height: 4.5rem; font-size: 1.4rem;
    touch-action: manipulation; user-select: none; -webkit-user-select: none;
    transition: none !important;
    /* Own styling — no Bootstrap :hover/:active/:focus interference */
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.keypad-btn:focus { outline: none; box-shadow: none; }
.keypad-btn.kb-del {
    border-color: var(--bs-danger-border-subtle);
    color: var(--bs-danger);
}
.keypad-btn.kb-ok {
    background: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}
.keypad-btn.kb-ok:disabled { opacity: 0.45; }
.keypad-btn.kb-pressed { background: var(--bs-secondary-bg); }
.keypad-btn.kb-ok.kb-pressed { background: var(--bs-success-text-emphasis, #0a3622); }
.keypad-btn.kb-del.kb-pressed { background: var(--bs-danger-bg-subtle); }
.pin-dots { display: flex; justify-content: center; align-items: center; gap: 0.75rem; user-select: none; height: 2.5rem; }
.pin-dot { font-size: 0.7rem; color: var(--bs-secondary-color); transition: color 0.1s, font-size 0.1s; }
.pin-dot-filled { font-size: 1rem; color: var(--bs-body-color); }

/* Settings modal footer diagnostics */
.diag-footer { font-size: 0.72rem; }
.diag-item { color: var(--bs-secondary-color); white-space: nowrap; }
.diag-item .bi, .diag-item .diag-icon { font-size: 0.85rem; vertical-align: -0.1em; }
/* all diag icons inherit .diag-item secondary color — no per-item overrides */

/* Home menu cards */
.menu-card { cursor: pointer; touch-action: manipulation; user-select: none; transition: transform 0.08s ease; }
.menu-card:active { transform: scale(0.96); }

/* Navbar logo */
.navbar-logo { height: 38px; cursor: pointer; display: block; }

/* Settings section header */
.settings-label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: 0.5rem;
}

/* Camera modal — square container */
#cam-modal-dialog { width: min(92vw, 400px); max-width: min(92vw, 400px); margin: auto; }
#camera-container {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #000;
    overflow: hidden;
}
#camera-video { width: 100%; height: 100%; object-fit: cover; display: none; }
.scan-viewfinder {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 84%; height: 32%;
    border: 2px solid rgba(255,255,255,0.75);
    border-radius: 10px;
    box-shadow: 0 0 0 2000px rgba(0,0,0,0.42);
    pointer-events: none;
    transition: border-color 0.05s, box-shadow 0.05s;
}
/* Scan success: full-screen green flash overlay */
#cam-flash-overlay {
    display: none;
    position: absolute; inset: 0; z-index: 14;
    background: rgba(0, 230, 118, 0.55);
    pointer-events: none;
    border-radius: inherit;
}
#cam-flash-overlay.vf-flash {
    display: block;
    animation: camFlash 0.6s ease-out forwards;
}
@keyframes camFlash {
    0%   { opacity: 1; }
    60%  { opacity: 0.6; }
    100% { opacity: 0; }
}
/* Viewfinder border also flashes green simultaneously */
.scan-viewfinder.vf-flash {
    border-color: #00e676;
    border-width: 3px;
    box-shadow: 0 0 0 2000px rgba(0,0,0,0.42), 0 0 24px 6px rgba(0,230,118,0.8);
    transition: border-color 0.05s, box-shadow 0.05s, border-width 0.05s;
}

/* Pause overlay — covers frozen video frame */
#cam-pause-overlay {
    display: none;
    position: absolute; inset: 0; z-index: 15;
    background: rgba(0,0,0,0.72);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 0;
}
#scan-overlay { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#camera-bottom-bar {
    display: none;
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
    padding: 6px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,0.55));
    justify-content: space-between;
    align-items: center;
}
#camera-loading-overlay {
    position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    background: #000;
}
#camera-error-overlay {
    position: absolute; inset: 0; z-index: 5;
    display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.85);
}

/* Bind/unbind: compact floating label inputs
   Override Bootstrap's form-floating label and input padding directly.
   !important needed because Bootstrap's minified CSS uses high-specificity selectors. */
.form-floating > .scan-input {
    padding-top: 1.2rem !important;
    padding-bottom: 0.1rem !important;
    height: auto !important;
    min-height: 0 !important;
}
.form-floating:has(> .scan-input) > label {
    padding-top: 0.4rem !important;
    padding-bottom: 0 !important;
    top: 0.32rem !important;
}

/* PTR spin animation for loading state */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* PTR icon: transform-origin ensures rotation is exactly on center */
#ptr-icon { display: flex; align-items: center; justify-content: center; }
#ptr-icon .bi { display: block; line-height: 1; transform-origin: center center; }

/* ── LOADING OVERLAY ─────────────────────────────────────────── */
#loading-overlay {
    transition: opacity 0.25s ease;
    opacity: 1;
}
#loading-overlay.overlay-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Logo */
#overlay-logo {
    transform-origin: center center;
    cursor: pointer;
    will-change: transform, opacity;
}
#overlay-logo.logo-spinning {
    animation: overlayLogoSpin 0.8s linear infinite;
}
@keyframes overlayLogoSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* Exit: zoom + fade. Uses animation-fill-mode:forwards so it holds at opacity:0.
   Importantly — no transform reset before this starts (handled in JS via
   getComputedStyle to capture current rotation angle). */
#overlay-logo.logo-exit {
    animation: logoZoomFade 0.35s cubic-bezier(0.4,0,1,1) forwards;
}
@keyframes logoZoomFade {
    0%   { opacity: 1; transform: scale(1) rotate(var(--exit-angle, 0deg)); }
    100% { opacity: 0; transform: scale(4.5) rotate(calc(var(--exit-angle, 0deg) - 90deg)); }
}

/* Overlay fade-in (for reload) */
#loading-overlay.overlay-fadein {
    animation: overlayFadeIn 0.25s ease forwards;
}
@keyframes overlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Retry text */
#overlay-retry {
    transition: opacity 0.5s ease;
}
#overlay-retry.retry-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}