/* ================================================================
   Pervynka VCam — brand stylesheet
   Dark theme: deep purple / gold accent
   Light theme: lavender-white / dark gold accent
   ================================================================ */

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; line-height: 1.5; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }

/* ----- Dark theme (default) ----- */
[data-theme="dark"] {
    --bg:           #1f1428;
    --elevated:     #2d1a3e;
    --fg:           #d4cade;
    --fg-muted:     #8878a0;
    --accent:       #d4a020;
    --accent-hover: #e8b830;
    --accent-text:  #1a1a1a;
    --border:       #3d2555;
    --danger:       #e88888;
    --danger-bg:    rgba(232, 80, 80, 0.14);
    --success-bg:   rgba(80, 200, 100, 0.14);
    --success:      #6ad88a;
    --shadow:       0 8px 32px rgba(0, 0, 0, 0.55);
    --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.35);
    --radius:       10px;
    --radius-sm:    6px;
    --input-bg:     #17102088;
}

/* ----- Light theme ----- */
[data-theme="light"] {
    --bg:           #f0ecf4;
    --elevated:     #ffffff;
    --fg:           #3a3040;
    --fg-muted:     #887898;
    --accent:       #c89820;
    --accent-hover: #b08010;
    --accent-text:  #ffffff;
    --border:       #c8bdd6;
    --danger:       #a03030;
    --danger-bg:    rgba(160, 48, 48, 0.10);
    --success-bg:   rgba(40, 140, 60, 0.10);
    --success:      #287a3c;
    --shadow:       0 8px 32px rgba(60, 20, 80, 0.15);
    --shadow-sm:    0 2px 8px rgba(60, 20, 80, 0.10);
    --radius:       10px;
    --radius-sm:    6px;
    --input-bg:     #f8f5fc;
}

/* ----- Base body ----- */
body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ----- Topbar ----- */
.topbar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.65rem 1.5rem;
    background: var(--elevated);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar .brand {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.01em;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-icon {
    display: block;
}

.topbar nav {
    display: flex;
    gap: 1rem;
    flex: 1;
}

.topbar nav a {
    color: var(--fg-muted);
    font-size: 0.92rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}

.topbar nav a:hover {
    color: var(--fg);
    background: var(--border);
    text-decoration: none;
}

.topbar nav a.active {
    color: var(--accent);
    font-weight: 700;
    background: rgba(212, 160, 32, 0.14);
}

.save-dir-prompt {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 92vw;
    padding: 0.6rem 0.9rem;
    background: var(--bg-elev, #241733);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    font-size: 0.9rem;
    color: var(--fg);
}

.save-dir-prompt .btn-accent,
.save-dir-prompt .btn-secondary {
    width: auto;
    margin: 0;
    white-space: nowrap;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.user-name {
    font-size: 0.9rem;
    color: var(--fg-muted);
}

/* Show moon in dark theme, sun in light — toggled instantly by data-theme (no reload) */
[data-theme="dark"] .theme-ic-light { display: none; }
[data-theme="light"] .theme-ic-dark { display: none; }

.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg);
    cursor: pointer;
    padding: 0.2rem 0.45rem;
    font-size: 0.9rem;
    line-height: 1.4;
    transition: border-color 0.15s, background 0.15s;
}

.theme-toggle:hover {
    border-color: var(--accent);
    background: var(--elevated);
}

.logout {
    font-size: 0.88rem;
    color: var(--fg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.65rem;
    transition: color 0.15s, border-color 0.15s;
}

.logout:hover {
    color: var(--danger);
    border-color: var(--danger);
    text-decoration: none;
}

/* ----- SVG icon via CSS mask (theme-aware currentColor) ----- */
.icon {
    display: inline-block;
    width: 1.1em; height: 1.1em;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask: var(--icon) no-repeat center / contain;
    mask: var(--icon) no-repeat center / contain;
    flex-shrink: 0;
}

/* ----- Flash messages ----- */
.flash {
    padding: 0.7rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    margin: 0.75rem auto;
    max-width: 420px;
    text-align: center;
}

.flash-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.flash-success {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success);
}

/* ----- Login page layout ----- */
.login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.login-card {
    background: var(--elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.5rem 2.25rem 2rem;
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.login-logo {
    display: block;
    width: 88px;
    height: 88px;
    margin: 0 auto 0.75rem;
    filter: drop-shadow(0 4px 14px rgba(91, 12, 136, 0.55));
}

.login-card h1 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--fg);
    letter-spacing: 0.01em;
    margin-bottom: 0.2rem;
}

.login-sub {
    font-size: 0.88rem;
    color: var(--fg-muted);
    margin-bottom: 1.5rem;
}

.login-sso {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

.login-hint {
    font-size: 0.8rem;
    color: var(--fg-muted);
    margin-top: 0.75rem;
}

/* ----- Forms ----- */
.login-card form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--fg-muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

input[type="text"],
input[type="password"],
input[type="email"] {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg);
    padding: 0.55rem 0.8rem;
    font-size: 0.97rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212, 160, 32, 0.18);
}

