/* FJN System — E0 component styles: price list, administration, dashboard.
   Loaded after fjn-screens-records.css (see templates/base.html); order matters. */
/* ---------- Price list (E0-40…43) ---------- */

.fjn-table__group th {
  height: 32px; background: var(--fjn-table-group); border-bottom: 1px solid var(--fjn-border);
  font-size: var(--fjn-fs-label); letter-spacing: .04em; text-transform: uppercase; color: var(--fjn-text-2);
}
.fjn-code { font: 12px var(--fjn-font-mono); color: var(--fjn-text-2); margin-right: 6px; }
.fjn-font { font-family: var(--fjn-font); }
.fjn-row-muted td { color: var(--fjn-text-3); }
.fjn-row-actions { display: inline-flex; align-items: center; gap: var(--fjn-sp-2); }
.fjn-row-actions form { display: inline; }
.fjn-price-cards { margin: 0; padding: 0; list-style: none; }
.fjn-price-cards li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--fjn-sp-3);
  min-height: 44px; padding: 10px 20px; border-bottom: 1px solid var(--fjn-surface-2);
}
.fjn-price-cards li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.fjn-pricelist__area { padding-bottom: 0; }

.fjn-version__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--fjn-sp-5); align-items: start; }
.fjn-version__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: var(--fjn-sp-4); }
.fjn-version__price { width: 140px; }
.fjn-version__price .fjn-input-group { height: 36px; }
.fjn-version__row.is-changed { background: var(--fjn-row-changed); }
.fjn-version__row.is-changed .fjn-input-group { border: 2px solid var(--fjn-warning-700); }
.fjn-version__row.is-changed .fjn-input-group__control { font-weight: var(--fjn-fw-bold); }
.fjn-version__summary { position: sticky; top: calc(var(--fjn-topbar-h) + var(--fjn-sp-4)); }
.fjn-version__stats dd { text-align: right; }
.fjn-version__changes { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: var(--fjn-sp-3) 0 0; list-style: none; border-top: 1px solid var(--fjn-surface-2); font-size: 14px; }
.fjn-version__changes:empty { display: none; }
.fjn-version__changes li { display: flex; flex-direction: column; gap: 2px; }
.fjn-version__buttons { gap: 10px; }
.fjn-history-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--fjn-sp-5); align-items: start; }
.fjn-history-layout__panel:empty { display: none; }
.fjn-history-layout__panel { width: var(--fjn-panel-w); }
.fjn-version-panel .fjn-panel__head { border-bottom: 1px solid var(--fjn-surface-2); }
@media (max-width: 1279px) {
  .fjn-version__layout, .fjn-history-layout { grid-template-columns: minmax(0, 1fr); }
  .fjn-version__summary { position: static; }
  .fjn-history-layout__panel { width: auto; }
}
@media (max-width: 767px) {
  .fjn-version__fields { grid-template-columns: minmax(0, 1fr); }
  .fjn-version__price { width: 120px; }
}

/* ---------- Administration (E0-50…56) ---------- */

