@charset "UTF-8";
/* ═══════════════════════════════════════════════════════
   Flowlixo - style.css (compiled)
   Źródłowe pliki CSS:
     assets/css/           - core styles (variables, layout, components)
     modules/Hub/assets/   - hub-widgets.css
     modules/Reports/assets/   - reports.css
     modules/Signature/assets/ - signature.css
   NIE edytuj tego pliku bezpośrednio.
   ═══════════════════════════════════════════════════════ */

/* ── VARIABLES ── */
/* ─── Design Tokens ───────────────────────────────────── */
:root {
  /* Tła */
  --bg-deep:    #080c14;
  --bg-main:    #0d1321;
  --bg-card:    #111b2e;

  /* Akcent */
  --accent:     #29a8e0;
  --accent-dim: rgba(41,168,224,0.12);

  /* Tekst */
  --text:       #e8edf5;
  --muted:      #7a8aaa;
  --muted2:     #5a6575;

  /* Obramowania */
  --border:     rgba(41,168,224,0.18);
  --border-dim: rgba(255,255,255,0.06);

  /* Kolory semantyczne */
  --red:        #e05c5c;
  --orange:     #e09a3a;
  --green:      #3acf8f;
  --yellow:     #f5c842;

  /* Typografia */
  --font:       'Lato', sans-serif;
  --mono:       'Courier New', monospace;

  /* Kształty */
  --radius:     10px;
  --radius-sm:  6px;
  --radius-lg:  14px;
}

/* ─── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Base ────────────────────────────────────────────── */
html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg-main);
  color: var(--text);
}
a { text-decoration: none; color: inherit; }
input, textarea, button, select { font-family: var(--font); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus { outline: none; }
textarea { resize: vertical; }

/* ─── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ─── Screens (base) ──────────────────────────────────── */
.screen        { display: none; min-height: 100vh; }
.screen.active { display: flex; }


/* ── SCREENS ── */
/* ─── Boot ────────────────────────────────────────────── */
#screen-boot {
  align-items: center; justify-content: center;
  flex-direction: column; background: var(--bg-deep); gap: 20px;
}
.boot-logo    { font-size: 42px; color: var(--accent); }
.boot-spinner {
  width: 24px; height: 24px;
  border: 2px solid rgba(41,168,224,.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Login ───────────────────────────────────────────── */
#screen-login {
  align-items: center; justify-content: center;
  background: var(--bg-deep); position: relative; overflow: hidden;
}
.login-glow {
  position: absolute; top: 30%; left: 50%;
  transform: translate(-50%,-50%);
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(41,168,224,.09) 0%, transparent 65%);
  pointer-events: none;
}
.login-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 40px 36px; width: 360px;
  position: relative; z-index: 1;
}
.login-logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--accent); font-weight: 900; font-size: 14px;
  letter-spacing: 4px; margin-bottom: 6px;
}
/* Branding na karcie loginu - identycznie jak hub-brand w topbarze.
   Wyrownany do lewej, te same rozmiary - po prostu reuse stylów hub-brand
   bez nadpisywania. Naprawione w 6.12.1-beta (wczesniej omylkowo
   wycentrowany i powiekszony). */
.login-brand {
  margin-bottom: 6px;
}
.login-sub   { font-size: 12px; color: var(--muted); margin-bottom: 28px; letter-spacing: .5px; }
.login-field {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-main); border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm); padding: 0 14px; margin-bottom: 8px; color: var(--muted);
  transition: border-color .15s;
}
.login-field.error { border-color: var(--red); }
.login-field input { flex: 1; background: transparent; border: none; padding: 12px 0; color: var(--text); font-size: 14px; }
.login-err { font-size: 12px; color: var(--red); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; min-height: 20px; }

@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%      { transform:translateX(-8px); }
  40%      { transform:translateX(8px); }
  60%      { transform:translateX(-5px); }
  80%      { transform:translateX(5px); }
}
.shake { animation: shake .5s ease; }

/* ─── Maintenance ─────────────────────────────────────── */
.maintenance-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 40px 36px; width: 360px;
  position: relative; z-index: 1; text-align: center;
}
.maintenance-icon  { font-size: 42px; color: var(--accent); opacity: .7; margin: 16px 0 12px; }
.maintenance-title { font-size: 18px; font-weight: 900; margin-bottom: 10px; color: var(--text); }
.maintenance-msg   { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 24px; }
.maintenance-login-btn { width: 100%; justify-content: center; }

/* ─── Not Found ───────────────────────────────────────── */
#screen-notfound {
  align-items: center; justify-content: center;
  flex-direction: column; gap: 12px; background: var(--bg-deep);
  text-align: center; padding: 40px;
}
#screen-notfound h2 { font-size: 20px; font-weight: 900; }
#screen-notfound p  { color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 300px; }

/* ─── Landing ─────────────────────────────────────────── */
#screen-landing { flex-direction: column; background: var(--bg-deep); }

