/* Style powłoki USP.Center Req System — dark domyślnie, light przez [data-bs-theme="light"], Bootstrap 5.3.8.
   Używane przez index.html, 404.html i wszystkie widoki (klasy narzędziowe: metric-card, status-dot, app-pills, code-box). */

:root,
[data-bs-theme="dark"] {
  color-scheme: dark;
  --app-bg: #070b17;
  --app-bg-elevated: #0b1120;
  --app-card: #0f172a;
  --app-card-soft: #131d33;
  --app-ink: #e5edf8;
  --app-muted: #a3b1c6;
  --app-blue: #8ab4ff;
  --app-border: rgba(148, 163, 184, 0.22);
  --app-shadow: rgba(0, 0, 0, 0.42);
  --app-code-bg: #020617;
  --app-code-ink: #dbeafe;
  --app-focus: #9cc2ff;
  --status-ok: #22c55e;
  --status-partial: #fbbf24;
  --status-error: #f87171;
  --status-unknown: #94a3b8;
  --bs-body-font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-ink);
  --bs-emphasis-color: var(--app-ink);
  --bs-heading-color: var(--app-ink);
  --bs-secondary-color: var(--app-muted);
  --bs-tertiary-color: #7d8ca3;
  --bs-secondary-bg: var(--app-card-soft);
  --bs-tertiary-bg: var(--app-bg-elevated);
  --bs-border-color: var(--app-border);
  --bs-link-color: #8ab4ff;
  --bs-link-hover-color: #b6ccff;
  --bs-link-color-rgb: 138, 180, 255;
  --bs-link-hover-color-rgb: 182, 204, 255;
  /* Kolor akcentu z białym tekstem (pills active, badge .text-bg-primary): #2f5fc9 → 5.6:1 (AA); #5b8def dawał 3.2:1. */
  --bs-primary: #2f5fc9;
  --bs-primary-rgb: 47, 95, 201;
}

[data-bs-theme="light"] {
  color-scheme: light;
  --app-bg: #f3f6fb;
  --app-bg-elevated: #ffffff;
  --app-card: #ffffff;
  --app-card-soft: #f1f4f9;
  --app-ink: #172033;
  --app-muted: #5b6577;
  --app-blue: #2454d6;
  --app-border: rgba(23, 32, 51, 0.14);
  --app-shadow: rgba(15, 23, 42, 0.08);
  --app-code-bg: #f8fafc;
  --app-code-ink: #172033;
  --app-focus: #1d4ed8;
  --status-ok: #15803d;
  --status-partial: #b45309;
  --status-error: #b91c1c;
  --status-unknown: #6b7280;
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-ink);
  --bs-emphasis-color: var(--app-ink);
  --bs-heading-color: var(--app-ink);
  --bs-secondary-color: var(--app-muted);
  --bs-tertiary-color: #6b7588; /* placeholdery: 4.6:1 na białym (AA) */
  --bs-secondary-bg: var(--app-card-soft);
  --bs-tertiary-bg: var(--app-bg-elevated);
  --bs-border-color: var(--app-border);
  --bs-link-color: #2454d6;
  --bs-link-hover-color: #163ca6;
  --bs-link-color-rgb: 36, 84, 214;
  --bs-link-hover-color-rgb: 22, 60, 166;
}

html, body { min-height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--app-bg);
  color: var(--app-ink);
  font-family: var(--bs-body-font-family);
}
main { flex: 1 0 auto; }