/* ----- Buttons ----- */
.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.65rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    margin-top: 0.5rem;
    letter-spacing: 0.02em;
    transition: background 0.15s, transform 0.1s;
    text-decoration: none;
}

.btn-accent:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

.btn-accent:active {
    transform: scale(0.98);
}

/* ----- Error page ----- */
.error-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    text-align: center;
    padding: 2rem;
}

.error-wrap h1 {
    font-size: 5rem;
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
}

.error-wrap p {
    font-size: 1.1rem;
    color: var(--fg-muted);
    max-width: 380px;
}

.error-wrap .btn-accent {
    width: auto;
    padding: 0.6rem 1.75rem;
}

/* ----- Main content area ----- */
main {
    padding: 0;
}

/* ================================================================
   B-layout: Operator capture page
   ================================================================ */

/* Outer flex container: sidebar + main */
.capture-wrap {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 52px); /* subtract topbar height */
    overflow: hidden;
}

/* ----- Sidebar ----- */
.sidebar {
    width: 280px;
    min-width: 220px;
    max-width: 320px;
    flex-shrink: 0;
    background: var(--elevated);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    padding: 1rem 0.75rem;
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.sidebar-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
}

.sidebar-select {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg);
    padding: 0.45rem 0.65rem;
    font-size: 0.92rem;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.15s;
}

.sidebar-select:focus {
    outline: none;
    border-color: var(--accent);
}

/* Zones header with progress counter */
.zones-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.zones-progress {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(212, 160, 32, 0.12);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.45rem;
}

/* Zones list */
.zones-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.25rem;
}

.zones-hint {
    font-size: 0.85rem;
    color: var(--fg-muted);
    font-style: italic;
    padding: 0.5rem 0.25rem;
}

/* Zone item states */
.zone-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--fg-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    border: 1px solid transparent;
}

.zone-item .zone-num {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fg-muted);
    min-width: 1.4em;
    text-align: right;
}

.zone-item .zone-name {
    flex: 1;
}

.zone-item .zone-marker {
    font-size: 0.85rem;
    min-width: 1.2em;
    text-align: center;
}

/* Pending zone (default) */
.zone-item.pending {
    color: var(--fg-muted);
}

.zone-item.pending .zone-marker::before {
    content: "☐";
}

/* Current zone being captured — strong visual selection */
.zone-item.current {
    background: rgba(212, 160, 32, 0.22);
    border-color: var(--accent);
    box-shadow: inset 3px 0 0 0 var(--accent);
    color: var(--fg);
    font-weight: 700;
}

.zone-item.current .zone-marker::before {
    content: "▶";
    color: var(--accent);
}

/* Done / captured zone */
.zone-item.done {
    color: var(--success);
}

.zone-item.done .zone-marker::before {
    content: "✓";
    color: var(--success);
}

/* ----- Capture main area ----- */
.capture-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
}

/* Toolbar: camera select + patient */
.capture-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--elevated);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
}

/* Secondary actions: inline on wide screens, collapse into a burger menu when narrow.
   `.capture-toolbar .toolbar-burger` (0,2,0) beats `.btn-toolbar` (0,1,0) so the
   burger actually stays hidden on wide screens. */