.fjn-user-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--fjn-sp-5); align-items: start; }
.fjn-account { gap: var(--fjn-sp-3); }
.fjn-account__actions { display: flex; flex-direction: column; gap: var(--fjn-sp-2); }
.fjn-btn--start {
  justify-content: flex-start; height: auto; min-height: var(--fjn-ctl); padding-top: 8px; padding-bottom: 8px;
  white-space: normal; text-align: left; line-height: 1.3;
}
.fjn-pin-row { padding-top: var(--fjn-sp-3); border-top: 1px solid var(--fjn-surface-2); }
.fjn-row-pending td { background: var(--fjn-row-pending); }
.fjn-device-cell { display: flex; align-items: flex-start; gap: 10px; }
.fjn-device-cell > .fjn-icon { margin-top: 2px; color: var(--fjn-text-2); }
.fjn-text-danger { color: var(--fjn-danger-700); }
.fjn-text-danger:hover { color: var(--fjn-danger-800); background: var(--fjn-danger-100); }
.fjn-audit td { vertical-align: top; }
.fjn-audit__diff { display: flex; flex-direction: column; gap: 4px; max-width: 320px; }
/* Dialog opened without JS (page with the form) */
.fjn-dialog[open]:not(:modal) { position: static; margin: 0 auto; width: 100%; }
@media (max-width: 1279px) { .fjn-user-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Dashboard (E0-12) ---------- */

.fjn-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--fjn-sp-4); }
.fjn-shortcut {
  display: flex; align-items: center; gap: var(--fjn-sp-4); min-height: 72px; padding: 14px 20px;
  border: 1px solid var(--fjn-border-strong); border-radius: var(--fjn-r-lg); background: var(--fjn-surface);
  color: var(--fjn-text); font-weight: var(--fjn-fw-regular);
}
.fjn-shortcut:hover { background: var(--fjn-surface-2); color: var(--fjn-text); text-decoration: none; }
.fjn-shortcut__icon {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  border-radius: 8px; background: var(--fjn-surface-2);
}
.fjn-shortcut__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Title on one line (handoff README: 17/22 px, nowrap), 13/18 px caption below */
.fjn-shortcut__title { font-size: 17px; line-height: 22px; font-weight: var(--fjn-fw-bold); white-space: nowrap; }
.fjn-shortcut__sub { font-size: var(--fjn-fs-small); line-height: var(--fjn-lh-small); color: var(--fjn-text-2); }
.fjn-shortcut--primary { background: var(--fjn-brand-600); border-color: var(--fjn-brand-600); color: var(--fjn-text-inverse); }
.fjn-shortcut--primary:hover { background: var(--fjn-brand-700); color: var(--fjn-text-inverse); }
.fjn-shortcut--primary .fjn-shortcut__icon { background: rgba(255, 255, 255, .15); }
.fjn-shortcut--primary .fjn-shortcut__sub { color: var(--fjn-brand-on-dark-2); }
.fjn-shortcut--disabled { background: var(--fjn-btn-disabled-bg); border-color: transparent; color: var(--fjn-text-disabled); cursor: not-allowed; }
.fjn-shortcut--disabled .fjn-shortcut__sub { color: var(--fjn-text-disabled); }
/* Hall: targets min. 56 px, larger text */
.fjn-shortcuts--hall .fjn-shortcut { min-height: 88px; font-size: 20px; border-radius: var(--fjn-r-lg); }
.fjn-shortcuts--hall .fjn-shortcut__title { font-size: 20px; line-height: 26px; }
.fjn-placeholder-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 360px;
  padding: var(--fjn-sp-10) var(--fjn-sp-6); text-align: center;
  border: 1.5px dashed var(--fjn-border-strong); border-radius: var(--fjn-r-lg);
}
.fjn-placeholder-panel b { font-size: var(--fjn-fs-h2); }
.fjn-placeholder-panel__icon { color: var(--fjn-text-2); }
.fjn-placeholder-panel p { max-width: 460px; }

.fjn-dashboard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fjn-sp-5); align-items: start; }
.fjn-card--flush { padding: 0; gap: 0; overflow: hidden; }
.fjn-card__head--padded { padding: 18px 20px; border-bottom: 1px solid var(--fjn-surface-2); }
.fjn-card__head > a { white-space: nowrap; }
@media (max-width: 767px) { .fjn-card__head--padded .fjn-card__title { font-size: 17px; line-height: 24px; } }
.fjn-card__pad { padding: 18px 20px; }
.fjn-recent { margin: 0; padding: 0; list-style: none; }
.fjn-recent__item {
  display: flex; align-items: center; gap: var(--fjn-sp-3); min-height: 56px; padding: 10px 20px;
  border-bottom: 1px solid var(--fjn-surface-2); color: var(--fjn-text); font-weight: var(--fjn-fw-regular);
}
.fjn-recent li:last-child .fjn-recent__item { border-bottom: 0; }
.fjn-recent__item:hover { background: var(--fjn-brand-50); color: var(--fjn-text); text-decoration: none; }
.fjn-recent__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: 8px; background: var(--fjn-surface-2); color: var(--fjn-text-2); }
.fjn-recent__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fjn-recent__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fjn-recent__when { flex: none; text-align: right; }
.fjn-stages { display: flex; flex-direction: column; gap: var(--fjn-sp-3); }
.fjn-stages__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--fjn-sp-3); }
.fjn-stages__tile {
  display: flex; flex-direction: column; gap: 6px; min-height: 108px; padding: var(--fjn-sp-4);
  border: 1px dashed var(--fjn-border-strong); border-radius: var(--fjn-r-lg); color: var(--fjn-text-2);
}
.fjn-stages__tile b { color: var(--fjn-text); margin-top: 4px; }
@media (max-width: 1023px) { .fjn-dashboard { grid-template-columns: minmax(0, 1fr); } }

