/* Style trybu "Edytuj online" (src/online.js) i panelu administracyjnego
   (src/admin-panel.js). Korzysta ze zmiennych (--accent, --muted, ...) i klas
   (.modal-overlay, .modal-box, ...) z app.css - ladowany po nim. */

/* Panel sesji edycji online (docs/spec_api_edytora_modyfikacja_1.txt, sekcja 17) -
   w .top-row po lewej stronie formularza metadanych, patrz
   renderOnlinePanel() w online.js. Zawartosc ulozona pionowo (informacje, pod
   nimi przyciski), zeby panel byl waski i miescil sie obok formularza.
   UWAGA: "display" MUSI byc w regule polaczonej z ":not([hidden])" - patrz
   identyczny komentarz przy .modal-overlay wyzej w tym pliku (ten sam
   problem specyficznosci z wbudowana regula przegladarki "[hidden]") */
.online-panel {
  flex: 0 1 auto;
  max-width: 50%;
  background: #eef2ff;
  border-bottom: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  font-size: 13px;
}
.online-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px;
}
.online-panel-info,
.online-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.online-panel-actions { align-items: flex-start; }
.online-panel-buttons { display: flex; gap: 8px; }
.online-panel-line { color: var(--muted); }
.online-panel button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.online-panel button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.online-panel button:disabled { opacity: .6; cursor: not-allowed; }
.online-autosave.saved { color: #15803d; }
.online-autosave.pending,
.online-autosave.saving { color: var(--muted); }
.online-autosave.error,
.online-autosave.toolarge { color: var(--error); }
.online-sync.ok { color: #15803d; }
.online-sync.warn { color: var(--warning); }
.online-sync.pending { color: var(--accent); }
.online-sync.ended { color: var(--muted); font-style: italic; }
.online-notice { color: #15803d; font-weight: 600; }

/* Okno "Edytuj online" (parowanie z Trawers ERP przez backend, patrz
   backend/) - tresc renderOnlineView() w online.js */
.online-box { width: min(480px, 92vw); height: auto; }
.online-body { padding: 16px; }
.online-body p { margin: 0 0 12px; }
.online-body button {
  padding: 7px 14px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.online-body button.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.online-link-row { display: flex; gap: 8px; margin-bottom: 12px; }
.online-link-row input {
  flex: 1;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
}
.online-status { color: var(--muted); font-style: italic; }
.online-hint { margin-top: -6px; color: var(--muted); font-size: 12px; }
.online-body p.online-file-name {
  margin-bottom: 6px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 17px;
  font-weight: 700;
  word-break: break-all;
}
.online-body p.online-doc-name { color: var(--muted); font-size: 13px; white-space: pre; }
.online-actions { display: flex; gap: 8px; }
.online-error { color: var(--error); }
/* Panel administracyjny (src/admin-panel.js, backend/src/admin.js) */
.admin-box { width: min(1400px, 96vw); height: min(720px, 88vh); }
.admin-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px; font-size: 13px; }
.admin-body p { margin: 0 0 10px; }
.admin-login-box { width: min(440px, 92vw); height: auto; }
.admin-login label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.admin-login-row { display: flex; gap: 8px; max-width: 520px; }
.admin-login .admin-error { margin: 10px 0 0; }
.admin-login-row input {
  flex: 1;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
}
.admin-body button {
  padding: 5px 12px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.admin-body button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
/* "Zakończ sesję" w tabeli - czerwony, bo operacja jest nieodwracalna */
.admin-body button.admin-close-btn {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.admin-body button.admin-close-btn:hover {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
}
/* Wspólny kolor przycisków administratora ("Panel administracyjny" w pasku
   narzędzi i "Wyloguj" w oknie panelu) - odróżnia je od zwykłych akcji edytora.
   Selektory z .toolbar / .modal-header-actions, żeby wygrać z ich regułami. */
.toolbar button.admin-btn,
.modal-header-actions button.admin-btn {
  background: #6d28d9;
  border-color: #6d28d9;
  color: #fff;
}
.toolbar button.admin-btn:hover,
.modal-header-actions button.admin-btn:hover {
  background: #5b21b6;
  border-color: #5b21b6;
}
.admin-logged-badge { font-size: 12px; font-weight: 600; color: #6d28d9; }
.admin-summary, .admin-muted, .admin-empty { color: var(--muted); }
.admin-error { color: var(--error); }
.admin-ok { color: #15803d; }
.admin-warn { color: var(--warning); }
.admin-pending { color: var(--accent); }
.admin-table-wrap { overflow-x: auto; }
.admin-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.admin-table th, .admin-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
/* Nagłówki mogą się łamać (np. "Ostatni kontakt / Trawers"), żeby cała tabela
   z przyciskiem "Zakończ sesję" mieściła się w oknie bez przewijania w bok */
.admin-table th {
  color: var(--muted);
  font-weight: 600;
  background: var(--bg);
  position: sticky;
  top: 0;
  white-space: normal;
  vertical-align: bottom;
}
.admin-table tbody tr:hover { background: var(--bg); }
.admin-mono { font-family: Consolas, "Courier New", monospace; }