/* CAMPAIGN P-HOME / U1-U3: upload-card visual polish.
   Scoped to the upload card's own markup only (.upload-block and its
   descendants, plus the page-wide #drop-overlay which is the drag-and-drop
   affordance for this same card). Loaded after style.css/bulma.min.css so
   these rules layer on top without needing !important, except the one
   spot noted below where style.css itself already uses !important on a
   bare .button.is-info rule.

   No name/id attributes are touched anywhere -- JS/backend form wiring is
   unaffected. Zero business logic here, visual only. */

/* ---- 1. Drag-and-drop zone: make it look like a drop target, not just
   a floating icon in empty space. ---- */
.upload-block .upload-form .select-first-files {
  background: #fafbfc;
  transition: background-color 0.15s ease;
}
.upload-block .upload-form .select-first-files .outside-container {
  border: 2px dashed rgba(62, 142, 208, 0.4);
  border-radius: 14px;
  padding: 18px 22px 14px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.upload-block .upload-form .select-first-files .outside-container:hover {
  border-color: #3e8ed0;
  background: rgba(62, 142, 208, 0.06);
}
.upload-block .upload-form .select-first-files span.description {
  font-weight: 600;
  font-size: 14px;
  color: #262a2d;
  margin-top: 4px;
}
.upload-block .upload-form .select-first-files span.folder-select {
  color: #3e8ed0;
  font-weight: 500;
  padding-top: 8px;
}

/* ---- 2. Field boundaries + focus states. Bulma/style.css gives inputs a
   thin bottom border and no visible focus treatment; add a clear focus
   affordance so people can tell which field is active. ---- */
.upload-block .upload-form form .input-group input,
.upload-block .upload-form form .input-group textarea,
.upload-block .upload-form form .input-group select {
  border-bottom: 1px solid rgba(107, 113, 119, 0.35);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.upload-block .upload-form form .input-group input:focus,
.upload-block .upload-form form .input-group textarea:focus,
.upload-block .upload-form form .input-group select:focus {
  border-bottom: 2px solid #3e8ed0;
  box-shadow: 0 1px 0 0 #3e8ed0;
}

/* ---- 3. Label / helper-text hierarchy in the advanced options panel. ---- */
.upload-block .upload-form form .advanced-options .input-group span.label {
  font-size: 13px;
  font-weight: 600;
  color: #44484b;
  letter-spacing: 0.01em;
}
.upload-block .upload-form form .advanced-options .input-group span.label[data-help] i.lni {
  color: #8d9296;
  margin-left: 2px;
}
.upload-block .upload-form form .advanced-options h1 {
  color: #262a2d;
}

/* ---- 4. Selected-files summary row: slightly larger/legible stat text. ---- */
.selected-files .stats span {
  font-size: 12px;
  color: #44484b;
}
.selected-files .stats span b {
  font-size: 14px;
  color: #262a2d;
}

/* ---- 5. Primary action unmistakable: Upload stays the big filled pill
   (unchanged), the adjacent "..." options toggle is visually quieter so it
   doesn't compete with it for attention. ---- */
.upload-block .upload-block-content .button-block button#submit-upload {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.upload-block .upload-block-content .button-block button.options {
  opacity: 0.72;
  box-shadow: none;
}
.upload-block .upload-block-content .button-block button.options:hover,
.upload-block .upload-block-content .button-block button.options:focus {
  opacity: 1;
}

/* ---- 6. Feedback messages (quota/validation/upload-request notices) must
   stay clearly visible -- tighten spacing/line-height to the card's own
   type scale and add a left accent so warnings read as warnings even at a
   glance, without relying on color alone. ---- */
.upload-block .upload-form form .notification {
  font-size: 13px;
  line-height: 1.4;
  padding: 0.85em 1em;
  margin: 10px 15px;
  width: auto;
  border-left: 4px solid transparent;
}
.upload-block .upload-form form .notification.is-warning {
  border-left-color: #946c00;
}
.upload-block .upload-form form .notification.is-info {
  border-left-color: #1d72aa;
}

/* ---- 7. Page-wide drop overlay (shown while dragging a file anywhere on
   the page) belongs conceptually to this upload flow; a touch more polish
   on its existing dashed-border + centered-text affordance. ---- */
#drop-overlay {
  border-width: 3px;
}
#drop-overlay p {
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .upload-block .upload-form .select-first-files .outside-container {
    padding: 14px 18px 10px;
  }
}

/* CAMPAIGN P-HOME / integration owner (V3 axe finding): #submit-upload's
   white text on style.css's global .button.is-info blue (#3e8ed0) measures
   ~3.5:1, below WCAG AA's 4.5:1 for normal-weight body-size text. Scoped to
   this one button ID only (not a global .button.is-info change, which would
   also affect admin/customer screens using the same brand color) --
   darkened just enough (same hue, ~15% darker) to clear 4.5:1 while staying
   visually "brand blue". Computed and verified via WCAG relative-luminance
   contrast formula: rgb(52,120,176) vs white = 4.71:1. */
#submit-upload {
  background-color: #3478b0 !important;
}

/* CAMPAIGN P-HOME / integration owner (post-merge axe finding): the
   folder-select text link measured ~3.38:1 against its light background
   (#3e8ed0 on #fafbfc), below WCAG AA's 4.5:1 for 12px normal-weight text.
   Same darkened brand-blue used for #submit-upload's contrast fix above
   (rgb(52,120,176) = #3478b0), scoped to this one selector only. */
.upload-block .upload-form .select-first-files span.folder-select {
  color: #3478b0;
}