/* burble-core.css / core-upload.css: File upload, image preview, progress bar.
   Linked by common/burble_core_css.php, in the order listed there. */

/* ── File upload ──────────────────────────────────────────────
   A dashed drop-shaped strip standing in for the browser’s file input, which
   cannot be styled. The real <input type="file"> is hidden inside and opened
   by the <label for>, so the whole strip is the control and it still works
   from the keyboard.

   Usage: <div class="bc-file-upload">
            <input type="file" id="logo">
            <label class="bc-file-upload-label" for="logo">Choose a file</label>

   .bc-link is the View / Remove pair that follows an uploaded file. */
.bc-file-upload {
  display: flex;
  align-items: center;
  min-height: 100px;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px dashed var(--border-color);
  border-radius: 9px;
  background: var(--bg-light);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.bc-file-upload:hover {
  border-color: var(--teal);
}

/* Dragging a file over it. Two names, because two scripts drive the same state:
   extensions/ba-file-upload.js puts on .is-dragover, and the advertising page has
   a drag handler of its own that writes Bootstrap’s `bg-primary-light
   border-primary` instead — a script shared with the classic page, so those names
   are not ours to change.

   The !important is for .border-primary alone. It is a utility and carries its
   own, so without this the advertising zone went blue on drag while every other
   upload went teal. */
.bc-file-upload.is-dragover,
.bc-file-upload.bg-primary-light {
  border-color: var(--teal) !important;
  color: var(--teal-strong);
}
.bc-file-upload input[type="file"] {
  display: none;
}
.bc-file-upload-label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 0;
  font-size: 12.5px;
  color: var(--sl-500);
  cursor: pointer;
}

.bc-file-upload.bg-primary-light .bc-file-upload-label,
.is-dragover .bc-file-upload-label {
  color: var(--teal-strong);
}

.bc-file-upload-label svg,
.bc-file-upload-label i {
  flex-shrink: 0;
  color: var(--sl-400);
}

.bc-file-upload.bg-primary-light .bc-file-upload-label svg,
.bc-file-upload.bg-primary-light .bc-file-upload-label i,
.is-dragover .bc-file-upload-label svg,
.is-dragover .bc-file-upload-label i {
  color: var(--teal-strong);
}

/* Hint under the control: what will be accepted, and how large. It takes the
   whole width, so it wraps onto a line of its own under the icon and text. */
.bc-file-upload-hint {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--text-soft);
}

.bc-file-upload.bg-primary-light .bc-file-upload-label .bc-file-upload-hint,
.is-dragover .bc-file-upload-label .bc-file-upload-hint {
  color: var(--teal-strong);
}

/* ── Image preview ────────────────────────────────────────────
   What was uploaded, shown back. Two shapes, because the two things uploaded
   are not alike: the default is a facility photo, scaled down to fit its
   column and at most 220px tall, never cropped; --thumb is a small one for a
   logo, 48px tall.

   Usage: <div class="bc-img-preview-wrap">
            <img class="bc-img-preview" src="…">
            <button class="bc-btn bc-btn--danger-outline bc-btn--icon">…

   The wrap is only needed when something sits beside the image. A thumbnail on
   its own does not need one. */
.bc-img-preview-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: center;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  min-height: 50px;
}
.bc-img-preview {
  display: block;
  /* Shrinks to fit, keeping its proportions: never wider than the wrap, never
     taller than 220px. In the wrap's row it gives way so the button beside it
     keeps its room. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 220px;
  min-width: 0;
  flex: 0 1 auto;
  object-fit: contain;
  border-radius: 12px;
}
.bc-img-preview--thumb {
  width: auto;
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--white);
}

/* ── Progress bar ─────────────────────────────────────────────
   A track with a fill that a script widens. Determinate only — there is no
   indeterminate state here, because the one thing using it knows its own
   percentage.

   Usage: <div class="bc-progress"><div class="bc-progress-fill" style="width:0%">

   The radius is a large number rather than half the height, so a page that
   wants a thicker bar can set height alone and still get round ends. overflow
   on the track is what keeps the fill inside those ends at 0%.

   Where the fill also carries Bootstrap’s .progress-bar — a page whose upload
   script finds it by that name — these win on source order: burble-core.css is
   loaded after bootstrap.min.css, and both are single-class selectors. */
.bc-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--sl-200);
  overflow: hidden;
}
.bc-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal-strong), var(--teal));
  transition: width 0.2s;
}

/* Thicker. The onboarding wizard heads its page with one of these, where 6px
   reads as a hairline rather than a summary of how far along you are. Height
   only — the round ends come from the radius above either way. */
.bc-progress--lg {
  height: 8px;
}