/* ─── Error Screen ────────────────────────────────────── */
#screen-error {
  flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--bg-deep);
  text-align: center; padding: 40px; gap: 0;
}
.error-card {
  background: var(--bg-card); border: 1px solid rgba(224,92,92,.3);
  border-radius: var(--radius-lg); padding: 48px 40px;
  max-width: 480px; width: 100%;
}
.error-logo {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 32px;
}
.error-logo > i { font-size: 18px; color: var(--accent); }
.error-logo-text { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
.error-logo-name {
  font-size: 14px; font-weight: 900; color: var(--accent);
  letter-spacing: 2px; text-transform: uppercase; line-height: 1.1;
}
.error-logo-sub {
  font-size: 10px; color: var(--muted); font-weight: 400;
  letter-spacing: .5px; line-height: 1; text-transform: none;
}
.error-icon    { font-size: 52px; color: var(--red); margin-bottom: 20px; opacity: .85; }
.error-title   { font-size: 20px; font-weight: 900; margin-bottom: 10px; }
.error-desc    { color: var(--muted); font-size: 14px; line-height: 1.75; margin-bottom: 0; }
.error-divider { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 28px 0; }
.error-contact-label {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.error-contact-box {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--accent-dim); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 20px;
  font-size: 14px; font-weight: 700; color: var(--accent);
  cursor: pointer; transition: background .15s; user-select: all;
}
.error-contact-box:hover { background: rgba(41,168,224,.18); }
.error-copied { font-size: 12px; color: var(--green); margin-top: 8px; min-height: 18px; }
.error-retry  { margin-top: 20px; }


/* ── COMPONENTS ── */
/* ─── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--radius-sm); padding: 9px 18px;
  font-weight: 700; font-size: 13px; cursor: pointer;
  text-decoration: none; transition: opacity .15s;
  white-space: nowrap; border: none;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary   { background: var(--accent); color: white; }
.btn--primary:hover:not(:disabled) { opacity: .88; }
.btn--secondary { background: transparent; color: var(--text); border: 1px solid var(--border-dim); }
.btn--secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn--danger    { background: var(--red); color: white; }
.btn--danger:hover { opacity: .88; }
.btn--full      { width: 100%; justify-content: center; }

.btn-back {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; margin-bottom: 8px; transition: color .15s;
}
.btn-back:hover { color: var(--text); }

.btn-icon {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; padding: 5px 7px; border-radius: 4px;
  font-size: 13px; transition: all .15s;
}
.btn-icon:hover            { color: var(--text); background: var(--border-dim); }
.btn-icon--red:hover       { color: var(--red);   background: rgba(224,92,92,.1); }
.btn-icon--green:hover     { color: var(--green); background: rgba(58,207,143,.1); }

.btn-icon-inline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: none; border-radius: 4px;
  background: transparent; color: var(--muted); font-size: 10px;
  cursor: pointer; transition: all .15s; padding: 0;
}
.btn-icon-inline:hover { color: var(--accent); background: var(--accent-dim); }

/* ─── Form ────────────────────────────────────────────── */
.form-grid   { display: grid; grid-template-columns: 380px 1fr; gap: 24px; }
.form-col    { display: flex; flex-direction: column; gap: 16px; }
.form-section {
  background: var(--bg-card); border: 1px solid var(--border-dim);
  border-radius: var(--radius); padding: 20px;
}
.form-html-section { display: flex; flex-direction: column; }
.form-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.form-hint { font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.6; }

.field          { margin-bottom: 12px; }
.field-hint     { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.field label    { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; display: block; margin-bottom: 5px; }
.field-err      { font-size: 11px; color: var(--red); margin-top: 3px; min-height: 16px; }
.req            { color: var(--red); }

.input {
  width: 100%; background: var(--bg-main); border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm); padding: 9px 12px; color: var(--text); font-size: 13px;
  transition: border-color .15s; outline: none;
}
.input:focus     { border-color: var(--accent); }
.input.error     { border-color: var(--red); }
.input--mono     { font-family: var(--mono); font-size: 12px; flex: 1; min-height: 480px; }
.input--password { flex: 1; font-family: monospace; letter-spacing: 2px; }
.input--password::placeholder { font-family: var(--font); letter-spacing: normal; font-size: 13px; }

select.input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6575' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 28px; cursor: pointer;
}
select.input:focus  { border-color: var(--accent); }
select.input option { background: var(--bg-card); color: var(--text); }

.scores-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.score-input  { text-align: center; font-weight: 700; font-size: 14px; }
.char-count   { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.char-warn    { color: var(--red); }

/* ─── Modal ───────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(8,12,20,.85);
  align-items: center; justify-content: center; z-index: 100;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px; text-align: center;
  max-width: 360px; width: 90%;
}
.modal--form {
  text-align: left; max-width: 540px; padding: 28px 32px;
  max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column;
}
.modal > i         { font-size: 36px; color: var(--red); }
.modal-icon-wrap   { font-size: 40px; margin-bottom: 4px; line-height: 1; }
.modal h3          { color: var(--text); margin: 12px 0 8px; }
.modal p           { color: var(--muted); font-size: 13px; margin-bottom: 20px; line-height: 1.6; }
.modal-btns        { display: flex; gap: 10px; justify-content: center; }

/* ─── Toast ───────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 18px; font-size: 13px;
  display: flex; align-items: center; gap: 10px; z-index: 200;
  transform: translateY(80px); opacity: 0;
  transition: all .3s; pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast i    { color: var(--green); }

/* ─── Badge ───────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: 4px; font-size: 10px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
}
.badge--accent { background: rgba(41,168,224,.15); color: var(--accent); }
.badge--green  { background: rgba(58,207,143,.15);  color: #3acf8f; }
.badge--red    { background: rgba(224,92,92,.15);   color: #e05c5c; }
.badge--orange { background: rgba(224,154,58,.15);  color: var(--orange); }
.badge--muted  { background: rgba(255,255,255,.07); color: var(--muted); }

/* ─── Alert ───────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.6;
}
.alert--info    { background: rgba(41,168,224,.08);  border: 1px solid rgba(41,168,224,.25);  color: #7ac8e8; }
.alert--success { background: rgba(58,207,143,.08);  border: 1px solid rgba(58,207,143,.25);  color: #3acf8f; }
.alert--warning { background: rgba(224,154,58,.08);  border: 1px solid rgba(224,154,58,.25);  color: #e09a3a; }
.alert--error   { background: rgba(224,92,92,.08);   border: 1px solid rgba(224,92,92,.25);   color: #e05c5c; }

/* ─── Card Component ──────────────────────────────────── */
.card-component { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.card-component__header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--muted2);
}
.card-component__header i { color: var(--accent); }
.card-component__body     { padding: 18px; }