.toolbar-menu {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Standard utility buttons (Останні / Довідка / Налаштування) are icon-only inline;
   the icon alone is recognized — saves toolbar width for the camera/patient area. */
.toolbar-menu .btn-text { display: none; }
.toolbar-menu .btn-toolbar { padding: 0.35rem 0.55rem; }
.capture-toolbar .toolbar-burger {
    display: none;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.35rem 0.6rem;
}
@media (max-width: 1024px) {
    .capture-toolbar .toolbar-burger { display: inline-flex; }
    .toolbar-menu {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        right: 0.5rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        min-width: 190px;
        padding: 0.5rem;
        background: var(--elevated);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow);
        z-index: 40;
    }
    .toolbar-menu.open { display: flex; }
    .toolbar-menu .btn-toolbar { width: 100%; justify-content: flex-start; padding: 0.4rem 0.7rem; }
    .toolbar-menu .btn-text { display: inline; }   /* restore labels inside the dropdown */
    /* Inline buttons become icon-only on narrow to save room for camera/patient */
    .btn-collapse-narrow .btn-text { display: none; }
    .btn-collapse-narrow { padding: 0.35rem 0.55rem; }
    .patient-group-label { display: none; }
    /* Slim toolbars to give the video stage more vertical room */
    .capture-toolbar { padding: 0.35rem 0.6rem; gap: 0.5rem; }
    .controls-bar { padding: 0.35rem 0.6rem; gap: 0.5rem; }
    .zoom-pan-bar { padding: 0.3rem 0.6rem; gap: 0.6rem; }
}

.toolbar-select {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg);
    padding: 0.35rem 0.6rem;
    font-size: 0.88rem;
    min-width: 180px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.toolbar-select:focus {
    outline: none;
    border-color: var(--accent);
}

.btn-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg);
    padding: 0.35rem 0.85rem;
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
}

.btn-toolbar:hover {
    border-color: var(--accent);
    background: rgba(212, 160, 32, 0.08);
}

.btn-toolbar:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: var(--border);
    background: var(--elevated);
}

.btn-toolbar:disabled:hover {
    border-color: var(--border);
    background: var(--elevated);
}

/* Patient group: visually binds "choose patient" + "their gallery" + the selected name */
.patient-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: rgba(212, 160, 32, 0.06);
}

.patient-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
}

.toolbar-spacer {
    flex: 1;
}

.patient-info {
    font-size: 0.88rem;
    color: var(--fg-muted);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.patient-info.has-patient {
    color: var(--fg);
    font-weight: 600;
}

/* ----- Video stage ----- */
.video-stage {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0f;
    overflow: hidden;
    min-height: 0;
}

/* Camera video element — hidden; canvas is what user sees */
.video-stage video#cam {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Canvas renders video + overlay — fills the stage */
.video-stage canvas#canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Busy overlay — shown during async operations */
.busy-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10;
}

.busy-overlay.active {
    display: flex;
}

.busy-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ----- Controls bar (bottom) ----- */
.controls-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1rem;
    background: var(--elevated);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.snap-btn {
    width: auto;
    margin-top: 0;
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
}

.status-bar {
    flex: 1;
    font-size: 0.88rem;
    color: var(--fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 0.5rem;
}

/* ================================================================
   Capture snap feedback
   ================================================================ */

/* .video-stage already has position: relative (defined above) */

.snap-flash {
    position: absolute;
    inset: 0;
    background: white;
    pointer-events: none;
    z-index: 20;
    animation: flash-fade 0.3s forwards;
}

@keyframes flash-fade {
    from { opacity: 0.85; }
    to   { opacity: 0; }
}

/* ================================================================
   Admin pages
   ================================================================ */

.admin-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.admin-wrap h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fg);
}

.admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.admin-head .btn-accent {
    width: auto;
    margin-top: 0;
    padding: 0.5rem 1.1rem;
    font-size: 0.92rem;
}

.head-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-nav a {
    color: var(--accent);
    font-size: 1rem;
}

.admin-card {
    margin-top: 1.5rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    max-width: 540px;
}

/* ----- Admin table ----- */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.admin-table th,
.admin-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.admin-table th {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
}

.admin-table tr.archived {
    opacity: 0.5;
}

.row-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.row-actions a {
    color: var(--accent);
    font-size: 0.88rem;
}

.muted {
    color: var(--fg-muted);
}

/* ----- Danger link button ----- */
.link-danger {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--danger);
    font-size: 0.88rem;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link-danger:hover {
    opacity: 0.8;
}

.link-action {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--accent);
    font-size: 0.88rem;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link-action:hover {
    opacity: 0.8;
}

/* ----- Secondary button ----- */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    background: var(--elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg);
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.btn-secondary:hover {
    border-color: var(--accent);
    background: rgba(212, 160, 32, 0.08);
}

