/* Enquiries inbox, detail page, stage settings and the form builder's webform tabs */

.enquiry-colour {
    width: 36px;
    height: 36px;
    padding: 2px;
    border: 1px solid #d1d3e2;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
}

.enquiry-tabs .nav-link { border-radius: 8px; color: #5a5c69; }
.enquiry-tabs .nav-link.active { background: #001eff; color: #fff; }

.enquiry-stage-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eaecf4;
}
.enquiry-stage-row .enquiry-stage-name { flex: 1 1 auto; width: auto; min-width: 0; }
.enquiry-stage-row .enquiry-stage-deadline { flex: 0 0 100px; width: 100px; }
.enquiry-stage-row .enquiry-stage-unit { flex: 0 0 100px; width: 100px; }

/* page header */
.enq-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.enq-header h1 { margin: 0; font-size: 1.75rem; font-weight: 700; color: #1f2430; }
.enq-header p { margin: 4px 0 0; color: #6e7182; }
.enq-back { display: inline-block; margin-bottom: 8px; color: #6e7182; font-size: .9rem; }

/* overdue banner */
.enq-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 11px;
    background: #fdecea;
    color: #9b2c1f;
}
.enq-alert i { font-size: 1.1rem; }
.enq-alert .btn { margin-left: auto; }

/* tabs and filters */
.enq-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.enq-tabs { display: inline-flex; padding: 4px; border-radius: 10px; background: #e9ebf3; }
.enq-tabs button {
    padding: 6px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5a5c69;
    font-weight: 600;
}
.enq-tabs button.active { background: #fff; color: #1f2430; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.enq-tabs .count { margin-left: 6px; font-weight: 400; color: #858796; }
.enq-search { max-width: 260px; }

.enq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.enq-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid #d9dbe6;
    border-radius: 999px;
    background: #fff;
    color: #5a5c69;
    font-size: .85rem;
}
.enq-chip.active { border-color: #001eff; color: #001eff; background: #f0f2ff; }
.enq-chip--danger.active { border-color: #e74a3b; color: #c0392b; background: #fdecea; }

.enq-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* list */
.enq-list { padding: 0; margin: 0; overflow: hidden; }
.enq-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 150px 180px;
    gap: 16px;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f1f5;
    border-left: 4px solid transparent;
    color: inherit;
}
.enq-row:last-child { border-bottom: 0; }
.enq-row:hover { background: #f8f9fc; text-decoration: none; color: inherit; }
.enq-row.is-overdue { border-left-color: #e74a3b; }
.enq-name { font-weight: 700; color: #1f2430; }
.enq-meta { color: #6e7182; font-size: .85rem; }
.enq-snippet { color: #858796; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enq-when { text-align: right; font-size: .85rem; color: #6e7182; }

@media (max-width: 991px) {
    .enq-row { grid-template-columns: minmax(0, 1fr) 150px; }
    .enq-row .enq-col-source, .enq-row .enq-col-assignee { display: none; }
}

.enq-stage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f1f2f6;
    color: #3a3b45;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}
.enq-source { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #eef0fb; color: #3c4ba8; font-size: .8rem; }
.enq-due { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.enq-due--overdue { background: #fdecea; color: #c0392b; }
.enq-due--soon { background: #fff6e0; color: #9a6b00; }
.enq-due--ok { background: #eaf7f0; color: #1b7f4b; }

.enq-empty { padding: 48px 20px; text-align: center; color: #858796; }
.enq-empty i { font-size: 2rem; margin-bottom: 12px; color: #c5c7d4; }

/* detail */
.enq-card { padding: 20px 24px; margin-bottom: 20px; }
.enq-card h2 { margin: 0 0 16px; font-size: 1rem; font-weight: 700; color: #1f2430; }

.enq-answers { margin: 0; }
.enq-answers dt { font-size: .8rem; font-weight: 600; color: #858796; text-transform: none; }
.enq-answers dd { margin: 2px 0 14px; color: #1f2430; white-space: pre-line; }

.enq-quick a { margin-right: 8px; }

.enq-stages { display: flex; flex-direction: column; gap: 6px; }
.enq-stages button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #e3e6f0;
    border-radius: 9px;
    background: #fff;
    color: #3a3b45;
    text-align: left;
}
.enq-stages button:hover:not([disabled]) { border-color: #b7bdf7; }
.enq-stages button.current { border-color: currentColor; font-weight: 700; background: #f8f9ff; }
.enq-stages button[disabled] { opacity: .6; }
.enq-stages .limit { margin-left: auto; color: #858796; font-size: .8rem; font-weight: 400; }

.enq-timeline { list-style: none; padding: 0; margin: 16px 0 0; }
.enq-timeline li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid #f0f1f5; }
.enq-timeline .icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f2f6;
    color: #858796;
    font-size: .8rem;
}
.enq-timeline .icon--note { background: #eef0fb; color: #3c4ba8; }
.enq-timeline .body { flex: 1; min-width: 0; }
.enq-timeline .content { white-space: pre-line; color: #1f2430; }
.enq-timeline .event { color: #5a5c69; }
.enq-timeline .when { font-size: .8rem; color: #858796; }

.enq-match { padding: 12px 14px; border-radius: 10px; background: #fff6e0; color: #6b4d00; margin-bottom: 12px; font-size: .9rem; }

/* convert modal */
.enq-convert h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 4px; }
.enq-convert h4 { font-size: .95rem; font-weight: 700; margin: 20px 0 10px; color: #1f2430; }
.enq-convert .choice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid #e3e6f0;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 400;
}
.enq-convert .choice.selected { border-color: #001eff; background: #f6f7ff; }
.enq-convert .choice input { margin-top: 4px; }