/* ─── Empty / Loading ─────────────────────────────────── */
.empty-state {
  background: var(--bg-card); border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg); padding: 60px 40px; text-align: center;
  color: var(--muted); display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}
.empty-state i  { font-size: 40px; opacity: .4; }
.empty-state h3 { color: var(--text); font-size: 16px; }
.empty-state p  { font-size: 13px; max-width: 300px; line-height: 1.6; }
.loading-msg    { padding: 40px; text-align: center; color: var(--muted); font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; }

/* ─── Stats ───────────────────────────────────────────── */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.stat-card  { background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: var(--radius); padding: 20px; text-align: center; }
.stat-val   { font-size: 36px; font-weight: 900; color: var(--accent); line-height: 1; }
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 6px; }

.top-list        { background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: var(--radius); }
.top-list-header { padding: 14px 20px; border-bottom: 1px solid var(--border-dim); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.top-list-item   { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--border-dim); font-size: 13px; }
.top-list-item:last-child { border-bottom: none; }
.views-badge     { background: var(--accent-dim); color: var(--accent); font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 10px; }

/* ─── Datepicker ──────────────────────────────────────── */
.datepicker-wrap  { position: relative; }
.datepicker-input { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 9px 12px; }
.datepicker-input:focus { outline: none; border-color: var(--accent); }
.datepicker-input i { color: var(--muted); font-size: 13px; flex-shrink: 0; }
.datepicker-placeholder { color: var(--muted); flex: 1; font-size: 13px; }
.datepicker-value       { color: var(--text);  flex: 1; font-size: 13px; }
.datepicker-clear {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 0 0 0 4px;
  display: flex; align-items: center; transition: color .15s;
}
.datepicker-clear:hover { color: var(--red); }
.datepicker-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; z-index: 9999;
  width: 280px; box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.datepicker-dropdown.open { display: block; }
.datepicker-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 6px;
}
.datepicker-nav-btn {
  background: var(--bg-main); border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm); padding: 5px 10px; color: var(--text);
  cursor: pointer; font-size: 12px; transition: border-color .15s;
}
.datepicker-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.datepicker-month-btn {
  flex: 1; background: none; border: none; color: var(--text);
  font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: var(--font); padding: 4px 8px; border-radius: var(--radius-sm);
  transition: background .15s;
}
.datepicker-month-btn:hover { background: var(--bg-main); }
.datepicker-body      { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datepicker-body.month-view { grid-template-columns: 1fr; gap: 0; }
.dp-weekday { text-align: center; font-size: 10px; font-weight: 700; color: var(--muted); padding: 4px 0; letter-spacing: .5px; text-transform: uppercase; }
.dp-day {
  text-align: center; font-size: 12px; padding: 6px 4px;
  border-radius: var(--radius-sm); cursor: pointer; color: var(--text);
  transition: background .12s, color .12s; border: 1px solid transparent;
}
.dp-day:hover         { background: var(--bg-main); border-color: var(--border-dim); }
.dp-day.today         { border-color: var(--accent); color: var(--accent); }
.dp-day.selected      { background: var(--accent); color: #fff; font-weight: 700; border-color: var(--accent); }
.dp-day.selected:hover { background: var(--accent); }
.dp-day.other-month   { color: var(--muted); opacity: .4; }
.dp-day.empty         { cursor: default; }
.dp-day.empty:hover   { background: none; border-color: transparent; }
.datepicker-months    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.dp-month-item {
  text-align: center; font-size: 12px; padding: 8px 4px;
  border-radius: var(--radius-sm); cursor: pointer; color: var(--text);
  transition: background .12s; border: 1px solid transparent;
}
.dp-month-item:hover    { background: var(--bg-main); border-color: var(--border-dim); }
.dp-month-item.selected { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ─── Toggle ──────────────────────────────────────────── */
.toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.toggle-input { display: none; }
.toggle-track {
  width: 36px; height: 20px; border-radius: 20px;
  background: rgba(255,255,255,.12); border: 1px solid var(--border);
  position: relative; transition: background .2s;
}
.toggle-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--muted); transition: transform .2s, background .2s;
}
.toggle-input:checked + .toggle-track          { background: var(--accent); border-color: var(--accent); }
.toggle-input:checked + .toggle-track::after   { transform: translateX(16px); background: #fff; }
.toggle-input:disabled + .toggle-track         { opacity: .5; cursor: not-allowed; }

/* ─── Language Switcher ───────────────────────────────── */
.lang-switcher { display: flex; align-items: center; gap: 4px; }
.lang-btn {
  background: none; border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 3px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: var(--muted); cursor: pointer; transition: all .15s;
  text-transform: uppercase;
}
.lang-btn:hover  { color: var(--text); border-color: var(--border); }
.lang-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(41,168,224,.08); }
.lang-switcher-sep { font-size: 11px; color: var(--border); user-select: none; }

/* ─── HTMX ────────────────────────────────────────────── */
#htmx-indicator { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; z-index: 9999; opacity: 0; }
#htmx-indicator.active { opacity: 1; animation: htmx-progress 1.5s ease-in-out infinite; }
@keyframes htmx-progress { 0% { transform: scaleX(0); } 50% { transform: scaleX(.7); } 100% { transform: scaleX(1); } }
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
.htmx-swapping { opacity: 0; transition: opacity .15s ease-out; }
.htmx-settling { opacity: 1; transition: opacity .2s ease-in; }


/* ── LAYOUT ── */
/* ─── Admin Layout ────────────────────────────────────── */
#screen-admin,
#screen-signature-admin { flex-direction: row; background: var(--bg-main); }

.sidebar {
  width: 220px; min-height: 100vh; background: var(--bg-deep);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--accent); padding: 20px;
  border-bottom: 1px solid var(--border);
}
.sidebar-logo > i { font-size: 18px; }
.sidebar-nav      { padding: 12px 10px; flex: 1; }

