/*
   "Send from phone" on the enrolment form (work item 5187).

   The compact dropzone and attachment list from "File attachment panel sizes.html", adapted to
   this site's Bootstrap 3. Every rule is scoped under .ole-qru (the row) or .ole-qru-dialog, so
   nothing here can reach the rest of the form. Only loaded when the feature is on.
*/

.ole-qru {
    --ole-qru-border: #ced4da;
    --ole-qru-border-hover: #6c757d;
    --ole-qru-accent: #337ab7;
    --ole-qru-accent-bg: #eaf2fa;
    --ole-qru-muted: #6c757d;
    --ole-qru-surface: #f8f9fa;
    --ole-qru-danger: #a94442;
    margin-top: 5px;
}

/* ---- Compact dropzone ------------------------------------------------------------------ */

.ole-qru .dropzone {
    position: relative;
    display: block;
    border: 2px dashed var(--ole-qru-border);
    border-radius: 6px;
    background: var(--ole-qru-surface);
    padding: 12px;
    text-align: center;
    cursor: pointer;
}
.ole-qru .dropzone:hover,
.ole-qru .dropzone:focus-within { border-color: var(--ole-qru-border-hover); }
.ole-qru .dropzone.is-over { border-color: var(--ole-qru-accent); background: var(--ole-qru-accent-bg); }

.ole-qru .dropzone-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    justify-content: center;
}
.ole-qru .dropzone-icon { color: #8a9199; line-height: 1; }
.ole-qru .dropzone-icon svg { width: 22px; height: 22px; fill: currentColor; vertical-align: middle; }
.ole-qru .dropzone-text { font-weight: 600; }
.ole-qru .dropzone-hint { margin-top: 6px; font-size: 12px; color: var(--ole-qru-muted); }

/* The real file input covers the whole zone, invisibly. Clicking anywhere opens the picker,
   keyboard focus lands on a genuine file input, and a "required" bubble still has somewhere
   to point. It sits under the phone button and over everything else. */
.ole-qru .dropzone input[type=file].ole-qru-native {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100% !important;
    margin: 0;
    padding: 0 !important;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.ole-qru .dropzone-actions { position: relative; z-index: 2; display: inline-flex; }
.ole-qru .ole-qru-phone {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--ole-qru-border);
    background: #fff;
    color: #333;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
}
.ole-qru .ole-qru-phone:hover { border-color: var(--ole-qru-border-hover); }
.ole-qru .ole-qru-phone:focus { outline: 2px solid var(--ole-qru-accent); outline-offset: 1px; }
.ole-qru .ole-qru-phone svg { width: 11px; height: 14px; fill: currentColor; }

/* ---- Attachment list ------------------------------------------------------------------- */

.ole-qru .ole-qru-list { margin: 6px 0 0; padding: 0; list-style: none; }
.ole-qru .att-row {
    display: flex;
    gap: 8px 10px;
    align-items: center;
    border: 1px solid #ddd;
    border-top-width: 0;
    padding: 6px 10px;
    background: #fff;
}
.ole-qru .att-row:first-child { border-top-width: 1px; border-radius: 4px 4px 0 0; }
.ole-qru .att-row:last-child { border-radius: 0 0 4px 4px; }
.ole-qru .att-row:only-child { border-radius: 4px; }
.ole-qru .att-row > svg { width: 14px; height: 18px; fill: #8a9199; flex: 0 0 auto; }
.ole-qru .att-nm { flex: 1 1 8rem; min-width: 0; }
.ole-qru .att-nm > div:first-child { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ole-qru .att-meta { font-size: 11px; color: var(--ole-qru-muted); }
.ole-qru .att-remove {
    border: 0;
    background: transparent;
    color: var(--ole-qru-muted);
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.ole-qru .att-remove:hover { color: #333; background: #eee; }
.ole-qru .att-remove svg { width: 10px; height: 14px; fill: currentColor; vertical-align: middle; }

.ole-qru .ole-qru-status { margin-top: 4px; font-size: 12px; color: var(--ole-qru-danger); }
.ole-qru .ole-qru-status:empty { display: none; }
.ole-qru .ole-qru-status.is-ok { color: #3c763d; }

/* ---- QR dialog ------------------------------------------------------------------------- */

.ole-qru-dialog {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ole-qru-dialog[hidden] { display: none; }
.ole-qru-dialog .ole-qru-panel {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 360px;
    max-height: 100%;
    overflow-y: auto;
    padding: 18px 20px 16px;
    text-align: center;
}
.ole-qru-dialog h4 { margin: 0 0 4px; font-size: 18px; }
.ole-qru-dialog .ole-qru-target { font-size: 13px; color: #555; margin-bottom: 10px; overflow-wrap: anywhere; }
.ole-qru-dialog .ole-qru-canvas { display: inline-block; min-height: 220px; min-width: 220px; margin: 4px 0 8px; }
.ole-qru-dialog .ole-qru-canvas img,
.ole-qru-dialog .ole-qru-canvas canvas { width: 220px; height: 220px; }
.ole-qru-dialog ol { text-align: left; margin: 0 0 8px; padding-left: 20px; font-size: 13px; }
.ole-qru-dialog .ole-qru-keep { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.ole-qru-dialog .ole-qru-dstatus { font-size: 13px; color: #555; min-height: 1.5em; margin-bottom: 10px; }