/* mm_import.css — the Import from MobileSentrix checklist on Manage Models
   (2026-10-13). See mm_import.js. Blue as the rest of the page; the in-house
   green marks what is new. */

html.mmi-lock, html.mmi-lock body { overflow: hidden; }

.mmi-overlay {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(15, 23, 42, .34);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .2s ease;
}
.mmi-overlay.is-open { opacity: 1; transition: opacity .3s ease; }
.mmi-overlay[hidden] { display: none; }

.mmi-sheet {
    width: min(980px, 100%); height: min(860px, calc(100vh - 48px));
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 20px; background: #fbfcfe;
    border: 1px solid rgba(120, 140, 170, .25);
    box-shadow: 0 30px 80px rgba(15, 23, 42, .28), 0 2px 8px rgba(15, 23, 42, .08);
    transform: translateY(14px) scale(.97); opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}
.mmi-overlay.is-open .mmi-sheet {
    transform: none; opacity: 1;
    transition: transform .42s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)), opacity .3s ease;
}

/* Head */
.mmi-head { display: flex; align-items: center; gap: 14px; padding: 20px 24px 10px; }
.mmi-logo { width: 72px; height: 34px; object-fit: contain; flex: none; }
.mmi-head h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--text-primary, #0f172a); letter-spacing: -.01em; }
.mmi-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--text-secondary, #64748b); }
.mmi-link {
    border: none; background: none; padding: 0; cursor: pointer;
    font: inherit; font-weight: 700; color: #1a5fa8;
}
.mmi-link:hover { text-decoration: underline; }
.mmi-link:disabled { opacity: .45; cursor: default; text-decoration: none; }

