/*!
 * Dual-IMEI entry — chip in the table, device cards in the modal.
 *
 * Presentation only. The hidden .imei_pairs_input textarea is the real form
 * field; nothing here changes what posts. Keeps the same visual language as the
 * serial modal so the two feel like one system rather than two features.
 */

/* ------------------------------------------------------------------
   Chip in the purchase row
   ------------------------------------------------------------------
   The whole point: six inputs never appear in the table, so the row
   stays one line tall however many phones are on it.
   ------------------------------------------------------------------ */
.imei_manage_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid #E6C98A;
    border-radius: 8px;
    background: #FDF7EC;
    color: #8A5B12;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.imei_manage_btn:hover {
    border-color: #7C3AED;
    background: #F5EFFE;
    color: #5B21B6;
}
.imei_manage_btn:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 2px;
}

.imei_entry_wrapper.is-complete .imei_manage_btn {
    border-color: #86C79E;
    background: #EDF8F1;
    color: #1B6B3A;
}

.imei_chip_icon { font-size: 13px; }

.imei_chip_count {
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    font-variant-numeric: tabular-nums;
}

.imei_chip_action {
    padding-inline-start: 8px;
    border-inline-start: 1px solid currentColor;
    opacity: .75;
    font-weight: 500;
}

/* ------------------------------------------------------------------
   Modal shell
   ------------------------------------------------------------------ */
.imei-modal .modal-dialog { width: 520px; max-width: 94%; }

.imei-modal__content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px -12px rgba(27, 24, 50, .35);
}

.imei-modal__head {
    position: relative;
    padding: 15px 18px 13px;
    border-bottom: 1px solid #EEEAF6;
}
.imei-modal__title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700;
    color: #3B1063;
}
.imei-modal__product {
    margin: 3px 0 0;
    font-size: 12px;
    color: #6B6484;
}
.imei-modal__close {
    position: absolute;
    top: 12px;
    inset-inline-end: 14px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: #F3F1F8;
    color: #6B6484;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.imei-modal__close:hover { background: #E9E4F3; color: #3B1063; }

/* ---- Progress ---------------------------------------------------- */
.imei-modal__progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid #EEEAF6;
    background: #FBFAFE;
}
.imei-modal__bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #E9E4F3;
    overflow: hidden;
}
.imei-modal__bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #2E9E63;
    transition: width .2s ease;
}
.imei-modal__count {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #4A3B63;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---- Device cards ------------------------------------------------ */
.imei-modal__body {
    padding: 12px 18px;
    max-height: 46vh;
    overflow-y: auto;
}
.imei-modal__empty {
    margin: 0;
    padding: 22px 0;
    text-align: center;
    font-size: 13px;
    color: #6B6484;
}

.imei-device {
    border: 1px solid #E6E0F0;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 9px;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease;
}
.imei-device:last-child { margin-bottom: 0; }

/* A finished phone steps back so the eye lands on the one being scanned */
.imei-device.is-done {
    border-color: #BEE0CB;
    background: #F4FBF7;
}

.imei-device__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.imei-device__name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6B6484;
}
.imei-device.is-done .imei-device__name { color: #1B6B3A; }

.imei-device__tick {
    display: none;
    color: #2E9E63;
    font-size: 13px;
}
.imei-device.is-done .imei-device__tick { display: inline-block; }

.imei-device__slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.imei-slot label {
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #6B6484;
}

.imei-field {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1.5px solid #D9DEE7;
    border-radius: 9px;
    background: #fff;
    color: #0F172A;
    font-family: ui-monospace, Consolas, Menlo, monospace;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.imei-field::placeholder { color: #64748B; font-weight: 400; }
.imei-field:focus {
    outline: none;
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
}
.imei-field.is-bad {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}
.imei-field.is-warn {
    border-color: #D9A441;
    box-shadow: 0 0 0 3px rgba(217, 164, 65, .14);
}

.imei-slot__note {
    display: block;
    min-height: 15px;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.3;
    color: #B91C1C;
}
.imei-field.is-warn ~ .imei-slot__note { color: #8A5B12; }

/* ---- Footer ------------------------------------------------------ */
.imei-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #EEEAF6;
    background: #FBFAFE;
}

.imei-btn {
    height: 36px;
    padding: 0 16px;
    border: 1px solid #D9DEE7;
    border-radius: 9px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.imei-btn:hover { border-color: #7C3AED; color: #5B21B6; }

.imei-btn--primary {
    border-color: #7C3AED;
    background: #7C3AED;
    color: #fff;
}
.imei-btn--primary:hover { background: #6D28D9; border-color: #6D28D9; color: #fff; }
.imei-btn--primary:disabled {
    opacity: .5;
    cursor: not-allowed;
    background: #7C3AED;
    border-color: #7C3AED;
}

@media (max-width: 575px) {
    .imei-device__slots { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .imei_manage_btn,
    .imei-device,
    .imei-field,
    .imei-modal__bar span { transition: none; }
}

/* ------------------------------------------------------------------
   Device count
   ------------------------------------------------------------------
   Sits in the header because it governs the whole list. Editing it
   writes the row's own quantity field, so the card count and the
   purchase quantity are the same number by construction.
   ------------------------------------------------------------------ */
.imei-modal__qty {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
}
.imei-modal__qty label {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6B6484;
}
.imei-qty {
    width: 74px;
    height: 32px;
    padding: 0 9px;
    border: 1.5px solid #D9DEE7;
    border-radius: 8px;
    background: #fff;
    color: #0F172A;
    font-size: 13.5px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.imei-qty:focus {
    outline: none;
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
}

/* Add-device sits apart from Cancel/Save: it edits the list, it does
   not close the modal. */
.imei-modal__spacer { flex: 1; }

.imei-btn--ghost {
    border-style: dashed;
    color: #5B21B6;
    background: #fff;
}
.imei-btn--ghost:hover {
    border-style: solid;
    border-color: #7C3AED;
    background: #F5EFFE;
}