.instrfi-sig-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.instrfi-sig-opts .checkbox-custom {
    flex: 0 0 auto;
    border: 1px solid #e4e9f0;
    border-radius: 6px;
    padding: 8px 14px 8px 30px;
    background: #fff;
    margin: 0 !important;
}
.instrfi-scan-block {
    border: 1px solid #e4e9f0;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #fafbfc;
}
.instrfi-scan-block > .instrfi-scan-block-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8b95a1;
    margin-bottom: 10px;
}
.instrfi-scan-row {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.instrfi-scan-row:last-child {
    margin-bottom: 0;
}
.instrfi-scan-row-label {
    display: flex;
    align-items: center;
    flex: 1 1 260px;
    min-width: 220px;
    margin: 0;
    cursor: pointer;
}
.instrfi-scan-row-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0 10px 0 0;
}
.instrfi-scan-logo {
    display: inline-block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-right: 10px;
    border: 1px solid #e4e9f0;
    border-radius: 4px;
    background: #fff;
    padding: 2px;
    flex-shrink: 0;
}
.instrfi-scan-fields {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}
.instrfi-scan-fields input {
    width: 150px;
}
/* A ticked system whose quantity was left blank at send time. Cleared as soon as one is typed. */
.installer_rfi_job_scan_qty.instrfi-qty-missing {
    border-color: #dd5826;
    box-shadow: 0 0 0 2px rgba(221, 88, 38, 0.15);
}
.instrfi-add-block {
    border: 1px solid #e4e9f0;
    border-radius: 6px;
    padding: 14px 16px;
    background: #fafbfc;
    height: 100%;
}
.instrfi-add-block .instrfi-add-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8b95a1;
    margin-bottom: 10px;
}
.instrfi-add-block .instrfi-qty-serial {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.instrfi-add-block .instrfi-qty-serial input {
    margin-bottom: 0 !important;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
.instrfi-add-block .list-unstyled {
    margin-top: 10px;
    margin-bottom: 0;
}
.instrfi-section-heading {
    font-size: 15px;
    font-weight: 600;
    margin: 22px 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #e4e9f0;
}
.instrfi-response-photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* The installer's captures, sized as edit_job's photo tiles (width:180px). */
.instrfi-response-photo {
    width: 180px;
    margin: 0;
}
.instrfi-response-photo .figure {
    margin-bottom: 0;
}
.instrfi-response-photo .figure-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}
.instrfi-response-photo .figure-caption h6 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.instrfi-card {
    border: 1px solid #e4e9f0;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: #fff;
}
.instrfi-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.instrfi-card-meta {
    font-size: 12px;
    color: #8b95a1;
}
.instrfi-card-req {
    font-size: 13px;
    color: #616a75;
    margin: 8px 0 0;
    padding: 8px 10px;
    background: #fafbfc;
    border: 1px solid #e4e9f0;
    border-radius: 4px;
}
.instrfi-response-wrap {
    margin-top: 4px;
}
.instrfi-response-wrap .instrfi-section-heading {
    font-size: 13px;
    margin: 14px 0 10px;
}
.instrfi-response-group-title {
    font-size: 12px;
    font-weight: 600;
    color: #616a75;
    margin: 0 0 6px;
}
.instrfi-response-photo-group-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.instrfi-response-photo-group {
    margin-bottom: 0;
    flex: 0 1 auto;
}
.instrfi-response-row-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.instrfi-response-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: 6px;
    padding: 6px 10px;
    margin: 0;
    font-size: 13px;
    flex: 0 1 220px;
}
.instrfi-response-model {
    font-weight: 600;
}
.instrfi-response-serial {
    color: #8b95a1;
    margin-left: auto;
}
.instrfi-response-row .instrfi-response-photo-grid {
    flex: 1 1 100%;
    margin-top: 6px;
}

/* Itemised "Requested" block on each past RFI card. */
.instrfi-req-heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8b95a1;
    font-weight: 600;
    margin-bottom: 6px;
}
.instrfi-req-group {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
}
.instrfi-req-group + .instrfi-req-group {
    border-top: 1px dashed #e4e9f0;
}
.instrfi-req-label {
    flex: 0 0 150px;
    color: #8b95a1;
    font-size: 12px;
}

