*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;margin:0;background:#0b1020;color:#e9ecf1}
a{color:#8cc8ff;text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1400px;margin:0 auto;padding:24px}
.containermanual{max-width:800px;margin:0 auto;padding:24px;text-align:center;}
.card{background:#121a36;border:1px solid #1d2b57;border-radius:6px;box-shadow:0 2px 40px rgba(0,0,0,.25);padding:24px;margin-bottom:16px}
input,select{width:100%;padding:10px 12px;border-radius:2px;border:1px solid #25396e;background:#0f1730;color:#e9ecf1}
label{display:block;margin:10px 0 6px;color:#a7b1c6}
button{padding:10px 16px;margin-top:5px;border-radius:2px;border:1px solid #d60f0f;background:#d60f0f;color:#fff;cursor:pointer;font-weight:600}
button:hover{background:#7f0909}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.small{font-size:12px;color:#9aa7c0}
.flash{margin:12px 0;padding:10px 14px;border-radius:2px}
.flash.err{background:#3a1220;border:1px solid #7b2039;color:#ffd7e0}
.flash.ok{background:#0f2f22;border:1px solid #1f7a5a;color:#d1ffe9}
table{width:100%;border-collapse:collapse}
td,th{border-bottom:1px solid #1d2b57;padding:8px 6px;text-align:left}
a.nav {color: #fff; background-color: #d60f0f; border: 1px solid #d60f0f; border-radius: 2px; padding: 10px 20px 10px 20px;}
a.nav:hover {background:#7f0909;text-decoration:none}
a.navfoot {color: #fff; background-color: #d60f0f; border: 1px solid #d60f0f; border-radius: 2px; padding: 10px 20px 10px 20px; margin-top: 40px;}
/* Desktop – bez zmian, tylko porządkujemy układ headera */
.header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header .nav {
  display: flex;
  gap: 8px;
}

/* Przycisk menu – domyślnie ukryty na desktopie */
.nav-toggle { display: none; }

/* MOBILE */
@media (max-width: 768px) {
  /* układ headera pionowo */
  .header {
    flex-direction: column;
    align-items: stretch;
  }

  /* pokaż przycisk, schowaj listę */
  .nav-toggle {
    display: block;
    background: #0b1a2e;
    color: #fff;
    border: 1px solid #20324b;
    border-radius: 0px;
    padding: 10px 14px;
    cursor: pointer;
  }

  .header .nav {
    display: none;              /* schowane dopóki nie klikniesz */
    flex-direction: column;     /* linki pod sobą */
    width: 100%;
    gap: 8px;
  }

  /* po otwarciu */
  .header.open .nav {
    display: flex;
  }

  /* przyciski na pełną szerokość */
  .header .nav a.nav, 
  .header .nav a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    border-radius: 0px;
    box-sizing: border-box;
  }

  /* możesz chcieć większy „tap area” w mobile */
  .header .nav a.nav { 
    padding: 14px 18px;
  }
   .card {
    padding: 14px;
    overflow-x: auto;              /* przewijanie w poziomie wewnątrz karty */
    -webkit-overflow-scrolling: touch; /* płynny scroll na iOS */
  }

  .card table {
    width: max-content;            /* nie ściskaj kolumn na siłę */
    min-width: 620px;              /* dostosuj: minimalna szerokość logiczna tabeli */
    border-collapse: collapse;
    font-size: 13px;               /* mniejsza czcionka */
  }

  .card th,
  .card td {
    white-space: nowrap;           /* jedna linia – brak łamania w kolumnach */
    padding: 6px 8px;              /* ciaśniej */
  }

  /* opcjonalnie skróć bardzo długie nazwy plików wizualnie */
  .card td:nth-child(2) {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;       /* „…” gdy za długie */
  }

  /* link jako mniejszy przycisk */
  .card td a {
    display: inline-block;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
  } 
  button {
    padding: 10px 16px;
    margin-top: 10px;
    border-radius: 0px;
    border: 1px solid #d60f0f;
    background: #d60f0f;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
	}
	a {
    color: #fff;
    text-decoration: none;
	}
}