/* ==========================================================================
   Complaints & Feedback
   The complaint box screen: entry panel over the pending and completed
   queues. Column widths are fixed so zoom scales the layout rather than
   rearranging it.
   ========================================================================== */

.cp-top { display: flex; gap: 12px; align-items: stretch; }

.cp-art {
    width: 236px;
    flex: 0 0 236px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--panel-border);
    background: var(--surface);
    overflow: hidden;
}

.cp-art svg { width: 100%; height: 100%; }

.cp-entry { flex: 1; min-width: 0; }

.cp-label { width: 168px; flex-shrink: 0; }
.cp-serial { font-size: 12px; color: var(--ink-muted); }
.cp-select { width: 240px; }
.cp-wide { flex: 1; min-width: 0; }

/* -- the two queues ------------------------------------------------------ */

.cp-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid #9fb0c0;
    background: var(--surface);
    min-width: 0;
}

.cp-band {
    padding: 3px 8px;
    background: linear-gradient(#6ea3cf, #3f74ad);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* Header inside the scroll frame, both sides reserving the scrollbar gutter,
   so rows can never drift out from under their headings. */
.cp-head, .cp-body { overflow-y: auto; scrollbar-gutter: stable; }

.cp-head {
    display: flex;
    overflow-y: hidden;
    background: linear-gradient(#f2f6fa, #d8e4ef);
    border-bottom: 1px solid #9fb0c0;
    font-size: 11px;
    font-weight: 700;
    /* Declaring overflow zeroes a flex item's automatic minimum size; without this a
       screen too short for its content squeezes the headings to half a line. */
    flex: 0 0 auto;
}

.cp-body { flex: 1; min-height: 150px; max-height: 260px; font-size: 11px; }

.cp-row { display: flex; border-bottom: 1px solid #e0e7ee; cursor: pointer; }
.cp-row:nth-child(even) { background: #fafcfe; }
.cp-row:hover { background: #eaf3fa; }
.cp-row-selected { background: #1d4f91; color: #fff; }

.cp-col {
    padding: 3px 5px;
    border-right: 1px solid #e0e7ee;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cp-col-sr { width: 62px; flex: none; }
.cp-col-floor { width: 130px; flex: none; }
.cp-col-loc { width: 150px; flex: none; }
.cp-col-detail { flex: 1.4; min-width: 200px; }
.cp-col-dept { width: 150px; flex: none; }
.cp-col-date { width: 118px; flex: none; }
.cp-col-note { flex: 1; min-width: 150px; }
.cp-col-verify { width: 66px; flex: none; border-right: none; text-align: center; }

.cp-foot {
    display: flex;
    padding: 3px 8px;
    background: linear-gradient(#eef4f9, #dbe7f1);
    border-top: 1px solid #9fb0c0;
    font-size: 11px;
    color: var(--ink-muted);
}

.cp-tick {
    width: 22px;
    height: 20px;
    padding: 2px;
    background: linear-gradient(#ffffff, #eef7ee);
    border: 1px solid #9ed49a;
    border-radius: 3px;
}

.cp-tick:hover:not(:disabled) { background: linear-gradient(#ffffff, #d9f0d6); }
.cp-tick svg { width: 100%; height: 100%; }

/* Verified rows keep the tick visible but plainly spent. */
.cp-tick-off { border-color: #cfd8e0; background: #f2f5f8; opacity: 0.55; }