/* Szerszy układ na dużych ekranach, rodzaj inwestycji i wygoda na telefonie */
:root { --maxw: 1760px; --side: clamp(16px, 2.6vw, 56px); }
.bar, main, .status { padding-left: var(--side); padding-right: var(--side); }

/* Rodzaj inwestycji */
.cat-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--head); color: var(--ink-2); }
.cat-tag sup { font-size: 9px; margin-left: 2px; opacity: .8; }
.cat-0, .name-cell em .cat-0 { background: color-mix(in srgb, #1f5fbf 13%, var(--panel)); color: #1a4f9c; }
.cat-1, .name-cell em .cat-1 { background: color-mix(in srgb, #13945c 13%, var(--panel)); color: #0f7a4b; }
.cat-2, .name-cell em .cat-2 { background: color-mix(in srgb, #7a5cd6 13%, var(--panel)); color: #5b3fb3; }
.cat-3, .name-cell em .cat-3 { background: color-mix(in srgb, #1596a8 13%, var(--panel)); color: #0f7886; }
.cat-4, .name-cell em .cat-4 { background: color-mix(in srgb, #d99a1a 17%, var(--panel)); color: #8f6208; }
.cat-5, .name-cell em .cat-5 { background: color-mix(in srgb, #d0562e 13%, var(--panel)); color: #a8401f; }
.cat-6, .name-cell em .cat-6 { background: color-mix(in srgb, #c23c8b 12%, var(--panel)); color: #9c2b6e; }
.cat-7, .name-cell em .cat-7 { background: color-mix(in srgb, #5a6b82 14%, var(--panel)); color: #3f4f66; }
.name-cell em .cat-tag { font-size: 11.5px; max-width: none; }
.name-cell em { display: none; font-style: normal; margin-top: 4px; }
.fcat { display: block; flex-basis: 100%; }
.catpick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.catpick .rp-label { margin-right: 4px; font-size: 14px; color: var(--ink-2); }
.catpick button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 600 13px var(--font); cursor: pointer; }
.catpick button small { margin-left: 4px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.catpick button:hover { background: var(--head); color: var(--ink); }
.catpick button.on { background: var(--accent); color: var(--accent-ink, #fff); box-shadow: none; }
.catpick button.on small { color: inherit; opacity: .75; }
.catpick .rp-clear { width: 34px; padding: 0; font-size: 18px; }

/* Ranking: dodatkowa kolumna Rodzaj, więc szczegółowe kolumny wracają dopiero na szerszych ekranach */
@media (min-width: 1321px) and (max-width: 1620px) { .hide-md { display: none; } }
@media (min-width: 1621px) { .name-cell b { max-width: 420px; } }

/* Telefon */
@media (max-width: 760px) {
  main { padding-top: 18px; }
  .fkeys { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .fkeys::-webkit-scrollbar { display: none; }
  .fkeys a, .fkeys button { min-height: 44px; display: inline-flex; align-items: center; }
  .cmd, .filters input[type=search], .filters select, .cmp-add { height: 46px; }
  .filters { gap: 10px; }
  .filters > * { flex: 1 1 100%; max-width: none !important; min-width: 0 !important; }
  .filters label { min-height: 44px; }
  .filters input[type=search] { flex: 1 1 100% !important; }
  .filters select { flex: 1 1 calc(50% - 5px); width: auto; }
  .riskpick { display: flex; width: 100%; height: 48px; padding: 0 8px 0 14px; }
  .riskpick button { flex: 1; width: auto; height: 38px; }
  .catpick { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .catpick::-webkit-scrollbar { display: none; }
  .catpick button { flex: none; height: 40px; }
  .fcat { flex-basis: 100%; }
  .cmp-add label { display: none; }
  .btn, .tabs button, .pager button { min-height: 44px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs button { flex: none; }
  .name-cell em { display: block; }
  .name-cell b { max-width: 44vw; white-space: normal; }
  .name-cell span { max-width: 44vw; }
  td, th { padding-left: 6px; padding-right: 6px; }
  tbody tr { height: 66px; }
  .chk { width: 22px; height: 22px; }
  td:first-child, th:first-child { padding-left: 4px; padding-right: 4px; width: 38px; text-align: center; }
  .pager { flex-wrap: wrap; gap: 10px; }
  .pager > span:last-child { display: flex; gap: 10px; width: 100%; }
  .pager > span:last-child .btn { flex: 1; }
  .chart-box { height: 280px; }
  .chart-box.sm { height: 210px; }
  .chart-box.tall { height: 340px; }
  .card { padding: 16px; }
  .props { grid-template-columns: minmax(90px, 36%) 1fr; }
  .detail-head .actions { flex-wrap: wrap; }
  .detail-head .price .value { font-size: 36px; }
  table { font-size: 13.5px; }
  .card .table-wrap { margin: 0 -16px; padding: 0 16px; }
}
.cmp-add input[type=search] { box-shadow: none !important; background: none !important; padding: 0 !important; height: 100% !important; min-width: 0 !important; }

/* Ranking: kolumna Ryzyko wyrównana do lewej razem z nagłówkiem, stała szerokość miernika */
th.col-risk, td.col-risk { text-align: left; }
.sri-meter { min-width: 76px; }
.sri-num { min-width: 10px; text-align: left; }


/* strona 404 w aplikacji */
.card.notfound { display: block; max-width: 560px; margin: clamp(24px, 8vh, 80px) auto; padding: 36px 28px; text-align: center; }
.card.notfound .nf-code { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--accent); opacity: .85; }
.card.notfound h2 { display: block; min-height: 0; margin: 14px 0 8px; font-size: 22px; color: var(--ink); }
.card.notfound .nf-h { margin: 14px 0 8px; font-size: 22px; font-weight: 600; color: var(--ink); }
.card.notfound p { margin: 0 0 8px; color: var(--ink-3); }
.card.notfound .nf-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.card.notfound .nf-links .btn { text-decoration: none; justify-content: center; }
.card.notfound .nf-links .btn.primary { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 760px) { .card.notfound { padding: 28px 18px; } .card.notfound .nf-links .btn { flex: 1 1 100%; } }