/**
 * b2-browse.css — stylesheet for b2-browser.
 *
 * Served from the same origin under a CSP of style-src 'self': there are no
 * inline <style> blocks or style="" attributes anywhere in the app.
 *
 * THEMING
 * Colours come from CSS custom properties, so the app can wear the look of
 * the site it is embedded in. Load your site's stylesheet first (config
 * theme.stylesheets); if it defines any of these variables they are used,
 * otherwise the built-in defaults apply:
 *
 *   --bg  --text  --text-muted  --border  --accent  --accent-hover
 *   --mp-hover (row hover)  --mp-surface (cards)
 *
 * Fonts and width come from these optional variables (set them in a small
 * theme stylesheet of your own; see assets/theme.example.css):
 *
 *   --b2-font-body  --b2-font-heading  --b2-font-mono  --b2-max-width
 *   --b2-font-size-adjust
 *
 * Light/dark: <html data-theme="light|dark">, set by theme-init.js before
 * the page paints and switched by the toggle in the navigation bar.
 */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
    --_bg:           var(--bg, #ffffff);
    --_surface:      var(--mp-surface, var(--bg, #ffffff));
    --_text:         var(--text, #1f2933);
    --_muted:        var(--text-muted, #66707a);
    --_border:       var(--border, rgba(0, 0, 0, 0.12));
    --_hover:        var(--mp-hover, rgba(0, 0, 0, 0.04));
    --_accent:       var(--accent, #2f80ed);
    --_accent-hover: var(--accent-hover, #1c64c8);
    --_on-accent:    var(--b2-on-accent, #ffffff);
    --_danger:       #c0392b;
    --_danger-bg:    rgba(220, 38, 38, 0.08);
    --_danger-line:  rgba(220, 38, 38, 0.35);
    --_warn:         #8a6100;
    --_warn-bg:      rgba(217, 119, 6, 0.10);
    --_warn-line:    rgba(217, 119, 6, 0.40);
    --_ok:           #1e8e4e;
    --_font:         var(--b2-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell, sans-serif);
    --_font-heading: var(--b2-font-heading, var(--_font));
    --_font-mono:    var(--b2-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    --_width:        var(--b2-max-width, 1100px);
    --_radius:       6px;
}

[data-theme="dark"] {
    --_bg:           var(--bg, #121212);
    --_surface:      var(--mp-surface, var(--bg, #1a1a1a));
    --_text:         var(--text, #e2e2de);
    --_muted:        var(--text-muted, #8f959b);
    --_border:       var(--border, rgba(255, 255, 255, 0.12));
    --_hover:        var(--mp-hover, rgba(255, 255, 255, 0.04));
    --_accent:       var(--accent, #5aa2ff);
    --_accent-hover: var(--accent-hover, #8bbcff);
    --_on-accent:    var(--b2-on-accent, #0d0d0d);
    --_danger:       #f19a90;
    --_danger-bg:    rgba(220, 38, 38, 0.14);
    --_danger-line:  rgba(248, 113, 113, 0.40);
    --_warn:         #f5cf6a;
    --_warn-bg:      rgba(217, 119, 6, 0.14);
    --_warn-line:    rgba(245, 158, 11, 0.40);
    --_ok:           #7bd99a;
    color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────── */
.b2 *,
.b2 *::before,
.b2 *::after {
    box-sizing: border-box;
}

body.b2 {
    margin: 0;
    background: var(--_bg);
    color: var(--_text);
    font-family: var(--_font);
    font-size-adjust: var(--b2-font-size-adjust, none);
    transition: background-color 0.2s, color 0.2s;
}

/* Line height is set on the app's own content only, so a host site's header
 * and menu keep exactly the metrics they have on the site's other pages. */
.b2-shell,
.b2-main {
    line-height: 1.5;
}

/* Theme button label follows data-theme, set before first paint. */
[data-theme="dark"] .b2-when-light,
:root:not([data-theme="dark"]) .b2-when-dark {
    display: none;
}

.b2 [hidden] {
    display: none !important;
}

.b2 a {
    color: var(--_accent);
    text-decoration: none;
}

.b2 a:hover {
    color: var(--_accent-hover);
    text-decoration: underline;
}

.b2 code {
    font-family: var(--_font-mono);
    font-size: 0.9em;
    background: var(--_hover);
    border: 1px solid var(--_border);
    border-radius: 3px;
    padding: 1px 5px;
}

.b2 strong {
    font-weight: 700;
}

/* Form controls are reset explicitly: site stylesheets often style bare
 * input/label/button elements, and the app's own look must win. */
.b2-main input,
.b2-main select,
.b2-main button,
.b2-main textarea {
    font: inherit;
    color: var(--_text);
    background: var(--_bg);
    border: 1px solid var(--_border);
    border-radius: var(--_radius);
    margin: 0;
    padding: 8px 10px;
    width: auto;
    max-width: none;
    letter-spacing: normal;
}

.b2-main input:focus,
.b2-main select:focus,
.b2-main button:focus-visible,
.b2 a:focus-visible {
    outline: 2px solid var(--_accent);
    outline-offset: 1px;
}

.b2-main label {
    display: inline-block;
    margin: 0;
    letter-spacing: normal;
    color: var(--_muted);
}

/* ── Shell: branding, navigation, main ──────────────────── */
.b2-shell {
    max-width: var(--_width);
    margin: 0 auto;
    padding: 30px 15px 60px;
}

.b2-brand {
    padding: 0 0 10px;
}

.b2 .b2-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--_text);
    text-decoration: none;
}

.b2 .b2-brand-link:hover {
    color: var(--_text);
    text-decoration: none;
}

.b2-brand-logo {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: block;
}

.b2-brand-heading {
    font-family: var(--_font-heading);
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.2;
}

.b2-nav-plain {
    justify-content: flex-end;
    padding: 0 0 10px;
}

.b2-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 20px;
    padding: 20px 0;
}

.b2-nav a {
    font-size: 1.05rem;
}

.b2 .b2-theme-toggle {
    background: none;
    border: 1px solid var(--_border);
    border-radius: var(--_radius);
    color: var(--_muted);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.b2 .b2-theme-toggle:hover {
    color: var(--_text);
    border-color: var(--_accent);
}

.b2-main {
    padding-top: 10px;
}

/* Site markup mode: the host's header and menu are floated blocks in its
 * stylesheet; start the app's content below them. */
.b2-site-markup .b2-main {
    clear: both;
    padding: 20px 0 60px;
}

.b2-page-title {
    font-family: var(--_font);
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0 0 16px;
    text-align: center;
    overflow-wrap: anywhere;
}

/* ── Cards (sign-in, MFA) ───────────────────────────────── */
.b2-card {
    background: var(--_surface);
    border: 1px solid var(--_border);
    border-radius: 10px;
    padding: 30px;
    margin: 10px auto 0;
}

.b2-auth {
    max-width: 420px;
}

.b2-mfa-setup {
    max-width: 640px;
}

.b2-login-logo {
    display: block;
    max-width: 100%;
    max-height: var(--b2-login-logo-height, 56px);
    width: auto;
    height: auto;
    margin: 0 auto 16px;
}

.b2-lead {
    color: var(--_muted);
    text-align: center;
    margin: 0 0 20px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
}

.form-group input {
    display: block;
    width: 100%;
}

.b2 .otp-input {
    font-family: var(--_font-mono);
    font-size: 1.4rem;
    letter-spacing: 0.4em;
    text-align: center;
}

.help {
    color: var(--_muted);
    font-size: 0.85rem;
    margin-top: 6px;
}

/* ── Buttons ────────────────────────────────────────────── */
.b2 .btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--_radius);
    border: 1px solid var(--_accent);
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.b2 .btn-primary {
    background: var(--_accent);
    color: var(--_on-accent);
}

.b2 .btn-primary:hover {
    background: var(--_accent-hover);
    border-color: var(--_accent-hover);
    color: var(--_on-accent);
    text-decoration: none;
}

.b2 .btn-outline {
    background: transparent;
    color: var(--_accent);
}

.b2 .btn-outline:hover {
    background: var(--_hover);
    color: var(--_accent-hover);
    border-color: var(--_accent-hover);
    text-decoration: none;
}

.b2 .btn-block {
    display: block;
    width: 100%;
}

/* ── Alerts ─────────────────────────────────────────────── */
.b2 .error,
.b2 .notice {
    border-radius: var(--_radius);
    padding: 12px 14px;
    margin: 0 0 18px;
    border: 1px solid;
}

.b2 .error {
    color: var(--_danger);
    background: var(--_danger-bg);
    border-color: var(--_danger-line);
}

.b2 .notice {
    color: var(--_warn);
    background: var(--_warn-bg);
    border-color: var(--_warn-line);
}

/* ── Message pages (signed out, locked, errors) ─────────── */
.b2-message {
    text-align: center;
    padding: 30px 0;
}

.success-heading {
    color: var(--_ok);
}

.danger-heading {
    color: var(--_danger);
}

.b2-message h1 {
    font-size: 1.6rem;
    margin: 0 0 16px;
}

.message-text {
    font-size: 1.1rem;
    margin: 0 0 8px;
}

.message-subtext {
    color: var(--_muted);
    margin: 0 0 8px;
}

.message-action {
    margin-top: 24px;
    text-align: center;
}

.error-details {
    display: inline-block;
    text-align: left;
    margin: 16px auto 0;
    padding-left: 20px;
    color: var(--_muted);
    font-size: 0.95rem;
}

/* ── Browse: toolbar ────────────────────────────────────── */
.b2-toolbar {
    margin-bottom: 18px;
}

.session-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 16px;
    padding: 8px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--_border);
    color: var(--_muted);
    font-size: 0.85rem;
}

.logout-form {
    margin: 0;
}

.b2 .link-logout {
    background: none;
    border: 0;
    padding: 0;
    color: var(--_danger);
    cursor: pointer;
}

.b2 .link-logout:hover {
    text-decoration: underline;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    color: var(--_muted);
    overflow-wrap: anywhere;
}

.date-jump {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.debug-info {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px dashed var(--_border);
    border-radius: var(--_radius);
    color: var(--_muted);
    font-family: var(--_font-mono);
    font-size: 0.8rem;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--_border);
    border-bottom: 1px solid var(--_border);
    margin-bottom: 4px;
}

.b2 .search-input {
    flex: 1;
    min-width: 180px;
}

/* ── Browse: file list ──────────────────────────────────── */
.file-list {
    border-bottom: 1px solid var(--_border);
}

.file-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 6px;
    border-top: 1px solid var(--_border);
    transition: background-color 0.15s;
}

.file-item:first-child {
    border-top: 0;
}

.file-item:hover {
    background: var(--_hover);
}

.file-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* Thumbnails: the whole image, never cropped. Landscape and portrait
 * frames both fit inside a 240 px box at their own aspect ratio. */
.file-icon:has(.thumb) {
    width: 240px;
    height: auto;
}

.file-icon:has(.thumb) > a {
    display: block;
    width: 100%;
}

.file-icon .thumb {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 240px;
    margin: 0 auto;
    border-radius: 4px;
    border: 1px solid var(--_border);
    background: var(--_hover);
}

.file-info {
    flex: 1;
    min-width: 0;
}

.file-name {
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.file-name a {
    font-weight: bold;
}

.file-meta {
    color: var(--_muted);
    font-size: 0.85rem;
    margin-top: 2px;
}

.file-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.camera-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 10px;
    border: 1px solid currentColor;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

.video-badge {
    color: var(--_accent);
}

.image-badge {
    color: var(--_muted);
}

.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: var(--_muted);
}

.empty-state-icon {
    font-size: 44px;
    margin-bottom: 8px;
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

.page-info {
    color: var(--_muted);
    font-size: 0.9rem;
    text-align: center;
}

.spacer {
    min-width: 80px;
}

/* ── Player ─────────────────────────────────────────────── */
.video-container {
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-container video {
    display: block;
    width: 100%;
    max-height: calc(100vh - 280px);
    min-height: 200px;
    background: #000;
}

.b2-player .notice {
    margin-top: 14px;
}

.b2-player .info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    padding: 14px 0;
    color: var(--_text);
    font-size: 0.95rem;
}

.info-label {
    color: var(--_muted);
    margin-right: 6px;
}

.b2-player .controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.keyboard-help {
    text-align: center;
    color: var(--_muted);
    font-size: 0.8rem;
    margin: 16px 0 0;
}

/* ── MFA setup ──────────────────────────────────────────── */
.b2-steps {
    padding-left: 20px;
    margin: 0;
}

.b2-steps li {
    margin-bottom: 16px;
}

#qrcode-container {
    display: block;
    width: max-content;
    margin: 14px auto;
    padding: 12px;
    background: #fff; /* QR codes need a light quiet zone in either theme */
    border-radius: 6px;
}

#qrcode svg {
    display: block;
    width: 220px;
    height: 220px;
}

.secret {
    margin-top: 10px;
    padding: 12px;
    text-align: center;
    font-family: var(--_font-mono);
    font-size: 1.15rem;
    letter-spacing: 0.15em;
    overflow-wrap: anywhere;
    border: 1px solid var(--_border);
    border-radius: var(--_radius);
    background: var(--_hover);
}

/* ── Small screens ──────────────────────────────────────── */
@media (max-width: 768px) {
    .b2-shell {
        padding: 20px 10px 40px;
    }

    .b2-brand {
        text-align: center;
    }

    .b2 .b2-brand-link {
        flex-direction: column;
        gap: 8px;
    }

    .b2-brand-heading {
        font-size: 1.5rem;
    }

    .b2-nav {
        gap: 10px 12px;
        padding: 12px 0;
    }

    .b2-card {
        padding: 20px;
    }

    .file-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .file-icon:has(.thumb) {
        width: 100%;
    }

    .file-icon .thumb {
        max-height: 60vh;
    }

    .file-actions {
        width: 100%;
    }

    .file-actions .btn {
        flex: 1;
    }

    .b2-player .controls .btn {
        flex: 1 1 100%;
    }

    .video-container video {
        max-height: 60vh;
    }
}