/* ---------- Ikony ---------- */
.material-symbols-outlined {
  font-size: 1.25rem;
  line-height: 1;
  vertical-align: middle;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.material-symbols-outlined.filled { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.btn .material-symbols-outlined { font-size: 1.15rem; }
.btn-sm .material-symbols-outlined { font-size: 1.05rem; }
.material-symbols-outlined.display-4 { font-size: 3.25rem; }
.material-symbols-outlined.fs-6 { font-size: 1rem; }

/* ---------- Dostępność ---------- */
.skip-link:focus { position: absolute; top: .5rem; left: .5rem; z-index: 2000; padding: .5rem .75rem; background: var(--app-card); border: 1px solid var(--app-border); border-radius: .5rem; }
:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
  box-shadow: none;
}
.btn, .form-control, .form-select, .nav-link, .dropdown-item, .page-link { min-height: 24px; }
.btn-icon { min-width: 2rem; min-height: 2rem; display: inline-flex; align-items: center; justify-content: center; padding: .25rem; }
.btn-status { min-width: 1.75rem; min-height: 1.75rem; padding: .15rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .progress-bar { transition: none; }
}

/* ---------- Nav ---------- */
.app-nav {
  background: var(--app-bg-elevated);
  border-bottom: 1px solid var(--app-border);
  box-shadow: 0 4px 16px var(--app-shadow);
  min-height: 56px;
}
.app-nav .navbar-brand { color: var(--app-ink); }
.app-nav .navbar-brand img { flex: 0 0 auto; }
.avatar {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--app-blue); color: #061229; font-size: .8rem; font-weight: 700; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-menu { min-width: 16rem; }
.status-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto;
  box-shadow: 0 0 0 2px var(--app-bg-elevated);
}
.status-ok { background: var(--status-ok); }
.status-partial { background: var(--status-partial); }
.status-error { background: var(--status-error); }
.status-unknown { background: var(--status-unknown); }