/* Bootstrap's .label is `white-space: nowrap; text-align: center`, so a long brand/model pill
   ("JA Solar Technology Co Ltd - JAM66D45-600/LB (IEC 61215-2021)") cannot wrap and spills out of
   its column onto the card beside it. Let our pills wrap inside their container instead. */
.instrfi-add-block .list-unstyled .label,
#installer_rfi_photo_list .label,
.instrfi-req-item {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    text-align: left;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.35;
}
.instrfi-add-block,
.instrfi-add-block .list-unstyled li {
    min-width: 0;
}

/* Requirement pills on a past RFI, ticked as the installer satisfies them. */
.instrfi-req-item {
    background: #f2f4f7;
    color: #616a75;
    font-weight: 400;
}
.instrfi-req-item .fa {
    margin-right: 3px;
}
.instrfi-req-done {
    background: #e6f4ea;
    color: #256d3f;
}
.instrfi-req-done .fa {
    color: #2f9e5b;
}
.instrfi-req-pending .fa {
    color: #b0b7c1;
}
.instrfi-req-note {
    opacity: .75;
    font-size: 11px;
}

/* Keep the select2 box from collapsing while the installer list is still empty. */
#s2id_installer_rfi_installer .select2-choice {
    min-height: 34px;
    line-height: 24px;
}

/* An RFI still open to editing. */
.instrfi-edit-rfi {
    margin-top: 8px;
}
#installer_rfi_edit_banner {
    padding: 6px 10px;
    font-size: 13px;
}
#installer_rfi_edit_banner .btn {
    margin-left: 8px;
}

/* --- jobs listing pages (installer_rfi_listing.js) --- */

/* Minimal tag bar for the post-submission tabs whose filter form is commented out, so the
   "Jobs with Installer RFI" pill has somewhere to sit. */
.instrfi-tagbar {
    padding: 4px 0 2px;
}

/* The row control: one split button, "Installer RFI" on the left and the state on the right,
   divided by a rule. Sits among the btn-xs actions in the row, so it stays compact, but reads as a
   single deliberate control rather than a button with a badge stuck next to it. */
.instrfi-row-cell {
    display: inline-block;
    margin-top: 4px;
}
.instrfi-btn {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.1;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
}
.instrfi-btn:hover,
.instrfi-btn:focus {
    text-decoration: none;
    filter: brightness(0.95);
}
.instrfi-btn .instrfi-btn-label,
.instrfi-btn .instrfi-btn-state {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
}
/* The vertical separator between the two halves. */
.instrfi-btn .instrfi-btn-state {
    border-left: 1px solid;
    border-left-color: inherit;
}
.instrfi-btn .fa {
    margin-right: 5px;
}

/* No RFI on this job yet - the actionable state, so it carries the strongest colour. */
.instrfi-btn-request {
    border-color: #d79a1f;
}
.instrfi-btn-request .instrfi-btn-label {
    background: #f0ad4e;
    color: #fff;
}
.instrfi-btn-request .instrfi-btn-state {
    background: #fdf3e2;
    color: #94690d;
    border-left-color: #d79a1f;
}

/* Raised, installer has not opened it yet. */
.instrfi-btn-requested {
    border-color: #99a1ad;
}
.instrfi-btn-requested .instrfi-btn-label {
    background: #78828f;
    color: #fff;
}
.instrfi-btn-requested .instrfi-btn-state {
    background: #f0f2f5;
    color: #59626e;
    border-left-color: #99a1ad;
}

/* Installer is working through it. */
.instrfi-btn-started {
    border-color: #2a83b8;
}
.instrfi-btn-started .instrfi-btn-label {
    background: #2e8bc0;
    color: #fff;
}
.instrfi-btn-started .instrfi-btn-state {
    background: #e6f2f9;
    color: #1f6183;
    border-left-color: #2a83b8;
}

/* Information provided - nothing outstanding. */
.instrfi-btn-done {
    border-color: #2a8b51;
}
.instrfi-btn-done .instrfi-btn-label {
    background: #2f9e5b;
    color: #fff;
}
.instrfi-btn-done .instrfi-btn-state {
    background: #e7f5ec;
    color: #216b3f;
    border-left-color: #2a8b51;
}