.nav-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm); border: none;
  background: transparent; color: var(--muted); font-size: 13px;
  cursor: pointer; margin-bottom: 2px; text-align: left; transition: all .15s;
}
.nav-btn:hover       { color: var(--text); background: var(--border-dim); }
.nav-btn.active      { background: var(--accent-dim); color: var(--accent); }
.nav-btn--back       { color: var(--muted); margin-bottom: 0; }
.nav-btn--back:hover { color: var(--text); }
.nav-divider { height: 1px; background: var(--border-dim); margin: 8px 0; }
.nav-badge {
  margin-left: auto; background: var(--accent-dim); color: var(--accent);
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
}

.sidebar-bottom { padding: 12px 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.sig-public-link { padding: 8px 2px; }

.btn-logout {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--border-dim); border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); font-size: 12px;
  cursor: pointer; transition: all .15s;
}
.btn-logout:hover { color: var(--red); border-color: var(--red); }

.admin-main  { flex: 1; overflow: auto; display: flex; flex-direction: column; }
.main-content { padding: 32px 36px; max-width: 1400px; width: 100%; margin: 0 auto; }

/* ─── Sidebar - module info ───────────────────────────── */
.sidebar-module-info {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.07); min-width: 0;
}
.sidebar-module-label {
  font-size: 11px; font-weight: 700; color: var(--accent);
  letter-spacing: .3px; text-transform: none; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.sidebar-author-btn {
  display: inline-flex; align-items: center;
  color: var(--muted); font-size: 12px; cursor: pointer;
  opacity: .55; transition: opacity .15s; flex-shrink: 0;
}
.sidebar-author-btn:hover { opacity: 1; }

.sidebar-author-tooltip {
  display: none; position: fixed;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  font-size: 12px; color: var(--text); line-height: 1.8;
  white-space: nowrap; z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,.5); min-width: 200px;
}
.sidebar-author-tooltip .tooltip-label { font-size: 10px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 700; margin-bottom: 2px; }
.sidebar-author-tooltip .tooltip-name  { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.sidebar-author-tooltip .tooltip-row   { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.sidebar-author-tooltip .tooltip-row i { width: 12px; text-align: center; color: var(--accent); flex-shrink: 0; }
.sidebar-author-tooltip a { color: var(--accent); text-decoration: none; }
.sidebar-author-tooltip a:hover { text-decoration: underline; }

.sidebar-version {
  font-size: 10px; font-family: var(--mono, monospace);
  color: var(--muted); opacity: .7;
  background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 3px;
}

/* ─── Page Header ─────────────────────────────────────── */
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; gap: 12px; flex-wrap: wrap; }
.page-title  { font-size: 22px; font-weight: 900; color: var(--text); }
.page-sub    { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ─── Tabs ────────────────────────────────────────────── */
.tab            { display: none; width: 100%; }
.tab.active-tab { display: block; flex: 1; }

/* ─── Footer ──────────────────────────────────────────── */
.shared-footer {
  background: var(--bg-deep); border-top: 1px solid var(--border);
  padding: 14px 40px; display: flex; align-items: center;
  justify-content: center; gap: 24px; flex-wrap: wrap;
  font-size: 11px; color: var(--muted);
  position: relative; margin-top: auto;
}
.admin-main .shared-footer { justify-content: center; padding: 12px 24px; }
.hub-footer {
  background: var(--bg-deep); border-top: 1px solid var(--border);
  padding: 14px 40px; display: flex; align-items: center;
  justify-content: center; gap: 24px; flex-wrap: wrap;
  font-size: 11px; color: var(--muted);
}
.hub-footer strong { color: var(--muted); }
.footer-version {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--border2);
  font-family: var(--mono, monospace); letter-spacing: .5px; pointer-events: none;
}

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .sig-gen-layout { grid-template-columns: 1fr; }
  .sig-gen-right  { border-top: 1px solid var(--border); }
}
@media (max-width: 820px) {
  .form-grid { grid-template-columns: 1fr; }
  .main-content { padding: 20px 16px; }
  .sidebar { width: 56px; }
  .sidebar-logo span,
  .nav-btn > span:not(.nav-badge),
  .btn-logout > span,
  .sig-public-link { display: none; }
  .nav-btn            { justify-content: center; padding: 10px; }
  .nav-btn--back      { justify-content: center; }
  .sidebar-logo       { justify-content: center; padding: 16px 10px; }
  .client-hero        { padding: 28px 20px; }
  .hero-title         { font-size: 22px; }
  .client-topbar, .iframe-header { padding: 10px 16px; }
}
@media (max-width: 560px) {
  .report-grid    { grid-template-columns: 1fr; }
  .page-header    { flex-direction: column; align-items: stretch; }
  .client-footer  { flex-direction: column; text-align: center; }
  .login-card     { width: 100%; max-width: 340px; padding: 28px 24px; }
}
@media print {
  .no-print { display: none !important; }
  .client-hero { border-bottom: 1px solid #ddd; }
  #report-frame { min-height: auto !important; }
}


/* ── HUB ── */
/* ─── Hub Screen ──────────────────────────────────────── */
#screen-hub { flex-direction: column; background: var(--bg-deep); min-height: 100vh; }

/* ─── Hub Topbar ──────────────────────────────────────── */
.hub-topbar {
  background: var(--bg-deep); border-bottom: 1px solid var(--border);
  padding: 14px 40px; display: flex; align-items: center;
  justify-content: space-between;
}
.hub-brand { display: flex; align-items: center; gap: 10px; color: var(--accent); text-decoration: none; }
.hub-brand > i { font-size: 18px; }
.hub-brand-text { display: flex; flex-direction: column; gap: 1px; }
.hub-brand-name { font-size: 14px; font-weight: 900; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; line-height: 1.1; }
.hub-brand-sub  { font-size: 10px; color: var(--muted); font-weight: 400; letter-spacing: .5px; line-height: 1; text-transform: none; display: flex; align-items: center; gap: 6px; }

/* ─── Hub Content ─────────────────────────────────────── */
.hub-content {
  flex: 1; display: flex; flex-direction: column; align-items: stretch;
  padding: 48px 40px; min-height: 0; max-width: 1000px;
  margin: 0 auto; width: 100%;
}
.hub-header   { text-align: center; margin-bottom: 40px; }
.hub-title    { font-size: 28px; font-weight: 900; margin-bottom: 8px; }
.hub-sub      { color: var(--muted); font-size: 14px; }
.hub-hero     { margin-bottom: 32px; }

/* ─── Hub Cards (legacy grid) ─────────────────────────── */
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; margin-bottom: 0; }
.hub-card {
  background: var(--bg-card); border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg); padding: 18px 22px;
  display: flex; align-items: center; gap: 18px;
  cursor: pointer; text-align: left;
  transition: border-color .2s, transform .15s, background .2s;
  text-decoration: none; position: relative;
}
.hub-card:hover { border-color: var(--accent); background: rgba(41,168,224,.05); transform: translateY(-2px); }
.hub-card--locked,
.hub-card--locked:hover { border-color: var(--border-dim); background: var(--bg-card); transform: none; }
.card-badges { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; align-items: center; }
.module-disabled-badge,
.module-locked-badge { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: .5px; }
.hub-card-icon { width: 48px; height: 48px; border-radius: var(--radius); background: var(--accent-dim); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 20px; flex-shrink: 0; }
.hub-card-body    { flex: 1; }
.hub-card-title   { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.hub-card-desc    { font-size: 12px; color: var(--muted); line-height: 1.6; }
.hub-card-version { font-size: 10px; color: var(--muted); font-family: var(--mono, monospace); margin-top: 6px; opacity: .7; }
.module-update-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--orange); background: rgba(224,154,58,.12); border: 1px solid rgba(224,154,58,.3); padding: 2px 8px; border-radius: 20px; margin-top: 4px; }
.hub-card-arrow   { color: var(--muted); font-size: 14px; flex-shrink: 0; transition: color .2s; }
.hub-card:hover .hub-card-arrow { color: var(--accent); }

