/* The phone side of "take photo with your phone" (see Upload#camera_token!, uploads/edit.html.erb
   for the desktop half) — deliberately its own stylesheet, same reasoning as patient_diary.css:
   this is the one part of the app a phone camera view ever renders, no dashboard chrome at all. */

:root {
  --blue-accent: #1a7fe0;
  --blue-mid: #0055cc;
  --blue-light: #e6f0ff;
  --red: #c0392b;
  --red-light: #fdf0ee;
  --grey-50: #f5f7fb;
  --grey-200: #d8dce8;
  --grey-500: #8a92a3;
  --grey-700: #4a5468;
  --grey-900: #1a1f2e;
  --radius: 8px;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.upload-camera-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--grey-900);
  background: var(--grey-50);
}

.upload-camera-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.upload-camera-flash {
  padding: 12px 16px;
  font-size: 14px;
}

.upload-camera-flash--notice { background: var(--blue-light); color: var(--blue-mid); }
.upload-camera-flash--alert { background: var(--red-light); color: var(--red); }

.upload-camera-page__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--blue-mid);
}

.upload-camera-page__hint {
  margin-top: 6px;
  font-size: 14px;
  color: var(--grey-700);
}

.upload-camera-page__empty {
  text-align: center;
  color: var(--grey-500);
  padding: 64px 0;
}

.upload-camera-page__error {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--red-light);
  color: var(--red);
  border-radius: var(--radius);
  font-size: 14px;
}

.upload-camera-shutter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding: 22px;
  background: var(--blue-accent);
  color: #fff;
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: opacity .15s;
}

.upload-camera-shutter--busy { opacity: .6; pointer-events: none; }

.upload-camera-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
  list-style: none;
}

.upload-camera-thumbs__item {
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  background: var(--grey-200);
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-camera-thumbs__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-camera-thumbs__item--pending img { opacity: .5; }

.upload-camera-thumbs__file {
  font-size: 28px;
}

/* "Snimak razgovora" — the phone's recorder page (visit_recorder/recordings/show, see VisitRecording),
   sharing this layout/stylesheet with the camera view. */

.visit-recorder__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 24px;
  padding: 26px;
  border: 0;
  border-radius: var(--radius);
  background: var(--blue-accent);
  color: #fff;
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
}

.visit-recorder__button:disabled { opacity: .5; }

.visit-recorder__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
}

.visit-recorder--recording .visit-recorder__button { background: var(--red); }
.visit-recorder--recording .visit-recorder__dot { animation: visit-recorder-pulse 1.2s ease-in-out infinite; }

@keyframes visit-recorder-pulse {
  50% { opacity: .3; }
}

.visit-recorder__status {
  margin-top: 14px;
  min-height: 1.5em;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--grey-700);
}

.visit-recorder__note {
  margin-top: 24px;
  font-size: 13px;
  color: var(--grey-500);
  text-align: center;
}

/* ─── Paired-phone scanner (scanner/captures/show, scanner_controller.js) ─────
   The camera fills the whole screen; whose karton on top and the controls at the bottom float over
   it, like the phone's own camera app. */
.scanner {
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
}
/* Its overlays, notice and count set their own display — without this, that beats the hidden
   attribute the controller toggles, and "camera unavailable" would cover a working camera */
.scanner [hidden] { display: none !important; }

.scanner__viewport { position: absolute; inset: 0; z-index: 0; }
.scanner__video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Where to hold the page, and what a photo keeps (scanner#frameCrop) — clear of the bar above and
   the controls below */
.scanner__frame { position: absolute; top: calc(env(safe-area-inset-top) + 96px); bottom: calc(env(safe-area-inset-bottom) + 200px); left: 6%; right: 6%; border: 2px dashed rgba(255,255,255,.55); border-radius: 12px; pointer-events: none; }
.scanner__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.scanner__flash--on { animation: scanner-flash .25s ease-out; }
@keyframes scanner-flash { from { opacity: .85; } to { opacity: 0; } }
.scanner__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 120px 28px 220px; text-align: center; background: rgba(13,16,23,.9); font-size: 16px; line-height: 1.45; }
.scanner__error-detail { font-size: 12px; opacity: .6; font-family: ui-monospace, monospace; overflow-wrap: anywhere; }

.scanner__top { position: absolute; top: 0; left: 0; right: 0; z-index: 1; padding-top: env(safe-area-inset-top); }
.scanner__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: rgba(58,47,18,.92); }
.scanner--ready .scanner__bar { background: rgba(0,85,204,.92); }
.scanner__who { min-width: 0; display: flex; flex-direction: column; }
.scanner__label { font-size: 12px; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
.scanner__patient { font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.scanner__count { flex: none; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 13px; font-weight: 700; }

.scanner__notice { margin: 8px 12px 0; padding: 10px 14px; border-radius: var(--radius); font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.scanner__notice--info { background: #24324a; }
.scanner__notice--success { background: #1a7a4a; }
.scanner__notice--warning { background: #f0b429; color: #3a2a00; }
.scanner__notice--error { background: var(--red); }

.scanner__bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding-bottom: env(safe-area-inset-bottom); background: linear-gradient(to top, rgba(0,0,0,.75) 55%, rgba(0,0,0,0)); }
.scanner__thumbs { display: flex; gap: 8px; list-style: none; overflow-x: auto; padding: 24px 12px 0; min-height: 80px; }
.scanner__thumb { position: relative; flex: none; width: 44px; height: 56px; border-radius: 6px; overflow: hidden; background: #24324a; border: 2px solid #1a7a4a; }
.scanner__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner__thumb--file { display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.scanner__thumb--sending { border-color: rgba(255,255,255,.35); }
.scanner__thumb--sending::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.scanner__thumb--failed { border-color: var(--red); opacity: .6; }

.scanner__controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 16px 6px; }
.scanner__side { display: flex; flex-direction: column; align-items: center; gap: 4px; justify-self: center; min-width: 72px; padding: 8px; background: none; border: 0; border-radius: 12px; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.scanner__done { color: #7ee2a8; }
.scanner__done:disabled { color: rgba(255,255,255,.3); }
.scanner__shutter { width: 78px; height: 78px; border-radius: 50%; border: 4px solid #fff; background: none; padding: 4px; cursor: pointer; touch-action: manipulation; }
.scanner__shutter-ring { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .1s; }
.scanner__shutter:active .scanner__shutter-ring { transform: scale(.88); }
.scanner__shutter:disabled { opacity: .35; }

.scanner__disconnect { display: block; margin: 0 auto 8px; background: none; border: 0; color: rgba(255,255,255,.6); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.scanner form { margin: 0; }

.scanner-message { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 8px; text-align: center; color: var(--grey-700); }
.scanner-message svg { color: var(--blue-mid); }
.scanner-message h1 { font-size: 20px; color: var(--grey-900); }