/* =====================================================
   AXIS - Mass Transfer of Records
   Scoped under .mass-transfer
   ===================================================== */

.mass-transfer { display: flex; flex-direction: column; gap: var(--spacing-lg); }

/* ---- toolbar / hero ---- */
.mt-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--spacing-md); flex-wrap: wrap;
    padding: 18px 22px; border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #0b225e 0%, #0c66ba 100%);
    color: #fff; box-shadow: 0 10px 28px rgba(11,34,94,.20);
}
.mt-toolbar-titles h3 { margin: 0; font-size: 20px; font-weight: 700; color: #fff; letter-spacing: .2px; }
.mt-toolbar-titles p { margin: 4px 0 0; color: rgba(255,255,255,.78); font-size: 13.5px; }
.mt-toolbar-actions { display: flex; gap: var(--spacing-sm); }
.mt-toolbar .btn-secondary {
    background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff;
    backdrop-filter: blur(4px);
}
.mt-toolbar .btn-secondary:hover { background: rgba(255,255,255,.24); }
.mt-toolbar .btn-primary { background: #fff; color: #0b225e; border-color: #fff; }
.mt-toolbar .btn-primary:hover { background: #eef4ff; }
.mt-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px;
    background: #fff; color: #0b225e; border-radius: var(--radius-full);
    font-size: 12px; font-weight: 800;
}

.mt-preview-note {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: var(--radius-md);
    background: rgba(12,102,186,.07); color: var(--primary-700, #0c66ba);
    font-size: 13px; border: 1px solid rgba(12,102,186,.16);
}
.mt-preview-note .material-icons-outlined { font-size: 18px; }

/* ---- two-panel grid ---- */
.mt-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--spacing-lg); align-items: start; }
.mt-config, .mt-projection { display: flex; flex-direction: column; gap: var(--spacing-md); }

.mt-card {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); padding: 20px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.035);
}
.mt-card-head {
    display: flex; align-items: center; gap: 9px;
    font-weight: 700; color: var(--text-primary); font-size: 15px;
    margin-bottom: 16px;
}
.mt-card-head .material-icons-outlined { font-size: 20px; color: var(--primary-600); }
.mt-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: var(--radius-full);
    background: linear-gradient(135deg, #0c66ba, #0b225e); color: #fff; font-size: 13px; font-weight: 700;
    box-shadow: 0 2px 6px rgba(12,102,186,.3);
}