/* ----- Admin form layout ----- */
.admin-wrap form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.admin-wrap form .btn-accent {
    width: auto;
    align-self: flex-start;
    margin-top: 0;
    padding: 0.55rem 1.5rem;
}

.admin-wrap fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-wrap legend {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
    padding: 0 0.35rem;
}

/* ----- DoctorEleks autocomplete ----- */
.de-block input[type="search"] {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg);
    padding: 0.5rem 0.75rem;
    font-size: 0.92rem;
    width: 100%;
    transition: border-color 0.15s;
}

.de-block input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(212, 160, 32, 0.18);
}

.de-current {
    font-size: 0.9rem;
    color: var(--fg-muted);
    padding: 0.25rem 0;
}

.de-results {
    background: var(--elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.de-results:empty {
    display: none;
}

.de-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--fg);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.12s;
}

.de-item:last-child {
    border-bottom: none;
}

.de-item:hover {
    background: rgba(212, 160, 32, 0.1);
}

.de-empty {
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
}

/* ----- Zone rows ----- */
.zone-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.zone-row input[type="text"] {
    flex: 2;
    min-width: 120px;
}

.zone-row input[type="number"] {
    width: 80px;
    flex-shrink: 0;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg);
    padding: 0.5rem 0.6rem;
    font-size: 0.92rem;
}

.zone-row input[type="number"]:focus {
    outline: none;
    border-color: var(--accent);
}

.zone-row .link-danger {
    flex-shrink: 0;
    font-size: 1rem;
    padding: 0.2rem 0.35rem;
    text-decoration: none;
}

/* ================================================================
   Patient modal
   ================================================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.modal {
    background: var(--elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem 1.5rem;
    width: min(480px, 92vw);
    max-height: 86vh;
    overflow: auto;
    box-shadow: var(--shadow);
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.modal-x {
    background: none;
    border: none;
    color: var(--fg-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.1rem 0.3rem;
    line-height: 1;
}

.modal-x:hover { color: var(--fg); }

.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--fg-muted);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    font-size: 0.95rem;
}

.tab.active {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

.tab-panel.hidden { display: none; }

.tab-panel input[type="search"],
.tab-panel input[type="text"],
.tab-panel input[type="number"] {
    width: 100%;
    background: var(--input-bg, var(--bg));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg);
    padding: 0.5rem 0.7rem;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.tab-panel label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.88rem;
    color: var(--fg-muted);
    margin-bottom: 0.6rem;
}

.tab-panel label input {
    margin-bottom: 0;
}

/* ================================================================
   Admin: sessions / audit additions
   ================================================================ */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.filter-bar input[type="text"],
.filter-bar input[type="number"] {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg);
    padding: 0.4rem 0.7rem;
    font-size: 0.92rem;
    transition: border-color 0.15s;
}

.filter-bar input[type="text"]:focus,
.filter-bar input[type="number"]:focus {
    outline: none;
    border-color: var(--accent);
}

.pager {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
}

.badge {
    display: inline-block;
    background: var(--border);
    color: var(--fg-muted);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-sm);
    margin-left: 0.3rem;
}

.badge-admin { background: var(--accent); color: #fff; }
.badge-ok    { background: #1f7a3d; color: #fff; }
.badge-off   { background: #8a2c2c; color: #fff; }

.admin-table .row-disabled { opacity: 0.55; }

.user-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.rbac-row { display: flex; align-items: center; gap: 0.4rem; }
/* label.cap-check beats the global `label { flex-direction: column }` (line ~277) */
label.cap-check {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0;
    font-size: 0.82rem;
    color: var(--fg);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
}

.btn-sm {
    font-size: 0.78rem;
    padding: 0.15rem 0.5rem;
}

.btn-secondary.active {
    border-color: var(--accent);
    background: rgba(212, 160, 32, 0.16);
    color: var(--fg);
}

.recent-toggle {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem 0;
}

/* PWA install — slide-out button (hidden until the browser offers install) */
.pwa-install {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    font-size: 0.9rem;
    transform: translateX(calc(100% + 1.5rem));
    transition: transform 0.3s ease;
}

.pwa-install.show {
    transform: translateX(0);
}

/* Zoom slider + frame-pan controls (capture page) */
.zoom-pan-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.4rem 1rem;
    background: var(--elevated);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.zoom-pan-bar.hidden { display: none; }
.zp-group { display: inline-flex; align-items: center; gap: 0.4rem; }
.zp-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fg-muted);
}
.zp-val { font-size: 0.85rem; min-width: 2.6em; color: var(--fg); }
#zoom-slider { width: 160px; accent-color: var(--accent); cursor: pointer; }
.zoom-pan-bar .btn-sm { padding: 0.12rem 0.5rem; min-width: 1.9em; }
.zp-hint { font-size: 0.76rem; margin-left: auto; }

/* In-app folder browser (local save) */
.folder-list { max-height: 60vh; overflow: auto; margin-top: 0.5rem; }
.folder-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.folder-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: #eceaf2;
    flex-shrink: 0;
}
.folder-path { word-break: break-all; color: var(--fg-muted); }

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.photo-grid img {
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    display: block;
}

