/* Matrix Commander Online. Colors and fonts come from /assets/site.css. */
[hidden] { display: none !important; }

body.online { min-height: 100vh; display: flex; flex-direction: column; }
.support-note { color: var(--muted); font-size: 0.85rem; margin-left: auto; }
.narrow-note { display: none; color: var(--muted); margin: 0 0 12px; font-size: 0.9rem; }

.online-main { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 0; max-width: 1400px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.panes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; flex: 1; }

.pane {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.pane.active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(0, 217, 106, 0.35); }
.pane-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--panel-2); border-bottom: 1px solid var(--line);
}
.pane-title { font-size: 0.9rem; color: var(--accent-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pane-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.pill {
  background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; font: inherit; font-size: 0.8rem; cursor: pointer;
}
.pill:hover:not(:disabled) { border-color: var(--accent); }
.pill:disabled { opacity: 0.45; cursor: default; }

.pane-scroll { overflow: auto; flex: 1; min-height: 240px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: 0.8rem; padding: 6px 10px; position: sticky; top: 0; background: var(--panel); border-bottom: 1px solid var(--line); }
td { padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
td:first-child { width: 55%; }
td:nth-child(2) { width: 90px; }
td:nth-child(3) { width: 150px; color: var(--muted); }
th.num, td.num { text-align: right; }
tr { cursor: default; }
tr.dir td:first-child { color: var(--accent-strong); }
tr.marked td { color: #ffd166; }
tr.cursor { background: rgba(0, 217, 106, 0.18); }
.pane:not(.active) tr.cursor { background: rgba(124, 255, 166, 0.08); }

.status-line { color: var(--muted); font-size: 0.85rem; padding: 0 2px; }

.fkeys { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 18px; }
.fkeys button {
  flex: 1 1 120px; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.fkeys button:hover { border-color: var(--accent); }
.fkeys kbd { margin-right: 4px; }

.dialog {
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; width: min(440px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.dialog::backdrop { background: rgba(5, 9, 7, 0.6); }
.dlg-title { margin: 0 0 8px; font-size: 1.15rem; color: var(--accent-strong); }
.dlg-message { margin: 0 0 14px; color: var(--muted); white-space: pre-wrap; }
.dlg-input {
  width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font: inherit; margin-bottom: 14px;
}
.dlg-buttons { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dlg-buttons button {
  background: var(--accent); color: #0a100c; border: 0; border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer;
}
.dlg-buttons button:not(:first-child) { background: transparent; color: var(--accent-strong); border: 1px solid var(--line); }
.dlg-buttons button.danger { background: #ff6b6b; color: #0a100c; border: 0; }

.progress {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20;
  width: min(460px, calc(100vw - 32px)); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.progress-title { font-weight: 600; margin-bottom: 10px; color: var(--accent-strong); }
.progress-track { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--accent); transition: width 0.15s linear; }
.progress-detail { color: var(--muted); font-size: 0.85rem; margin: 8px 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-cancel {
  background: transparent; color: var(--accent-strong); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font: inherit; cursor: pointer;
}

@media (max-width: 768px) {
  .narrow-note { display: block; }
  .panes { grid-template-columns: 1fr; }
  .pane-scroll { min-height: 200px; }
  td:nth-child(3) { display: none; }
}