/* ---- users / pickers ---- */
.mt-users { display: flex; flex-direction: column; gap: 14px; position: relative; }
.mt-user {
    border: 1.5px solid var(--border-color); border-radius: var(--radius-md);
    padding: 14px 14px 14px 16px; position: relative; transition: border-color .15s, box-shadow .15s;
}
.mt-user::before {
    content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 4px;
}
.mt-user-from::before { background: #f87171; }
.mt-user-to::before { background: #34d399; }
.mt-user-from { background: rgba(239,68,68,.025); }
.mt-user-to { background: rgba(34,197,94,.03); }
.mt-user.picking { border-color: var(--primary-600); box-shadow: 0 0 0 3px rgba(12,102,186,.12); }
.mt-user-tag {
    position: absolute; top: -9px; left: 14px; padding: 1px 9px;
    font-size: 10px; font-weight: 800; letter-spacing: .6px; border-radius: var(--radius-full);
    background: var(--bg-primary); border: 1px solid var(--border-color);
}
.mt-user-from .mt-user-tag { color: #dc2626; border-color: rgba(239,68,68,.4); }
.mt-user-to .mt-user-tag { color: #16a34a; border-color: rgba(34,197,94,.45); }

.mt-picker-control {
    width: 100%; display: flex; align-items: center; gap: 10px;
    background: transparent; border: none; cursor: pointer; text-align: left;
    padding: 2px 0; min-height: 44px; color: var(--text-primary);
}
.mt-picker-placeholder {
    display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 14px; flex: 1;
}
.mt-picker-placeholder .material-icons-outlined { font-size: 20px; color: var(--text-tertiary, #94a3b8); }
.mt-picker-caret { margin-left: auto; color: var(--text-tertiary, #94a3b8); font-size: 20px; flex: 0 0 auto; }

.mt-picker-selected { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.mt-picker-selected-text { min-width: 0; flex: 1; }
.mt-picker-name {
    display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700;
    color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-picker-sub {
    display: flex; align-items: center; gap: 8px; margin-top: 3px;
    font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-picker-total {
    display: flex; flex-direction: column; align-items: flex-end; margin-left: 6px; flex: 0 0 auto;
    border-left: 1px solid var(--border-color); padding-left: 12px;
}
.mt-picker-total b { font-size: 17px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.mt-picker-total span { font-size: 10.5px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; }

.mt-id {
    font-weight: 700; color: var(--primary-700, #0c66ba); font-size: 12px;
    background: rgba(12,102,186,.08); padding: 1px 7px; border-radius: var(--radius-full);
}
.mt-email { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }

.mt-role-pill {
    font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-full);
    background: var(--bg-tertiary, #eef2f7); color: var(--text-secondary); text-transform: none; letter-spacing: 0;
}
.mt-role-pill.inactive { background: rgba(239,68,68,.1); color: #dc2626; }

/* picker dropdown */
.mt-picker-backdrop { position: fixed; inset: 0; z-index: 900; }
.mt-picker-pop {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 901;
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(15,23,42,.18);
    overflow: hidden; animation: mtPop .12s ease;
}
@keyframes mtPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mt-picker-search {
    display: flex; align-items: center; gap: 8px; padding: 11px 14px;
    border-bottom: 1px solid var(--border-color); background: var(--bg-secondary);
}
.mt-picker-search .material-icons-outlined { font-size: 19px; color: var(--text-tertiary, #94a3b8); }
.mt-picker-search input {
    flex: 1; border: none; background: transparent; outline: none;
    font-size: 14px; color: var(--text-primary);
}
.mt-picker-results { max-height: 320px; overflow-y: auto; padding: 6px; }
.mt-picker-row {
    width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 11px;
    border: none; background: transparent; cursor: pointer; text-align: left;
    border-radius: var(--radius-sm); transition: background .1s;
}
.mt-picker-row:hover { background: var(--bg-secondary); }
.mt-picker-row.sel { background: rgba(12,102,186,.08); }
.mt-picker-row.inactive { opacity: .62; }
.mt-picker-row-text { flex: 1; min-width: 0; }
.mt-picker-row-name {
    display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.mt-picker-row-sub { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
.mt-picker-row-count {
    font-size: 13px; font-weight: 700; color: var(--text-secondary); flex: 0 0 auto;
    min-width: 30px; text-align: right;
}
.mt-picker-check { color: var(--primary-600); font-size: 20px; flex: 0 0 auto; }
.mt-picker-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 28px 16px; color: var(--text-secondary); font-size: 13px; text-align: center;
}
.mt-picker-empty .material-icons-outlined { font-size: 30px; color: var(--text-tertiary, #cbd5e1); }

.mt-swap {
    align-self: center; width: 36px; height: 36px; border-radius: var(--radius-full);
    border: 1px solid var(--border-color); background: var(--bg-primary);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--text-secondary); margin: -6px 0; box-shadow: 0 1px 3px rgba(15,23,42,.08); z-index: 2;
    transition: transform .15s, color .15s, border-color .15s;
}
.mt-swap:hover { border-color: var(--primary-600); color: var(--primary-600); transform: rotate(180deg); }

/* ---- module rows ---- */
.mt-modules { display: flex; flex-direction: column; gap: 10px; }
.mt-module {
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    /* overflow stays visible so the filter dropdowns (.mt-ms-pop, absolutely
       positioned below their button) can extend past the module's bottom edge
       instead of being clipped. The rounded-corner background is unaffected
       (backgrounds clip to the border-radius regardless of overflow). */
    overflow: visible; transition: opacity .15s, border-color .15s, box-shadow .15s; background: var(--bg-primary);
}
.mt-module:hover { border-color: var(--primary-300, #bcd6f0); box-shadow: 0 4px 12px rgba(15,23,42,.05); }
.mt-module.off { opacity: .55; }
.mt-module.off:hover { box-shadow: none; }
.mt-module-main { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer; }
.mt-module-main input[type="checkbox"] { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--primary-600); }
.mt-module-icon {
    color: var(--primary-600); font-size: 22px; flex: 0 0 auto;
    background: rgba(12,102,186,.08); border-radius: var(--radius-sm); padding: 7px;
}
.mt-module-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.mt-module-text strong { font-size: 14.5px; color: var(--text-primary); }
.mt-module-text > span { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.mt-rider {
    display: flex !important; align-items: flex-start; gap: 4px;
    color: var(--text-tertiary, #94a3b8) !important; font-style: italic; margin-top: 2px;
}
.mt-rider .material-icons-outlined { font-size: 14px; margin-top: 1px; }
.mt-module-count {
    flex: 0 0 auto; font-size: 20px; font-weight: 800; color: var(--text-primary);
    min-width: 46px; text-align: right;
}
.mt-scope { padding: 10px 16px 14px 50px; border-top: 1px dashed var(--border-color); }
.mt-scope select {
    width: 100%; padding: 8px 11px; border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); font-size: 13px; background: var(--bg-secondary);
    color: var(--text-primary); cursor: pointer;
}

/* ---- excluded ---- */
.mt-excluded { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.mt-excluded-title {
    display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); margin-bottom: 10px;
}
.mt-excluded-title .material-icons-outlined { font-size: 16px; }
.mt-excluded-row { display: flex; gap: 11px; padding: 7px 0; }
.mt-excluded-row .material-icons-outlined { font-size: 18px; color: var(--text-tertiary, #94a3b8); margin-top: 1px; }
.mt-excluded-row div { display: flex; flex-direction: column; gap: 1px; }
.mt-excluded-row strong { font-size: 13px; color: var(--text-primary); }
.mt-excluded-row span { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }

/* ---- options ---- */
.mt-opt { display: flex; gap: 11px; padding: 9px 0; cursor: pointer; }
.mt-opt input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--primary-600); }
.mt-opt div { display: flex; flex-direction: column; gap: 1px; }
.mt-opt strong { font-size: 13.5px; color: var(--text-primary); }
.mt-opt span { font-size: 12px; color: var(--text-secondary); }

/* ---- projection / impact ---- */
.mt-projection { position: sticky; top: var(--spacing-md); }
.mt-impact-route {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 12px; margin-bottom: 8px; background: var(--bg-secondary);
    border-radius: var(--radius-md);
}
.mt-impact-route-user { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; }
.mt-impact-route-user.from { color: #dc2626; }
.mt-impact-route-user.to { color: #16a34a; }
.mt-impact-route-arrow { color: var(--text-tertiary, #94a3b8); font-size: 20px; }
.mt-impact-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 40px 16px; color: var(--text-secondary); text-align: center; font-size: 13px;
}
.mt-impact-empty .material-icons-outlined { font-size: 40px; color: var(--text-tertiary, #cbd5e1); }
.mt-impact-row { padding: 13px 2px; border-bottom: 1px solid var(--border-color); }
.mt-impact-row:last-child { border-bottom: none; }
.mt-impact-label {
    display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px;
    color: var(--text-primary); margin-bottom: 9px;
}
.mt-impact-label .material-icons-outlined { font-size: 18px; color: var(--primary-600); }
.mt-impact-move {
    margin-left: auto; font-size: 12px; font-weight: 800; color: #16a34a;
    background: rgba(34,197,94,.1); padding: 1px 9px; border-radius: var(--radius-full);
}
.mt-impact-line { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; margin: 5px 0 4px; }
.mt-impact-who { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-weight: 600; }
.mt-impact-who .avatar { flex: 0 0 auto; }
.mt-impact-vals b { color: var(--text-primary); }
.mt-impact-vals b.down { color: #dc2626; }
.mt-impact-vals b.up { color: #16a34a; }

/* ---- bars ---- */
.mt-bar {
    height: 7px; background: var(--bg-tertiary, #eef2f7); border-radius: var(--radius-full);
    overflow: hidden; display: flex;
}
.mt-bar.sm { height: 5px; }
.mt-bar.lg { height: 11px; }
.mt-bar-fill { height: 100%; transition: width .3s ease; }
.mt-bar-fill.from { background: linear-gradient(90deg, #f87171, #ef4444); }
.mt-bar-fill.to { background: #cbd5e1; }
.mt-bar-fill.to-add { background: linear-gradient(90deg, #34d399, #22c55e); }
.mt-bar-fill.prog { background: linear-gradient(90deg, #0c66ba, #0b225e); }

/* ---- summary / start ---- */
.mt-summary-card {
    background: linear-gradient(155deg, #f8fbff 0%, #eef4fc 100%);
    border: 1px solid rgba(12,102,186,.18);
    border-radius: var(--radius-lg); padding: 24px; text-align: center;
    box-shadow: 0 8px 24px rgba(12,102,186,.06);
}
.mt-summary-num {
    font-size: 46px; font-weight: 800; line-height: 1;
    background: linear-gradient(135deg, #0c66ba, #0b225e); -webkit-background-clip: text;
    background-clip: text; -webkit-text-fill-color: transparent;
}
.mt-summary-lbl { font-size: 13px; color: var(--text-secondary); margin-top: 8px; }
.mt-start {
    width: 100%; justify-content: center; margin-top: 18px; font-size: 15px; padding: 13px; font-weight: 700;
    box-shadow: 0 6px 18px rgba(12,102,186,.28);
}
.mt-start.disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.mt-hint { margin-top: 10px; font-size: 12.5px; }
.mt-hint.warn { color: #b45309; }

/* ---- jobs view ---- */
.mt-section-head {
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary);
    margin: 4px 0 -2px;
}
.mt-section-head.between { justify-content: space-between; }
.mt-section-head > span { display: flex; align-items: center; gap: 8px; }
.mt-section-head .material-icons-outlined { font-size: 17px; }
.mt-section-head .btn-text { text-transform: none; letter-spacing: 0; font-weight: 600; }
.mt-live-dot {
    width: 9px; height: 9px; border-radius: 50%; background: #22c55e; flex: 0 0 auto;
    box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: mtPulse 1.6s infinite;
}
@keyframes mtPulse {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
    70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.mt-jobs { display: flex; flex-direction: column; gap: var(--spacing-md); }
.mt-job-party { display: inline-flex; align-items: center; gap: 7px; }
.mt-job-party.from b { color: #dc2626; }
.mt-job-party.to b { color: #16a34a; }

.mt-job-meta {
    display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px;
    font-size: 12px; color: var(--text-secondary);
}
.mt-job-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.mt-job-meta .material-icons-outlined { font-size: 15px; }
.mt-meta-flag { color: #b45309; font-weight: 600; }

.mt-eta { color: var(--primary-700, #0c66ba); font-weight: 700; }
.mt-job-activity {
    margin-top: 8px; font-size: 12px; color: var(--text-secondary);
    display: flex; align-items: center; gap: 6px;
}
.mt-job-activity::before {
    content: ''; width: 12px; height: 12px; border: 2px solid var(--bg-tertiary, #eef2f7);
    border-top-color: var(--primary-600); border-radius: 50%; animation: spin 0.7s linear infinite;
}
.mt-scope-tag {
    display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
    font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--primary-700, #0c66ba);
    background: rgba(12,102,186,.08); padding: 1px 7px; border-radius: var(--radius-full); margin-left: 6px;
}
.mt-scope-tag .material-icons-outlined { font-size: 12px !important; }
.mt-bar-fill.prog.live {
    background-image: linear-gradient(90deg, #0c66ba, #0b225e),
        linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    background-size: 100% 100%, 40% 100%;
    background-repeat: no-repeat;
    animation: mtShimmer 1.2s linear infinite;
}
@keyframes mtShimmer { 0% { background-position: 0 0, -40% 0; } 100% { background-position: 0 0, 140% 0; } }

.mt-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 56px 16px; color: var(--text-secondary);
}
.mt-empty .material-icons-outlined { font-size: 48px; color: var(--text-tertiary, #cbd5e1); }

.mt-job-card {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); padding: 20px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.035);
}
.mt-job-card[data-status="running"] { border-color: rgba(12,102,186,.4); box-shadow: 0 0 0 3px rgba(12,102,186,.07), 0 8px 24px rgba(12,102,186,.08); }
.mt-job-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 10px; }
.mt-job-route { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; color: var(--text-primary); flex-wrap: wrap; }
.mt-job-route .material-icons-outlined { font-size: 18px; color: var(--text-secondary); }
.mt-job-from { color: #dc2626; }
.mt-job-to { color: #16a34a; }
.mt-status {
    font-size: 11.5px; font-weight: 800; padding: 4px 11px; border-radius: var(--radius-full);
    text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
}
.mt-status-running { background: rgba(12,102,186,.12); color: var(--primary-700, #0c66ba); }
.mt-status-queued { background: var(--bg-tertiary, #eef2f7); color: var(--text-secondary); }
.mt-status-ok { background: rgba(34,197,94,.14); color: #15803d; }
.mt-status-warn { background: rgba(245,158,11,.16); color: #b45309; }
.mt-status-fail { background: rgba(239,68,68,.14); color: #dc2626; }
.mt-status-cancel { background: var(--bg-tertiary, #eef2f7); color: var(--text-tertiary, #94a3b8); }

.mt-job-overall { margin-bottom: 16px; }
.mt-job-overall-meta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-secondary); margin-top: 7px; font-weight: 600; }
.mt-job-modules { display: flex; flex-direction: column; gap: 12px; }
.mt-job-module-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-primary); margin-bottom: 6px; }
.mt-job-module-top span:first-child { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.mt-job-module-top .material-icons-outlined { font-size: 16px; color: var(--text-secondary); }
.mt-fail { color: #dc2626; font-style: normal; font-weight: 700; }

.mt-job-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color); flex-wrap: wrap;
}
.mt-job-time { font-size: 12px; color: var(--text-tertiary, #94a3b8); }
.mt-job-foot-actions { display: flex; align-items: center; gap: 8px; }
.mt-fail-pill {
    display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700;
    color: #b45309; background: rgba(245,158,11,.14); padding: 4px 11px; border-radius: var(--radius-full);
}
.mt-fail-pill .material-icons-outlined { font-size: 15px; }
.btn-text.danger { color: #dc2626; }

/* ---- history (paginated accordion) ---- */
.mass-transfer .btn-sm { padding: 6px 12px; font-size: 13px; }
.mass-transfer .btn-sm .material-icons-outlined { font-size: 17px; }
.mt-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 19px;
    padding: 0 7px; margin-left: 4px; border-radius: var(--radius-full);
    background: var(--bg-tertiary, #eef2f7); color: var(--text-secondary); font-size: 11.5px; font-weight: 700;
    text-transform: none; letter-spacing: 0;
}

.mt-history { display: flex; flex-direction: column; gap: 8px; }
.mt-hitem {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-left: 3px solid var(--border-color); border-radius: var(--radius-md);
    overflow: hidden; transition: box-shadow .15s, border-color .15s;
}
.mt-hitem:hover { box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.mt-hitem.open { box-shadow: 0 6px 20px rgba(15,23,42,.08); }
.mt-hitem.ok { border-left-color: #22c55e; }
.mt-hitem.warn { border-left-color: #f59e0b; }
.mt-hitem.fail { border-left-color: #ef4444; }
.mt-hitem.cancel { border-left-color: #cbd5e1; }

.mt-hitem-head {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 16px;
    background: transparent; border: none; cursor: pointer; text-align: left; color: var(--text-primary);
}
.mt-hitem-head:hover { background: var(--bg-secondary); }
.mt-hitem-status { flex: 0 0 auto; display: flex; }
.mt-hitem-status .material-icons-outlined { font-size: 22px; }
.mt-hitem.ok .mt-hitem-status { color: #16a34a; }
.mt-hitem.warn .mt-hitem-status { color: #d97706; }
.mt-hitem.fail .mt-hitem-status { color: #dc2626; }
.mt-hitem.cancel .mt-hitem-status { color: #94a3b8; }

.mt-hitem-route { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 14px; flex-wrap: wrap; }
.mt-hitem-route b { font-weight: 700; white-space: nowrap; }
.mt-hitem-route b.from { color: #dc2626; }
.mt-hitem-route b.to { color: #16a34a; }
.mt-hitem-arrow { color: var(--text-tertiary, #94a3b8); font-size: 17px; }

.mt-hitem-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.mt-hitem-moved { font-size: 13px; color: var(--text-secondary); }
.mt-hitem-moved b { color: var(--text-primary); font-weight: 800; }
.mt-hitem-time { font-size: 12px; color: var(--text-tertiary, #94a3b8); white-space: nowrap; }
.mt-hitem-caret { color: var(--text-tertiary, #94a3b8); font-size: 22px; transition: transform .18s; }
.mt-hitem.open .mt-hitem-caret { transform: rotate(180deg); }

.mt-hitem-body { padding: 4px 16px 16px 52px; border-top: 1px solid var(--border-color); }
.mt-hitem-body .mt-job-meta { margin: 12px 0; }
.mt-hitem-error {
    display: flex; align-items: flex-start; gap: 7px; margin: 0 0 12px;
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.2);
    color: #b91c1c; font-size: 12.5px; line-height: 1.5;
}
.mt-hitem-error .material-icons-outlined { font-size: 17px; flex: 0 0 auto; }

.mt-hitem-modules { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mt-mchip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--radius-full); font-size: 12.5px; color: var(--text-secondary);
}
.mt-mchip .material-icons-outlined { font-size: 16px; color: var(--primary-600); }
.mt-mchip b { color: var(--text-primary); font-weight: 800; }
.mt-mchip-flt { font-size: 14px !important; color: var(--text-tertiary, #94a3b8) !important; margin-left: 1px; }

.mt-hitem-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.mt-pager {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-top: 14px; padding: 6px 0;
}
.mt-pager-info { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.mt-pager .btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ============ granular per-module filters (CHG-496) ============ */
.mt-filters { padding: 12px 16px 14px 50px; border-top: 1px dashed var(--border-color); }
.mt-filters-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mt-filters-title { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); }
.mt-filters-title .material-icons-outlined { font-size: 15px; }
.mt-filters-badge { font-size: 11px; font-weight: 700; color: var(--primary-700, #0c66ba); background: rgba(12,102,186,.1); padding: 1px 8px; border-radius: var(--radius-full); }
.mt-filters-hint { font-size: 12px; color: var(--text-tertiary, #94a3b8); font-style: italic; }
.mt-filters-clear { margin-left: auto; border: none; background: transparent; color: var(--primary-600); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.mt-filters-clear:hover { text-decoration: underline; }
.mt-filters-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* multi-select control */
.mt-ms { position: relative; }
.mt-ms-btn { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-primary); font-size: 13px; cursor: pointer; }
.mt-ms-btn:hover { border-color: var(--primary-300, #bcd6f0); }
.mt-ms.has-sel .mt-ms-btn { border-color: var(--primary-600); background: rgba(12,102,186,.06); }
.mt-ms.open .mt-ms-btn { border-color: var(--primary-600); box-shadow: 0 0 0 3px rgba(12,102,186,.1); }
.mt-ms-ico { font-size: 17px !important; color: var(--text-tertiary, #94a3b8); }
.mt-ms.has-sel .mt-ms-ico { color: var(--primary-600); }
.mt-ms-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.mt-ms-count { font-size: 11px; font-weight: 700; color: #fff; background: var(--primary-600); border-radius: var(--radius-full); min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; }
.mt-ms-caret { font-size: 18px !important; color: var(--text-tertiary, #94a3b8); margin-left: 2px; }
.mt-ms-backdrop { position: fixed; inset: 0; z-index: 900; }
.mt-ms-pop { position: absolute; top: calc(100% + 5px); left: 0; z-index: 901; min-width: 240px; max-width: 320px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(15,23,42,.18); overflow: hidden; animation: mtPop .12s ease; }
.mt-ms-search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); }
.mt-ms-search .material-icons-outlined { font-size: 18px; color: var(--text-tertiary, #94a3b8); }
.mt-ms-search input { flex: 1; border: none; background: transparent; outline: none; font-size: 13.5px; color: var(--text-primary); }
.mt-ms-list { max-height: 300px; overflow-y: auto; padding: 5px; }
.mt-ms-opt { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: none; background: transparent; cursor: pointer; text-align: left; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--text-primary); }
.mt-ms-opt:hover { background: var(--bg-secondary); }
.mt-ms-opt.sel { color: var(--primary-700, #0c66ba); font-weight: 600; }
.mt-ms-opt.all { border-bottom: 1px solid var(--border-color); border-radius: 0; margin-bottom: 3px; }
.mt-ms-opt.grouped { padding-left: 22px; }
.mt-ms-chk { font-size: 19px !important; color: var(--text-tertiary, #cbd5e1); flex: 0 0 auto; }
.mt-ms-opt.sel .mt-ms-chk { color: var(--primary-600); }
.mt-ms-group { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); margin-top: 3px; }
.mt-ms-empty { padding: 18px; text-align: center; font-size: 13px; color: var(--text-secondary); }

/* created-date range */
.mt-date { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-secondary); }
.mt-date.has-sel { border-color: var(--primary-600); background: rgba(12,102,186,.06); }
.mt-date-ico { font-size: 17px !important; color: var(--text-tertiary, #94a3b8); }
.mt-date.has-sel .mt-date-ico { color: var(--primary-600); }
.mt-date-in { border: none; background: transparent; outline: none; font-size: 12.5px; color: var(--text-primary); cursor: pointer; font-family: inherit; width: 116px; }
.mt-date-sep { color: var(--text-tertiary, #94a3b8); font-size: 12px; }
.mt-date-clear { border: none; background: transparent; cursor: pointer; display: flex; padding: 0; color: var(--text-tertiary, #94a3b8); }
.mt-date-clear .material-icons-outlined { font-size: 16px; }
.mt-date-clear:hover { color: var(--danger, #dc2626); }

.mt-module-oftotal { font-size: 12px; font-weight: 600; color: var(--text-tertiary, #94a3b8); }

/* history: "filters applied" block */
.mt-hfilters { margin-top: 12px; padding: 12px 14px; background: var(--bg-secondary); border-radius: var(--radius-md); }
.mt-hfilters-title { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); margin-bottom: 9px; }
.mt-hfilters-title .material-icons-outlined { font-size: 15px; }
.mt-hfilter-row { display: flex; gap: 12px; padding: 7px 0; align-items: flex-start; }
.mt-hfilter-row + .mt-hfilter-row { border-top: 1px dashed var(--border-color); }
.mt-hfilter-mod { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-primary); flex: 0 0 132px; }
.mt-hfilter-mod .material-icons-outlined { font-size: 16px; color: var(--primary-600); }
.mt-hfilter-pills { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.mt-fpill { font-size: 12px; color: var(--text-secondary); background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: 2px 9px; }
.mt-fpill em { font-style: normal; font-weight: 700; color: var(--text-primary); margin-right: 3px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
    .mt-grid { grid-template-columns: 1fr; }
    .mt-projection { position: static; }
    .mt-toolbar { padding: 16px; }
    .mt-filters { padding-left: 16px; }
    .mt-ms-text { max-width: 120px; }
}
@media (max-width: 680px) {
    .mt-hitem-head { flex-wrap: wrap; }
    .mt-hitem-meta { width: 100%; padding-left: 34px; justify-content: flex-start; gap: 12px; }
    .mt-hitem-body { padding-left: 16px; }
}