/* Brand tabs */
.mmi-tabs { display: flex; gap: 8px; padding: 6px 24px 0; }
.mmi-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text-primary, #0f172a);
    background: rgba(255, 255, 255, .8); border: 1px solid rgba(120, 140, 170, .28);
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.mmi-tab:hover { border-color: rgba(26, 95, 168, .4); }
.mmi-tab.is-on { background: #1a5fa8; border-color: #1a5fa8; color: #fff; }
.mmi-tab-n {
    font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 800;
    padding: 2px 7px; border-radius: 999px; background: rgba(26, 95, 168, .12); color: #1a5fa8;
}
.mmi-tab.is-on .mmi-tab-n { background: rgba(255, 255, 255, .22); color: #fff; }

/* Search and the older-phones switch */
.mmi-tools { display: flex; align-items: center; gap: 16px; padding: 12px 24px; flex-wrap: wrap; }
.mmi-search {
    flex: 1 1 240px; min-width: 0; padding: 9px 14px; border-radius: 999px; outline: none;
    font-family: inherit; font-size: 13.5px; color: var(--text-primary, #0f172a);
    background: #fff; border: 1px solid rgba(120, 140, 170, .3);
}
.mmi-search:focus { border-color: #1a5fa8; box-shadow: 0 0 0 3px rgba(26, 95, 168, .14); }
.mmi-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none;
    font-size: 13px; font-weight: 600; color: var(--text-secondary, #475569); }
.mmi-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mmi-switch i {
    position: relative; width: 38px; height: 22px; border-radius: 11px; flex: none;
    background: #d1d5db; transition: background .25s ease;
}
.mmi-switch i::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .3s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1));
}
.mmi-switch input:checked + i { background: #1a5fa8; }
.mmi-switch input:checked + i::after { transform: translateX(16px); }
.mmi-switch input:focus-visible + i { outline: 2px solid rgba(26, 95, 168, .5); outline-offset: 2px; }

/* The list */
.mmi-body { flex: 1; overflow-y: auto; padding: 4px 24px 16px; }
.mmi-body::-webkit-scrollbar { width: 10px; }
.mmi-body::-webkit-scrollbar-thumb { background: rgba(120, 140, 170, .3); border-radius: 99px;
    border: 3px solid transparent; background-clip: content-box; }

.mmi-series { margin-top: 14px; }
.mmi-series-head {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: 10px; padding: 8px 2px;
    background: #fbfcfe;
}
.mmi-series-name { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #1a5fa8; }
.mmi-series-n { font-size: 12px; color: var(--text-secondary, #64748b); }
.mmi-all {
    margin-left: auto; padding: 4px 12px; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 700; color: #1a5fa8;
    background: rgba(26, 95, 168, .07); border: 1px solid rgba(26, 95, 168, .25);
}
.mmi-all:hover { background: rgba(26, 95, 168, .13); }

.mmi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.mmi-item {
    position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px;
    padding: 8px 12px; border-radius: 11px; cursor: pointer;
    background: #fff; border: 1px solid rgba(120, 140, 170, .2);
    transition: background .14s ease, border-color .14s ease;
}
.mmi-item:hover { border-color: rgba(26, 95, 168, .38); }
.mmi-item input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mmi-box {
    flex: none; width: 18px; height: 18px; border-radius: 5px;
    border: 1.5px solid rgba(100, 116, 139, .55); background: #fff;
    display: grid; place-items: center;
    transition: background .14s ease, border-color .14s ease;
}
.mmi-box::after {
    content: ""; width: 9px; height: 5px; margin-top: -2px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg) scale(0); transition: transform .2s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1));
}
.mmi-item input:checked + .mmi-box { background: #1a5fa8; border-color: #1a5fa8; }
.mmi-item input:checked + .mmi-box::after { transform: rotate(-45deg) scale(1); }
.mmi-item input:focus-visible + .mmi-box { outline: 2px solid rgba(26, 95, 168, .5); outline-offset: 2px; }
.mmi-item.is-picked { background: rgba(26, 95, 168, .07); border-color: rgba(26, 95, 168, .4); }

/* Wraps rather than cuts off: Motorola names end in their XT number, which is
   the part that tells two of them apart. */
.mmi-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 650; line-height: 1.3;
    color: var(--text-primary, #0f172a); overflow-wrap: anywhere; }
.mmi-year { flex: none; font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--text-secondary, #94a3b8); }
.mmi-tag { flex: none; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.mmi-tag-new  { background: rgba(63, 122, 104, .14); color: #2f6152; }
.mmi-tag-have { background: rgba(142, 144, 149, .16); color: #6b6e74; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }

/* Already in Manage Models: there, but not something to tick. */
.mmi-item.is-have { cursor: default; background: rgba(248, 250, 252, .8); }
.mmi-item.is-have:hover { border-color: rgba(120, 140, 170, .2); }
.mmi-item.is-have .mmi-name { color: var(--text-secondary, #64748b); font-weight: 600; }
.mmi-item.is-have input:checked + .mmi-box { background: #b8bcc4; border-color: #b8bcc4; }
.mmi-item.is-have .mmi-name, .mmi-item.is-have .mmi-year { opacity: .75; }

.mmi-msg { padding: 60px 20px; text-align: center; font-size: 14px; color: var(--text-secondary, #64748b); }
.mmi-spin {
    display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -3px;
    border: 2px solid rgba(26, 95, 168, .2); border-top-color: #1a5fa8; border-radius: 50%;
    animation: mmi-spin .8s linear infinite;
}
@keyframes mmi-spin { to { transform: rotate(360deg); } }

.mmi-unmatched {
    margin: 0 24px; padding: 10px 14px; border-radius: 11px;
    font-size: 12.5px; color: var(--text-secondary, #475569);
    background: rgba(142, 144, 149, .1);
}
.mmi-unmatched b { color: var(--text-primary, #0f172a); }

/* Foot */
.mmi-foot {
    display: flex; align-items: center; gap: 10px; padding: 14px 24px;
    border-top: 1px solid rgba(120, 140, 170, .2); margin-top: 12px; background: #fff;
}
.mmi-count { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-secondary, #475569); }
.mmi-btn {
    padding: 10px 20px; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text-primary, #0f172a);
    background: #fff; border: 1px solid rgba(120, 140, 170, .35);
}
.mmi-btn:hover { border-color: rgba(26, 95, 168, .45); }
.mmi-btn:disabled { opacity: .5; cursor: default; }
.mmi-go {
    color: #fff; border: none;
    background: linear-gradient(160deg, #3579cc 0%, #1a5fa8 55%, #154c88 100%);
    box-shadow: 0 6px 14px rgba(26, 95, 168, .3), inset 0 1px 0 rgba(255, 255, 255, .34);
}
.mmi-go:disabled { box-shadow: none; }

@media (max-width: 700px) {
    .mmi-overlay { padding: 0; }
    .mmi-sheet { height: 100vh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mmi-overlay, .mmi-sheet, .mmi-overlay.is-open .mmi-sheet, .mmi-switch i, .mmi-switch i::after, .mmi-box::after { transition: none; }
    .mmi-spin { animation-duration: 2s; }
}