.photo-grid .superseded {
    opacity: 0.4;
}

.photo-grid .superseded img {
    filter: grayscale(40%);
}

/* ----- Patient gallery partial ----- */
.gallery {
    padding: 0.5rem 0;
}

.gallery-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.gallery-session {
    margin-bottom: 1rem;
}

/* ----- Settings modal rows (label left, checkbox right) ----- */
/* `label.set-row` ties .tab-panel label on specificity and wins by source order. */
label.set-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: .5rem 0;
    margin-bottom: 0;
    text-align: left;
    text-transform: none;
    font-weight: 400;
    color: var(--fg);
    cursor: pointer;
}
.set-row-label { flex: 1; }
.set-row input[type="checkbox"] { flex-shrink: 0; }

.set-sep {
    height: 1px;
    background: var(--border);
    margin: .6rem 0;
}

.set-sub {
    font-size: .82rem;
    color: var(--fg-muted);
    padding: .1rem 0 .3rem;
}

.set-actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.gallery-date {
    font-size: 0.85rem;
    color: var(--fg-muted);
    margin-bottom: 0.35rem;
}

/* ================================================================
   Zone list thumbnails + last-shot preview
   ================================================================ */

.zone-thumb {
    width: 38px;
    height: 28px;
    object-fit: contain;
    /* Overlays are black/white line art → need a light backdrop to be visible in dark theme */
    background: #eceaf2;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 4px;
    flex-shrink: 0;
}

.zone-label {
    flex: 1;
}

.last-shot {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 30;
    background: var(--elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 4px;
    cursor: pointer;
    max-width: 180px;
}

.last-shot img {
    width: 172px;
    height: auto;
    border-radius: 4px;
    display: block;
}

.last-shot span {
    display: block;
    font-size: 0.75rem;
    color: var(--fg-muted);
    padding: 2px 4px 0;
}

.last-shot.hidden {
    display: none;
}

/* ----- Recent sessions panel ----- */
.recent-list { display: flex; flex-direction: column; gap: 1rem; max-height: 70vh; overflow: auto; }
.recent-item { border-bottom: 1px solid var(--border); padding-bottom: .75rem; }
.recent-meta { font-size: .9rem; margin-bottom: .4rem; }

/* ----- Help dialog ----- */
.keys-table { width: 100%; border-collapse: collapse; }
.keys-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--border); }

.help-h {
    margin: 0.9rem 0 0.3rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
}
.tab-panel .help-h:first-child { margin-top: 0.2rem; }

.help-note {
    margin: 0.6rem 0;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--accent);
    background: rgba(212, 160, 32, 0.08);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.5;
}

.ic-inline {
    display: inline-flex;
    vertical-align: -0.15em;
    color: var(--accent);
}
kbd { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: .05rem .4rem; font-family: monospace; font-size: .85em; }

/* ================= Адаптивність (вузькі екрани / планшети) ================= */
@media (max-width: 768px) {
    .capture-wrap {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 52px);
        overflow: visible;
    }
    .sidebar {
        width: 100%;
        max-width: none;
        min-width: 0;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .capture-main { min-height: 60vh; }
    .capture-toolbar,
    .controls-bar,
    .zoom-pan-bar { flex-wrap: wrap; }
    .zp-hint { margin-left: 0; flex-basis: 100%; }
    .patient-group { flex-wrap: wrap; }
    .toolbar-spacer { display: none; }
    .topbar {
        flex-wrap: wrap;
        height: auto;
        row-gap: 0.25rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }
    .admin-wrap { overflow-x: auto; }
    #zoom-slider { width: 120px; }
}