/* RESET / PODSTAWOWE STYLOWANIE */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f2f2f2; color: #333; } /* LAYOUT GŁÓWNY */ header, nav, main, footer { padding: 10px 20px; margin: 10px auto; max-width: 1200px; background-color: #fff; } /* NAGŁÓWEK */ header { border: 1px solid #ccc; text-align: center; } header h1 { margin: 10px 0; font-size: 2em; color: #444; } /* NAWIGACJA */ nav { border: 1px solid #ccc; margin-top: 0; display: flex; justify-content: center; background: #f9f9f9; } nav a { text-decoration: none; color: #333; margin: 0 10px; font-weight: bold; padding: 8px; transition: background 0.3s; } nav a:hover { background: #e0e0e0; } /* GŁÓWNA SEKCJA */ main { border: 1px solid #ccc; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 20px; } /* KONTENERY W MAIN */ .form-section, .table-section { flex: 1 1 450px; /* minimalna szerokość 450px, a reszta elastycznie */ border: 1px solid #ddd; padding: 15px; background: #fafafa; } .form-section h2, .table-section h2 { margin-bottom: 10px; font-size: 1.2em; border-bottom: 1px solid #ccc; } /* FORMULARZ */ form { display: flex; flex-direction: column; gap: 10px; } form label { display: flex; flex-direction: column; font-weight: bold; } form input[type="date"], form input[type="number"], form input[type="text"], form select { padding: 5px; width: 100%; } form button { align-self: flex-start; padding: 8px 12px; background-color: #4CAF50; color: #fff; border: none; cursor: pointer; transition: background 0.3s; font-size: 1em; } form button:hover { background-color: #45a049; } /* TABELA */ table { width: 100%; border-collapse: collapse; margin-top: 10px; } table th, table td { border: 1px solid #ccc; padding: 8px; text-align: left; } table th { background-color: #eee; } /* STOPKA */ footer { border: 1px solid #ccc; text-align: center; margin-top: 0; font-size: 0.9em; background: #f9f9f9; }