/* ============================================================
   Phase D — Missions management UI (#73)
   Dashboard filters, priority chips, the mission detail modal
   and the status timeline. Self-contained (.ms-mn-* namespace)
   so it never depends on the legacy .ms-mission-row grid.
   Theme tokens come from tokens.css (--ms-*). RTL-safe: layout
   uses logical flex/grid and inset-inline, no hard left/right.
   ============================================================ */

/* ---- Toolbar: filters + new-mission action ---- */
.ms-mn-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--ms-panel-border, #1d3850);
    margin-bottom: 6px;
}

.ms-mn-filter {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ms-mn-filter > label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ms-text-dim, #8ba4b8);
}

.ms-mn-select {
    background: var(--ms-bg2, #0d1b29);
    color: var(--ms-text, #e6eef5);
    border: 1px solid var(--ms-panel-border, #1d3850);
    border-radius: 3px;
    padding: 6px 8px;
    font: inherit;
    min-width: 150px;
}

.ms-mn-toolbar-spacer { flex: 1 1 auto; }

/* ---- Mission table (own grid incl. a priority column) ---- */
.ms-mn-table { display: flex; flex-direction: column; }

.ms-mn-row {
    display: grid;
    grid-template-columns:
        minmax(120px, 1.4fr)  /* target track */
        minmax(90px, 1fr)     /* unit         */
        minmax(110px, 1fr)    /* type         */
        90px                  /* priority     */
        110px                 /* status       */
        110px                 /* timing       */
        70px                  /* duration     */
        90px;                 /* actions      */
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border-bottom: 1px solid var(--ms-grid, #173354);
    font-size: 0.9rem;
}

.ms-mn-row.head {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ms-text-dim, #8ba4b8);
    border-bottom: 1px solid var(--ms-panel-border, #1d3850);
}

.ms-mn-row.clickable { cursor: pointer; transition: background 0.12s; }
.ms-mn-row.clickable:hover { background: color-mix(in srgb, var(--ms-accent, #22d3ee) 8%, transparent); }

.ms-mn-track { font-weight: 600; }
.ms-mn-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ---- Type pill (mirrors legacy type-* colours) ---- */
.ms-mn-type {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.ms-mn-type.type-interception { background: rgba(244, 63, 94, 0.15); color: var(--ms-alert, #f43f5e); }
.ms-mn-type.type-pursuit      { background: rgba(251, 191, 36, 0.15); color: var(--ms-warn, #fbbf24); }
.ms-mn-type.type-surveillance { background: rgba(34, 211, 238, 0.15); color: var(--ms-accent, #22d3ee); }
.ms-mn-type.type-patrol       { background: rgba(165, 180, 252, 0.15); color: var(--ms-friend, #a5b4fc); }

/* ---- Priority chip ---- */
.ms-prio {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}
.ms-prio.prio-low      { color: var(--ms-text-dim, #8ba4b8); border-color: var(--ms-text-dim, #8ba4b8); }
.ms-prio.prio-normal   { color: var(--ms-friend, #a5b4fc); border-color: var(--ms-friend, #a5b4fc); }
.ms-prio.prio-high     { color: var(--ms-warn, #fbbf24); border-color: var(--ms-warn, #fbbf24); }
.ms-prio.prio-critical {
    color: var(--ms-alert, #f43f5e);
    border-color: var(--ms-alert, #f43f5e);
    background: rgba(244, 63, 94, 0.12);
}

/* ---- Detail modal ---- */
.ms-mn-detail { min-width: 460px; max-width: 560px; }

.ms-mn-detail-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin-bottom: 4px;
}
.ms-mn-detail-grid dt { color: var(--ms-text-dim, #8ba4b8); font-size: 0.82rem; }
.ms-mn-detail-grid dd { margin: 0; font-size: 0.9rem; }

.ms-mn-section-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ms-text-dim, #8ba4b8);
    margin: 16px 0 8px;
}

/* ---- Status timeline (planner StatusFlow) ---- */
.ms-mn-timeline { display: flex; flex-direction: column; gap: 0; }

.ms-mn-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    padding-bottom: 14px;
}
.ms-mn-step:last-child { padding-bottom: 0; }

.ms-mn-step-dot {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--ms-text-dim, #8ba4b8);
    background: transparent;
    margin-top: 1px;
    z-index: 1;
}
/* connector line between dots */
.ms-mn-step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 6px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: var(--ms-grid, #173354);
}
.ms-mn-step.done .ms-mn-step-dot    { background: var(--ms-ok, #34d399); border-color: var(--ms-ok, #34d399); }
.ms-mn-step.current .ms-mn-step-dot { background: var(--ms-accent, #22d3ee); border-color: var(--ms-accent, #22d3ee); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ms-accent, #22d3ee) 25%, transparent); }
.ms-mn-step.aborted .ms-mn-step-dot { background: var(--ms-alert, #f43f5e); border-color: var(--ms-alert, #f43f5e); }

.ms-mn-step-body { display: flex; flex-direction: column; }
.ms-mn-step-label { font-size: 0.88rem; }
.ms-mn-step.future .ms-mn-step-label { color: var(--ms-text-dim, #8ba4b8); }
.ms-mn-step-time { font-size: 0.76rem; color: var(--ms-text-dim, #8ba4b8); }

/* ---- Notes editor ---- */
.ms-mn-notes-area {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    background: var(--ms-bg2, #0d1b29);
    color: var(--ms-text, #e6eef5);
    border: 1px solid var(--ms-panel-border, #1d3850);
    border-radius: 3px;
    padding: 8px;
    font: inherit;
    box-sizing: border-box;
}
.ms-mn-notes-ro {
    white-space: pre-wrap;
    color: var(--ms-text, #e6eef5);
    font-size: 0.9rem;
}

/* ---- Advance-status action row ---- */
.ms-mn-advance { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Create dialog rows ---- */
.ms-mn-form { display: flex; flex-direction: column; gap: 12px; }
.ms-mn-form-row { display: flex; flex-direction: column; gap: 4px; }
.ms-mn-form-row > label { font-size: 0.8rem; color: var(--ms-text-dim, #8ba4b8); }
.ms-mn-hint { font-size: 0.78rem; color: var(--ms-text-dim, #8ba4b8); font-style: italic; }

/* ms-mission-row spacing fix (status/type gap, RTL) */
.ms-mission-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
.ms-mission-l{display:flex;align-items:center;gap:.45rem;min-width:0;}
.ms-mission-r{display:flex;align-items:center;gap:.45rem;}

/* Click-to-focus: the row flies the map to the mission target and highlights
   its unit→target link. Active row carries an inline-start accent bar. */
.ms-mission-row.clickable{cursor:pointer;transition:background .12s;}
.ms-mission-row.clickable:hover{background:color-mix(in srgb, var(--ms-accent, #22d3ee) 8%, transparent);}
.ms-mission-row.active{background:color-mix(in srgb, var(--ms-accent, #22d3ee) 14%, transparent);box-shadow:inset 2px 0 0 var(--ms-accent, #22d3ee);}