/* Mission Control pages (Dashboard, Decide, Board, Fleet). Built on app.css tokens. */
:root { --mc-purple: #7552d6; --mc-blue: #2f6fdb; --mc-amber: var(--warning); }
:root[data-theme="dark"] { --mc-purple: #a78bfa; --mc-blue: #6aa8ff; }

.mc-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.mc-top h1 { margin: 0; }
.mc-health { display: flex; align-items: center; gap: 14px; }
.mc-health p { margin: 3px 0 0; color: var(--text-soft); font-size: 13px; }
.mc-pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--green); flex: none; animation: mc-pulse 1.8s infinite; }
.mc-pulse.warn { background: var(--warning); animation: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning) 18%, transparent); }
.mc-pulse.off { background: var(--text-dim); animation: none; }
@keyframes mc-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.mc-chips { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.mc-chip { border: 1px solid var(--line); background: var(--surface-1); color: var(--text-soft); border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mc-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.mc-stats { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.mc-stat { border: 1px solid var(--line); background: var(--surface-1); border-radius: 12px; padding: 12px 16px; min-width: 150px; text-decoration: none; color: inherit; }
.mc-stat b { font-size: 24px; display: block; line-height: 1.1; }
.mc-stat small { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.mc-stat .sub { display: block; font-size: 11.5px; color: var(--text-dim); text-transform: none; letter-spacing: 0; font-weight: 500; margin-top: 2px; }
.mc-stat.good b { color: var(--green); } .mc-stat.warn b { color: var(--warning); } .mc-stat.link { cursor: pointer; }

.mc-card { border: 1px solid var(--line); background: var(--surface-1); border-radius: 14px; overflow: hidden; }
.mc-card-h { padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.mc-card-h small { color: var(--text-dim); font-weight: 500; font-size: 12px; }
.mc-card-h a { margin-left: auto; font-size: 12px; color: var(--accent); font-weight: 600; text-decoration: none; }
.mc-card-h .material-symbols-outlined { font-size: 18px; }
.mc-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-bottom: 16px; }
.mc-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .mc-grid, .mc-three { grid-template-columns: 1fr; } }

.mc-log { max-height: 560px; overflow: auto; }
.mc-log-h { position: sticky; top: 0; background: var(--surface-2); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); padding: 6px 16px; z-index: 1; }
.mc-li { display: grid; grid-template-columns: 58px 24px 1fr auto; gap: 10px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.mc-li .tm { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); }
.mc-li small { color: var(--text-dim); margin-left: 6px; }
.mc-li .material-symbols-outlined { font-size: 18px; }
.mc-k-done { color: var(--green); } .mc-k-moved { color: var(--accent); } .mc-k-created { color: var(--mc-purple); }

.mc-quiet { margin: 12px 14px 4px; border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); background: color-mix(in srgb, var(--warning) 10%, transparent); border-radius: 12px; padding: 10px 12px; }
.mc-quiet h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--warning); display: flex; gap: 6px; align-items: center; }
.mc-quiet div { font-size: 12.5px; color: var(--text-soft); padding: 2px 0; display: flex; gap: 8px; align-items: center; }
.mc-ag { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.mc-ag.dim { opacity: .6; }
.mc-ag .nm { font-weight: 700; font-size: 13.5px; } .mc-ag .nm small { font-weight: 500; color: var(--text-dim); margin-left: 6px; font-size: 11.5px; }
.mc-ag .dt { font-size: 12px; color: var(--text-soft); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-cnt { text-align: right; } .mc-cnt b { font-size: 20px; display: block; line-height: 1; } .mc-cnt small { font-size: 10.5px; color: var(--text-dim); }
.mc-spark { display: flex; gap: 2px; align-items: flex-end; height: 18px; margin-top: 5px; justify-content: flex-end; }
.mc-spark i { width: 5px; border-radius: 2px; background: var(--accent); min-height: 2px; } .mc-spark i.z { background: var(--line); }

.mc-state { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 2px 8px; margin-top: 4px; }
.mc-state .material-symbols-outlined { font-size: 14px; } .mc-state small { font-weight: 500; opacity: .8; }
.mc-tone-green { color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); }
.mc-tone-purple { color: var(--mc-purple); background: color-mix(in srgb, var(--mc-purple) 13%, transparent); }
.mc-tone-blue { color: var(--mc-blue); background: color-mix(in srgb, var(--mc-blue) 13%, transparent); }
.mc-tone-accent { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.mc-tone-amber { color: var(--warning); background: color-mix(in srgb, var(--warning) 13%, transparent); }
.mc-tone-dim { color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 13%, transparent); }

.mc-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.mc-row .t { font-size: 13px; font-weight: 600; line-height: 1.3; }
.mc-row .m { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mc-row .ck { color: var(--green); font-size: 20px; flex: none; }
.mc-rank { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); font-family: var(--mono); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.mc-bar { height: 5px; border-radius: 3px; background: var(--line-soft); overflow: hidden; margin-top: 6px; }
.mc-bar i { display: block; height: 100%; background: var(--accent); } .mc-bar.stale i { background: var(--warning); }
.mc-pri { font-family: var(--mono); font-size: 11px; font-weight: 700; } .mc-pri.hot { color: var(--danger); }
.mc-empty { padding: 18px 16px; color: var(--text-dim); font-size: 13px; }
.mc-source { margin-top: 14px; font-size: 12px; color: var(--text-dim); display: flex; gap: 6px; align-items: center; }
.mc-source .material-symbols-outlined { font-size: 16px; }

.mc-av { border-radius: 8px; display: inline-grid; place-items: center; font-weight: 700; color: #fff; flex: none; vertical-align: middle; }
.mc-av-agent { background: linear-gradient(135deg, #5b6b7c, #3f4e5d); }
.mc-av-desktop { background: linear-gradient(135deg, #5096b3, #2c5d72); }
.mc-av-human { background: linear-gradient(135deg, #e6a23c, #b76e1c); border-radius: 50%; }

/* Board */
.mc-table { width: 100%; border-collapse: collapse; }
.mc-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 600; }
.mc-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; vertical-align: middle; }
.mc-table tr.grp td { background: var(--surface-2); font-size: 11.5px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; padding: 8px 12px; }
.mc-turn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .mc-turn.human { color: var(--warning); }
.mc-steps { display: inline-flex; align-items: center; gap: 3px; } .mc-steps i { width: 14px; height: 5px; border-radius: 3px; background: var(--line); }
.mc-steps i.done { background: var(--accent); } .mc-steps i.cur { background: var(--warning); } .mc-steps span { margin-left: 8px; font-size: 12px; color: var(--text-soft); }
.mc-select { border: 1px solid var(--line); background: var(--surface-1); color: var(--text); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12.5px; }

/* Fleet */
.mc-fleet { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.mc-dev-h { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.mc-dev-h .nm { font-weight: 700; } .mc-dev-h .hs { font-size: 11.5px; color: var(--text-dim); }
.mc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; } .mc-dot.off { background: var(--text-dim); }

/* Decide */
.mc-decide { display: grid; grid-template-columns: 420px 1fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface-1); min-height: 520px; }
.mc-dlist { border-right: 1px solid var(--line); overflow: auto; max-height: 72vh; }
.mc-drow { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.mc-drow:hover { background: var(--surface-hover); } .mc-drow.on { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.mc-drow .t { font-weight: 600; font-size: 13.5px; } .mc-drow .m { font-size: 11.5px; color: var(--text-dim); margin-top: 5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mc-ddetail { padding: 24px 30px; overflow: auto; max-height: 72vh; }
.mc-ddetail h2 { margin: 6px 0 8px; font-size: 22px; }
.mc-why { font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; white-space: pre-wrap; }
.mc-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.mc-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.mc-box h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.mc-box p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-soft); }
.mc-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 16px; }
.mc-btn { border: 1px solid var(--line); background: var(--surface-1); color: var(--text); border-radius: 10px; padding: 9px 15px; font: inherit; font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; }
.mc-btn .material-symbols-outlined { font-size: 18px; }
.mc-btn.approve { background: var(--green); border-color: var(--green); color: #fff; } .mc-btn.deny { color: var(--danger); }
.mc-btn:disabled { opacity: .45; cursor: not-allowed; }
.mc-note { font-size: 12px; color: var(--text-dim); display: flex; gap: 6px; align-items: center; }
@media (max-width: 1000px) { .mc-decide { grid-template-columns: 1fr; } .mc-boxes { grid-template-columns: 1fr; } }

/* Workspace picker on Fleet desktop cards */
.mc-ws-row { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text-dim); }
.mc-ws-row .mc-ws { margin-left: auto; }
.mc-ws { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px; color: var(--text-dim); background: var(--surface-2, var(--surface-1)); }
.mc-ws .material-symbols-outlined { font-size: 16px; }
.mc-ws select { border: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; max-width: 150px; cursor: pointer; }
.mc-ws select:disabled { opacity: .5; }
.mc-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); background: var(--surface-1); border: 1px solid var(--line); color: var(--text); padding: 10px 16px; border-radius: 10px; font-size: 13px; box-shadow: 0 12px 32px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transition: .2s; z-index: 50; }
.mc-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Integrations page */
.int-search { margin-left: auto; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12.5px; width: 220px; font-weight: 400; }
.int-cats { margin: 0; padding: 12px 16px 0; }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 14px 16px; }
.int-grid > .mc-empty { grid-column: 1 / -1; }
.int-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface-1); min-width: 0; }
.int-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; flex: none; }
.int-ic img { width: 20px; height: 20px; object-fit: contain; }
.int-ic .material-symbols-outlined { font-size: 18px; color: var(--accent); }
.int-body { flex: 1; min-width: 0; }
.int-nm { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.int-desc { font-size: 11.5px; color: var(--text-dim); }
.int-tag { font-size: 10px; font-weight: 700; color: var(--text-dim); border: 1px solid var(--line); border-radius: 99px; padding: 1px 6px; margin-left: 4px; }
.int-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; font-size: 12px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; }
.int-btn .material-symbols-outlined { font-size: 16px; }
.int-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Dashboard tools row */
.mc-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.mc-tool { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); background: var(--surface-1); border-radius: 14px; padding: 14px 16px; text-decoration: none; color: inherit; }
.mc-tool:hover { border-color: var(--accent); }
.mc-tool .material-symbols-outlined { font-size: 22px; color: var(--accent); width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; flex: none; }
.mc-tool b { display: block; font-size: 14px; }
.mc-tool small { color: var(--text-dim); font-size: 12px; }
@media (max-width: 900px) { .mc-tools { grid-template-columns: 1fr; } }