/* E0-57 „Dane firmy” (D107): card + „Gdzie są używane” side by side on a desktop. */
.fjn-company { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fjn-sp-4); align-items: start; max-width: 980px; }
@media (min-width: 1200px) { .fjn-company { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.fjn-company__title { font-size: 18px; line-height: 24px; }
.fjn-company__notice { padding: var(--fjn-sp-4) 20px 0; }
.fjn-company__rows { display: flex; flex-direction: column; margin: 0; padding: 8px 20px 12px; }
.fjn-company__row {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 4px var(--fjn-sp-4); align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--fjn-surface-2);
}
.fjn-company__row dt { font-size: 14px; color: var(--fjn-text-2); }
.fjn-company__row dd { margin: 0; font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }
.fjn-company__body { padding: var(--fjn-sp-4) 20px 20px; }
.fjn-company__office {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fjn-sp-3);
  min-height: 44px; padding: 10px 12px; border: 1px solid var(--fjn-border); border-radius: var(--fjn-r-md);
  background: var(--fjn-bg); color: var(--fjn-text-2);
}
.fjn-company__office a { font-size: 14px; font-weight: var(--fjn-fw-bold); white-space: nowrap; text-decoration: none; }
.fjn-company__foot { padding: 12px 20px; border-top: 1px solid var(--fjn-border); }
.fjn-company__uses { gap: var(--fjn-sp-3); padding: var(--fjn-sp-4) 20px; }
.fjn-company__uses-title { font-size: 16px; line-height: 22px; }
.fjn-company__use-list { display: flex; flex-direction: column; gap: var(--fjn-sp-3); margin: 0; padding: 0; list-style: none; }
.fjn-company__use { display: flex; gap: var(--fjn-sp-3); align-items: flex-start; }
.fjn-company__use-icon {
  display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px;
  border-radius: 8px; background: var(--fjn-surface-2); color: var(--fjn-text-2);
}
.fjn-company__use-text { display: flex; flex-direction: column; gap: 2px; }
.fjn-company__use-text b { font-size: 15px; }
.fjn-company__use-text span, .fjn-company__uses-note { font-size: 13px; line-height: 18px; color: var(--fjn-text-2); }
.fjn-company__uses-note { margin: 0; padding-top: 10px; border-top: 1px solid var(--fjn-surface-2); }
.fjn-company-account { letter-spacing: -.02em; }
/* E0-57_M_blad-konta: red label, the error replaces the hint. */
.fjn-company .fjn-field--error .fjn-field__label { color: var(--fjn-danger-700); }
.fjn-company .fjn-field--error .fjn-field__help { display: none; }
@media (max-width: 767px) {
  .fjn-company__row { grid-template-columns: minmax(0, 1fr); }
  .fjn-company-account { font-size: 13px; }
}

/* D167 E0-51 „To Twoje konto”: a blue label next to the name of one's own account (label only) */
.fjn-owntag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; margin-left: 10px; border-radius: 999px; background: #E3ECF7; color: #173F6F; font: 700 13px var(--fjn-font); vertical-align: middle; white-space: nowrap; }

/* D171 E0-51: two-line account buttons, the temporary password dialog */
.fjn-btn--two { height: auto; min-height: 52px; padding-top: 8px; padding-bottom: 8px; align-items: flex-start; }
.fjn-btn--two > svg { margin-top: 2px; }
.fjn-btn--two .fjn-btn__label { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.fjn-btn--two small { font-size: 12px; font-weight: 400; opacity: .85; }
.fjn-account__note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fjn-border); }
.fjn-tpw { width: min(520px, calc(100vw - 32px)); }
.fjn-tpw__row { display: flex; gap: 8px; align-items: stretch; }
.fjn-tpw__row .fjn-input, .fjn-tpw__shown { flex: 1; min-width: 0; }
.fjn-tpw__hint { font-size: 13px; color: var(--fjn-text-2); }
.fjn-tpw__hint.is-ok { color: #1B6B41; }
.fjn-tpw__hint--own.is-ok::before { content: "\2713  "; }
.fjn-tpw__once { margin: 0 0 12px; padding: 10px 14px; border-radius: 6px; background: #FCEFD6; color: #8A5300; font-weight: 700; font-size: 14px; }
.fjn-tpw__shown { display: flex; align-items: center; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--fjn-text); border-radius: 6px; font-size: 22px; font-weight: 700; letter-spacing: .08em; user-select: all; }