/* ─── Hub Cards Grid (nowa) ───────────────────────────── */
.hub-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 32px; }
.hub-cards-grid--admin { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .hub-cards-grid--admin { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .hub-cards-grid, .hub-cards-grid--admin { grid-template-columns: 1fr; } }

.hub-section-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 14px; margin-top: 0;
}
.hub-section-label i { font-size: 11px; color: var(--muted); }
.hub-section-label--admin { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--border-dim); }
.hub-grid--admin  { grid-template-columns: repeat(3, 1fr); }

/* ─── Hub Tabs ────────────────────────────────────────── */
.hub-tabs-nav {
  background: var(--bg-deep); border-bottom: 1px solid var(--border);
  padding: 0 40px; display: flex; gap: 4px;
}
.hub-tab-btn {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-size: 13px; font-weight: 700;
  padding: 12px 16px; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; gap: 7px; margin-bottom: -1px;
}
.hub-tab-btn:hover  { color: var(--text); }
.hub-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.hub-tab            { display: none; }
.hub-tab .main-content { max-width: 1200px; margin: 0 auto; }
.hub-tab.active-tab { display: flex; flex-direction: column; flex: 1; }
.hub-tab-btn--admin {}

/* ─── Hub Topbar responsive ───────────────────────────── */
@media (max-width: 820px) {
  .hub-topbar  { padding: 14px 20px; }
  .hub-content { padding: 40px 20px; }
  .hub-grid    { grid-template-columns: 1fr; }
}