/* ---------- Pills (zakładki) ---------- */
.app-pills-wrap { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: -0.25rem; padding-inline: 0.25rem; }
.app-pills-wrap::-webkit-scrollbar { display: none; }
.app-pills { gap: .25rem; }
.app-pills .nav-link {
  color: var(--app-muted); font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem;
}
.app-pills .nav-link:hover { color: var(--app-ink); background: var(--app-card-soft); }
.app-pills .nav-link.active { color: #fff; background: var(--bs-primary); }
[data-bs-theme="light"] .app-pills .nav-link.active { background: #2454d6; }

/* ---------- Przyciski primary — tekst 14px na tle: light #2454d6 (6.3:1), dark #2f5fc9 (5.6:1); Bootstrap #0d6efd daje 3.7:1 ---------- */
.btn-primary {
  --bs-btn-bg: #2f5fc9; --bs-btn-border-color: #2f5fc9; --bs-btn-hover-bg: #2454d6; --bs-btn-hover-border-color: #2454d6;
  --bs-btn-active-bg: #1c45b4; --bs-btn-active-border-color: #1c45b4; --bs-btn-disabled-bg: #2f5fc9; --bs-btn-disabled-border-color: #2f5fc9;
}
[data-bs-theme="light"] .btn-primary {
  --bs-btn-bg: #2454d6; --bs-btn-border-color: #2454d6; --bs-btn-hover-bg: #1c45b4; --bs-btn-hover-border-color: #1c45b4;
  --bs-btn-active-bg: #163ca6; --bs-btn-active-border-color: #163ca6; --bs-btn-disabled-bg: #2454d6; --bs-btn-disabled-border-color: #2454d6;
}
.btn-outline-primary {
  --bs-btn-color: #8ab4ff; --bs-btn-border-color: #8ab4ff; --bs-btn-hover-bg: #2f5fc9; --bs-btn-hover-border-color: #2f5fc9; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #2454d6; --bs-btn-active-border-color: #2454d6; --bs-btn-disabled-color: #8ab4ff; --bs-btn-disabled-border-color: #8ab4ff;
}
[data-bs-theme="light"] .btn-outline-primary {
  --bs-btn-color: #2454d6; --bs-btn-border-color: #2454d6; --bs-btn-hover-bg: #2454d6; --bs-btn-hover-border-color: #2454d6; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #1c45b4; --bs-btn-active-border-color: #1c45b4; --bs-btn-disabled-color: #2454d6; --bs-btn-disabled-border-color: #2454d6;
}

/* Stan „wyszarzony" bez opacity (kontrast tekstu AA w obu motywach): zarchiwizowane projekty, nieaktywni użytkownicy, nieaktualne zaproszenia */
.row-muted > td, .row-muted > th, .row-muted { color: var(--app-muted); }
.row-muted .fw-semibold { font-weight: 500; }
.app-pills .nav-link .badge { font-size: .65rem; }

/* ---------- Karty / tabele ---------- */
.card { background: var(--app-card); border: 1px solid var(--app-border); border-radius: .9rem; box-shadow: 0 8px 24px var(--app-shadow); }
.card-header { background: var(--app-bg-elevated); border-bottom: 1px solid var(--app-border); }
.modal-content, .dropdown-menu, .offcanvas, .popover, .toast { background: var(--app-card); color: var(--app-ink); border-color: var(--app-border); }
.modal-header, .modal-footer, .offcanvas-header { border-color: var(--app-border); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--app-ink); --bs-table-border-color: var(--app-border); --bs-table-hover-bg: var(--app-card-soft); --bs-table-hover-color: var(--app-ink); --bs-table-striped-bg: var(--app-card-soft); }
.table td, .table th { overflow-wrap: anywhere; vertical-align: middle; }
.table th { white-space: nowrap; font-weight: 600; color: var(--app-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.table-sm > :not(caption) > * > * { padding: .35rem .5rem; }
.form-control, .form-select { background-color: var(--app-bg-elevated); color: var(--app-ink); border-color: var(--app-border); }
.form-control:focus, .form-select:focus { background-color: var(--app-bg-elevated); color: var(--app-ink); border-color: var(--app-blue); }
.form-control::placeholder { color: var(--bs-tertiary-color); }
.input-group-text { background: var(--app-card-soft); color: var(--app-muted); border-color: var(--app-border); }

.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 576px) { .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.metric-card {
  background: var(--app-card); border: 1px solid var(--app-border); border-radius: .75rem;
  padding: .7rem .85rem; display: flex; flex-direction: column; gap: .15rem; min-height: 4.6rem;
}
.metric-label { color: var(--app-muted); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.metric-value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.metric-sub { color: var(--app-muted); font-size: .75rem; }

.progress { background: var(--app-card-soft); height: .55rem; }
.progress-thin { height: .35rem; }
.progress-label { font-variant-numeric: tabular-nums; min-width: 3ch; }

.section-title { font-size: 1.05rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .4rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.code-box {
  background: var(--app-code-bg); color: var(--app-code-ink); border: 1px solid var(--app-border); border-radius: .6rem;
  padding: .75rem; max-height: 50vh; overflow: auto; font-size: .78rem; white-space: pre-wrap; word-break: break-word;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Strumień historii */
.stream { display: grid; gap: .4rem; }
.stream-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; padding: .5rem .6rem; border: 1px solid var(--app-border); border-radius: .6rem; background: var(--app-bg-elevated); font-size: .86rem; }
.stream-item time { color: var(--app-muted); white-space: nowrap; font-size: .78rem; }

/* Aktorzy */
.actor-card { background: var(--app-bg-elevated); border: 1px solid var(--app-border); border-radius: .75rem; padding: .75rem; height: 100%; }
.actor-card.stale { border-style: dashed; color: var(--app-muted); }
.actor-card.stale .fw-semibold { font-weight: 500; }
.online-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; margin-right: .35rem; background: var(--status-unknown); }
.online-dot.online { background: var(--status-ok); }

/* Login */
.login-wrap { padding-block: clamp(1rem, 6vh, 4rem); }
.login-card { max-width: 30rem; }
.login-divider { display: flex; align-items: center; gap: .75rem; color: var(--app-muted); font-size: .8rem; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; border-top: 1px solid var(--app-border); }

/* Puste stany */
.empty-state { text-align: center; color: var(--app-muted); padding: 2rem 1rem; }
.empty-state .material-symbols-outlined { font-size: 2.5rem; display: block; margin-bottom: .5rem; }

/* Sticky (spis sekcji w widoku projektu) */
.sticky-aside { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; }

/* Badge klasyfikacji/statusów — kontrast AA na obu motywach */
.badge { font-weight: 600; }
[data-bs-theme="dark"] .badge.text-bg-light { background: #263247 !important; color: #e5edf8 !important; }
[data-bs-theme="dark"] .badge.text-bg-warning { color: #1a1300 !important; }

/* Popover / tooltip */
.popover { max-width: 22rem; }
.popover-body { color: var(--app-ink); }

/* Footer */
footer { border-color: var(--app-border) !important; }

/* Mobile */
@media (max-width: 575.98px) {
  .app-nav .navbar-brand .fw-semibold { font-size: .95rem; }
  .metric-value { font-size: 1.15rem; }
  .card { border-radius: .6rem; }
  .table-sm > :not(caption) > * > * { padding: .3rem .4rem; }
}