/* Molle Plus QR Scanner — mobile-first styles (uses central theme variables) */
.molle-scanner {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.molle-scanner__header { text-align: center; margin-bottom: 1rem; position: relative; }
.molle-scanner__close {
    position: absolute; top: 0; right: 0;
    background: none; border: none; font-size: 1rem;
    color: var(--molle-text-muted, #666); cursor: pointer; padding: .25rem .5rem;
}
.molle-scanner__close:hover { color: var(--molle-text, #333); }
.molle-scanner-modal-content { max-width: 500px; }
.molle-card-scanner { text-align: center; }
.molle-scanner-desc { color: var(--molle-text-muted, #666); margin-bottom: 1rem; }
.molle-scanner__title { font-size: 1.5rem; font-weight: 700; margin: 0 0 .25rem; color: var(--molle-text, #1a1a1a); }
.molle-scanner__subtitle { font-size: .95rem; color: var(--molle-text-muted, #666); margin: 0; }
.molle-scanner__viewport-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 400px;
    margin: 0 auto;
    background: #000;
    border-radius: var(--molle-radius, 12px);
    overflow: hidden;
    border: 4px solid transparent;
    transition: border-color 0.2s ease;
}
.molle-scanner__viewport-wrapper--success {
    border-color: var(--molle-success, #16a34a);
}
.molle-scanner__viewport-wrapper--error {
    border-color: var(--molle-danger, #dc2626);
}
@media (max-width: 600px) {
    .molle-scanner__viewport-wrapper {
        aspect-ratio: auto;
        height: 240px;
        max-width: 100%;
    }
}
.molle-scanner__video { width: 100%; height: 100%; object-fit: cover; }
.molle-scanner__overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.molle-scanner__frame {
    width: 70%; height: 70%;
    border: 3px solid rgba(255,255,255,.8);
    border-radius: 8px;
    box-shadow: 0 0 0 1000px rgba(0,0,0,.3);
}
.molle-scanner__permission { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--molle-surface-alt, #f5f5f5); text-align: center; padding: 2rem; }
.molle-scanner__permission p { color: var(--molle-text, #333); margin-bottom: 1rem; }
.molle-scanner__result { text-align: center; padding: 1.5rem; }
.molle-scanner__result-icon { font-size: 4rem; font-weight: 700; line-height: 1; margin-bottom: .5rem; }
.molle-scanner__result-icon--valid { color: var(--molle-success, #16a34a); }
.molle-scanner__result-icon--invalid { color: var(--molle-danger, #dc2626); }
.molle-scanner__result-status { font-size: 1.4rem; font-weight: 700; text-transform: uppercase; margin-bottom: .5rem; }
.molle-scanner__result-status--valid { color: var(--molle-success, #16a34a); }
.molle-scanner__result-status--invalid { color: var(--molle-danger, #dc2626); }
.molle-scanner__result-name { font-size: 1.1rem; font-weight: 600; color: var(--molle-text, #1a1a1a); margin-bottom: .25rem; }
.molle-scanner__result-ref { font-size: .9rem; color: var(--molle-text-muted, #666); margin-bottom: .5rem; }
.molle-scanner__result-reason { font-size: .95rem; color: var(--molle-text-muted, #666); margin-bottom: 1rem; }
.molle-scanner__error { text-align: center; padding: 1.5rem; }
.molle-scanner__error p { color: var(--molle-danger, #dc2626); margin-bottom: 1rem; }
.molle-scanner__loading { text-align: center; padding: 2rem; color: var(--molle-text-muted, #666); }
.molle-scanner__spinner {
    width: 40px; height: 40px; margin: 0 auto 1rem;
    border: 4px solid var(--molle-border, #e5e5e5); border-top-color: var(--molle-primary, #2563eb);
    border-radius: 50%; animation: molle-scanner-spin 0.8s linear infinite;
}
@keyframes molle-scanner-spin { to { transform: rotate(360deg); } }
.molle-scanner__btn {
    display: inline-block; padding: .75rem 1.5rem;
    border: none; border-radius: var(--molle-radius, 8px); font-size: 1rem; font-weight: 600;
    cursor: pointer; text-align: center; transition: background 0.15s;
}
.molle-scanner__btn--primary { background: var(--molle-primary, #2563eb); color: #ffffff; }
.molle-scanner__btn--primary:hover,
.molle-scanner__btn--primary:focus,
.molle-scanner__btn--primary:active,
.molle-scanner__btn--primary:disabled { color: #ffffff; }
.molle-scanner__btn--primary:hover { background: var(--molle-primary, #1d4ed8); opacity: 0.9; }
.molle-scanner__btn--large { font-size: 1.1rem; padding: 1rem 2rem; width: 100%; max-width: 300px; }


/* 1.7.63 — The in-dashboard scanner is a focused dialog, not an editor.
   Keep the full-screen overlay (so app navigation stays covered), but center
   the scanner card in the usable viewport and respect device safe areas. */
.molle-business-app #molle-scanner-modal {
    align-items: center;
    padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
    box-sizing: border-box;
}
.molle-business-app #molle-scanner-modal .molle-scanner-modal-content {
    width: 100%;
    max-width: 500px;
    min-height: auto;
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: 0;
    padding: 20px;
    padding-top: 64px;
    border-radius: var(--molle-radius, 12px);
    overflow-y: auto;
}
.molle-business-app #molle-scanner-modal .molle-modal-close {
    top: 12px;
    right: 12px;
}

/* Dashboard scanner card actions */
.molle-scanner-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* Scanner link modal */
.molle-scanner-link-modal-content { max-width: 520px; }
.molle-scanner-link-desc { color: var(--molle-text-muted, #666); margin-bottom: 1.5rem; font-size: .95rem; }
.molle-scanner-link-status { min-height: 60px; margin-bottom: 1.5rem; }
.molle-scanner-link-loading { text-align: center; padding: 1rem; }
.molle-scanner-link-error { color: var(--molle-danger, #dc2626); padding: .75rem; background: var(--molle-surface-alt, #fef2f2); border-radius: var(--molle-radius, 8px); }
.molle-scanner-link-info { padding: .75rem; background: var(--molle-surface-alt, #f5f5f5); border-radius: var(--molle-radius, 8px); }
.molle-scanner-link-current { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.molle-scanner-link-label { font-weight: 600; color: var(--molle-text, #1a1a1a); }
.molle-scanner-link-current code { font-size: .85rem; word-break: break-all; color: var(--molle-text-muted, #666); }
.molle-scanner-link-prefix { font-size: .8rem; color: var(--molle-text-muted, #999); }
.molle-scanner-link-none { text-align: center; padding: 1rem; color: var(--molle-text-muted, #666); }
.molle-scanner-link-section { margin-bottom: 1.25rem; }
.molle-scanner-link-section .molle-feed-label { display: block; margin-bottom: .5rem; }
.molle-scanner-link-section .molle-feed-input { max-width: 320px; margin-right: .5rem; }
.molle-scanner-link-admin-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.molle-scanner-link-msg { padding: .75rem; border-radius: var(--molle-radius, 8px); font-size: .9rem; }
.molle-feed-test-ok { background: #f0fdf4; color: #16a34a; }
.molle-feed-test-error { background: #fef2f2; color: #dc2626; }

/* Delegated scanner page */
.molle-delegated-scanner-wrap { max-width: 600px; margin: 0 auto; padding: 1.5rem 1rem; }
.molle-delegated-scanner-header { text-align: center; margin-bottom: 1.5rem; }
.molle-delegated-scanner-brand { font-size: 2rem; font-weight: 800; margin: 0; color: var(--molle-primary, #2563eb); }
.molle-delegated-scanner-business { font-size: 1.2rem; font-weight: 600; color: var(--molle-text, #1a1a1a); margin: .25rem 0 0; }
.molle-delegated-scanner-footer { text-align: center; color: var(--molle-text-muted, #999); font-size: .85rem; margin-top: 2rem; }
.molle-scanner--delegated { padding: 0; }
.molle-delegated-scanner-invalid { max-width: 500px; margin: 4rem auto; text-align: center; padding: 2rem; }
.molle-delegated-scanner-invalid-title { font-size: 2rem; font-weight: 800; color: var(--molle-primary, #2563eb); margin: 0 0 1.5rem; }
.molle-delegated-scanner-invalid-icon { font-size: 4rem; margin-bottom: 1rem; }
.molle-delegated-scanner-invalid-msg { font-size: 1.4rem; font-weight: 700; color: var(--molle-text, #1a1a1a); margin: 0 0 .5rem; }
.molle-delegated-scanner-invalid-sub { color: var(--molle-text-muted, #666); font-size: 1rem; }


/* Benefit selector (shown above camera when multiple benefits) */
.molle-scanner__benefit { text-align: center; margin-bottom: 1rem; }
.molle-scanner__benefit-label { font-size: .9rem; font-weight: 600; color: var(--molle-text, #1a1a1a); margin-bottom: .5rem; }
.molle-scanner__benefit-select { width: 100%; max-width: 320px; padding: .5rem .75rem; border: 1px solid var(--molle-border, #d9d4c8); border-radius: var(--molle-radius, 8px); font-size: 1rem; margin-bottom: .25rem; }
.molle-scanner__benefit-type { font-size: .85rem; color: var(--molle-text-muted, #666); }
.molle-scanner__benefit-result { padding: .75rem; border-radius: var(--molle-radius, 8px); font-size: .95rem; margin-top: .5rem; }
.molle-scanner__benefit-result--success { background: #f0fdf4; color: #16a34a; }
.molle-scanner__benefit-result--error { background: #fef2f2; color: #dc2626; }
.molle-scanner__benefit-result--warning { background: #fffbeb; color: #d97706; }