/* ── HUB WIDGETS ── */
/* Source: modules/Hub/assets/hub-widgets.css */
/* ─── Uprawnienia użytkownika ─────────────────────────── */
.perm-module-card { border: 1px solid var(--border-dim); border-radius: var(--radius); overflow: hidden; transition: border-color .2s; }
.perm-module-card--admin { border-style: dashed; opacity: .85; }

.perm-module-header { padding: 12px 14px; background: rgba(255,255,255,.025); }
.perm-access-toggle {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400;
}
.perm-access-toggle input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.perm-module-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .5px; text-transform: uppercase; }
.perm-module-label i { color: var(--accent); font-size: 13px; }
.perm-admin-badge { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; background: rgba(255,255,255,.06); color: var(--muted); }

.perm-actions { display: none; gap: 6px; flex-wrap: wrap; padding: 10px 14px 12px; border-top: 1px solid var(--border-dim); background: rgba(255,255,255,.015); }
.perm-actions.open { display: flex; }

.perm-action-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted2); cursor: pointer;
  padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-dim); background: var(--bg-main);
  transition: border-color .15s, color .15s;
  text-transform: none; letter-spacing: 0; font-weight: 400; white-space: nowrap;
}
.perm-action-label:has(input:checked) { border-color: rgba(41,168,224,.35); color: var(--text); background: rgba(41,168,224,.06); }
.perm-action-label input { width: 14px; height: 14px; cursor: pointer; }

.perm-module-card:has(.perm-view-cb:checked)                 { border-color: rgba(41,168,224,.3); }
.perm-module-card:has(.perm-view-cb:checked) .perm-module-header { background: rgba(41,168,224,.05); }

/* Hub kontener z widgetami */
.perm-module-card--hub    { border: 1px solid rgba(41,168,224,.25); border-radius: var(--radius); overflow: hidden; }
.perm-module-header--hub  { padding: 12px 14px; background: rgba(41,168,224,.06); border-bottom: 1px solid rgba(41,168,224,.15); }
.perm-hub-widgets         { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: rgba(255,255,255,.01); }
.perm-module-card--widget { margin: 0; border-radius: var(--radius-sm); }
.perm-module-card--widget .perm-module-header { padding: 9px 12px; }
.perm-sub-group           { display: flex; flex-direction: column; gap: 4px; }

/* ─── Logi systemowe ──────────────────────────────────── */
.logs-filters { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px; padding:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }
.logs-filter-group { display:flex; flex-direction:column; gap:5px; }
.logs-filter-group label { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }

