/* The quick-photo button (bottom right on every page) and the app's own camera (quick-camera.js). Shared by the app and
   /capture.html, which works with no signal, so nothing here relies on MudBlazor. */

.qc-fab {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 1200;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 0;
    background: var(--mud-palette-primary, #2F5D62);
    color: var(--mud-palette-primary-text, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.qc-fab:active { transform: scale(.94); }
.qc-fab:focus-visible { outline: 3px solid #7FB3B8; outline-offset: 3px; }
.qc-fab svg { width: 28px; height: 28px; }

/* How many photos are still on the phone, set by quick-camera.js on <html>. */
.qc-fab::after {
    content: var(--photo-queue-label, "");
    display: none;
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 11px;
    background: #A65F00;
    color: #fff;
    font: 700 12px/22px Inter, Roboto, system-ui, sans-serif;
    text-align: center;
}
html[data-photo-queue] .qc-fab::after { display: block; }
html.photo-queue-failed .qc-fab::after { background: #C62828; }
html.davan-camera-open .qc-fab { display: none; }

@media (prefers-color-scheme: dark) {
    html:not(:has(.mud-layout)) .qc-fab { background: #7FB3B8; color: #0E1A1C; }
}

/* Keep the page from scrolling behind the camera, and keep Blazor's "rejoining" box out of the way while it's open:
   the camera doesn't need the server. */
html.davan-camera-open, html.davan-camera-open body { overflow: hidden; }
html.davan-camera-open #components-reconnect-modal { display: none !important; }

/* ---- The camera ---- */

.qc {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: #000;
    color: #fff;
    display: none;
    font-family: Inter, Roboto, system-ui, sans-serif;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}
.qc.qc-open { display: block; }
.qc:focus { outline: none; }

.qc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

.qc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.qc-flash.qc-flashing { animation: qc-flash .18s ease-out; }
@keyframes qc-flash { from { opacity: .7; } to { opacity: 0; } }

.qc-top, .qc-bottom {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
}
.qc-top { top: 0; padding-top: max(12px, env(safe-area-inset-top)); background: linear-gradient(rgba(0, 0, 0, .55), transparent); }
.qc-bottom { bottom: 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }

.qc-status { flex: 1; text-align: center; font-size: 14px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }

.qc-btn {
    min-width: 48px;
    height: 48px;
    padding: 0 14px;
    border-radius: 24px;
    border: 0;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font: 600 15px Inter, Roboto, system-ui, sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
}
.qc-btn[hidden] { display: none; }
.qc-torch.qc-on { background: #FFD54F; color: #000; }

.qc-shutter {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: transparent;
    padding: 5px;
    cursor: pointer;
    flex: none;
}
.qc-shutter span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .08s; }
.qc-shutter:active span { transform: scale(.88); }
.qc-shutter:disabled { opacity: .4; }

.qc-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .1) center / cover no-repeat;
    padding: 0;
    cursor: pointer;
    flex: none;
}
.qc-thumb:disabled { border-color: rgba(255, 255, 255, .3); cursor: default; }
.qc-count {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 11px;
    background: #2F5D62;
    font: 700 12px/22px Inter, Roboto, system-ui, sans-serif;
}
.qc-count:empty { display: none; }

.qc-message {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 38%;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .72);
    font-size: 15px;
    line-height: 1.45;
    text-align: center;
}
.qc-message[hidden] { display: none; }

/* Room at the bottom of every page so the button never hides the last row. */
html:has(.qc-fab) .mud-main-content { padding-bottom: 96px !important; }