.logs-level-btns { display:flex; gap:4px; }
.logs-lvl-btn { background:var(--bg-main); border:1px solid var(--border-dim); border-radius:5px; padding:5px 10px; font-size:11px; font-weight:700; color:var(--muted); cursor:pointer; transition:all .15s; }
.logs-lvl-btn.active,
.logs-lvl-btn:hover           { border-color:var(--accent); color:var(--accent); }
.logs-lvl-btn.lvl-info.active    { border-color:#29a8e0; color:#29a8e0; background:rgba(41,168,224,.08); }
.logs-lvl-btn.lvl-warning.active { border-color:#e09a3a; color:#e09a3a; background:rgba(224,154,58,.08); }
.logs-lvl-btn.lvl-error.active   { border-color:#e05c5c; color:#e05c5c; background:rgba(224,92,92,.08); }

.logs-stats     { display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.logs-stat      { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 16px; display:flex; flex-direction:column; align-items:center; min-width:80px; }
.logs-stat-num  { font-size:22px; font-weight:900; line-height:1; }
.logs-stat-label { font-size:10px; color:var(--muted); font-weight:700; letter-spacing:1px; margin-top:2px; }
#stat-info     .logs-stat-num { color:#29a8e0; }
#stat-warning  .logs-stat-num { color:#e09a3a; }
#stat-error    .logs-stat-num { color:#e05c5c; }
#stat-critical .logs-stat-num { color:#c0392b; }

.logs-table-wrap { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.logs-table { width:100%; border-collapse:collapse; font-size:12px; }
.logs-table th  { padding:10px 14px; text-align:left; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); background:var(--bg-deep); }
.logs-table td  { padding:8px 14px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:top; line-height:1.5; }
.logs-table tr:last-child td { border-bottom:none; }
.logs-table tr:hover td { background:rgba(255,255,255,.02); }

.log-level         { display:inline-flex; padding:2px 6px; border-radius:3px; font-size:10px; font-weight:700; letter-spacing:.5px; }
.log-level-DEBUG   { background:rgba(255,255,255,.06); color:var(--muted); }
.log-level-INFO    { background:rgba(41,168,224,.1);   color:#29a8e0; }
.log-level-WARNING { background:rgba(224,154,58,.1);   color:#e09a3a; }
.log-level-ERROR   { background:rgba(224,92,92,.1);    color:#e05c5c; }
.log-level-CRITICAL { background:rgba(192,57,43,.15);  color:#c0392b; }
.log-time { color:var(--muted); font-family:monospace; font-size:11px; white-space:nowrap; }
.log-rid  { font-family:monospace; font-size:10px; color:rgba(255,255,255,.2); }
.log-msg  { color:var(--text); word-break:break-word; }
.log-ctx  { margin-top:3px; font-family:monospace; font-size:10px; color:var(--muted); word-break:break-all; }
.log-ctx-toggle { cursor:pointer; color:var(--accent); font-size:10px; margin-top:2px; display:inline-block; }

.logs-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.logs-tab-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; margin-bottom: -1px; display: flex; align-items: center; gap: 7px; transition: color .15s, border-color .15s; }
.logs-tab-btn:hover  { color: var(--text); }
.logs-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.logs-tab-btn i { font-size: 12px; }

.logs-pagination { display: flex; align-items: center; gap: 4px; padding: 12px 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.logs-page-btn { min-width: 32px; height: 32px; padding: 0 8px; background: var(--bg-main); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted2); font-size: 12px; cursor: pointer; transition: all .15s; font-family: var(--mono, monospace); }
.logs-page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.logs-page-btn:disabled             { background: rgba(59,158,255,.1); border-color: var(--accent); color: var(--accent); cursor: default; font-weight: 600; }
.logs-page-ellipsis { color: var(--muted); font-size: 12px; padding: 0 4px; }
.logs-page-info     { margin-left: auto; font-size: 11px; color: var(--muted); font-family: var(--mono, monospace); }

/* ─── Queue ───────────────────────────────────────────── */
.queue-stat-card  { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; min-width: 200px; }
.queue-stat-name  { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.queue-stat-row   { display: flex; gap: 6px; flex-wrap: wrap; }
.q-badge   { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px; font-family: var(--mono, monospace); }
.q-pending { background: rgba(245,200,66,.1);  color: var(--yellow); }
.q-running { background: rgba(59,158,255,.1);  color: var(--accent); }
.q-done    { background: rgba(45,212,160,.1);  color: var(--green); }
.q-failed  { background: rgba(255,90,90,.1);   color: var(--red); }

/* ─── Module Manager ──────────────────────────────────── */
.module-card { display: flex; align-items: center; gap: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 10px; transition: border-color .2s; }
.module-card:hover       { border-color: var(--accent-dim); }
.module-card-icon        { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(41,168,224,.1); border-radius: var(--radius); color: var(--accent); font-size: 18px; }
.module-card-icon--admin { background: rgba(255,255,255,.05); color: var(--muted); }
.module-card-icon--shell { background: rgba(41,168,224,.08); color: var(--accent); }
.module-card-body        { flex: 1; min-width: 0; }
.module-card-header      { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.module-card-title       { font-size: 14px; font-weight: 700; color: var(--text); }
.module-card-badges      { display: flex; gap: 6px; flex-wrap: wrap; }
.module-card-desc        { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.module-card-meta        { display: flex; align-items: center; gap: 10px; }
.module-card-actions     { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.module-version          { font-family: var(--mono,monospace); font-size: 11px; color: var(--muted); background: rgba(255,255,255,.05); padding: 2px 6px; border-radius: 3px; }
.module-installed-ver    { font-size: 11px; color: var(--muted); opacity: .7; }

.module-badge           { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; letter-spacing: .3px; }
.module-badge--ok       { background: rgba(22,163,74,.15);  color: var(--green); }
.module-badge--warn     { background: rgba(217,119,6,.15);  color: var(--orange); }
.module-badge--gray     { background: rgba(255,255,255,.06); color: var(--muted); }
.module-badge--admin    { background: rgba(255,255,255,.06); color: var(--muted); }
.module-badge--shell    { background: rgba(41,168,224,.08); color: var(--accent); border: 1px solid rgba(41,168,224,.15); }
.module-badge--update   { background: rgba(224,154,58,.1);  color: var(--orange); border: 1px solid rgba(224,154,58,.25); }
.module-card--shell     { border-color: rgba(41,168,224,.15); }


/* ── REPORTS ── */
/* Source: modules/Reports/assets/reports.css */
/* ─── Report Grid ─────────────────────────────────────── */
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.report-card { background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s; }
.report-card:hover { border-color: var(--border); }
.report-card-header { display: flex; justify-content: space-between; align-items: center; }
.client-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-dim); color: var(--accent); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; letter-spacing: .5px; }
.card-actions { display: flex; gap: 4px; }
.report-card-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
.report-url    { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-row     { display: flex; gap: 6px; flex-wrap: wrap; }
.score-chip    { background: var(--bg-deep); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); padding: 6px 10px; display: flex; flex-direction: column; align-items: center; min-width: 54px; gap: 2px; }
.score-chip .score-val { font-size: 15px; font-weight: 900; line-height: 1; }
.score-chip .score-key { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.report-meta   { display: flex; gap: 14px; font-size: 11px; color: var(--muted); align-items: center; flex-wrap: wrap; }
.report-meta span { display: flex; align-items: center; gap: 5px; }
.report-meta i { font-size: 11px; opacity: .7; }
.report-meta .meta-report-date { color: var(--accent); }
.card-btns     { display: flex; gap: 8px; margin-top: 4px; }
.card-btns .btn { flex: 1; justify-content: center; }

/* ─── Client View ─────────────────────────────────────── */
#screen-client { flex-direction: column; }
.client-topbar {
  background: var(--bg-deep); border-bottom: 1px solid var(--border);
  padding: 12px 32px; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 10px;
  position: sticky; top: 0; z-index: 10;
}
.client-brand         { display: flex; align-items: center; gap: 10px; color: var(--accent); }
.client-brand > i     { font-size: 18px; }
.topbar-sep           { color: var(--border); margin: 0 4px; }
.topbar-label         { color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.client-topbar-right  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.client-chip          { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-dim); color: var(--accent); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 4px; }

.client-hero { background: var(--bg-deep); border-bottom: 1px solid var(--border); padding: 48px 48px 40px; position: relative; overflow: hidden; display: flex; justify-content: center; }
.hero-glow   { position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(41,168,224,.1) 0%, transparent 65%); pointer-events: none; }
.hero-inner  { position: relative; z-index: 1; max-width: 900px; width: 100%; }
.hero-badge  { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-dim); color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 4px 14px; border-radius: 4px; margin-bottom: 14px; }
.hero-title  { font-size: 32px; font-weight: 900; color: white; margin-bottom: 8px; line-height: 1.2; }
.hero-url    { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px; margin-bottom: 24px; }

.meta-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: rgba(41,168,224,.04); margin-bottom: 24px; max-width: 740px; }
.meta-item   { padding: 14px 20px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.meta-item:last-child { border-right: none; }
.meta-item:nth-last-child(-n+2) { border-bottom: none; }
.meta-item label { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 5px; font-weight: 700; }
.meta-item span  { font-size: 13px; color: var(--text); font-weight: 400; line-height: 1.5; }

.client-scores       { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.client-score-card   { background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); padding: 14px 18px; display: flex; flex-direction: column; align-items: center; min-width: 80px; gap: 4px; }
.client-score-val    { font-size: 26px; font-weight: 900; line-height: 1; }
.client-score-label  { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; }

.client-note { background: rgba(41,168,224,.06); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 12px 16px; display: flex; gap: 10px; color: var(--muted); font-size: 13px; margin-bottom: 20px; line-height: 1.6; }
.client-note i { margin-top: 2px; flex-shrink: 0; color: var(--accent); }

.client-preparedBy    { display: flex; align-items: center; gap: 14px; background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); padding: 14px 18px; max-width: 520px; }
.preparedBy-avatar    { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-dim); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 16px; flex-shrink: 0; }
.preparedBy-name      { font-weight: 700; color: var(--text); font-size: 14px; }
.preparedBy-role      { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.preparedBy-contacts  { display: flex; gap: 16px; flex-wrap: wrap; }
.preparedBy-contact   { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-size: 12px; text-decoration: none; }
.preparedBy-contact:hover { text-decoration: underline; }

.iframe-wrap   { background: var(--bg-main); }
.iframe-header { display: flex; align-items: center; gap: 10px; padding: 12px 32px; background: var(--bg-card); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
#report-frame  { width: 100%; border: none; display: block; background: white; min-height: 600px; }

.client-footer { background: var(--bg-deep); border-top: 1px solid var(--border); padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--muted); }
.brand-footer  { color: var(--accent); font-weight: 900; letter-spacing: 3px; font-size: 12px; }

@media (max-width: 560px) { .report-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px)  { .client-hero { padding: 28px 20px; } .hero-title { font-size: 22px; } .client-topbar, .iframe-header { padding: 10px 16px; } }
@media print { .client-hero { border-bottom: 1px solid #ddd; } #report-frame { min-height: auto !important; } }


/* ── SIGNATURE ── */
/* Source: modules/Signature/assets/signature.css */
/* ─── Signature Template List ─────────────────────────── */
.sig-template-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sig-template-card { background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: border-color .2s; }
.sig-template-card:hover    { border-color: var(--border); }
.sig-template-card.is-active { border-color: var(--green); }
.sig-template-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-dim); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 16px; flex-shrink: 0; }
.sig-template-icon.active-icon     { background: rgba(58,207,143,.12); border-color: rgba(58,207,143,.3); color: var(--green); }
.sig-template-icon.active-icon--red { background: rgba(255,90,90,.12); border-color: rgba(255,90,90,.3); color: var(--red); }
.sig-template-body { flex: 1; }
.sig-template-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.sig-template-meta { font-size: 12px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }

.active-badge     { display: inline-flex; align-items: center; gap: 4px; background: rgba(58,207,143,.12); color: var(--green); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: .5px; }
.active-badge--red { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; background: rgba(255,90,90,.12); color: var(--red); border: 1px solid rgba(255,90,90,.2); }
.sig-template-actions { display: flex; gap: 4px; }

/* ─── Signature Variables ─────────────────────────────── */
.sig-vars-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sig-var-chip  { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-deep); border: 1px solid var(--border); color: var(--accent); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; letter-spacing: .5px; font-family: monospace; }

/* ─── Signature Generator (publiczny) ────────────────── */
#screen-signature { flex-direction: column; }
.sig-gen-layout   { flex: 1; display: grid; grid-template-columns: 420px 1fr; min-height: calc(100vh - 53px - 47px); }
.sig-gen-left     { background: var(--bg-deep); border-right: 1px solid var(--border); padding: 40px 36px; overflow-y: auto; }
.sig-gen-right    { background: var(--bg-main); padding: 40px 36px; overflow-y: auto; }
.sig-gen-header   { margin-bottom: 28px; }
.sig-gen-title    { font-size: 20px; font-weight: 900; margin: 10px 0 6px; }
.sig-gen-sub      { color: var(--muted); font-size: 13px; line-height: 1.6; }
.sig-gen-fields   { display: flex; flex-direction: column; gap: 0; }

.sig-gen-preview-box     { background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: var(--radius); overflow: hidden; }
.sig-gen-preview-header  { padding: 12px 16px; border-bottom: 1px solid var(--border-dim); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.sig-gen-preview-content { background: white; padding: 24px; min-height: 120px; }

@media (max-width: 900px) { .sig-gen-layout { grid-template-columns: 1fr; } .sig-gen-right { border-top: 1px solid var(--border); } }
@media (max-width: 820px)  { .sig-gen-left, .sig-gen-right { padding: 24px 20px; } }